Learn about ElementInternals and form-associated custom elements on the WebKit blog. webkit.org/blog/13711/ele…

WebKit formally supports the View Transitions api 🎉 github.com/WebKit/standar…

Fun tip of the day: Most syntax highlighters as well as prettier understand other web languages as template tags. You don’t need to install any packages, simply alias `String.raw`, the default (implicit) tag! Both files were identical and then processed by prettier.

A new and exciting Web Platform Feature that ships with Chrome 118 (coming to you later this week) is @​scope, a way to scope CSS rules to only part of the document. developer.chrome.com/articles/at-sc…

Scroll Detection, that’s something you need JS for, right? Guess again! Thanks to Scroll-Driven Animations you can extract the scroll velocity, allowing you to style elements based on the active scroll direction and scroll speed 🤯 Article with demos: bram.us/2023/10/23/css…

Relaxed native CSS nesting landed in all three engines. Previously a nested rule had to start with one of these chars &@:.>~+#[*. This syntax limitation has been relaxed and you can now "just" nest stuff. ✅Chrome 120 ✅Firefox 117 ✅Safari 17.2

:has, text-indent: hanging, text-wrap: balance, iframe lazy loading, … @Firefox 121 is released today with lots of presents for web developers 🥳 mozilla.org/en-US/firefox/…

finally another CSS-in-Graz meetup meetup.com/css-in-graz/ev…

The web changed today. Alternative browser engines on iOS developer.apple.com/support/altern…

PSA: The CSS Working Group just resolved to officially pursue work on native custom functions and mixins 🎉

Please take 10 seconds out of your day to sign this letter.open-web-advocacy.org

Good post from redBus on using Phil Walton 's idle-until-urgent pattern to address INP issues, causes by analytics measurements on interactions. medium.com/redbus-in/redb…

Creating a Scroll-Driven Animation is as easy as taking an existing CSS animation and declaring `animation-timeline: scroll()` on the element. The function accepts two parameters: a `<scroller>` and an `<axis>`

7 years after I saw this get demoed by Chris Coyier at CSS Day conference, WebKit now added support to animate SVG path data from within CSS through the `d` property. ```css svg:hover path { d: path("M5,2 Q 8,5 5,8"); } ``` Bug: bugs.webkit.org/show_bug.cgi?i… Demo: bram.us/2017/06/21/cha…

View transitions just shipped in Safari TP 😍 webkit.org/blog/15260/rel…

Another cool CSS Nesting trick: && allows you to double the specificity of any rule while still having a single source of truth for the selector logic.

Or use this CSS: ``` .log { scroll-snap-type: y proximity; align-content: end; } .log::after { display: block; content: ""; scroll-snap-align: end; } ``` “… remains snapped to the bottom …unless the user has scrolled away from that edge” — drafts.csswg.org/css-scroll-sna…

y'all're sleepin on the power of this #CSS codepen.io/argyleink/pen/…

"The hidden=until-found HTML attribute and the beforematch eventare now supported." Great news! Just yesterday I noticed that Firefox expanding the native <details> disclosure widget when using Find-in-page search. 🎉