CSS eboluzioak kategorietan banatuko banu, muga-erradioa besterik gabe eskatzen genuen egunetatik urrunago joan gara etorkizunean bizi ginela sentitzeko. Une honetan bizi gara, non plataformak tresnak ematen dizkigun geruza bisuala doitzeaz gain, interfazeak nola arkitektatzen ditugun funtsean birdefinitzen dutenak. Uste nuen 2024an iragarritako funtzioen kopurua ezin zitekeela gainditu. Inoiz ez naiz hain zoriontsu oker egon.
Chrome taldearen "CSS Wrapped 2025" ez da funtzioen zerrenda soilik; web dinamiko eta natibo baten aldeko manifestua da. Bilakaera hauek dokumentatzen pare bat urte eman dituen pertsona naizen aldetik - "CSS5" aroak definitzen hasi eta diseinu-erabilgarri modernoen korapilatsuetaraino), ilusio handiarekin ikusten dut aurtengo laburpena. "Ergonomia Optimizatua" eta "Hurrengo belaunaldiko elkarrekintzak" alderako aldaketa bat ikusten ari gara, kodearen aurka borrokatzeari utzi eta interfazeak bere egoera naturalean zizelkatzen hasteko.
Artikulu honetan, Chrome-ren txostenaren ezaugarri nabarmenen begirada osoa aurki dezakezu, nire azken esperimentuen eta plataformaren etorkizunerako itxaropenen ikuspegitik ikusita.
Osagaien Iraultza: Azkenik, Native Personalizable Hautapena
Urte luzez, JavaScript liburutegi astunetan oinarritu gara goitibeherako estiloak egiteko, plataformak azkenean konpondu duen "hamarkada bateko arazoa". Hautapen pertsonalizagarriaren (eta erlazionatutako artikuluen) historian sakondu dudanez, ibilbide luzea izan da Open UI,
Aukeren barruan eduki aberatsa ahalbidetzeko gehigarri bikaina, hala nola irudiak edo banderak, oso dibertigarria da. Mota guztietako hautaketak sor ditzakegu gaur egun:
Demo: Poké-abentura demo bat sortu nuen,
Ikusi Boligrafoa Aukera pertsonalizagarria den aukeren barruan irudiekin eta utilitybend-ek hautatutako edukia [forked].
Demo: hautatutako sasi-elementuekin soilik estiloaren itxura zabala.
Ikusi Pluma A hautapen pertsonalizagarria utilitybend-ek sasi-elementuak soilik [forked] dituena.
Demo: Edo maila bat igo dezakezu Menu hautatzeko demo honekin optgroups erabiliz.
Ikusi Pen An benetako Aukeraketa Menua opttaldeekin [forked] utilitybend-ek. Ezaugarri honek bakarrik inprimakiak nola eraikiko ditugun aldaketa izugarria adierazten du, mendekotasunak eta zor teknikoa murriztuz. Scroll Markers Eta JavaScript Carouselaren heriotza Karruselak sortzea historikoki garatzaileen eta bezeroen arteko marruskadura puntu bat izan da. Bezeroek maite dituzte, garatzaileek beldurra dute haiek eskuragarriak eta eraginkorrak izan daitezen beharrezkoa den JavaScript. ::scroll-marker eta ::scroll-button() sasi-elementuen etorrerak dinamika hau guztiz aldatzen du. Ezaugarri hauei esker, nabigazio-puntuak eta korritze-botoiak CSSrekin soilik sor ditzakegu, nabigazio-edukiontziarekin lotuta. Nire blogean idatzi nuen bezala, hau Love at first slide izan zen. JavaScript lerro bakarrerik gabe guztiz funtzionala eta irisgarria den graduatzailea sortzeko gaitasuna ez da erosoa; errendimendurako garaipen bat da. Ezaugarri honen inguruan erabilerraztasun-kezka batzuk daude, eta horiek baliozkoak badira ere, baliteke garatzaileok funtzionatzeko modu bat egotea. Gauza ona da UI aldaketa hauek DOM pertsonalizatuaren manipulazioa eta aria etiketen inguruan arrastatzea baino askoz errazten ari direla, baina alde egiten dut... Orain markatzaileak automatikoki taldeka ditzakegu korritze-markagailu-taldea erabiliz eta botoiak aingura-kokapena erabiliz estiloa nahi dugun tokian kokatzeko.
.karrusela { gainezka-x: auto; scroll-marker-group: ondoren; /* Puntuen edukiontzia sortzen du */
/* Sortu botoiak */ &::korritze-botoia (lerroan-amaiera),&::korritze-botoia (lerroan-hasi) { edukia: " "; postua: absolutua; /* Erabili aingura kokatzea horiek zentratzeko */ posizio-aingura: --karrusel; goian: aingura(erdian); }
/* Sortu markatzaileak haurrengan */ div { &::korritze-markatzailea { edukia: " "; zabalera: 24px; muga-erradioa: %50; kurtsorea: erakuslea; } /* Nabarmendu markatzaile aktiboa */ &::scroll-marker:target-current { hondoa: zuria; } } }
Demo: Nire esperimentua HTML eta CSS hutsez karrusel bat sortzeko, botoiak jartzeko aingura-kokatzea erabiliz.
Ikusi Pen Carousel Pure HTML eta CSS [forked] utilitybend-ek.
Demo: Webshop slick slider remake bat attr() erabiliz atzeko planoko irudiak markatzaileetara dinamikoki ateratzeko.
Ikusi Pen Webshop slick graduatzaileen bertsioa CSS-n [forked] utilitybend-ek. Estatuko kontsultak: gauza itsaskorra trabatuta? Snappy Thing Snappy? Aspalditik, IntersectionObserver-en hacketan fidatu gabe "gauza itsatsi bat itsatsita dagoen" edo "elementu txukun bat apurtu den" jakiteko gaitasunik ez dugu. Chrome 133-k korritze-egoeraren kontsultak sartu zituen, egoera horiek deklaratiboki kontsultatzeko aukera emanez. Edukiontzi-mota: korritze-egoera ezarriz, orain haurrak estiloa ditzakegu itsatsita, atxilotuta edo gainezka dauden ala ez. "Bizi-kalitatea" hobekuntza izugarria da, 2023ko CSS Egunaz geroztik irrikaz itxaroten ari naizena. Asko eboluzionatu du korrituaren norabidea ere ikus dezakegunez, ederra! Adibide sinple baterako: azkenik, goiburu bati itzal bat aplika diezaiokegu soilik bistaren goialdean itsatsita dagoenean: .header-container { edukiontzi-mota: korritze-egoera; posizioa: itsaskorra; goian: 0;
goiburua { trantsizioa: kutxa-itzala 0,5 segundoko erraztasuna; /* Kontsultak edukiontziaren egoera egiaztatzen du */ @edukiontziaren korritze-egoera (trabatuta: goian) { kutxa-itzala: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: goiburu itsaskorra, itzal bat benetan itsatsita dagoenean soilik aplikatzen duena.
Ikusi Pen Sticky goiburuak korritze-egoeraren kontsultarekin, elementu itsaskorra utilitybend-en bidez itsatsita [forked] dagoen egiaztatuz.
Demo: Pokemonen gaiko zerrenda bat, korritze-egoeraren kontsultak erabiltzen dituena, aingura-kokapenarekin konbinatuta, marko bat unean ateratako karakterearen gainean mugitzeko.
Ikusi Pen Scroll-state-kontsulta CSS, Pokemon bertsioa [forked], utilitybend-ek zein elementu atxekitzen duen egiaztatzeko. Ergonomia optimizatua: Logika CSSn CSS Wrapped-en "Ergonomia optimizatua" atalean gure lan-fluxuak intuitiboagoak egiten dituzten ezaugarriak nabarmentzen dira. Hiru ezaugarri nabarmentzen dira eraldatzaile gisa logika idazteko moduan:
if() AdierazpenakAzkenean baldintzatzaileak lortzen ari gara CSSn. If() funtzioak estilo-orrietarako operadore ternario baten moduan jokatzen du, euskarrietan, euskarrietan edo estilo-kontsultetan oinarritutako balioak lerroan aplikatzeko aukera emanez. Honek @media bloke zehatzen beharra murrizten du propietate bakarreko aldaketak egiteko. @funtzio-funtzioak Azkenean, logika batzuk beste leku batera eraman ditzakegu, fitxategi garbiago batzuk sortuz, benetako bizi-kalitatearen ezaugarria. sibling-index() eta sibling-count()Zuhaitzak zenbatzeko funtzio hauek zerrendaren tamainan oinarritutako animazioak edo elementuak estilizatzearen arazoa konpontzen dute. Estiloa anai-arrebak CSS-ekin arakatu dudanez, ez da inoiz erraza izan, honek propietate pertsonalizatuak gogor kodetzeko beharra ezabatzen du (--index: 1) gure HTMLan.
Adibidea: Diseinuak kalkulatzea Orain formula matematiko zehatzak idatz ditzakegu. Adibidez, pantailan sartzen diren txartelen animazio bat mailakatzea hutsala bihurtzen da: .card-container > * { animazioa: agerian 0.6s-ko erraztasuna aurrera; /* Ez dago eskuzko --index aldagai gehiago! */ animazio-atzerapena: calc(anai-indizea() * 0,1s); }
Funtzio hauek trigonometriarekin batera erabiltzen esperimentatu nuen elementuak zirkulu perfektu batean jartzeko JavaScript gabe.
Demo: txartelen animazioak dinamikoki ikaragarriak.
Ikusi Pen Stagger txartelak utilitybend-ek sibling-index() [forked] erabiliz.
Demo: elementuak zirkulu perfektu batean jartzea anai-indizea, anai-zenbaketa eta CSS @function funtzio berria erabiliz.
Ikusi Boligrafoa zirkulua utilitybend-ek anai-indizea, anai-zenbaketa eta [forked] funtzioak erabiliz. Nire CSS egitekoen zerrenda: Probatzeko itxaron ezin dudan eginbideak Hautaketak eta trantsizioak zizelkatzen lanpetuta egon naizen bitartean, "CSS Wrapped 2025" txostena CodePen-en pizteko aukera izan ez dudan beste ontasun batzuekin dago. Hauek dira nire hurrengo esperimentuetarako zerrendan: Ainguratutako edukiontzien kontsultak CSS Anchor Positioning erabili dut nire karruselaren demoko botoietarako, baina "CSS Wrapped" bat nabarmentzen du.honen bilakaera: Anchored Container Queries. Honek denok izan dugun arazo bat konpontzen du tresna-aholkuekin: arakatzaileak tresna-aholkua goitik behera iraultzen badu espazio-murrizketak direla eta, "gezia" sarritan okerreko norabidean geratzen da. Ainguratutako edukiontzien kontsultekin (@container anchored(fallback: flip-block)), elementuari nabigatzaileak benetan aukeratu duen ordezko posizioaren arabera estiloa dezakegu. Habiaratutako Ikuspegi Trantsizio Taldeak Ikusi Trantsizioak iraultza bat izan da, baina truke zehatz batekin etorri ziren: elementuen zuhaitza berdindu zuten, eta horrek askotan 3D transformazioak edo gainezka egiten zituen: clip. Beti izan nuen zerbait falta zitzaiola, eta baliteke hau erantzuna besterik ez izatea. View-transition-group: closeest erabiliz, azkenean trantsizio-taldeak elkarren barruan habia ditzakegu. Horri esker, trantsizio batean mozketa-efektuak edo 3D-ko biraketak mantentzea ahalbidetzen dugu, lehen ezinezkoa zen zerbait, elementuak maila gorenera igo zirelako. .txartelaren irudia { view-transition-name: argazkia; ikuspegi-trantsizio-talde: hurbilena; /* Jarrai ezazu habiatuta! */ }
Tipografia eta Formak Azkenik, nire baitan ergonomistak Text Box Trim probatzeko azkura dago, testu-edukiaren gainean eta azpian dagoen zuriune gogaikarri hori kenduko duela agintzen baitu (lehenengoa) lerrokatze bertikal perfektua lortzeko. Eta sormenaren aldetik, izkina-forma eta shape() funtzioak diseinu ez-angeluzuzenak irekitzen ari dira, CSS aldagaiei erantzuten dieten "squaricles" eta bide konplexuak ahalbidetuz. Hori esanda, ezin dut itxaron diseinu bat urtxintzez beteta edukitzeko! Etorkizun Itxaropentsua Mundu bat ikusten ari gara, non CSS lehen JavaScript-ari zegozkion logika, egoera eta interakzio konplexuak kudeatzeko gai bihurtzen ari den. MoveBefore (iframes/bideoetarako DOM egoera mantentzea) eta attr() bezalako ezaugarriek (koloreetarako eta saretaetarako kateetatik haratagoko motak erabiliz) errealitate hau are gehiago finkatzen dute. Ezaugarri horietako batzuk gaur egun Chrome-ren esperimentalak edo espezifikoak diren arren, bultzada ukaezina da. Arakatzaile guztietan laguntza etengabea izatea espero behar dugu Interop bezalako ekimenen bidez, gaitasun horiek oinarri bilakatzea ziurtatzeko. Hori esanda, arakatzaile-motorrak izatea bezain garrantzitsua da "Chrome lehenik" eginbide ikaragarri horiek guztiak izatea. Ezaugarri berri hauek eztabaidatu, landu eta probatu behar dira nabigatzaileetan lurreratu aurretik. Momentu zoragarria da CSSn sartzeko. Jada ez gara dokumentuak estilizatu besterik ez; aplikazio dinamiko, ergonomiko eta sendoak lantzen ari gara, inoiz baino indartsuagoa den jatorrizko tresna-kit batekin. Goazen aro berri honekin eta zabal dezagun. Hau CSS bilduta dago!
