Inautilo2d ago

#Development #Approaches
Inverted themes with light-dark() · Flipping color modes with container style queries https://ilo.im/16c2kq

_____
#ColorSchemes #LightMode #DarkMode #ProgressiveEnhancement #Polyfill #Browser #WebDev #Frontend #CSS #JavaScript

Inverted themes with light-dark()

We rolled out adaptive light-dark() support on our design system themes and it’s been a delightful upgrade. Creating light and dark variable sets isn’t difficult, but delivery has trade-offs. Most apps that do this probably ship both sets of token values in a single stylesheet. That’s fine until you have multiple kilobytes of duplicate definitions. To get around the performance problems we built two separate stylesheets –which is also not great– but my coworker Zacky found a good trick with <link disabled> to make it tolerable. Ultimately, we wanted to offer a single stylesheet for our human (and agent) friends to control theming.

daverupert.com
pablolarahApr 7

🌛☀️ Inverted themes with light-dark()
by Dave Rupert
@davatron5000 @davatron5000.bsky.social

#css #darkmode #webdev #Polyfill

https://daverupert.com/2026/04/inverted-light-dark/

InautiloMar 23

#Development #Introductions
Container Timing · A new API to measure web component performance https://ilo.im/16bf65

_____
#Metrics #Measurement #WebComponents #APIs #Polyfill #Chromium #Browsers #WebPerf #WebDev #Frontend

Container Timing: measuring web components performance

An introduction to Container Timing, a new web performance API that lets developers measure when complex components finish painting and shows how to use its native implementation now available behind a Chromium feature flag.

Web StandardsMar 17

Introducing view-transitions-mock, a non-visual polyfill for same-document view transitions. @bramus built a spec-compliant JavaScript implementation of the View Transition API that works across all browsers. It handles document.startViewTransition(), the ViewTransition class with its promises, and view transition types. Animations are skipped in unsupported browsers, but DOM updates work as expected. #viewtransition #polyfill

https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/

Веб-стандартыMar 17

Представляем view-transitions-mock — невизуальный полифил для view transition в рамках документа. Брамус Ван Дамм создал JavaScript-реализацию View Transition API совместимую со спецификацией, которая работает во всех браузерах без кучи условий в коде. Она обрабатывает document.startViewTransition(), класс ViewTransition с промисами и типы View Transition. Обновления DOM идентичны нативным, но анимации пропускаются в старых браузерах. #viewtransition #polyfill

https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/

InautiloMar 11

#Development #Launches
Introducing CSS ‘view-transitions-mock’ · A non-visual polyfill for same-document view transitions https://ilo.im/16bak0

_____
#ModernCSS #ViewTransitions #Polyfill #APIs #Browsers #WebDev #Frontend #CSS #JavaScript

Introducing view-transitions-mock: A non-visual Polyfill for Same-Document View Transitions

View Transitions are a powerful Modern Web feature allow for smooth seamless animated transitions two between different states of a web page. They can make for a much more pleasant user experience, but as with any new web platform feature, browser support is not yet fully universal so you need to add some fallback logic to your code.view-transitions-mock bridges that gap. It is a spec-compliant JavaScript implementation of Same-Document View Transitions that polyfills the entire JavaScript API surface of the spec, but that doesn’t do the animation bits.

Bram.us
Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and BackendFeb 18

Replicating a Switch Input (and Polyfill)

https://fed.brid.gy/r/https://frontendmasters.com/blog/replicating-a-switch-input-and-polyfill/

Веб-стандартыFeb 9

Полифил для HTML-элемента switch. Томас Штайнер предлагает полифил, который даёт почти нативный <input type="checkbox" switch> в браузерах помимо Safari: с доступностью, поддержкой высокой контрастности и загрузкой без FOUC-прыжков. #html #polyfill

https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

Web StandardsFeb 9

A polyfill for the HTML switch element. @tomayac shares a polyfill, bringing near-native <input type="checkbox" switch> to browsers beyond Safari, with accessibility mapping, high-contrast tweaks, and FOUC-safe loading. #html #polyfill

https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

InautiloJan 23

#Development #Previews
When will CSS Grid Lanes arrive? · “It’s going to arrive sooner than you think.” https://ilo.im/16a21t

_____
#ModernCSS #CssGrid #Layout #Masonry #Polyfill #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS

When will CSS Grid Lanes arrive? How long until we can use it?

Anytime an exciting new web technology starts to land in browsers, developers want to know “when in the world am I going to be able to use this?” Currently, the finalized syntax for Grid Lanes is available in Safari Technology Preview.

WebKit