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

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 ima 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.