{"id":3343,"date":"2024-06-17T10:05:17","date_gmt":"2024-06-17T10:05:17","guid":{"rendered":"https:\/\/smultron.software\/?p=3343"},"modified":"2026-01-20T10:00:12","modified_gmt":"2026-01-20T10:00:12","slug":"5-nowosci-w-swiecie-css","status":"publish","type":"post","link":"https:\/\/smultron.software\/pl\/blog\/5-nowosci-w-swiecie-css","title":{"rendered":"5 nowo\u015bci w \u015bwiecie CSS kt\u00f3re usprawni\u0105 Twoj\u0105 prac\u0119 ju\u017c dzi\u015b"},"content":{"rendered":"\n<p>W ostatnich latach ruch w sieci w przewa\u017caj\u0105cym stopniu przebiega z wykorzystaniem przegl\u0105darek opartych o trzy podstawowe silniki (Blink, Gecko oraz WebKit). Tak zwane <em>modern browsers <\/em>s\u0105 rozwijane i aktualizowane w modelu <em>evergreen<\/em>, bez konieczno\u015bci \u201cr\u0119cznego\u201d instalowania aktualizacji (najcz\u0119\u015bciej odbywa si\u0119 to \u201cw tle\u201d podczas restartu programu). Oznacza to, \u017ce nowe funkcjonalno\u015bci mog\u0105 by\u0107 wypuszczane s\u0105 z wi\u0119ksz\u0105 regularno\u015bci\u0105.<\/p>\n\n\n\n<p>Dzi\u0119ki temu ostatnie lata przynios\u0142y wiele ekscytuj\u0105cych nowo\u015bci w \u015bwiecie CSS, z niekt\u00f3rymi w\u0142a\u015bciwo\u015bciami zd\u0105\u017cyli\u015bmy ju\u017c dawno okrzepn\u0105\u0107. Nie wyobra\u017cam sobie obecnie tworzenia layout\u00f3w bez <em>flexbox<\/em>, css <em>grid<\/em>, czy <em>css variables<\/em>. Niedawno jednak wsparcia doczeka\u0142o si\u0119 r\u00f3wnie\u017c wiele ciekawych koncept\u00f3w opracowywanych przez CSS Working Group.<\/p>\n\n\n\n<p>W tym artykule postaram si\u0119 przybli\u017cy\u0107 5 nowo\u015bci, kt\u00f3re na pewno zagoszcz\u0105 na sta\u0142e w zestawie narz\u0119dzi, kt\u00f3rymi pos\u0142uguje si\u0119 na co dzie\u0144. Wszystkie opisane funkcjonalno\u015bci s\u0105 wspierane przez ostatnie wersje nowoczesnych przegl\u0105darek internetowych.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wlasciwosci-logiczne\">W\u0142a\u015bciwo\u015bci i warto\u015bci logiczne<\/h2>\n\n\n\n<p>W\u0142a\u015bciwo\u015bci logiczne pozwalaj\u0105 uporz\u0105dkowa\u0107 i usp\u00f3jni\u0107 nomenklatur\u0119 i dzia\u0142ania zwi\u0105zane z wymiarami element\u00f3w oraz przep\u0142ywem tekstu. Do tej pory u\u017cywali\u015bmy w\u0142a\u015bciwo\u015bci&nbsp; fizycznych odnosz\u0105cych si\u0119 do wymiar\u00f3w fizycznych urz\u0105dzenia. W\u0142a\u015bciwo\u015bci i warto\u015bci logiczne odnosz\u0105 si\u0119 do logicznych w\u0142a\u015bciwo\u015bci przegl\u0105danych tre\u015bci. Kluczowe s\u0142owa <em>inline <\/em>oraz <em>block <\/em>definiowane s\u0105 poprzez wertykalny i horyzontalny kierunek przep\u0142ywu tekstu. Dzi\u0119ki temu w prostszy spos\u00f3b mo\u017cemy rozwi\u0105za\u0107 problemy zwi\u0105zane na przyk\u0142ad ze zmian\u0105 kierunku tekstu. Przyk\u0142adowo gdy przystosowujemy szablon z rynku angloj\u0119zycznego do rynk\u00f3w arabskoj\u0119zycznego, lub japo\u0144skiego &#8211; dotychczas musieli\u015bmy nadpisywa\u0107 wiele w\u0142a\u015bciwo\u015bci \u017ceby tekst pisany od prawej do lewej i jego po\u0142o\u017cenie wygl\u0105da\u0142o poprawnie.&nbsp; Dobrze obrazuje to poni\u017cszy przyk\u0142ad gdzie u\u017cywaj\u0105c w\u0142a\u015bciwo\u015bci logicznych otrzymujemy ten sam efekt wizualny pisz\u0105c niemal dwukrotnie mniej kodu, bez potrzeby nadpisywania styli gdy zmienia si\u0119 kierunek przep\u0142ywu pisma.<\/p>\n\n\n\n<p>Przyk\u0142ad zapisany z u\u017cyciem w\u0142a\u015bciwo\u015bci fizycznych: <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Physical properties and values\" data-src=\"https:\/\/codepen.io\/b_rtek\/embed\/preview\/MWdoOQp?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=MWdoOQp#?secret=RugKMQKRc8\" data-secret=\"RugKMQKRc8\" scrolling=\"no\" frameborder=\"0\" height=\"300\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Przyk\u0142ad zapisany z u\u017cyciem w\u0142a\u015bciwo\u015bci logicznych:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Logical properties and values\" data-src=\"https:\/\/codepen.io\/b_rtek\/embed\/preview\/ExzXwqW?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=ExzXwqW#?secret=ti0rTaRAhl\" data-secret=\"ti0rTaRAhl\" scrolling=\"no\" frameborder=\"0\" height=\"300\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Pe\u0142na lista w\u0142a\u015bciwo\u015bci i w\u0142asno\u015bci kt\u00f3re maj\u0105 logiczne odpowiedniki znajdziesz tutaj: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_logical_properties_and_values\" target=\"_blank\" rel=\"noopener\">CSS logical properties and values<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamiczne-jednostki\">Dynamiczne jednostki<\/h2>\n\n\n\n<p>Ka\u017cdy kto pr\u00f3bowa\u0142 ustawi\u0107 wysoko\u015b\u0107 jakiego\u015b elementu w taki spos\u00f3b, aby zajmowa\u0142 ca\u0142\u0105 wysoko\u015b\u0107 widocznego ekranu na pewno zmierzy\u0142 si\u0119 z problemem na kt\u00f3ry w ko\u0144cu mamy rozwi\u0105zanie. U\u017cycie 100vh w takim przypadku nie by\u0142o nigdy w pe\u0142ni poprawnym rozwi\u0105zaniem, na urz\u0105dzeniach mobilnych oznacza to 100% wysoko\u015bci viewportu, w\u0142\u0105czamy w to pasek adresu oraz pozosta\u0142e elementu UI, kt\u00f3re w wi\u0119kszo\u015bci przypadk\u00f3w podczas scrollowania si\u0119 chowaj\u0105 lub pokazuj\u0105. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units.png\" alt=\"Grafika obrazuj\u0105ca jednoski vw i hv.\" class=\"wp-image-3709 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-528x330.png 528w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-86x54.png 86w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-576x360.png 576w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall.png\" alt=\"Grafika obrazuj\u0105ca jednostki vh na urz\u0105dzeniach mobilnych.\" class=\"wp-image-3711 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-528x330.png 528w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-86x54.png 86w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/100vh-mobile-too-tall-576x360.png 576w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><\/figure>\n\n\n\n<p>Nasz element zajmuje wtedy wi\u0119cej miejsca ni\u017c by\u015bmy chcieli. Na ratunek przychodz\u0105 nam nowe jednostki:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1.png\" alt=\"Grafika obrazuj\u0105ca 4 ekrany mobilne, na kt\u00f3ych zaprezentowano jednostki svh, lvh oraz dvh.\" class=\"wp-image-3713 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-528x330.png 528w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-86x54.png 86w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/viewport-units-1-576x360.png 576w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Small Viewport <\/strong>&#8211; odpowiada wielko\u015bci viewportu gdy elementy UI przegl\u0105darki s\u0105 rozwini\u0119te. Jednostki rozpoczynaj\u0105 si\u0119 prefixem <strong>sv*<\/strong>:\n<ul class=\"wp-block-list\">\n<li>svh &#8211; wysoko\u015b\u0107 ma\u0142ego viewportu<\/li>\n\n\n\n<li>svw &#8211; szeroko\u015b\u0107 ma\u0142ego viewportu<\/li>\n\n\n\n<li>svb &#8211; wysoko\u015b\u0107 ma\u0142ego viewportu w znaczeniu logicznym<\/li>\n\n\n\n<li>svi &#8211; szeroko\u015b\u0107 ma\u0142ego viewportu w znaczeniu logicznym<\/li>\n\n\n\n<li>svmin &#8211; przyjmuj\u0119 mniejsz\u0105 warto\u015b\u0107 spo\u015br\u00f3d svh i svw<\/li>\n\n\n\n<li>svmax &#8211; przyjmuje wi\u0119ksz\u0105 warto\u015b\u0107 spo\u015br\u00f3d svh i svw<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Large Viewport<\/strong> &#8211; odpowiada wielko\u015bci viewportu gdy elementy UI s\u0105 niewidoczne. Jednostki s\u0105 analogiczne do jednostek ma\u0142ego viewportu tylko z prefixem <strong>lv*<\/strong><\/li>\n\n\n\n<li><strong>Dynamic Viewport<\/strong> &#8211; przyjmuje warto\u015b\u0107 ma\u0142ego lub du\u017cego viewportu w zale\u017cno\u015bci od tego czy elementy UI s\u0105 widoczne w danej chwili czy nie. Jednostki s\u0105 analogiczne do jednostek ma\u0142ego viewportu tylko z prefixem <strong>dv*<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Warto pami\u0119ta\u0107 \u017ce domy\u015blnie wirtualna klawiatura nie jest brana pod uwag\u0119 jako element UI, wi\u0119c pojawienie si\u0119 jej na ekranie nie spowoduje przeliczenia rozmiar\u00f3w elementu dla kt\u00f3rego u\u017cyto dynamiczne jednostki.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-container-queries\">CSS Container Queries<\/h2>\n\n\n\n<p><em>Container Queries<\/em> umo\u017cliwiaj\u0105 stylowanie element\u00f3w w zale\u017cno\u015bci wymiar\u00f3w zdefiniowanego kontenera. Do tej pory aby np. zmieni\u0107 layout elementu w zale\u017cno\u015bci od jego rozmiaru mogli\u015bmy si\u0119 pos\u0142u\u017cy\u0107 media queries gdzie zdefiniowali\u015bmy w obr\u0119bie jakiego rozmiaru viewportu element ma si\u0119 zmieni\u0107. Dzi\u0119ki <em>container queries<\/em> mo\u017cemy zmienia\u0107 layout w zale\u017cno\u015bci od szeroko\u015bci elementu kt\u00f3ry stylujemy. W erze komponent\u00f3w ta funkcjonalno\u015b\u0107 mo\u017ce okaza\u0107 si\u0119 wielce przydatn\u0105. Na przyk\u0142adzie poni\u017cej widzimy identyczny element umieszczony w r\u00f3\u017cnym kontek\u015bcie, layout jest zmienny w zale\u017cno\u015bci od szeroko\u015bci poszczeg\u00f3lnych element\u00f3w.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"CSS Container Queries\" data-src=\"https:\/\/codepen.io\/b_rtek\/embed\/preview\/YzbVvva?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=YzbVvva#?secret=ttQCRNtgio\" data-secret=\"ttQCRNtgio\" scrolling=\"no\" frameborder=\"0\" height=\"300\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Aby u\u017cy\u0107 container query musimy utworzy\u0107 element kt\u00f3ry b\u0119dzie kontenerem dla naszego elementu. Warto zauwa\u017cy\u0107 \u017ce ten kontener nie mo\u017ce by\u0107 stylizowany wewn\u0105trz <em>container query<\/em> kt\u00f3ry si\u0119 do niego odnosi. Definiujemy tutaj kontener oraz typ kontenera. <em>Container queries<\/em> odnosz\u0105ce si\u0119 do wymiar\u00f3w elementu mog\u0105 mie\u0107 typ <em>inline-size <\/em>(szeroko\u015bci elementu) lub <em>size <\/em>(szeroko\u015b\u0107 i wysoko\u015b\u0107 elementu). Istnieje r\u00f3wnie\u017c typ <em>normal <\/em>kt\u00f3ry b\u0119dzie definiowa\u0142 kontener w zale\u017cno\u015bci od innych w\u0142a\u015bciwo\u015bci elementu, tego typu queries nie maj\u0105 jeszcze wi\u0119kszego wsparcia w przegl\u0105darkach dlatego nie b\u0119d\u0119 w tym artykule rozwija\u0142 tego tematu.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;div class=\"card-outer\"&gt;\n    &lt;div class=\"card\"&gt;&#91;...]&lt;\/div&gt;\n&lt;\/div&gt;\n.card-outer {\n&nbsp; &nbsp; container: card \/ inline-size;\n&nbsp; &nbsp; \/* this is a shorthand\n&nbsp; &nbsp; container-type: inline-size;\n&nbsp; &nbsp; container-name: card;\n&nbsp; &nbsp; *\/\n}<\/code><\/pre>\n\n\n\n<p>Maj\u0105c tak zdefiniowany kontener mo\u017cemy go u\u017cywa\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>.card {\n    ...\n    \/* styles when container width is wider than 768px *\/\n    @container card (min-width: 768px) {\n        ...\n    }    \n    \/* styles when container width is wider than 992px *\/\n    @container card (min-width: 768px) {\n        ...\n    }\n}<\/code><\/pre>\n\n\n\n<p>Wraz z <em>container queries<\/em> pojawi\u0142y si\u0119 nowe jednostki odnosz\u0105ce si\u0119 do wymiar\u00f3w zdefiniowanego kontenera. Jednostki cqi | cqb | cqw | cqh | cqmin | cqmax odnosz\u0105 si\u0119 do odpowiednio do szeroko\u015bci logicznej | wysoko\u015bci logicznej | szeroko\u015bci | wysoko\u015bci | mniejszej warto\u015bci z zakresu szeroko\u015bci i wysoko\u015bci | wi\u0119kszej warto\u015bci z zakresu szeroko\u015bci i wysoko\u015bci.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>\/* New container query units refering to size of the container: cqi | cqb | cqw | cqh | cqmin | cqmax *\/\n.card {\n    dispaly: flex;\n    gap: 5cqi; \/* -&gt; 5% inline size of container *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"psedo-klasa-has\">Pseudo-klasa :has()<\/h2>\n\n\n\n<p>D\u0142ugo wyczekiwany feature dzi\u0119ki kt\u00f3remu jeste\u015bmy w stanie pisa\u0107 style elementu nadrz\u0119dnego w zale\u017cno\u015bci od wewn\u0119trznych lub s\u0105siednich element\u00f3w.&nbsp;<\/p>\n\n\n\n<p>Bardzo cz\u0119stym przypadkiem by\u0142o customowe ostylowanie elementu input typu checkbox. Dotychczas przewa\u017cnie korzystali\u015bmy z kombinatora \u2018+\u2019 i ostylowywali\u015bmy element znajduj\u0105cy si\u0119 w bezpo\u015brednim s\u0105siedztwie elementu input. Nie zawsze mo\u017cemy jednak zmieni\u0107 markup.<\/p>\n\n\n\n<p>Z wykorzystaniem :has() jeste\u015bmy w stanie zrobi\u0107 to pro\u015bciej. Zastosowanie tej pseudoklasy nie ko\u0144czy si\u0119 jednak na tym, my\u015bl\u0119 \u017ce u\u017cycie jej b\u0119dzie powszechne i u\u0142atwi nam rozwi\u0105zanie bardzo wielu problem\u00f3w efektywniej.<\/p>\n\n\n\n<p>Zobacz przyk\u0142ad poni\u017cej:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" title=\":has() pseudo-class\" data-src=\"https:\/\/codepen.io\/b_rtek\/embed\/preview\/jOowgvZ?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=jOowgvZ#?secret=VL60jicuq9\" data-secret=\"VL60jicuq9\" scrolling=\"no\" frameborder=\"0\" height=\"300\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"py-[32px] px-[24px] tablet:px-[32px] bg-gray-1 rounded-[8px]\ncta-small\">\n\t<div class=\"flex flex-wrap gap-[24px] justify-between\n\titems-center\">\n\t\t<div class=\"hm5 desktop:h5 basis-[417px] max-w-[496px]\">\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t<div>\n\t\t\t\n<div class=\"person-contact flex gap-[16px] items-center\">\n\t<div class=\"person-contact__image\">\n\t\t\t\t\t<img decoding=\"async\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/marcin-stawowiak-56x56.jpeg\"\n\t\t\t\tclass=\"size-[56px] rounded-full object-cover lazyload\"\n\t\t\t\talt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 56px; --smush-placeholder-aspect-ratio: 56\/56;\">\n\t\t\t<\/div>\n\t<div class=\"person-contact__details label-md\">\n\t\t<div class=\"person-contact__email\">\n\t\t\t<a href=\"mailto:hello@smultron.pl\">\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div class=\"person-contact__phone\">\n\t\t\t<a href=\"tel:+48 791 991 797\">\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-cascade-layers\">CSS Cascade Layers<\/h2>\n\n\n\n<p>Koncept warstw jest rozszerzeniem kaskady css. Warstwy umiejscawiaj\u0105 si\u0119 mi\u0119dzy szczeg\u00f3\u0142owo\u015bci\u0105 selektor\u00f3w (<em>selector specificity<\/em>), a stylami inline. Zaktualizowan\u0105 kaskad\u0119 CSS dobrze obrazuje poni\u017cszy obrazek:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"800\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers.png\" alt=\"Grafika obrazuj\u0105ca przebieg kaskady css.\" class=\"wp-image-3703 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-300x300.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-150x150.png 150w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-768x768.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-46x46.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-56x56.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-376x376.png 376w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-54x54.png 54w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-360x360.png 360w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/css-cascade-layers-528x528.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/800;\" \/><figcaption class=\"wp-element-caption\">\u017ar\u00f3d\u0142o: <a href=\"https:\/\/css-tricks.com\/css-cascade-layers\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/css-tricks.com\/css-cascade-layers\/<\/a><\/figcaption><\/figure>\n\n\n\n<p>Podstawowe za\u0142o\u017cenia i zagadnienia zwi\u0105zane z <em>CSS Cascade Layers<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Priorytet warstw zale\u017cny jest od miejsca w kt\u00f3rym zosta\u0142y zdefiniowane, warto wi\u0119c definiowa\u0107 warstwy na pocz\u0105tku dokumentu.<\/li>\n\n\n\n<li>Style bez zdefiniowanej warstwy maj\u0105 wy\u017cszy priorytet ni\u017c style wewn\u0105trz warstw.<\/li>\n\n\n\n<li>Mo\u017cemy importowa\u0107 ca\u0142y arkusz styli do warstwy. Mo\u017ce okaza\u0107 si\u0119 to przydatne np. w przypadku konfliktu nazw warstw.<\/li>\n\n\n\n<li>Mo\u017cemy tworzy\u0107 wielopoziomowe warstwy.<\/li>\n\n\n\n<li>Mo\u017cemy tworzy\u0107 anonimowe warstwy &#8211; ka\u017cda z takich warstw b\u0119dzie unikalna, a jej kolejno\u015b\u0107 b\u0119dzie zale\u017ce\u0107 od miejsca u\u017cycia w dokumencie.<\/li>\n\n\n\n<li>S\u0142owo kluczowe <em>revert-layer<\/em> (jako warto\u015b\u0107 w\u0142a\u015bciwo\u015bci) pozwala na \u201ccofni\u0119cie\u201d kaskady i u\u017cycie dowolnej warto\u015bci zdefiniowanej w poprzedniej warstwie.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad u\u017cycia CSS Layers:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"CSS Cascade Layers\" data-src=\"https:\/\/codepen.io\/b_rtek\/embed\/preview\/zYQdOqg?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=zYQdOqg#?secret=sszsbHmDyV\" data-secret=\"sszsbHmDyV\" scrolling=\"no\" frameborder=\"0\" height=\"300\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dyrektywa-important\">Ostro\u017cnie z dyrektyw\u0105 <em>!important<\/em><\/h3>\n\n\n\n<p>Omawiaj\u0105c temat priorytet\u00f3w nale\u017cy wspomnie\u0107 o dyrektywie<em> !important<\/em>. W idealnym \u015bwiecie nie powinni\u015bmy musie\u0107 z niej korzysta\u0107, jednak dobrze wiemy jak si\u0119 to ma do rzeczywisto\u015bci. W kontek\u015bcie warstw nale\u017cy pami\u0119ta\u0107 \u017ce priorytet jest nast\u0119puj\u0105cy: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"343\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers.png\" alt=\"Grafika obrazuj\u0105ca przebieg kaskady css - od najmniej znacz\u0105cej warstwy do najbardziej: pierwsza zdefiniowana warstwa, kolejne warstwy, ostatnia warstwa, style bez warstwy, style bez warstwy z dyrektyw\u0105 !important, style ostatniej warstwy z dyrektyw\u0105 !important, kolejne warstwy, style pierwszej zdefiniowanej warstwy z dyrektyw\u0105 !important.\" class=\"wp-image-3701 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers-300x129.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers-768x329.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers-46x20.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers-56x24.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers-528x226.png 528w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/cascade-layers-126x54.png 126w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/343;\" \/><\/figure>\n\n\n\n<p>Taki priorytet jest analogiczny do znanego schematu w ramach pochodzenia styl\u00f3w, gdzie priorytet dla przypomnienia jest jak na poni\u017cszym obrazku: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"356\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance.png\" alt=\"Grafika obrazuj\u0105ca przebieg kaskady css - od najmniej znacz\u0105cej warstwy do najbardziej: style przegl\u0105darki, style u\u017cytkownika (preferencje u\u017cytkownika), style dokumentu, style dokumentu z dyrektyw\u0105 !important, style u\u017cytkownika z dyrektyw\u0105 !important, style przegl\u0105darki z dyrektyw\u0105 !important\" class=\"wp-image-3707 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance-300x134.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance-768x342.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance-46x20.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance-56x25.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance-528x235.png 528w, https:\/\/smultron.software\/content\/uploads\/2024\/07\/origin-importance-121x54.png 121w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/356;\" \/><\/figure>\n\n\n\n<p>Wprowadzenie warstw powinno w znacznym stopniu zmniejszy\u0107 potrzeb\u0119 wykorzystywania dyrektywy <em>!important<\/em>, warto jednak pami\u0119ta\u0107 o rozk\u0142adzie priorytet\u00f3w zaprezentowanym powy\u017cej.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tailwind-layers\">Tailwind i s\u0142owo kluczowe @layer<\/h3>\n\n\n\n<p>Je\u015bli korzysta\u0142e\u015b kiedykolwiek z frameworku Tailwind to by\u0107 mo\u017ce spotka\u0142e\u015b si\u0119 ju\u017c z konceptem warstw. W Tailwind mo\u017cemy definiowa\u0107 style w ramach warstw <em>base, components, utilities<\/em>. Nale\u017cy jednak pami\u0119ta\u0107, \u017ce u\u017cywaj\u0105c Tailwind te trzy warstwy nie b\u0119d\u0105 kompilowane jako natywne warstwy CSS, a b\u0119d\u0105 odnosi\u0107 si\u0119 do dyrektywy @tailwind za pomoc\u0105 kt\u00f3rej \u201cimportujemy\u201d style tailwind. <a href=\"https:\/\/tailwindcss.com\/docs\/functions-and-directives#layer\" target=\"_blank\" rel=\"noopener\">Wi\u0119cej o dyrektywach @tailwind i @layer we frameworku tailwind<\/a>. <a href=\"https:\/\/emamoah.medium.com\/using-native-css-cascade-layers-with-tailwindcss-cb11af266104\" target=\"_blank\" rel=\"noopener\">Czytaj jak efektywnie poradzi\u0107 sobie z CSS layers oraz dyrektyw\u0105 @layer w tailwind<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"warto-poznac\">Pozosta\u0142e nowo\u015bci z kt\u00f3rych mo\u017cesz korzysta\u0107 ju\u017c dzi\u015b o kt\u00f3rych warto wspomnie\u0107<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Native CSS nesting &#8211; natywne zagnie\u017cd\u017canie w CSS (w przyk\u0142adach w artykule wykorzystuj\u0119 t\u0105 funkcjonalno\u015b\u0107)<\/li>\n\n\n\n<li>pseudo-klasy :is(), :where()<\/li>\n\n\n\n<li>CSS Masking<\/li>\n\n\n\n<li>text-wrap: balance<\/li>\n\n\n\n<li>funkcja color-mix<\/li>\n\n\n\n<li>nowe gamy kolor\u00f3w (lch, oklch, lab, oklab)<\/li>\n\n\n\n<li>pseudo-klasy :user-valid i :user-invalid dla elementu input<\/li>\n\n\n\n<li>subgrid &#8211; pozwala na u\u017cycie siatki wyznaczonej przez rodzica z display: grid<\/li>\n\n\n\n<li>aspect-ratio &#8211; mo\u017cliwo\u015b\u0107 ustawienia dla elementu sta\u0142ej proporcji szeroko\u015bci do wysoko\u015bci<\/li>\n\n\n\n<li>text-underline-offset &#8211; odst\u0119p mi\u0119dzy tekstem a podkre\u015bleniem<\/li>\n\n\n\n<li>accent-color &#8211; ustawienie akcentu kolorystycznego dla niekt\u00f3rych element\u00f3w UI takich jak input:checkbox, :radio<\/li>\n\n\n\n<li>funkcje trygonometryczne<\/li>\n\n\n\n<li>align-content dla element\u00f3w blokowych<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"podsumowanie\">Podsumowanie<\/h2>\n\n\n\n<p>CSS kontynuuje swoj\u0105 ewolucj\u0119, opisane powy\u017cej funkcjonalno\u015bci przynosz\u0105 nam pot\u0119\u017cne narz\u0119dzia. Dzi\u0119ki nim b\u0119dziemy mogli w bardziej efektywny spos\u00f3b organizowa\u0107 nasz kod co powinno wp\u0142yn\u0105\u0107 zar\u00f3wno na jako\u015b\u0107 naszych projekt\u00f3w jak i rozmiar plik\u00f3w CSS, a ka\u017cdy bajt to jak wiemy cenny zas\u00f3b.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bibliografia-przydatne-linki\">Bibliografia i przydatne linki<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/chriscoyier.net\/2023\/06\/06\/modern-css-in-real-life\/\" target=\"_blank\" rel=\"noopener\">Modern CSS in Real Life | Chris Coyier<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/blog\/css-wrapped-2023\" target=\"_blank\" rel=\"noopener\">CSS Wrapped: 2023! | Una Kravets, Bramus, Adam Argyle<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ishadeed.com\/article\/css-container-query-guide\/\" target=\"_blank\" rel=\"noopener\">An Interactive Guide to CSS Container Queries<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ishadeed.com\/article\/say-hello-to-css-container-queries\/\" target=\"_blank\" rel=\"noopener\">Say Hello To CSS Container Queries | Ahmad Shadeed<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ishadeed.com\/article\/container-queries-for-designers\/\" target=\"_blank\" rel=\"noopener\">CSS Container Queries For Designers | Ahmad Shadeed<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/una.im\/style-queries\/\" target=\"_blank\" rel=\"noopener\">Style Container Queries | Una Kravets<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ishadeed.com\/article\/css-state-queries\/\" target=\"_blank\" rel=\"noopener\">Future CSS: State Container Queries | Ahmad Shadeed<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/css-cascade-layers\/\" target=\"_blank\" rel=\"noopener\">A Complete Guide to CSS Cascade Layers | CSS Tricks | Miriam Suzanne<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/blog\/cascade-layers\/\" target=\"_blank\" rel=\"noopener\">Cascade layers are coming to your browser | Una Kravets<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:has\" target=\"_blank\" rel=\"noopener\">:has | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.builder.io\/blog\/css-2024-has\" target=\"_blank\" rel=\"noopener\">Modern CSS for 2024: Use Cases for :has() | YOAV GANBAR<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_logical_properties_and_values\" target=\"_blank\" rel=\"noopener\">CSS logical properties and values | MDN web docs<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/blog\/viewport-units\" target=\"_blank\" rel=\"noopener\">The large, small, and dynamic viewport units | Bramus<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2023\/12\/new-css-viewport-units-not-solve-classic-scrollbar-problem\/\" target=\"_blank\" rel=\"noopener\">New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem | \u0160ime Vidas&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/css-nesting\" target=\"_blank\" rel=\"noopener\">CSS Nesting | Adam Argyle<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_nesting\" target=\"_blank\" rel=\"noopener\">CSS Nesting | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ishadeed.com\/article\/css-masking\/\" target=\"_blank\" rel=\"noopener\">CSS Masking | Ahmad Shadeed<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mask\" target=\"_blank\" rel=\"noopener\">mask | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/inset\" target=\"_blank\" rel=\"noopener\">inset | MDN web docs<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-wrap#balance\" target=\"_blank\" rel=\"noopener\">text-wrap: balance | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value\/color-mix\" target=\"_blank\" rel=\"noopener\">color-mix() | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/evilmartians.com\/chronicles\/oklch-in-css-why-quit-rgb-hsl\" target=\"_blank\" rel=\"noopener\">OKLCH in CSS: why we moved from RGB and HSL | Andrey Sitnik, Travis Turner<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/moderncss.dev\/\" target=\"_blank\" rel=\"noopener\">Modern CSS Solutions for Old CSS Problems | Stephanie Eckles<\/a><\/li>\n<\/ul>\n<div class=\"full-width container-grid gap-y-[32px] section-scrollspy  bg-gray-1 pt-[60px] desktop:pt-[120px] pb-[60px] desktop:pb-[120px]\"\n\tid=\"skontaktuj-sie\">\n\t<div class=\"hm2 desktop:h2\"\n\t\tdata-aos=\"animate__fadeInUp\"\n\t>\n\t\tSkontaktuj si\u0119 z nami\t<\/div>\n\t<div class=\"grid desktop:grid-cols-12 gap-y-[60px] items-start\">\n\t\t\n<div class=\"desktop:col-span-6 grid tablet:grid-cols-2\n\t\ttablet:gap-x-[24px] tablet:gap-y-[32px]\">\n\t<div class=\"\">\n\t\t<div class=\"\">\n\t\t\t<img decoding=\"async\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/01\/681c046dafbd67a84a6a2820a207caa9-e1706629988730-768x515.jpeg\"\n\t\t\t\twidth=\"327\"\n\t\t\t\theight=\"204\"\n\t\t\t\tclass=\"w-full aspect-[390\/243] object-cover rounded-t-[10px] lazyload\"\n\t\t\t\talt=\"Marcin Stawowiak\"\n\t\t\t\tdata-aos=\"animate__fadeInUp\"\n\t\t\t src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 327px; --smush-placeholder-aspect-ratio: 327\/204;\" \/>\n\t\t\t<div class=\"p-[24px] tablet:border-l-[1px] tablet:border-b-[1px]\n\t\t\tborder-gray-2 tablet:rounded-bl-[10px] max-tablet:border-x-[1px]\n\t\t\tgrid gap-[16px]\">\n\t\t\t\t<div class=\"h6\"\n\t\t\t\t\tdata-aos=\"animate__fadeInUp\"\n\t\t\t\t>Marcin Stawowiak<\/div>\n\t\t\t\t<div class=\"label-xs font-bold\"\n\t\t\t\t\tdata-aos=\"animate__fadeInUp\"\n\t\t\t\t>\n\t\t\t\t\tCo-founder, Executive Manager\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"pl-[24px] pb-[24px] pr-[24px] tablet:ml-[-24px]\n\t\t\ttablet:pt-[24px] grid gap-[16px] tablet:self-end tablet:border-[1px] tablet:border-l-0\n\t\t\tborder-gray-2 tablet:rounded-r-[10px] max-tablet:border-x-[1px]\n\t\t\tmax-tablet:border-b-[1px] max-tablet:rounded-b-[10px]\n\t\t\tgap-y-[60px]\">\n\t\t<div class=\"label-md max-tablet:hidden\" data-aos=\"animate__fadeInUp\">\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? <br \/>Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t<div class=\"grid body-md\" data-aos=\"animate__fadeInUp\">\n\t\t\t<a href=\"mailto:hello@smultron.pl\">hello@smultron.pl<\/a>\n\t\t\t<a href=\"tel:+48 791 991 797\">+48 791 991 797<\/a>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"tablet:col-span-2 body-md grid gap-[16px] mt-[32px]\n\ttablet:mt-0\" data-aos=\"animate__fadeInUp\">\n\t\t<div class=\"label-md\">\n\t\t\tSmultron Web Development\t\t<\/div>\n\t\t<div class=\"\">\n\t\t\tul. S\u0142awkowska 12\t\t\t<br\/>\n\t\t\t31-014 Krak\u00f3w\t\t<\/div>\n\t\t<div>\n\t\t\tNIP:&nbsp;6762482785\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t\n<div class=\"desktop:col-start-8 desktop:col-span-5 contact-form-footer\">\n\t\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f224-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"224\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/pl\/wp-json\/wp\/v2\/posts\/3343#wpcf7-f224-o1\" method=\"post\" class=\"wpcf7-form init wpcf7-acceptance-as-validation\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"224\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f224-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"desktop:col-start-8 desktop:col-span-5\">\n  <div class=\"grid gap-[32px]\">\n    <div class=\"label-md\">\n\t\t\tWype\u0142nij poni\u017cszy formularz\n    <\/div>\n    <div class=\"grid gap-[24px]\">\n      <div class=\"form-row\">\n        <label class=\"label-xs\" for=\"msg-email\">Tw\u00f3j e-mail*<\/label>\n        <span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control\" id=\"msg-email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n      <\/div>\n      <div class=\"form-row\">\n        <label class=\"label-xs\" for=\"msg-content\">Twoja wiadomo\u015b\u0107*<\/label>\n        <span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2500\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control form-control-textarea\" id=\"msg-content\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Podziel si\u0119 szczeg\u00f3\u0142ami swojego projektu\" name=\"message\"><\/textarea><\/span>\n        <div class=\"form-text\">\n          Max. 2500 znak\u00f3w\n        <\/div>\n      <\/div>\n      <div class=\"form-row label-sm\">\n<span class=\"wpcf7-form-control-wrap\" data-name=\"acceptance-69\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acceptance-69\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\"><span><\/span><span>Zapozna\u0142em si\u0119 i akceptuj\u0119 <a href=\"\/pl\/polityka-prywatnosci\/\" class=\"underline\" target=\"_blank\" rel=\"nofollow\">Regulamin i Polityk\u0119 Prywatno\u015bci Smultron<\/a>.*<\/span><\/span><\/label><\/span><\/span><\/span>\n      <\/div>\n      <div>\n        <button type=\"submit\" class=\"button button--gradient-red\n                button--with-icon\">\n                    <span>Wy\u015blij<\/span>\n                    <span class=\"icon-arrow-right\"><\/span>\n                <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t<div class=\"contact-form-footer__success flex bg-green-2\n\t\t\t\t\t\tborder-green-3 p-[16px] gap-[16px] rounded-[8px]\n\t\t\t\t\t\tmt-[30px]\">\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\"\n\t\t\tviewBox=\"0 0 24 24\" fill=\"none\">\n\t\t\t<path d=\"M12 2C17.51 2 22 6.49 22 12C22 17.51 17.51 22 12 22C6.49 22 2 17.51 2 12C2 6.49 6.49 2 12 2ZM12 0C5.37 0 0 5.37 0 12C0 18.63 5.37 24 12 24C18.63 24 24 18.63 24 12C24 5.37 18.63 0 12 0ZM18.25 8.89L16.83 7.48L10.73 13.7L7.65 10.76L6.25 12.2L10.75 16.52L18.25 8.89Z\"\n\t\t\t\t\tfill=\"#104121\"><\/path>\n\t\t<\/svg>\n\t\t<div class=\"body-md text-green-4\">\n\t\t\t<strong>Dzi\u0119kujemy za przes\u0142anie formularza!<\/strong> Odpowiemy w ci\u0105gu 24 godzin.\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>W ostatnich latach ruch w sieci w przewa\u017caj\u0105cym stopniu przebiega z wykorzystaniem przegl\u0105darek opartych o trzy podstawowe silniki (Blink, Gecko oraz WebKit). Tak zwane modern browsers s\u0105 rozwijane i aktualizowane w modelu evergreen, bez konieczno\u015bci \u201cr\u0119cznego\u201d instalowania aktualizacji (najcz\u0119\u015bciej odbywa si\u0119 to \u201cw tle\u201d podczas restartu programu). Oznacza to, \u017ce nowe funkcjonalno\u015bci mog\u0105 by\u0107 wypuszczane [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":3705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3,40],"tags":[619],"class_list":["post-3343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programowanie","category-technologie","tag-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/posts\/3343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/comments?post=3343"}],"version-history":[{"count":0,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/posts\/3343\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/media\/3705"}],"wp:attachment":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/media?parent=3343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/categories?post=3343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/tags?post=3343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}