Zawartość
Gorący nowy CSS: szybkie linkiZapytania o funkcje (@supports)
Siatka CSS
Filtry CSS
Zmienne CSS
Powtarzanie tła (okrągłe i spacja)
zapytania o media ze współczynnikiem proporcji
Tryb mieszania
Dopasowanie do obiektu
kształt na zewnątrz
currentColour
Więcej zasad do obejrzenia
Ponieważ internet szybko się rozwijał, prawie wydaje się, że przepraszający CSS został w tyle. Każdego tygodnia coś się dzieje, ale rzadko tam, gdzie ma to znaczenie - interfejs. Internet podąża za niemal wiecznym modelem zbieżności, a następnie różnicowania, a następnie konwergencji w aplikacjach, a teraz przyszła kolej na CSS.
Wraz z pojawieniem się większej liczby ram, pomysłów i standardów złożoność gwałtownie wzrosła, a coraz więcej technologii pomocniczych jest wymyślanych z konieczności. Sytuacja stała się znacznie bardziej skomplikowana dla programistów, ponieważ ludzie oczekują więcej, ale teraz są one powoli włączane do CSS jako formalne standardy. CSS stał się nie do poznania od samego początku w latach 90-tych. Chciałbyś, żeby wszystko było prostsze? Wypróbuj narzędzie do tworzenia witryn.
A co w przyszłości? Możemy teraz prawdopodobnie powiedzieć, że CSS przyszłości zobaczy kolejną dywergencję, gdy pojawią się różne cyfrowe i fizyczne urządzenia i kanały, nawet w zupełnie nowej technologii. Prawdopodobnie możemy się również domyślać, że CSS zapewni bezpośredni dostęp do jeszcze bogatszych interfejsów, a krzywa „S” w zakresie złożoności programowania i funkcji programistycznych będzie zawężona i stroma (pamiętaj, że jeśli tworzysz złożoną witrynę, potrzebujesz hostingu, który może nadążyć i przyzwoicie przechowywać w chmurze, aby zapisywać i udostępniać pliki projektowe).
Ale co teraz? Oto nasze propozycje najnowszych, najlepszych i najbardziej przydatnych aktualizacji CSS. Czytaj dalej, aby dowiedzieć się, jak używać zapytań funkcji, aby sprawdzić, czy funkcja jest obsługiwana, zanim zaczniesz na niej polegać; budować niestandardowe układy w stylu wydruku za pomocą siatki CSS; WYSUSZ swój kod za pomocą zmiennych CSS; przejmij kontrolę nad tłem za pomocą dwóch osób powtarzanie tła opcje (Okrągły i Przestrzeń); zbadać zapytania o media oparte na współczynniku proporcji; tworzyć unikalne wizualizacje za pomocą tryb mieszania; i dostosuj obrazy tak, aby wypełniały pola zawartości Dopasowanie do obiektu; i więcej. Użyj znajdującego się obok pola szybkich łączy, aby przejść do żądanej sekcji.
Zapytania o funkcje (@supports)
Podczas tworzenia komponentów, które używają nowych i potencjalnie nieobsługiwanych funkcji, ważne jest, aby uwzględnić rezerwę. Do niedawna osiągano to za pomocą wykrywania funkcji za pomocą JavaScript z wtyczkami takimi jak Modernizr. Teraz jest to możliwe bezpośrednio w CSS przy użyciu nowej składni @supports (znanej również jako zapytanie o funkcję).
Z dodatkiem @supportsmożemy sprawdzić, czy kod, którego chcemy użyć, jest obsługiwany, czy nie:
@supports (display: flex) {.hagrid {display: flex; }}
Po załadowaniu strony zostanie przeprowadzone sprawdzenie, czy używana przeglądarka obsługuje funkcję flex. Jeśli tak, styl w nawiasach pomocniczych zostanie zastosowany przez przeglądarkę.
Jeśli tak nie jest, zostanie zignorowane - warto mieć opcję awaryjną na wypadek, gdy odpytywana funkcja nie jest obsługiwana.
Najbardziej odpowiedni sposób dołączenia kodu rezerwowego będzie zależał od projektu i tego, co jest zmieniane, ponieważ może się wydarzyć @supports kod przesłaniający domyślny styl. W innych przypadkach może być preferowane włączenie innego @supports sprawdź, czy kod nie jest obsługiwany. Osiąga się to poprzez zanegowanie zapytania o funkcję:
@supports not (display: flex) {.dobby {display: block; }}
Można łączyć wiele sprawdzeń, aby sprawdzić, czy wszystkie wymagane funkcje są obsługiwane w tym samym czasie, aby atomowo zastosować wszystkie reguły stylu lub żadną z nich. Składnia jest bardzo podobna do łączenia zapytań o media, na przykład stosowania stylów na urządzeniach o określonych rozmiarach. Osiąga się to za pomocą operatora „i” i zapytań o wiele funkcji:
@supports (display: flex) i (transform: scaleY (3)) {.fluffy {display: flex; transform: scaleY (3); }}
Zapytanie o kombinację odpowiednika dla i operatorem jest lub operator, który sprawdza, czy którekolwiek z zapytań funkcji pasuje i stosuje styl, jeśli przynajmniej jeden jest obsługiwany:
@supports (display: flex) lub (transform: scaleY (1.5)) {.grawp {display: flex; transform: scaleY (1.5); }}
Coś, co jest przydatne, biorąc pod uwagę, że omówiliśmy już zmienne CSS, jest to z @supports możesz również sprawdzić, czy właściwość niestandardowa jest obsługiwana, czy nie, co można zrobić w następujący sposób:
@supports (--ron: orange) {body {color: var (- ron); }}
W powyższym przykładzie zostanie przeprowadzone sprawdzenie, czy warunek właściwości niestandardowej jest obsługiwany, a gdy jest to treść, zostanie zastosowana czcionka w kolorze pomarańczowym. @supports jest dostępny do użytku we wszystkich przeglądarkach z wyjątkiem IE 11 i starszych, chociaż niektóre wypełnienia są dostępne, jeśli potrzebujesz obsługiwać już Internet Explorer 9.
Ostatnia uwaga: jest to świetny sposób na tworzenie nowych reguł stylizacji, ale jest również równie pomocny w tworzeniu witryn internetowych, które z wdziękiem degradują się. Jeśli użyjesz @supports następnie użyj go, aby sprawdzić, czy przeglądarka nie obsługuje reguł CSS. Może to podwoić obciążenie pracą, ale zapewnia również tworzenie czegoś, co bardziej elegancko obniża skalę przeglądarek.
Siatka CSS
Pojawienie się Flexbox pozwoliło nam spędzić mniej czasu na zanieczyszczaniu naszego kodu jasnymi poprawkami, hackami i obejściami oraz skupić się bardziej na pisaniu zwięzłych CSS i HTML. Chociaż Flexbox jest niezbędny dla każdego zestawu narzędzi programisty UI, najlepiej nadaje się do pracy w jednym kierunku na raz. Zwykle to wystarcza, ponieważ zwykle jesteśmy ograniczeni tylko do jednej osi na raz (na przykład szerokość strony jest ograniczona, ale nie wysokość).
Jednak w przypadkach, w których jesteśmy ograniczone w obu wymiarach, powiedzmy w aplikacji w stylu dashboardu, wtedy Siatka CSS jest zdecydowanie jedną z tych, które mają się wyróżnić. Rozpoczynanie od siatki może początkowo zniechęcać, ale gdy już opanujesz składnię, będzie płynnie. Powiedzmy, że mamy następującą strukturę HTML:
div> div> Gryffindor / div> div> Slytherin / div> div> Ravenclaw / div> div> Hufflepuff / div> / div>
Możemy zdefiniować siatkę, ustawić wymiary, a następnie zdefiniować nazwane obszary dla naszych komórek siatki:
.container {display: grid; szerokość: 100 vw; wysokość: 100 vh; } .container> div {border: 2px solid # 000; } .gryffindor {obszar-siatki: gryffindor; kolor tła: # C91018; } .slytherin {obszar-siatki: slytherin; background-color: # 26A147; } .ravenclaw {obszar siatki: ravenclaw; kolor tła: # 005782; } .hufflepuff {obszar-siatki: hufflepuff; background-color: # FFD63C; }
Wreszcie na .pojemnik możemy skorzystać z grid-template-area właściwość, aby określić, jak ma wyglądać siatka:
.container {display: grid; szerokość: 100 vw; wysokość: 100 vh; grid-template-area: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"}
Dodatkowo istnieje cały szereg dodatkowych właściwości, które pozwalają dostroić prezentację siatki. Żeby wymienić tylko kilka:
siatka-kolumna-przerwa: rozmiar>; Rynna między kolumnami
grid-row-gap: size>; Rynna między rzędami
grid-template-columns: size>; Szerokość kolumn, odstępy oddzielone dla wielu
grid-template-rows: size>; Szerokość wiersza, odstępy oddzielone dla wielu
align-items: center | koniec | start>; Wyrównaj w pionie zawartość każdej komórki siatki
align-items: stretch>; Całkowicie wypełnij komórkę w pionie
justify-items: center | koniec | start | stretch>; Jak wyżej, wzdłuż osi poziomej
elementy-miejsca: align-items> / justify-items>; Notacja skrócona, łączenie align-items i justify-items
W praktyce moglibyśmy więc zaktualizować naszą poprzednią siatkę:
.container {display: grid; szerokość: 100 vw; wysokość: 100 vh; obszary szablonu siatki: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"; grid-column-gap: 10px; grid-row-gap: 15px; grid-template-columns: 200px auto auto 200px; align-items: stretch; justify-items: stretch; }
To wszystko ledwie zarysowuje powierzchnię możliwości siatki CSS - można zrobić o wiele więcej. Obecnie jest to obsługiwane we wszystkich nowoczesnych przeglądarkach, z wyjątkiem IE11, podczas gdy obsługuje starszą składnię.
Ale czekaj, jest więcej! Korzystając z siatki CSS, w końcu jesteśmy w stanie bez stresu centralnie wyrównywać zawartość:
.container {display: grid; wysokość: 100 vh; elementy miejsca: środek centrum; }
Następna strona: filtry CSS i zmienne CSS
