Selektor prefiksa klase sada je tekst specifikacije u nacrtu Selectors 5
Nacrt od 18. avgusta dodaje odjeljak 2.1, selektori prefiksa klase, i definiše .foo-* tako da pogađa svaku klasu koja počinje tim prefiksom. Zamjenjuje zaobilaznice s atributskim selektorom koje nosi svaki dizajn sistem. Nijedan pregledač to još ne podržava, a pravilo poklapanja ima ivicu na kojoj će se ljudi saplitati: .foo-* ne pogađa foo--bar.
Izvor
Selectors Level 5, 2.1 Class Prefix SelectorsCSS Working Group, nacrti · Original objavljen 18. avgust 2026
Ako održavaš sistem pomoćnih klasa, pisao si [class^="btn-"] i [class*=" btn-"] jedno pored drugog, prvo za prvu klasu u atributu, a drugo za sve ostale, i bar dvaput si nekome objašnjavao zašto idu u paru. Radni nacrt specifikacije Selectors Level 5 od 18. avgusta 2026. sada definiše ono što zamjenjuje oba.
Šta stoji u tekstu specifikacije
Odjeljak 2.1 određuje selektor prefiksa klase kao tačku, iza koje odmah slijedi identifikator koji se završava jednom ili više crtica, a iza njega odmah zvjezdica. .foo-* je osnovni obrazac. Predstavlja element koji bi se poklopio sa selektorom klase što počinje datim prefiksom.
Uz to idu dva uslova, a drugi je onaj koji vrijedi zapamtiti. Klasa mora da nosi bar jedan znak poslije prefiksa, pa .foo-* ne pogađa golo foo-. I prvi znak poslije prefiksa ne smije biti crtica, pa .foo-* ne pogađa ni foo--bar. Ako tvoja konvencija imenovanja za modifikatore koristi dvostruku crticu, kao BEM, to pravilo odlučuje da li ti je ovaj selektor upotrebljiv ili nije.
Zašto postoji
Prijedlog je 2024. dala Lea Verou, a razlog nikad nije bio u tome šta se može, a šta ne. Oba postojeća oblika već rade. Samo su razvučeni, teško se čitaju, i taj par postoji isključivo zato što poklapanje dijela atributa ne poznaje granicu riječi unutar spiska klasa.
Selektoru koji zna da pogađa klase ne treba par. To je cijela mogućnost: isto poklapanje, izrečeno jednom, u obliku koji kaže šta znači.
Šta ovo nije
Ovo je tekst specifikacije u radnom nacrtu, što jeste stvaran korak, ali nije datum isporuke. Nijedan pregledač to ne podržava, nema stanja u Baselineu koje bi se provjerilo, a radni nacrt se do faze kandidata za preporuku još može mijenjati.
Praktična posljedica danas je u planiranju, ne u kodu. Ako se spremaš da ustališ konvenciju imenovanja kroz cio dizajn sistem, vrijedi znati da dolazi selektor koji razumije prefikse i da će dvostruku crticu tretirati kao nepoklapanje. Kad stigne, @supports selector(.foo-*) je kapija iza koje ga treba staviti.
Izvori
Povezano
Kako uvesti Baseline u CI, pa da pregledač prestane da odlučuje umjesto tebe
Trebaju ti tri paketa i dvadesetak minuta. Jedno podešavanje kaže gradnji koje pregledače gađaš, linter upozori kad stilski list pređe tu liniju, a CI to kaže na zahtjevu za spajanje umjesto da ti korisnik kaže u prijavi greške šest sedmica kasnije.
web.dev, npmprovjereno
Vremenski dijagram kao nacrt za SMIL animacije u SVG-u
Johan Grobler je 20. avgusta na Smashing Magazineu opisao postupak u kojem se složena SMIL animacija prvo nacrta kao vremenski dijagram, pa tek onda piše u oznakama. Svaka traka na dijagramu odgovara jednom elementu animate, a njena dužina i položaj postaju vrijednosti atributa dur i begin. Pošto jedan animate mijenja tačno jedno svojstvo jednog elementa, broj elemenata brzo naraste, pa učitavač od tri tačke koje se smjenjuju traži šest takvih zapisa. Tekst pokazuje i sinhronizaciju preko tuđeg početka i kraja, kroz atribut begin, te način da se poštuje postavka prefers-reduced-motion kroz element picture.
Smashing Magazineprovjereno
Firefox 154 donosi sibling-index(), sibling-count() i text-box-trim
Izdanje od 18. avgusta uvodi tri novine u CSS-u koje možeš odmah da koristiš. Funkcije sibling-index() i sibling-count() daju redni broj elementa među susjedima i njihov ukupan broj, i to neposredno u CSS-u, bez ijedne linije JavaScripta, čime prestaje potreba za ručnim upisivanjem promjenljivih poput --i radi stepenastih kašnjenja u animacijama. Uz njih stižu text-box-edge, text-box-trim i skraćeni zapis text-box, kojima se uklanja višak prostora iznad i ispod teksta, pa naslovi konačno sjedaju u mrežu onako kako izgledaju u dizajnu. Na strani JavaScripta dodate su metode includes(), join(), chunks() i windows() na prototipu iteratora.
MDNprovjereno