Preskoči na sadržaj

standardi, pregledači, CSS, Baseline

Web

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

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 Groupprovjereno

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

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

SVGSMILvremenski dijagram prije koda
Webslab signal

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

Websrednji signal

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

Websrednji signal

Novo na web platformi u julu: Firefox 153 i Chrome 151

Rachel Andrew sažima julska stabilna izdanja. Firefox 153 proširuje način na koji se tumači element select, tako da su unutar njega dozvoljeni svi ugniježdeni elementi, čime se otvara put ka zaista prilagodljivim padajućim listama bez zamjena pisanih u JavaScriptu. Isto izdanje donosi Picture-in-Picture API na desktop, Intl.Locale Info API s metodama getCalendars(), getTimeZones() i getWeekInfo(), te IndexedDB getAllRecords(). Chrome 151 dodaje CSS svojstvo ruby-overhang, ručno dodjeljivanje slotova u deklarativnom Shadow DOM-u preko atributa shadowrootslotassignment, i svojstvo animation na interfejsima AnimationEvent i TransitionEvent.

web.devprovjereno

Websrednji signal

Julski Baseline digest: Intl.Locale i rect() prelaze prag

Izdanje objavljeno 10. avgusta uvodi u stanje newly available Intl.Locale, standardan način da se oznake jezika i regiona po Unicode standardu razlože, izmijene i ispitaju, što je korisno svuda gdje se datumi, brojevi i valute formatiraju bez dodatne biblioteke. U stanje widely available prešli su Array.fromAsync(), koji asinhrone tokove podataka pretvara u niz, i CSS funkcija rect(), koja pravougaone oblike za clip-path i offset-path opisuje znatno čitljivije od ranijeg pristupa preko polygon(). Uz digest je objavljen i osvježen MDN vodič za izbor formata slika.

web.devprovjereno

Webslab signal

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.

web.devprovjereno

Websrednji signal

Kako Baseline pomaže da isporučiš manje JavaScripta

Jad Joubran daje praktičan postupak za provjeru datoteke package.json: koje se biblioteke danas mogu izbaciti zato što pregledač isti posao obavlja izvorno. Tekst objašnjava tri stanja Baselinea, limited availability, newly available i widely available, i pokazuje kako se ona koriste kao mjerilo umjesto osjećaja. Razmak između tvrdnje da je za nešto potrebna biblioteka i činjenice da pregledač to već umije zatvara se brže nego što ga većina projekata prati.

Smashing Magazineprovjereno

Websrednji signal

NoLoJS: katalog obrazaca koje danas zamjenjuju HTML i CSS

Aaron T. Grogg je sastavio pregled uobičajenih obrazaca pisanih u JavaScriptu koji se danas rješavaju čistim HTML-om i CSS-om, bez skripte ili uz najmanju moguću. Zbirka se dobro nadovezuje na tekst o Baselineu: prvo se provjeri šta platforma već umije, pa se tek onda izbacuje zavisnost. Rezultat je lakša stranica i bolji rezultati na mjerenjima Core Web Vitals.

GitHubprovjereno