Hvis jeg skulle opdele CSS-evolutioner i kategorier, har vi bevæget os langt ud over de dage, hvor vi blot bad om grænseradius for at føle, at vi levede i fremtiden. Vi lever i øjeblikket i et øjeblik, hvor platformen giver os værktøjer, der ikke bare justerer det visuelle lag, men grundlæggende omdefinerer, hvordan vi arkitekterer grænseflader. Jeg troede, at antallet af funktioner annonceret i 2024 ikke kunne toppes. Jeg har aldrig taget så lykkeligt fejl.
Chrome-teamets "CSS Wrapped 2025" er ikke kun en liste over funktioner; det er et manifest for et dynamisk, native web. Som en person, der har brugt et par år på at dokumentere disse udviklinger - fra at definere "CSS5"-epoker til de indviklede moderne layoutværktøjer - ser jeg på dette års afslutning med en enorm følelse af spænding. Vi ser et skift i retning af "Optimeret ergonomi" og "Next-gen interactions", der giver os mulighed for at stoppe med at bekæmpe koden og begynde at forme grænseflader i deres naturlige tilstand.
I denne artikel kan du finde et omfattende kig på de iøjnefaldende funktioner fra Chromes rapport, set gennem linsen af mine seneste eksperimenter og håb for platformens fremtid.
Komponentrevolutionen: Endelig et indbygget, tilpasset udvalg
I årevis har vi stolet på tunge JavaScript-biblioteker til at style dropdowns, et "årtier gammelt problem", som platformen endelig har løst. Som jeg detaljerede i mit dybe dyk ned i historien om det tilpassede udvalg (og relaterede artikler), har dette været en lang vej, der involverer Open UI, bikeshedding-navne som
Den fantastiske tilføjelse til at tillade rigt indhold i muligheder, såsom billeder eller flag, er meget sjovt. Vi kan oprette alle mulige udvalg i dag:
Demo: Jeg oprettede en Poké-adventure-demo, der viser, hvordan det nye
Se pennen Et tilpasseligt udvalg med billeder inde i mulighederne og det valgte indhold [forked] af utilitybend.
Demo: Et omfattende kig på styling af udvalgte med kun pseudo-elementer.
Se pennen Et tilpasseligt udvalg med kun pseudo-elementer [forked] af utilitybend.
Demo: Eller du kan sparke det op med denne menuvalgsdemo ved hjælp af optgroups.
Se pennen En faktisk Select Menu med optgroups [forked] af utilitybend. Alene denne funktion signalerer et massivt skift i, hvordan vi vil bygge formularer, hvilket reducerer afhængigheder og teknisk gæld. Rullemarkører og JavaScript-karrusellens død At skabe karruseller har historisk set været et friktionspunkt mellem udviklere og kunder. Kunder elsker dem, udviklere frygter det JavaScript, der kræves for at gøre dem tilgængelige og effektive. Ankomsten af ::scroll-marker og ::scroll-button() pseudo-elementer ændrer denne dynamik fuldstændig. Disse funktioner giver os mulighed for at oprette navigationspunkter og rulleknapper udelukkende med CSS, der er native linket til rullecontaineren. Som jeg skrev på min blog, var dette Love at first slide. Evnen til at skabe en fuldt funktionel, tilgængelig skyder uden en enkelt linje JavaScript er ikke bare praktisk; det er en triumf for præstationer. Der er nogle tilgængelighedsproblemer omkring denne funktion, og selvom disse er gyldige, kan der være en måde for os udviklere at få det til at fungere. Det gode er, at alle disse UI-ændringer gør det meget nemmere end brugerdefineret DOM-manipulation og at trække rundt på aria-tags, men jeg afviger... Vi kan nu gruppere markører automatisk ved hjælp af scroll-marker-group og style knapperne ved hjælp af ankerpositionering for at placere dem præcis, hvor vi ønsker.
.carousel { overløb-x: auto; rulle-markør-gruppe: efter; /* Opretter beholderen for prikker */
/* Opret knapperne */ &::scroll-knap(inline-end),&::scroll-knap(inline-start) { indhold: " "; position: absolut; /* Brug ankerpositionering til at centrere dem */ position-anker: --karrusel; top: anker(midt); }
/* Lav markørerne på børnene */ div { &::scroll-marker { indhold: " "; bredde: 24px; grænse-radius: 50%; markør: pointer; } /* Fremhæv den aktive markør */ &::scroll-marker:target-current { baggrund: hvid; } } }
Demo: Mit eksperiment med at lave en karrusel udelukkende ud fra HTML og CSS, ved at bruge ankerpositionering til at placere knapperne.
Se Pen Carousel Pure HTML og CSS [forked] af utilitybend.
Demo: En webshop slick slider genindspilning ved hjælp af attr() til at trække baggrundsbilleder dynamisk ind i markørerne.
Se Pen Webshop slick slider genindspilning i CSS [forked] af utilitybend. Statsforespørgsler: Sticky Thing sidder fast? Snappy Thing Snapped? I lang tid har vi manglet muligheden for at vide, om en "klæbende ting sidder fast", eller om en "snasket genstand er snappet" uden at være afhængig af IntersectionObserver-hack. Chrome 133 introducerede scroll-state-forespørgsler, hvilket giver os mulighed for at forespørge disse tilstande deklarativt. Ved at indstille container-type: scroll-state, kan vi nu style børn baseret på, om de sidder fast, snappede eller flyder over. Dette er en massiv forbedring af "livskvalitet", som jeg har ventet spændt på siden CSS-dagen 2023. Den har endda udviklet sig meget, da vi også kan se rullens retning, dejligt! For et simpelt eksempel: vi kan endelig kun anvende en skygge på en header, når den faktisk klæber til toppen af viewporten: .header-container { container-type: rulle-tilstand; stilling: klæbrig; top: 0;
overskrift { overgang: box-shadow 0,5s ease-out; /* Forespørgslen kontrollerer containerens tilstand */ @container scroll-state(fast: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: En klæbrig overskrift, der kun påfører en skygge, når den faktisk sidder fast.
Se Pen Sticky-overskrifterne med scroll-state-forespørgsel, og kontroller, om det sticky-element sidder fast [forked] af utilitybend.
Demo: En liste med Pokémon-tema, der bruger scroll-state-forespørgsler kombineret med ankerpositionering til at flytte en ramme hen over den aktuelt snappede karakter.
Se Pen Scroll-state-forespørgslen for at kontrollere, hvilket element der er snappet med CSS, Pokemon-version [forked] af utilitybend. Optimeret ergonomi: Logik i CSS Sektionen "Optimeret ergonomi" i CSS Wrapped fremhæver funktioner, der gør vores arbejdsgange mere intuitive. Tre funktioner skiller sig ud som transformative for, hvordan vi skriver logik:
if() StatementsVi får endelig betingelser i CSS. If()-funktionen fungerer som en ternær operator for typografiark, hvilket giver os mulighed for at anvende værdier baseret på medier, support eller stilforespørgsler inline. Dette reducerer behovet for udførlige @media-blokke til enkelte egenskabsændringer. @funktionsfunktionerVi kan endelig flytte noget logik til et andet sted, hvilket resulterer i nogle renere filer, en ægte livskvalitetsfunktion. sibling-index() og sibling-count() Disse trætællefunktioner løser problemet med svimlende animationer eller stylingelementer baseret på listestørrelse. Som jeg udforskede i Styling af søskende med CSS har aldrig været nemmere, dette eliminerer behovet for at hårdkode tilpassede egenskaber (som --index: 1) i vores HTML.
Eksempel: Beregning af layouts Vi kan nu skrive kortfattede matematiske formler. For eksempel bliver det trivielt at forskyde en animation for kort, der kommer ind på skærmen: .card-container > * { animation: afslører 0.6s ease-out fremad; /* Ikke flere manuelle --indeksvariabler! */ animation-delay: calc(søskende-indeks() * 0.1s); }
Jeg eksperimenterede endda med at bruge disse funktioner sammen med trigonometri til at placere elementer i en perfekt cirkel uden JavaScript.
Demo: Svimlende kortanimationer dynamisk.
Se Pen Stagger-kortene ved hjælp af søskende-index() [forked] af utilitybend.
Demo: Placer genstande i en perfekt cirkel ved hjælp af søskendeindeks, søskendetæller og den nye CSS @funktion funktion.
Se pennen Cirklen ved hjælp af søskendeindeks, søskendetal og funktioner [forked] af utilitybend. Min CSS-to-do-liste: Funktioner, jeg kan ikke vente med at prøve Mens jeg har haft travlt med at skulpturere udvalg og overgange, er "CSS Wrapped 2025"-rapporten spækket med andre lækkerier, som jeg endnu ikke har haft mulighed for at fyre op i CodePen. Disse er højt på min liste til mine næste eksperimenter: Forankret containerforespørgsler Jeg brugte CSS Anchor Positioning til knapperne i min karruseldemo, men "CSS Wrapped" fremhæver enudvikling af dette: Forankret containerforespørgsler. Dette løser et problem, vi alle har haft med værktøjstip: Hvis browseren vender værktøjstip fra top til bund på grund af pladsbegrænsninger, bliver "pilen" ofte ved med at pege den forkerte vej. Med forankrede containerforespørgsler (@container anchored(fallback: flip-block)), kan vi style elementet ud fra, hvilken reserveposition browseren faktisk valgte. Indlejrede visningsovergangsgrupper View Transitions har været en revolution, men de kom med en specifik afvejning: de fladdede elementtræet, som ofte brød 3D-transformationer eller overløb: klip. Jeg har altid haft en fornemmelse af, at der manglede noget, og det var måske bare svaret. Ved at bruge view-transition-group: nearest, kan vi endelig indlejre overgangsgrupper inden for hinanden. Dette giver os mulighed for at opretholde klipningseffekter eller 3D-rotationer under en overgang - noget, der tidligere var umuligt, fordi elementerne blev hejst op til det øverste niveau. .card img { view-transition-name: foto; view-transition-group: nærmeste; /* Hold det indlejret! */ }
Typografi og former Endelig klør ergonomisten i mig efter at prøve Text Box Trim, som lover at fjerne det irriterende ekstra mellemrum over og under tekstindholdet (det førende) for endelig at opnå perfekt lodret justering. Og for den kreative side åbner corner-shape og shape()-funktionen op for ikke-rektangulære layouts, hvilket giver mulighed for "squaricles" og komplekse stier, der reagerer på CSS-variabler. Når det så er sagt, kan jeg ikke vente med at have et design fyldt med squircles! En håbefuld fremtid Vi er vidne til en verden, hvor CSS er ved at blive i stand til at håndtere logik, tilstand og komplekse interaktioner, der tidligere tilhørte JavaScript. Funktioner som moveBefore (bevarer DOM-tilstand for iframes/videoer) og attr() (bruger typer ud over strenge til farver og gitter) cementerer denne virkelighed yderligere. Selvom nogle af disse funktioner i øjeblikket er eksperimentelle eller specifikke for Chrome, er fremdriften ubestridelig. Vi må håbe på fortsat support på tværs af alle browsere gennem initiativer som Interop for at sikre, at disse funktioner bliver basislinjen. Når det er sagt, er det lige så vigtigt at have browsermotorer som at have alle disse fantastiske funktioner i "Chrome first". Disse nye funktioner skal diskuteres, pilles ved og testes, før de nogensinde lander i browsere. Det er et fantastisk øjeblik at komme ind i CSS. Vi styler ikke længere kun dokumenter; vi laver dynamiske, ergonomiske og robuste applikationer med et indbygget værktøjssæt, der er mere kraftfuldt end nogensinde. Lad os komme i gang med denne nye æra og sprede ordet. Dette er CSS Wrapped!
