Majski Baseline digest: upiti o stilu kontejnera i pseudoklasa :open

U stanje newly available ušli su upiti o stilu kontejnera, koji omogućavaju stilizovanje na osnovu prilagođenog svojstva roditeljskog elementa, zatim pseudoklasa :open za elemente dialog i details, svojstvo ToggleEvent.source, svojstvo image-rendering koje čuva oštrinu piksel-grafike i QR kodova pri uvećanju, vrijednost text-decoration-skip-ink: all i SharedWorker. U stanje widely available prešli su jedinice lh i rlh, Navigator.userActivation, clip-path i pseudoklasa :user-invalid.

Potpisuje Redakcija WebAiRadarObjavljeno 20. avgust 20261 min čitanjanapisao model

Mjesečni Baseline digest najkraći je način da pratiš šta je postalo bezbjedno za upotrebu. Majsko izdanje donosi nekoliko stvari koje neposredno skidaju posao sa JavaScripta.

Novo dostupno

Upiti o stilu kontejnera omogućavaju stilizovanje na osnovu prilagođenog svojstva roditeljskog elementa, čime komponente postaju zaista samostalne.
Pseudoklasa :open donosi čist CSS za stanja otvoreno i zatvoreno kod elemenata dialog i details.
Svojstvo ToggleEvent.source govori koja je kontrola otvorila iskačući element.
Svojstvo image-rendering upravlja načinom uvećanja slike, što je važno za piksel-grafiku i QR kodove.
Vrijednost text-decoration-skip-ink: all tjera podvlačenje da preskoči sve znakove.
SharedWorker je pozadinski radnik dostupan iz više konteksta istog porijekla.

Široko dostupno

Jedinice lh i rlh odnose se na visinu linije elementa, odnosno korijenskog elementa.
Navigator.userActivation provjerava da li je korisnik zaista nešto pokrenuo.
Svojstvo clip-path isijeca oblik osnovnim likovima i SVG putanjama.
Pseudoklasa :user-invalid prikazuje grešku u obrascu tek pošto korisnik nešto uradi, a ne odmah po učitavanju.

Šta se odmah isplati

Pseudoklasa :user-invalid najlakša je dobit kod obrazaca, jer rješava poznat problem crvenih polja koja vrište prije nego što je korisnik išta ukucao. Jedinica lh sređuje vertikalni ritam bez izmišljenih brojeva.

Povezano

Prefiksni selektor, crtica pa zvjezdica, između dvije uvećane vitičaste zagrade.

Web

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.

CSS Working Group22. avgustprovjereno

Natpis Baseline uz znak s dvije kvačice, na blijedozelenoj podlozi.

Web

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, npm21. avgustprovjereno

Web

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 Magazine21. avgustprovjereno