Nowa Era Przeglądarek? 🌍
Gwałtowny wzrost tempa wdrażania nowych funkcjonalności przez Apple w Safari, zamiana własnego silnika przez MS Edge na rzecz silnika Blink oraz już chyba ostateczne porzucenie przez developerów wsparcia dla Internet Explorera, pozwala nam nieśmiało spoglądać w swego rodzaju "Nową Erę Internetu". Erę dynamicznego rozwoju, a co za tym idzie pełną nowości dla developerów, w tym również nowości w języku CSS. Oto kilka z nich, z którymi moim zdaniem warto się zapoznać na początku 2022 roku.
CSS Subgrid 💪
Feature do tej pory występujący jedynie w przeglądarce Firefox, został ostatnio dodany również do Safari Technology Preview (Release 142). Może to sugerować, że pojawienie się go w przeglądarkach Chrome / Edge, a co za tym idzie możliwość implementowania go w nowych projektach, jest już naprawdę całkiem, całkiem blisko.
Subgrid w jednym zdaniu można podsumować jako: "CSS Grid Layout na sterydach".
Dzięki właściwości grid-template-rows: subgrid;
dziecko elementu, który ma ustawiony display: gird;
może korzystać z siatki swojego rodzica, co pozwala na układanie zagnieżdżonych elementów na wspólnej siatce oraz wspólny gap
.
Praktycznym przykładem zastosowania może być np. ustawienie równej wysokości elementów z dynamicznym tekstem dla wszystkich dzieci, w jednym wierszu, bez konieczności korzystania z obejść takich jak użycie właściwości min-height
albo obliczenie wysokości za pomocą JavaScript-u.
Title
Short title 2
Very, very, very and very, very, very, very looooooong title
Short title 3
Consistent height...
...in every row. 😌
❌ Twoje przeglądarka nie wspiera jeszcze tej funkcjonalności!
ℹ️ Sprawdź wsparcie: caniuse.com/css-subgrid
CSS Container Queries 🗜
Klasyczne media queries w CSS odnoszą się do właściwości okna. Możemy reagować np. na jego szerokość lub wysokość i na podstawie określonych wartości definiować nasze style, dopasowane do różnego rodzaju urządzeń (RWD).
css
1.hamburger-button {2 /* some styles */3}45@media (min-width: 1200px) {6 .hamburger-button {7 display: none;8 }9}
Jednak bardzo często ten globalny kontekst osadzenia elementu nie był wystarczający. Zwłaszcza obecnie, w dobie komponentów, gdzie potencjalne miejsce występowania danego komponentu nie zawsze jest z góry dokładnie znane, a powinien on reagować i dostosowywać swój wygląd, w zależności od tego, w jakim kontenerze się znajduje. Dlatego według mnie tzn. "Container Queries" mogą okazać się prawdziwą rewolucją w tworzeniu elastycznych layoutów, zwłaszcza patrząc pod kątem coraz popularniejszego podejścia CDD.
css
1.wrapper {2 container-type: size;3}45.child {6 background-color: grey;7}89@container (min-width: 400px) {10 .child {11 background-color: blue;12 }13}
Dzięki powyższym stylom, gdy element .wrapper
będzie miał 400px szerokości lub więcej to .child
zmieni swój kolor tła z szarego na niebieski. Jest to przykład, może nieco akademicki, ale dużo bardziej pragmatyczna może być np. zamiana właściwości flex-direction
z wartości column
na row
, w zależności od dostępnej przestrzeni w ramach kontenera, a nie wyłącznie całego okna przeglądarki.
Przykład:
❌ Twoje przeglądarka nie wspiera jeszcze tej funkcjonalności!
ℹ️ Sprawdź wsparcie: caniuse.com/css-container-queries
Właściwość accent-color 👨🎨
Stylowanie pól formularza zawsze było problematyczne, wymagało sporo wysiłku, kombinowania i stosowania różnego rodzaju trików. Dzięki właściwości accent-color
w prosty sposób można ustawić kolor akcentu, który będzie wpływał na wygląd kontrolek, zmieniając ich domyślny (narzucany przez przeglądarkę) kolor akcentu na kolor zgodny z design systemem.
css
1form {2 accent-color: #ff0000;34 /* works excellent with custom properties */5 accent-color: var(--accentColor);6}
❌ Twoje przeglądarka nie wspiera jeszcze tej funkcjonalności!
ℹ️ Sprawdź wsparcie: caniuse.com/mdn-css_properties_accent-color
Oczywiście w przypadku bardziej customowych rozwiązań, custom-color
nie rozwiązuje wszystkich problemów (np. brak spójności kształtu / wielkości kontrolek w różnych przeglądarkach). Uważam, że mimo wszystko w niektórych sytuacjach takie rozwiązanie "na szybko" i tak może być bardzo przydatne.
Jednostki: svh, dvh oraz svh 📏
Widok mający 100% wysokości ekranu na urządzeniu mobilnym wydaje się czymś, co w obecnych czasach powinno być możliwe do załatwienia jedną linijką kodu CSS... Każdy frontend developer, który wielokrotnie męczył się z natrętnym scrollem w takich przypadkach pomyśli sobie pewnie: "Taaa... fajny by było 😒".
Ze względu na różną interpretację pełnej wysokości ekranu i różne zachowanie przeglądarek (a dokładnie toolbarów) na urządzeniach nie było to takie proste do zrobienia i zazwyczaj ostatecznie sprowadzało się do konieczności użycia kodu JavaScript. Przykładowa implementacja z wykorzystaniem JS oraz CSS custom properties.
js
1// Set init min height for styles2 document.documentElement.style.setProperty('--deviceInnerHeight', `${window.innerHeight}px`)34 // After resize browser window5 window.addEventListener('resize', () => {6 // Update min height for styles7 document.documentElement.style.setProperty('--deviceInnerHeight', `${window.innerHeight}px`)8 })
css
1.page-wrapper {2 min-hight: var(--deviceInnerHeight, 100vh);3}
Już niedługo! 😎 Dzięki nowym jednostkom: large (lvh
), small (svh
) oraz dynamic (dvh
) viewport units, problem ten można rozwiązać w bardzo prosty sposób, bez potrzeby korzystania z JSa:
css
1.page-wrapper {2 height: 100vh; /* fallback */3 height: 100svh;4}
❌ Twoje przeglądarka nie wspiera jeszcze tej funkcjonalności!
ℹ️ Sprawdź wsparcie: caniuse.com/viewport-unit-variants
Pseudoklasa :has() 👨👩👧
Selektor, o którym wielu developerów marzyło. Dlaczego? Ponieważ selektor :has()
pozwala z poziomu dziecka odnieść się do przodka i to nie tylko do rodzica.
Rodzi to ogromną liczbę możliwości i ułatwień. Przykładów można wprost mnożyć na pęczki:
- sekcja
<section>
która posiada wewnątrz nagłówek np.<h2>
, - element
<figure>
, który posiada wewnątrz podpis (<figcaption>
), - element z klasą
.box
, który posiada wewnątrz paragraf tekstu<p>
.
css
1.box {2 /* some styles */3}45.box:has(p) {6 background-color: blue;7}
Lorem ipsum dolor...
Lorem ipsum dolor...
❌ Twoje przeglądarka nie wspiera jeszcze tej funkcjonalności!
ℹ️ Sprawdź wsparcie: caniuse.com/css-has
Podsumowanie 📋
Nowe narzędzia w zasobniku każdego developera to potencjalne nowe możliwości. Nowe funkcjonalności w języku CSS to nowe możliwości budowania ciekawszych, bardziej zoptymalizowanych i łatwiejszych w utrzymaniu interfejsów użytkownika na potrzeby stron i aplikacji webowych.
Dynamika zmian, które są na horyzoncie, obrazuje nam również swego rodzaju wyścig technologiczny podejmowany w ostatnim czasie, przy jednoczesnym zacieśnieniu współpracy twórców przeglądarek i... czyżby zmianę trendu, jeśli chodzi o pionierstwo we wdrażaniu nowości? Wszystko na bieżąco możecie śledzić za pomocą rankingu inicjatywy Interop 2022, z którą gorąco zachęcam się zapoznać.