Przez lata responsywno\u015b\u0107 stron opiera\u0142a si\u0119 g\u0142\u00f3wnie na media queries \u2013 dostosowywali\u015bmy layout do szeroko\u015bci viewportu. Dzia\u0142a\u0142o to dobrze, p\u00f3ki komponenty by\u0142y proste, ale w dzisiejszych, modu\u0142owych aplikacjach webowych cz\u0119sto okazuje si\u0119 niewystarczaj\u0105ce. Wyobra\u017a sobie kart\u0119 produktu, kt\u00f3ra ma dzia\u0142a\u0107 zar\u00f3wno w sidebarze (w\u0105ski kontekst), jak i w g\u0142\u00f3wnej tre\u015bci (szeroki kontekst). Z media queries musisz tworzy\u0107 osobne klasy lub kombinatory, co prowadzi do duplikacji kodu i frustracji. Container queries obiecuj\u0105 rozwi\u0105za\u0107 ten problem \u2013 pozwalaj\u0105 stylowa\u0107 elementy w zale\u017cno\u015bci od rozmiaru rodzica, a nie ca\u0142ego okna. W tym artykule przygl\u0105dam si\u0119, czy faktycznie s\u0105 prze\u0142omem, a je\u015bli tak \u2013 jak z nich korzysta\u0107 bez przepalania bud\u017cetu.<\/p>\n
Media queries sprawdzaj\u0105 si\u0119, gdy ca\u0142a strona ma jeden uk\u0142ad \u2013 np. na desktopie trzy kolumny, na tablecie dwie, a na telefonie jedna. Jednak w \u015bwiecie komponent\u00f3w wielokrotnego u\u017cytku (np. w React, Vue, czy nawet w czystym CSS komponenty) cz\u0119sto chcemy, aby ten sam komponent wygl\u0105da\u0142 inaczej w r\u00f3\u017cnych kontekstach. Klasyczny przyk\u0142ad: lista produkt\u00f3w w widoku siatki vs. lista w w\u0105skim panelu bocznym. Z media queries musisz zna\u0107 szeroko\u015b\u0107 viewportu i dedykowane klasy, co jest trudne do skalowania. Container queries umo\u017cliwiaj\u0105 zapytanie o rozmiar kontenera, niezale\u017cnie od tego, gdzie si\u0119 znajduje \u2013 to czysta deklaratywno\u015b\u0107.<\/p>\n
Zanim zaczniesz, musisz zdefiniowa\u0107 kontener za pomoc\u0105 w\u0142a\u015bciwo\u015bci Co wa\u017cne, container queries mog\u0105 odwo\u0142ywa\u0107 si\u0119 do r\u00f3\u017cnych wymiar\u00f3w: W codziennej pracy w JurskiTech spotykam trzy scenariusze, w kt\u00f3rych container queries realnie skracaj\u0105 czas developmentu i poprawiaj\u0105 UX.<\/p>\n 1. Dashboardy i wid\u017cety<\/strong> \u2013 w systemach SaaS cz\u0119sto mamy wid\u017cety, kt\u00f3re mo\u017cna przeci\u0105ga\u0107 i uk\u0142ada\u0107 w dowolnych konfiguracjach. Z container queries ka\u017cdy wid\u017cet sam dostosowuje sw\u00f3j wygl\u0105d do zajmowanego miejsca, bez konieczno\u015bci pisania skomplikowanych skrypt\u00f3w. Przyk\u0142ad: klient M\u015aP z bran\u017cy logistycznej u\u017cywa dashboardu, gdzie mened\u017cerowie mog\u0105 dowolnie rozmieszcza\u0107 wykresy. Dzi\u0119ki container queries kod sta\u0142 si\u0119 o 40% kr\u00f3tszy, a UX znacznie p\u0142ynniejszy.<\/p>\n 2. E-commerce \u2013 karty produkt\u00f3w<\/strong> \u2013 w sklepach internetowych karty produkt\u00f3w pojawiaj\u0105 si\u0119 w r\u00f3\u017cnych kontekstach: w wynikach wyszukiwania, w kategoriach, w polecanych obok siebie. Z container queries nie musisz pisa\u0107 oddzielnych styli dla ka\u017cdej listy \u2013 wystarczy jedna definicja, kt\u00f3ra reaguje na rozmiar kontenera. U jednego z naszych klient\u00f3w (sklep odzie\u017cowy) skr\u00f3ci\u0142o to czas dodawania nowych widok\u00f3w o 30%.<\/p>\n 3. CMS i edytory blokowe<\/strong> \u2013 w headless CMS cz\u0119sto edytujesz tre\u015bci w blokach, kt\u00f3re mog\u0105 mie\u0107 r\u00f3\u017cn\u0105 szeroko\u015b\u0107 (np. w\u0105ski sidebar vs. pe\u0142na szeroko\u015b\u0107). Container queries pozwalaj\u0105, aby blok automatycznie zmienia\u0142 uk\u0142ad (np. z kolumny na wiersz) w zale\u017cno\u015bci od miejsca, co jest zbawienne dla edytor\u00f3w. Jeden z naszych klient\u00f3w (platforma edukacyjna) zredukowa\u0142 liczb\u0119 zg\u0142osze\u0144 b\u0142\u0119d\u00f3w layoutu o 60% po wdro\u017ceniu container queries.<\/p>\n Container queries nie s\u0105 srebrem. Po pierwsze, wymagaj\u0105 przegl\u0105darek Chromium (Chrome, Edge, Opera) oraz Safari 16.4+; Firefox wspiera je od wersji 110, ale pe\u0142na implementacja wci\u0105\u017c ma luki. Je\u015bli musisz wspiera\u0107 starsze przegl\u0105darki (np. IE11 \u2013 ale to ju\u017c rzadko\u015b\u0107), konieczny jest polyfill, ale to dodatkowe obci\u0105\u017cenie.<\/p>\n Po drugie, container queries mog\u0105 prowadzi\u0107 do nieoczekiwanych efekt\u00f3w, gdy kontenery s\u0105 zagnie\u017cd\u017cone \u2013 trzeba uwa\u017ca\u0107 na referencje do nazw kontener\u00f3w, by nie zap\u0119tli\u0107 warunk\u00f3w. Z mojego do\u015bwiadczenia wynika, \u017ce dobrze jest ograniczy\u0107 si\u0119 do jednego poziomu zagnie\u017cd\u017cenia lub u\u017cywa\u0107 unikalnych nazw.<\/p>\n Po trzecie, performance. Cho\u0107 container queries s\u0105 optymalizowane w silnikach przegl\u0105darek, w skomplikowanych dashboardach z setkami kontener\u00f3w mo\u017ce wyst\u0105pi\u0107 spadek wydajno\u015bci. Zawsze testujemy z narz\u0119dziami deweloperskimi \u2013 je\u015bli liczba kontener\u00f3w przekracza 100, warto rozwa\u017cy\u0107 wirtualizacj\u0119 lub lazy loading.<\/p>\n Z do\u015bwiadczenia polecam stopniowe wprowadzanie. Wybierz jeden komponent (np. kart\u0119 produktu) i przepisz jego style na container queries. U\u017cyj Przyk\u0142ad wdro\u017cenia w React:<\/p>\n I w stylach:<\/p>\n To proste, czytelne i \u0142atwe do utrzymania.<\/p>\n Container queries to faktyczny prze\u0142om dla frontend developer\u00f3w \u2013 upraszczaj\u0105 kod, redukuj\u0105 duplikacje i poprawiaj\u0105 UX. Jednak, jak ka\u017cda nowa technologia, wymagaj\u0105 \u015bwiadomego wdro\u017cenia. W JurskiTech wdra\u017camy je w projektach, kt\u00f3re musz\u0105 by\u0107 elastyczne i skalowalne \u2013 szczeg\u00f3lnie w SaaS i e-commerce. Nie uwa\u017cam, \u017ce ca\u0142kowicie zast\u0105pi\u0105 media queries bo s\u0105 raczej uzupe\u0142nieniem. W praktyce u\u017cywamy obu: media queries dla globalnych breakpoint\u00f3w, container queries dla komponent\u00f3w wielokrotnego u\u017cytku.<\/p>\n Je\u015bli planujesz wdro\u017cenie, zacznij od ma\u0142ych krok\u00f3w \u2013 sprawd\u017a wsparcie przegl\u0105darek u twoich u\u017cytkownik\u00f3w, przetestuj wydajno\u015b\u0107 i ciesz si\u0119 kodem, kt\u00f3ry sam dostosowuje si\u0119 do kontekstu. To inwestycja, kt\u00f3ra zwraca si\u0119 szybciej, ni\u017c my\u015blisz.<\/p>\n","protected":false},"excerpt":{"rendered":" CSS Container Queries: prze\u0142om w responsywno\u015bci czy kolejny hype? Przez lata responsywno\u015b\u0107 stron opiera\u0142a si\u0119 g\u0142\u00f3wnie na media queries \u2013 dostosowywali\u015bmy layout do szeroko\u015bci viewportu. Dzia\u0142a\u0142o to dobrze, p\u00f3ki komponenty by\u0142y proste, ale w dzisiejszych, modu\u0142owych aplikacjach webowych cz\u0119sto okazuje si\u0119 niewystarczaj\u0105ce. Wyobra\u017a sobie kart\u0119 produktu, kt\u00f3ra ma dzia\u0142a\u0107 zar\u00f3wno w sidebarze (w\u0105ski kontekst), jak<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[826,265,885,886],"class_list":["post-2813","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-ux","tag-architektura-frontendu","tag-css-container-queries","tag-responsywnosc-stron"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2813"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2813\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}container-type<\/code> (np. inline-size<\/code> dla szeroko\u015bci) oraz opcjonalnie nada\u0107 mu nazw\u0119 przez container-name<\/code>. Nast\u0119pnie w @container<\/code> mo\u017cesz u\u017cywa\u0107 warunk\u00f3w jak w media queries. Prosty przyk\u0142ad:<\/p>\n.card {\n container-type: inline-size;\n container-name: card;\n}\n\n@container card (min-width: 400px) {\n .card__title {\n font-size: 1.5rem;\n }\n}\n\n@container card (max-width: 399px) {\n .card__title {\n font-size: 1rem;\n }\n}\n<\/code><\/pre>\ninline-size<\/code>, block-size<\/code>, a tak\u017ce style<\/code> i state<\/code> (chocia\u017c te ostatnie s\u0105 jeszcze w fazie eksperymentalnej). To daje du\u017c\u0105 elastyczno\u015b\u0107: mo\u017cesz zmienia\u0107 nie tylko rozmiary czcionek, ale te\u017c uk\u0142ad element\u00f3w (flex-direction, grid-template-columns) w zale\u017cno\u015bci od dost\u0119pnej przestrzeni w kontenerze.<\/p>\n3 realne przypadki u\u017cycia w biznesie<\/h3>\n
Pu\u0142apki i ograniczenia \u2013 na co uwa\u017ca\u0107?<\/h3>\n
Jak zacz\u0105\u0107 wdro\u017cenie w projekcie?<\/h3>\n
container-type: inline-size<\/code> i sprawd\u017a, czy w najpopularniejszych przegl\u0105darkach dzia\u0142a tak, jak oczekujesz. Je\u015bli u\u017cywasz frameworka CSS (np. Tailwind), mo\u017cesz skorzysta\u0107 z wtyczek, kt\u00f3re wspieraj\u0105 container queries, ale pami\u0119taj \u2013 natywne rozwi\u0105zanie zawsze b\u0119dzie bardziej wydajne.<\/p>\n\/\/ Card.tsx\nimport '.\/Card.css';\n\nconst Card = ({ children }) => {\n return <div className=\"card\">{children}<\/div>;\n};\n<\/code><\/pre>\n.card {\n container-type: inline-size;\n}\n\n@container (min-width: 300px) {\n .card {\n display: flex;\n flex-direction: row;\n }\n}\n\n@container (max-width: 299px) {\n .card {\n display: flex;\n flex-direction: column;\n }\n}\n<\/code><\/pre>\nPodsumowanie i perspektywa<\/h3>\n