Nowości w CSS na horyzoncie 🔭

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}
4
5@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}
4
5.child {
6  background-color: grey;
7}
8
9@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;
3
4  /* 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 styles
2  document.documentElement.style.setProperty('--deviceInnerHeight', `${window.innerHeight}px`)
3
4  // After resize browser window
5  window.addEventListener('resize', () => {
6    // Update min height for styles
7    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}

źródło: webkit.org

❌ 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}
4
5.box:has(p) {
6  background-color: blue;
7}

❌ 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ć.