👈 Powrót do bloga

Nowości w CSS na horyzoncie 🔭

CSS nie zwalnia tempa w ostatnim czasie. Jakich zatem nowości możemy spodziewać się w 2022 roku?

  • web

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ą JavaScriptu.

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
.hamburger-button {  /* some styles */}
@media (min-width: 1200px) {  .hamburger-button {    display: none;  }}

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
.wrapper {  container-type: size;}
.child {  background-color: grey;}
@container (min-width: 400px) {  .child {    background-color: blue;  }}

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
form {  accent-color: #ff0000;
  /* works excellent with custom properties */  accent-color: var(--accentColor);}

❌ 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
// Set init min height for stylesdocument.documentElement.style.setProperty('--deviceInnerHeight', `${window.innerHeight}px`)
// After resize browser windowwindow.addEventListener('resize', () => {  // Update min height for styles  document.documentElement.style.setProperty('--deviceInnerHeight', `${window.innerHeight}px`)})
css
.page-wrapper {  min-hight: var(--deviceInnerHeight, 100vh);}

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
.page-wrapper {  height: 100vh; /* fallback */  height: 100svh;}

'Przykładowy gif' ź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
.box {  /* some styles */}
.box:has(p) {  background-color: blue;}

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

loxosoft 🐘 2022