CSS, z którego możesz się ekscytować w 2015 roku
CSS to stale rozwijający się język, a wraz z rozpoczęciem nowego roku warto przyjrzeć się niektórym nowym funkcjom, z którymi możemy zacząć eksperymentować.
W tym artykule przyjrzymy się nowszym modułom i poszczególnym funkcjom CSS, które zyskują wsparcie dla przeglądarki. Nie wszystkie z nich są funkcjami, które można natychmiast wykorzystać w produkcji, a niektóre są dostępne tylko za flagami eksperymentalnymi. Jednak znajdziesz tu wiele rzeczy, z którymi możesz zacząć się bawić - nawet jeśli jest to tylko etap tworzenia prototypów.
Selektory CSS poziomu 4
Specyfikacja selektorów poziomu 3 jest dobrze zaimplementowana w przeglądarkach i oferuje przydatne selektory, takie jak n-dziecko. Selektory poziomu 4 daje nam jeszcze więcej możliwości kierowania treści za pomocą CSS.
Pseudo-klasa negacji: nie
Negatywny selektor pseudoklasii : nie pojawia się na poziomie 3, ale dostaje upgrade na poziomie 4. Na poziomie 3 możesz przekazać selektor, aby powiedzieć, że nie chcesz, aby CSS zastosowany do tego elementu. Aby utworzyć cały tekst oprócz tekstu z klasą pogrubioną, można użyć następującej reguły.
p:not(.intro) { font-weight: normal; }Na poziomie 4 specyfikacji można podać listę selektorów oddzielonych przecinkami.
p:not(.intro, blockquote) { font-weight: normal; }Relacyjna pseudoklasa: ma
Ta pseudoklasa przyjmuje jako argument listę wyboru i pasuje, jeśli którykolwiek z tych selektorów pasowałby do jednego elementu. Najprościej jest zobaczyć na przykładzie, w tym przykładzie każdy element zawierający obraz będzie miał nałożoną czarną obwódkę:
a:has( > img ) { border: 1px solid #000; }W tym drugim przykładzie łączę : has with : not i wybiera tylko elementy li , które nie zawierają elementu paragraph:
li:not(:has(p)) { padding-bottom: 1em; }Dopasowania - każda pseudo-klasa: dopasowania
Ta pseudoklasa oznacza, że możemy zastosować reguły do grup selektorów, na przykład:
p:matches(.alert, .error, .warn) { color: red; }Aby przetestować przeglądarkę pod kątem obsługi tych i innych zaawansowanych selektorów, możesz skorzystać z testu css4-selectors.com. Ta strona jest również świetnym źródłem informacji, aby dowiedzieć się więcej o nadchodzących selektorach.
Tryby mieszania CSS
Jeśli znasz Blend Modes w Photoshopie, to możesz być zainteresowany Komponowanie i łączenie specyfikacji. Ta specyfikacja pozwoli nam zastosować tryby mieszania dla tła i dowolnych elementów HTML bezpośrednio w przeglądarce.
W poniższym CSS mam pudełko zawierające obraz tła. Dodając kolor tła, a następnie ustawiając tryb mieszania tła na odcień i mnożenie, mogę zastosować ciekawe efekty do obrazów.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Korzystanie z trybu mieszania w tle
Właściwość mieszania-trybu umożliwia mieszanie tekstu na górze obrazu. W poniższym przykładzie mam h1, a następnie .box2 ustawiłem na mix-blend-mode: screen.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Korzystanie z trybu mieszania-mieszania
Tryby mieszania CSS faktycznie mają zaskakująco dobre wsparcie w nowoczesnych przeglądarkach innych niż Internet Explorer, zobacz macierz wsparcia dla tryb mieszania tła Tryb mix-blend jest dostępny w Safari i Firefox, a za flagą funkcji eksperymentalnych w Operze i Chrome. Przy ostrożnym użyciu jest to dokładnie ten rodzaj specyfikacji, od którego możesz zacząć grać, aby ulepszyć swoje projekty, o ile nie jest to nieczytelne w nieobsługujących przeglądarkach.
Jeśli potrzebujesz pełniejszej obsługi starszych przeglądarek i nie chcesz, aby tryby mieszania były jeszcze używane w produkcji, nie zapomnij, że możesz ich użyć podczas programowania, aby uniknąć wycieczek przez Photoshop. Po sfinalizowaniu obrazów i zabiegów utwórz obrazy produkcyjne w programie graficznym, zastępując efekty CSS.
Dowiedz się więcej o używaniu trybów mieszania z ten praktyczny artykuł o Sztuce CSS , w zasoby na stronie Adobe i na Strona Dev Opera.
Funkcja calc ()
Funkcja calc () jest częścią CSS Wartości i jednostki moduł poziom 3. Oznacza to, że możesz wykonywać funkcje matematyczne bezpośrednio w swoim CSS.
Proste użycie funkcji calc () można znaleźć, jeśli chcesz umieścić obraz tła z prawego dolnego rogu elementu. Umieszczenie elementu o wielkości 30 pikseli od lewego górnego rogu jest proste:
.box {background-image: url(check.png);background-position: 30px 30px;}Jednak nie możesz tego zrobić z prawego dolnego rogu, gdy nie znasz wymiarów kontenera. Funkcje calc () oznaczają, że możesz odliczyć nasze 30 pikseli od 100% szerokości lub wysokości:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Obsługa przeglądarki dla calc () jest jednak dobra w nowoczesnych przeglądarkach Mogę uzyć informuje, że użycie go jako wartości pozycji tła w IE9 powoduje awarię przeglądarki.
Funkcja CSS Trickery i funkcja Calc to fajny artykuł o używaniu Calc () do rozwiązania problemu CSS. Istnieje kilka prostych przypadków użycia w CSS Tricks.
Zmienne CSS
Potężną cechą pre-procesorów CSS, takich jak Sass, jest możliwość używania zmiennych w naszym CSS. Na bardzo prostym poziomie możemy zaoszczędzić wiele czasu, deklarując kolory i czcionki używane w naszym projekcie, a następnie używając zmiennej przy korzystaniu z określonego koloru lub czcionki. Jeśli zdecydujemy się zmienić czcionkę lub paletę kolorów, wystarczy zmienić te wartości w jednym miejscu.
Zmienne CSS, opisane w Właściwości niestandardowe CSS dla poziomu kaskadowego modułu poziomu 1, przenosi tę funkcjonalność do CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Niestety obsługa przeglądarki dla Zmienne CSS jest obecnie ograniczone do Firefoksa.
Możesz zobaczyć więcej przykładów i dowiedzieć się więcej ten artykuł na temat Mozilla Developer Network.
Wyjątki CSS
Wszyscy znamy pływaki w CSS. Najprostszym przykładem może być przeniesienie obrazu, aby umożliwić przepływ tekstu wokół niego. Jednak liczba elementów pływających jest dość ograniczona, ponieważ element pływający zawsze podnosi się do góry, więc podczas gdy możemy unosić obraz w lewo i zawijać tekst w prawo i pod nim, nie ma możliwości upuszczenia obrazu na środek dokumentu i tekstu przepływu. dookoła lub ułóż go na dole i pozwól, aby tekst przepływał z góry iz boku.
Wyłączenia pozwala owijać tekst wokół wszystkich stron umieszczonego obiektu. Nie definiuje ona nowej metody pozycjonowania, więc może być używana w połączeniu z innymi metodami. W poniższym przykładzie ustawiam absolutnie element na wierzchu bloku tekstu, a następnie deklaruję go jako wykluczenie z oblewaniem właściwości z wartością obu, więc tekst respektuje pozycję elementu i przepływa przez niego to.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Wyłączenia w Internet Explorerze
Obsługa przeglądarek pod kątem wykluczeń i wrap-flow: oba są obecnie ograniczone do IE10 +, wymagając prefiksu -ms. Zauważ, że wykluczenia były do niedawna związane ze specyfikacją CSS Shapes, na którą patrzę w następnej kolejności, więc niektóre informacje online łączą te dwa.
Kształty CSS
Specyfikacja wyjątków dotyczy zawijania tekstu wokół prostokątnych obiektów. Kształty zapewniają nam znacznie większą zdolność do zawijania tekstu wokół nieprostokątnych obiektów, takich jak płynny tekst wokół krzywej.
Poziom 1 specyfikacji CSS Shapes definiuje nowy kształt właściwości -na zewnątrz. Ta właściwość może być używana na pływającym elemencie. W poniższym przykładzie używam kształtu zewnętrznego, aby wygiąć tekst wokół pływającego obrazu.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
CSS Shapes pozwala nam krzywa tekst wokół obrazu ballona
Obsługa przeglądarki dla Poziomów Kształtu 1 zawiera Chrome i Safari, co oznacza, że możesz zacząć używać go w arkuszach stylów na urządzenia z iOS. Poziom 2 specyfikacji pozwoli ci kształtować tekst wewnątrz elementów za pomocą właściwości shape-inside , dzięki czemu możesz korzystać z tej funkcji.
Przeczytaj więcej o kształtach w tym artykule A List Apart by Sara Soueidan , i towarzyszące zasoby.
Układ siatki CSS
Opuściłem mój ulubiony aż do ostatniego. Byłem wielkim fanem wyłaniającej się specyfikacji Grid Layout od czasu wczesnej implementacji w Internet Explorerze. CSS Grid Layout daje nam sposób na tworzenie prawidłowych struktur siatki za pomocą CSS i umieszczanie naszego projektu na tej siatce.
Układ siatki daje nam metodę tworzenia struktur, które nie różnią się od używania tabel do układu. Jednak będąc opisanym w CSS, a nie w HTML, pozwalają nam tworzyć układy, które można redefiniować za pomocą zapytań o media i dostosowywać do różnych kontekstów. Pozwala nam właściwie oddzielić kolejność elementów w źródle od ich wizualnej prezentacji. Jako projektant oznacza to, że możesz dowolnie zmieniać położenie elementów strony, co jest najlepsze dla twojego układu w różnych punktach przerwania i nie musisz tracić czasu na sensownie ustrukturyzowany dokument dla swojego responsywnego projektu. W przeciwieństwie do układu opartego na tabeli HTML, możesz umieszczać elementy na siatce. Tak więc jeden element może nałożyć się na inny, jeśli jest to wymagane.
W poniższym przykładzie deklarujemy siatkę na elemencie z klasą .wrapper. Ma trzy kolumny o szerokości 100 pikseli z rynnami 10 px i trzema rzędami. Ustawiamy pola wewnątrz siatki, używając numerów linii przed i po, powyżej i poniżej obszaru, w którym chcemy, aby element był wyświetlany.
Grid Example ABCDEF
Przykład siatki w Chrome
Obsługa przeglądarki najnowsza specyfikacja sieci jest ograniczona do Chrome z włączoną flagą "eksperymentalne funkcje platformy internetowej". Istnieje solidna implementacja początkowej wersji specyfikacji w programie Internet Explorer 10 i nowszych wersjach.
Dowiedz się więcej o Grid Layout na moim Siatka według przykładu witryna, w której można zobaczyć kilka przykładów Grid działających w przeglądarce Chrome z włączonymi eksperymentalnymi funkcjami platformy internetowej. W zeszłym roku rozmawiałem również w CSS Conf EU on Grid i widzisz ten film tutaj.
Czy masz ulubioną, pojawiającą się specyfikację, o której tutaj nie wspomniano?
Mam nadzieję, że podobała Ci się ta krótka wycieczka po ciekawych, nowszych funkcjach CSS. Skorzystaj z połączonych zasobów, aby dowiedzieć się więcej o funkcjach, które najbardziej Cię interesują. Daj mi znać w komentarzach, jeśli masz ulubioną nadchodzącą funkcję CSS, o której Twoim zdaniem ludzie powinni wiedzieć, lub dodatkowe wspaniałe zasoby i przykłady dla dowolnej z opisanych przeze mnie funkcji.