Nëse do t'i ndaja evolucionet e CSS në kategori, ne kemi kaluar shumë përtej ditëve kur thjesht kërkuam një rreze kufitare për t'u ndjerë sikur po jetonim në të ardhmen. Aktualisht po jetojmë në një moment kur platforma po na jep mjete që jo vetëm e modifikojnë shtresën vizuale, por në thelb ripërcaktojnë mënyrën se si ne arkitektojmë ndërfaqet. Mendova se numri i veçorive të shpallura në 2024 nuk mund të tejkalohej. Nuk kam gabuar kurrë kaq lumturisht.
"CSS Wrapped 2025" i ekipit të Chrome nuk është vetëm një listë karakteristikash; është një manifest për një ueb dinamik dhe vendas. Si dikush që ka shpenzuar disa vite duke dokumentuar këto evolucion - nga përcaktimi i epokave "CSS5" deri te ndërlikimet e shërbimeve moderne të paraqitjes - e gjej veten duke e parë përfundimin e këtij viti me një ndjenjë të madhe emocioni. Ne po shohim një zhvendosje drejt "Ergonomisë së Optimizuar" dhe "Ndërveprimeve të gjeneratës tjetër" që na lejojnë të ndalojmë së luftuari kodin dhe të fillojmë të skalitim ndërfaqet në gjendjen e tyre natyrore.
Në këtë artikull, ju mund të gjeni një vështrim gjithëpërfshirës të veçorive të shquara nga raporti i Chrome, të parë përmes objektivit të eksperimenteve të mia të fundit dhe shpresave për të ardhmen e platformës.
Revolucioni i komponentëve: Më në fund, një përzgjedhje e personalizueshme vendase
Për vite të tëra, ne jemi mbështetur në biblioteka të rënda JavaScript për të stiluar reduktimet, një "problem i vjetër dekadash" që platforma e ka zgjidhur më në fund. Siç e kam detajuar në zhytjen time të thellë në historinë e përzgjedhjes së personalizueshme (dhe artikujve të lidhur), kjo ka qenë një rrugë e gjatë që përfshin Open UI, hedhjen e emrave të biçikletave si
Shtesa fantastike për të lejuar përmbajtje të pasur brenda opsioneve, të tilla si imazhe ose flamuj, është shumë argëtuese. Ne mund të krijojmë të gjitha llojet e përzgjedhjeve në ditët e sotme:
Demo: Krijova një demonstrim të aventurës Poké që tregon se si elementi i ri
Shihni stilolapsin Një përzgjedhje e personalizueshme me imazhe brenda opsioneve dhe përmbajtjen e zgjedhur [të dendur] nga utilitybend.
Demo: Një vështrim gjithëpërfshirës në stilimin e të zgjedhurve vetëm me pseudo-elemente.
Shihni stilolapsin Një përzgjedhje e personalizueshme me vetëm pseudo-elementë [të dendur] nga utilitybend.
Demo: Ose mund ta ngrini një nivel me këtë demonstrim të përzgjedhjes së menysë duke përdorur grupet e opsioneve.
Shihni stilolapsin Një menu aktuale e përzgjedhjes me grupe opsionesh [të dendura] nga utilitybend. Vetëm kjo veçori sinjalizon një ndryshim masiv në mënyrën se si do të ndërtojmë formularët, duke reduktuar varësitë dhe borxhin teknik. Shënuesit e lëvizjes dhe vdekja e karuselit të JavaScript Krijimi i karuselit ka qenë historikisht një pikë fërkimi midis zhvilluesve dhe klientëve. Klientët i duan ata, zhvilluesit i tremben JavaScript-it që kërkohet për t'i bërë ato të aksesueshme dhe performuese. Ardhja e pseudo-elementeve ::scroll-marker dhe ::scroll-button() ndryshon tërësisht këtë dinamikë. Këto veçori na lejojnë të krijojmë pika navigimi dhe butona lëvizjeje thjesht me CSS, të lidhura në mënyrë origjinale me kontejnerin e lëvizjes. Siç shkrova në blogun tim, kjo ishte rrëshqitja Dashuria në fillim. Aftësia për të krijuar një rrëshqitës plotësisht funksional dhe të aksesueshëm pa një rresht të vetëm JavaScript nuk është thjesht i përshtatshëm; është një triumf për performancën. Ka disa shqetësime për aksesueshmërinë rreth kësaj veçorie, dhe edhe pse këto janë të vlefshme, mund të ketë një mënyrë që ne zhvilluesit ta bëjmë atë të funksionojë. Gjëja e mirë është se të gjitha këto ndryshime të ndërfaqes së përdoruesit po e bëjnë shumë më të lehtë sesa manipulimi i personalizuar i DOM-it dhe zvarritja e etiketave të aria-s, por unë devijoj… Tani mund t'i grupojmë shënuesit automatikisht duke përdorur grup-shënues-lëvizje dhe t'i stilojmë butonat duke përdorur pozicionimin e ankorimit për t'i vendosur saktësisht aty ku duam.
.karusel { tejmbushje-x: auto; scroll-marker-group: after; /* Krijon kontejnerin për pika */
/* Krijo butonat */ &::scroll-button (inline-fund),&::scroll-button(inline-start) { përmbajtja: " "; pozicioni: absolut; /* Përdor pozicionimin e ankorimit për t'i përqendruar ato */ pozicion-spirancë: --carousel; krye: spirancë (në qendër); }
/* Krijo shënuesit tek fëmijët */ div { &::lëvizës-shënues { përmbajtja: " "; gjerësia: 24 px; kufi-rrezja: 50%; kursori: treguesi; } /* Theksoni shënuesin aktiv */ &::scroll-marker:target-current { sfond: i bardhë; } } }
Demo: Eksperimenti im duke krijuar një karusel thjesht nga HTML dhe CSS, duke përdorur pozicionimin e ankorimit për të vendosur butonat.
Shih Pen Carousel Pure HTML dhe CSS [forked] nga utilitybend.
Demo: Një ribërje e shkëlqyeshme e rrëshqitësit në Webshop duke përdorur attr() për të tërhequr imazhet e sfondit në mënyrë dinamike në shënues.
Shihni ribërjen e shkëlqyeshme të rrëshqitësit të Pen Webshop në CSS [forked] nga utilitybend. Pyetjet e gjendjes: Gjë e ngjitshme ka ngecur? Është këputur gjëja e shpejtë? Për një kohë të gjatë, na ka munguar aftësia për të ditur nëse një "gjë ngjitëse është mbërthyer" ose nëse "një artikull i prekshëm është këputur" pa u mbështetur në hakimet e IntersectionObserver. Chrome 133 prezantoi pyetjet e gjendjes së lëvizjes, duke na lejuar të kërkojmë këto gjendje në mënyrë deklarative. Duke vendosur tipin e kontejnerit: gjendjen rrotulluese, tani mund t'i stilojmë fëmijët bazuar në faktin nëse janë të ngecur, të këputur ose të tejmbushur. Ky është një përmirësim masiv i "cilësisë së jetës" që e kam pritur me padurim që nga Dita e CSS 2023. Madje ka evoluar shumë pasi mund të shohim edhe drejtimin e rrotullës, bukuroshe! Për një shembull të thjeshtë: më në fund mund të aplikojmë një hije në një kokë vetëm kur ajo është në të vërtetë ngjitur në krye të portit të shikimit: .header-container { kontejner-lloj: rrotull-state; pozicioni: ngjitës; krye: 0;
koka { tranzicioni: kuti-hije 0,5s lehtësim jashtë; /* Pyetja kontrollon gjendjen e kontejnerit */ @container scroll-state(mbërthyer: lart) { kuti-hije: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Një kokë ngjitëse që aplikon një hije vetëm kur është mbërthyer në të vërtetë.
Shihni titujt e stilolapsit Sticky me pyetjen e gjendjes së lëvizjes, duke kontrolluar nëse elementi ngjitës është i mbërthyer [i pirun] nga utilitybend.
Demo: Një listë me temë Pokemon që përdor pyetjet e gjendjes së lëvizjes të kombinuara me pozicionimin e ankorimit për të lëvizur një kornizë mbi karakterin e këputur aktualisht.
Shihni pyetjen e gjendjes së Pen Scroll për të kontrolluar se cili artikull është këputur me CSS, versioni Pokemon [i pirun] nga utilitybend. Ergonomia e optimizuar: Logjika në CSS Seksioni "Ergonomia e Optimizuar" e CSS Wrapped thekson veçori që i bëjnë rrjedhat tona të punës më intuitive. Tre veçori dallohen si transformuese për mënyrën se si shkruajmë logjikën:
if() Deklaratat Më në fund po marrim kushte në CSS. Funksioni if() vepron si një operator tresh për fletët e stilit, duke na lejuar të aplikojmë vlera të bazuara në media, mbështetje ose pyetje të stilit në linjë. Kjo zvogëlon nevojën për blloqe të hollësishme @media për ndryshime të veçanta të vetive. @function funksionetMë në fund mund të zhvendosim disa logjikë në një vend tjetër, duke rezultuar në disa skedarë më të pastër, një veçori reale e cilësisë së jetës. sibling-index() dhe sibling-count()Këto funksione të numërimit të pemëve zgjidhin çështjen e animacioneve marramendëse ose të stilimit të artikujve bazuar në madhësinë e listës. Siç kam eksploruar në Styling vëllezërit e motrat me CSS nuk ka qenë kurrë më e lehtë, kjo eliminon nevojën për të koduar veçori të personalizuara (si --index: 1) në HTML-në tonë.
Shembull: Llogaritja e Layouts Tani mund të shkruajmë formula koncize matematikore. Për shembull, tronditja e një animacioni për kartat që hyjnë në ekran bëhet e parëndësishme: .card-container > * { animacion: zbuloni 0.6s lehtësim përpara; /* Nuk ka më variabla manuale --indeksi! */ animacion-vonesa: calc(sibling-index() * 0.1s); }
Unë madje eksperimentova me përdorimin e këtyre funksioneve së bashku me trigonometrinë për të vendosur artikujt në një rreth të përsosur pa ndonjë JavaScript.
Demo: Animacione marramendëse të kartave në mënyrë dinamike.
Shikoni kartat Pen Stagger duke përdorur sibling-index() [forked] nga utilitybend.
Demonstrimi: Vendosja e artikujve në një rreth të përsosur duke përdorur indeksin e vëllezërve, numrin e vëllezërve dhe të një funksioni të ri CSS @function.
Shihni stilolapsin Rrethi duke përdorur indeksin e vëllezërve, numrin e vëllezërve dhe funksionet [përkëputur] nga utilitybend. Lista ime e detyrave CSS: Karakteristikat që mezi pres t'i provoj Ndërsa kam qenë i zënë me skulpturimin e përzgjedhjeve dhe tranzicioneve, raporti "CSS Wrapped 2025" është i mbushur me të mira të tjera që nuk kam pasur ende mundësinë t'i ndez në CodePen. Këto janë të larta në listën time për eksperimentet e mia të ardhshme: Pyetjet e ankoruara të kontejnerëve Kam përdorur CSS Anchor Positioning për butonat në demonstrimin tim të karuselit, por "CSS Wrapped" thekson njëevolucioni i kësaj: Pyetjet e ankoruara të kontejnerëve. Kjo zgjidh një problem që të gjithë kemi pasur me këshillat e veglave: nëse shfletuesi e kthen këshillën e veglave nga lart poshtë për shkak të kufizimeve të hapësirës, "shigjeta" shpesh qëndron në drejtimin e gabuar. Me pyetjet e ankoruar të kontejnerit (@container anchored(fallback: flip-block)), ne mund të stilojmë elementin bazuar në pozicionin e rikthimit që ka zgjedhur në të vërtetë shfletuesi. Grupet e tranzicionit të pamjes së mbivendosur Shiko Tranzicionet kanë qenë një revolucion, por ato erdhën me një kompensim specifik: ata rrafshuan pemën e elementit, e cila shpesh thyente transformimet 3D ose tejmbushjen: clip. Gjithmonë kisha një ndjenjë se po i mungonte diçka, dhe kjo mund të ishte vetëm përgjigja. Duke përdorur view-transition-group: afërt, më në fund mund të vendosim grupe tranzicioni brenda njëri-tjetrit. Kjo na lejon të ruajmë efektet e prerjes ose rrotullimet 3D gjatë një tranzicioni - diçka që më parë ishte e pamundur sepse elementët u ngritën deri në nivelin më të lartë. .card img { pamje-tranzicioni-emri: foto; pamje-tranzicioni-grupi: më i afërti; /* Mbaje folenë! */ }
Tipografia dhe forma Së fundi, ergonomisti në mua kërkon të provojë Text Box Trim, i cili premton të heqë atë hapësirë të bardhë shtesë të bezdisshme mbi dhe poshtë përmbajtjes së tekstit (udhëheqës) për të arritur përfundimisht shtrirjen e përsosur vertikale. Dhe për anën krijuese, forma e këndit dhe funksioni i formës () po hapin paraqitje jo drejtkëndore, duke lejuar "katrore" dhe shtigje komplekse që u përgjigjen variablave CSS. Thënë kjo, mezi pres të kem një dizajn plot me ketra! Një e ardhme shpresëdhënëse Ne jemi dëshmitarë të një bote ku CSS po bëhet e aftë të trajtojë logjikën, gjendjen dhe ndërveprimet komplekse që më parë i përkisnin JavaScript-it. Veçoritë si moveBefore (ruajtja e gjendjes DOM për iframe/video) dhe attr() (përdorimi i llojeve përtej vargjeve për ngjyrat dhe rrjetat) e forcojnë më tej këtë realitet. Ndërsa disa nga këto veçori janë aktualisht eksperimentale ose specifike për Chrome, momenti është i pamohueshëm. Ne duhet të shpresojmë për mbështetje të vazhdueshme në të gjithë shfletuesit përmes iniciativave si Interop për të siguruar që këto aftësi të bëhen baza. Thënë kjo, të kesh motorë të shfletuesit është po aq i rëndësishëm sa të kesh të gjitha këto veçori të mrekullueshme në "Chrome pari". Këto veçori të reja duhet të diskutohen, rregullohen dhe testohen përpara se të futen ndonjëherë në shfletues. Është një moment fantastik për të hyrë në CSS. Ne nuk jemi më thjesht stilim dokumentesh; ne po krijojmë aplikacione dinamike, ergonomike dhe të fuqishme me një paketë veglash vendase që është më e fuqishme se kurrë. Le të vazhdojmë me këtë epokë të re dhe të përhapim fjalën. Ky është CSS i mbështjellë!
