A startViewTransition() egy sor, a demók gyönyörűek – csak közben a böngésző nem a DOM-odat animálja, hanem lefényképezi. Ebből következik a kattinthatatlan oldal, a duplikált nevek miatti néma skip és a négy másodperces timeout is.
A @floating-ui/dom-ot hetente 80 milliószor töltjük le, hogy tooltipeket és dropdownokat pozicionáljunk JavaScriptből. A Firefox 147 óta mindhárom nagy böngésző tudja ugyanezt natív CSS-ből: anchor positioning, automatikus átfordulással a viewport szélén, görgetéskövetéssel, top layerrel. Megnéztem, mit tud, és hol vannak a csapdái.
A CSS @scope nem izolál teljesen, viszont a kaszkádba beemeli a DOM-beli közelséget. Ezért egy belső komponens szabálya ugyanazzal a specifikációval is nyerhet.
A CSS sosem tudott reagálni arra, mi van egy elem belsejében – ezért kellett mindig JavaScript. A has() ezt megoldja, de nem trükk: azért tartott ilyen sokáig, mert szétveri a böngészők érvénytelenítési logikájának alapfeltevését.
Az overflow-anchor többnyire megakadályozza a zavaró ugrásokat, saját chat- és végtelen listánál viszont összeakadhat a kézi scrollTop-kezeléssel.
A CSS custom property-k alapból szövegként viselkednek, ezért nem animálhatók – a @property at-rule típust, alapértéket és öröklődési szabályt ad hozzájuk, így végre simán animálható egy gradiens megállója vagy egy szög is.
A content-visibility CSS tulajdonság auto értéke feltételesen kapcsolja ki a renderelést az off-screen tartalmakon. Megnézzük, hogyan működik a contain-intrinsic-size, a contentvisibilityautostatechange esemény, és mikor éri meg használni.
Lebegő menük és panelek esetén a z-index gyakran a rossz eszköz. A Popover API a böngésző top layer rétegét használja, de nem váltja ki a tudatos fókusz- és pozíciókezelést.
A calc-size() és az interpolate-size végre natív CSS-megoldást ad az auto magasságra animáláshoz, JavaScript-hack nélkül – de egyelőre csak Chromium-alapú böngészőkben.