Preskoči na sadržaj
Šta tražiš?. Otvori pretraguEN
marke i prečice
Websrednji signalprovjerenopodrška provjerena 22. avgust 2026

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.

Potpisuje Redakcija WebAiRadarObjavljeno 2 min čitanjanapisao model

Izvor

Firefox 154 donosi sibling-index(), sibling-count() i text-box-trim

MDN Blog · Original objavljen 18. avgust 2026

Firefox 154 izašao je 18. avgusta. Tri novine u CSS-u rješavaju probleme za koje se dosad obavezno pisao JavaScript ili se ručno računalo u dizajnu: brojanje susjednih elemenata i uklanjanje viška prostora oko teksta.

Funkcije sibling-index() i sibling-count()

Ove dvije funkcije daju CSS-u ono što je dosad dolazilo isključivo iz šablona ili iz skripte. Prva vraća redni broj elementa među susjedima, a druga njihov ukupan broj, računajući i sam element.

Jedan detalj se lako previdi: brojanje počinje od jedinice, a ne od nule, dakle kao kod pseudoklase :nth-child(), a ne kao kod niza u JavaScriptu.

  • Stepenasto kašnjenje animacije se piše kao animation-delay: calc(sibling-index() * 60ms), umjesto ručno upisanih promjenljivih na svakoj stavci.
  • Prelaz boje kroz listu se dobija tako što se boja, prozirnost ili pomjeraj izračunaju iz odnosa sibling-index() i sibling-count().
  • Kod dinamičkih lista vrijednosti se preračunavaju same čim se stavka doda ili obriše, bez ijedne linije skripte.

Svojstva text-box-trim i text-box-edge

Svaki font nosi višak vertikalnog prostora iznad velikih slova i ispod osnovne linije. Zbog toga naslov u pregledaču nikada ne sjedne tačno onako kako izgleda u dizajnu, pa se razlika godinama krpila negativnim marginama koje pucaju čim se promijeni font ili veličina.

Ove deklaracije, zajedno sa skraćenim zapisom text-box, uklanjaju taj višak na nivou samog tekstualnog okvira, pa razmaci u mreži i u flex rasporedu konačno postaju predvidivi. Korist je najveća kad jedan blok miješa fontove različitih metrika.

JavaScript i razvojni alati

  • Prototip iteratora dobija metode includes(), join(), chunks() i windows(); od posljednje dvije, chunks() dijeli iterator na uzastopne nizove, a windows() pravi klizeći prozor.
  • Preglednik JSON-a u alatima za programere prikazuje putanju izabranog unosa kao niz mrvica na dnu panela.
  • WebDriver BiDi dobija browsingContext.startScreencast i stopScreencast za snimanje videa, uz praćenje identifikatora preuzimanja.

Iza zastavice, za sada

Nekoliko mogućnosti je stiglo, ali je podrazumijevano isključeno. Vrijedi ih pratiti jer najavljuju sljedeći krug.

  • Svojstvo line-clamp bez prefiksa, iza postavke layout.css.line-clamp.enabled.
  • CSS funkcija progress(), za vrijednost izračunatu iz napretka između najmanje i najveće granice.
  • Procentualne vrijednosti za text-decoration-inset, računate prema veličini fonta.
  • CSS Typed Object Model Level 1, zasad samo u razvojnom izdanju.
„The index starts at 1, not 0.“
OznakeFirefoxCSStipografijaanimacijeJavaScript

Povezano

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