Container Queries

Czym są Container Queries?

Jak spytacie dewelopera jakie pierwsze skojarzenia przychodzą mu na myśl jeśli zapytacie go o responsywność na stronie to pierwszą odpowiedzią będzie zapewne, że “ma się ładnie składać”. Drugą będzie flex i wszystkie powiązane z nim rzeczy. A trzecią prawdopodobnie media queries. A co byście powiedzieli na ten ostatni punkt w innej, a prawdopodobnie nawet w lepszej wersji? Zapraszam do lektury o container queries – czyli media queries w nowej odsłonie, która może zmienić podejście do responsywności.

Do tej pory tworząc nowoczesną, responsywną stronę korzystaliśmy z media queries stosując tzw. podejście “mobile first”, gdzie skalowanie i to, jak odpowiednie elementy na stronie się układają, było zależne od szerokości okna przeglądarki (viewport). Container queries natomiast zmieniają to podejście. W ich wypadku responsywność strony opiera się o kontener w którym znajdują się dane elementy strony. Dzięki czemu powinno być lepiej, bardziej intuicyjnie i przede wszystkim łatwiej tworzyć nowoczesną i responsywną stronę. A responsywność to coś, co tygryski (a przede wszystkim klienci oraz użytkownik końcowy 😉) lubią najbardziej.

.card {
    container-name: card-container;
    container-type: inline-size;
}

.card-content {
    display: flex;
    flex-direction: column;
}

@container card-container (width > 100ch) {
    .card-content {
        flex-direction: row;
    }
}

Spójrzmy na powyższy kod. Pokazuje on najprostszy przykład użycia container queries. Działa to w ten sposób, że klasa card zostaje zarejestrowana jako kontener o nazwie card-container, gdzie następnie tworzymy warunki dla naszego kontenera określające co ma się zmienić w momencie, gdy zostanie spełniony nasz warunek. W tym wypadku, jeśli szerokość kontenera jest większa niż 100ch to w klasie card-container ustaw style, które nas interesują. Proste, czyste i przewidywalne dla dewelopera.

.card {
    container-name: card-container;
    container-type: inline-size;

    /* Wersja skrócona */
    container: card-container / inline-size;
}

W tym przykładzie skupimy się na rejestrowaniu konkretnego elementu jako kontener. Przedstawione są tutaj dwa warianty. Pierwszy, składa się z dwóch atrybutów container-name oraz container-type. Drugi, to skrócony atrybut container w którym przekazujemy w jednej linii obie interesujące nas wartości. Z racji na skłonność do ułatwiania sobie życia to prawdopodobnie większość deweloperów wybierze drugą opcję.

container-name – jest to właściwość pozwalająca nam na zarejestrowanie konkretnego elementu jako kontener pod wskazaną przez nas nazwą. Nie musimy jej podawać, ponieważ jest to wartość opcjonalna. A co za tym idzie będzie reagowała na wszystkie container queries, które również nie mają wskazanej nazwy kontenera.

container-type – domyślną wartością jest normal. W tym wypadku jest to tzw. style-container. Działa on dokładnie tak samo, z tą różnicą, że warunek zostanie spełniony jeśli nasz kontener będzie miał określony styl, na przykład czerwony kolor tła. Kolejnymi wartościami są inline-size odpowiadające za szerokość kontenera. Oraz size odpowiadająca za jego wysokość oraz szerokość.

container – jest to jednolinijkowa opcja ustawienia container-name oraz container-type w ramach jednej właściwości.

Dodatkowo wraz z kontenerami otrzymujemy też nowe jednostki do wykorzystania:

cqw – 1% szerokości kontenera

cqh – 1% wysokości kontenera

cqi – 1% wielkości kontenera inline

cgb – 1% wielkości kontenera block

cqmin – minimalna wielkość kontenera; cqi lub cqb – w zależności od tego, która wartość jest mniejsza

cqmax – maksymalna wielkość kontenera; cqi lub cqb – w zależności od tego, która wartość jest większa

A co jeśli na naszej stronie chcielibyśmy mieć jasny i ciemny motyw? Co jest obecnie bardzo popularne, a czasem wręcz must-have w najnowocześniejszych aplikacjach webowych. Czy nie fajnie byłoby mieć na przykład możliwość zmiany koloru czcionki zależnie od koloru tła naszego kontenera? Brzmi jak coś, co mogłoby bardzo ułatwić życie przy tworzeniu motywów. Tutaj wchodzą całe na biało (choć niestety nie do końca *¹) style queries!

Jest to kolejny element w całej układance dotyczącej kontenerów. Pozwala on nam się “zaczepić” o konkretne style, a następnie spełnić określony przez nas warunek i dokonać zmian w pożądanych elementach na naszej stronie. Można to określić mianem warunkowego stylowania.

card-wrapper {
    –bg-color: green;
    background-color: var(–bg-color);
}

.card {
    color: yellow;
}

.card {
    @container style(–bg-color: red) {
        color: blue;
    }
}

Pierwsze co nam się rzuca w oczy w powyższym przykładzie to brak konieczności definiowania nazwy kontenera czy nawet jego typu – idealne dla wygodnickich. To dlatego, że nazwa jest opcjonalna, a typ posiada domyślną wartość normal. Oczywiście jak będziemy mieli potrzebę zarejestrowania style query containera to możemy to zrobić – bo na przykład chcemy wskazać konkretny kontener. Jednak, domyślnie wszystkie kontenery są style containerami.

W powyższym przykładzie tworzymy zmienną –bg-color oraz style query container, który oparty jest o jej wartość. Jeśli kolor naszej zmiennej jest zielony to czcionka jest koloru żółtego, natomiast jeśli zmienimy wartość zmiennej na kolor czerwony to czcionka będzie niebieska. Proste? Proste. A przy okazji bardzo przydatne w kontekście tworzenia własnych motywów na stronie!

Na koniec jeszcze krótki przykład jak można zagnieżdżać style queries.

body {
    –bg-color: white;
    –text: black;
    –someCondition: true;
    –theme: dark;
}

.card {
    background-color: var(–bg-color);
    color: var(–text);
}

@container style(–someCondition: true) {
    .card {
        display: flex;
    }

    @container style(–theme: dark) {
        .card {
            –bg-color: black;
            –text: white;
        }
    }
}

Podsumowując, container queries proponują nam inne podejście do responsywności strony. Jest on bardziej intuicyjny, przejrzysty, a przede wszystkim przewidywalny i już na pierwszy rzut oka łatwiej się czyta i rozumie kod odpowiadający za style naszej strony. Zachowuje się przy tym składnię łudząco podobną do media queries, dzięki czemu przesiadka powinna pójść bez większych problemów.

*¹ Trzeba nadmienić, że style queries na razie są w fazie eksperymentalnej na współczesnych przeglądarkach i działają tylko z customowymi wartościami tj. zmienne.