Bram.us·1yMore options for styling <details>
Chrome 131 introduces new styling options for <details> and <summary> elements, allowing properties other than 'block' and the use of the ::details-content pseudo-element. While currently only supported in Chrome, these features are expected in Safari soon.
Theo - t3․gg·1yTailwind just broke a TON of websites...
Tailwind CSS recently faced an issue where custom text selection colors broke in the latest version of Chrome (131). This problem arose due to changes in Chrome's handling of CSS variables and selection properties. Although quickly addressed, the incident highlights the complexities of web development and browser compatibility, emphasizing the need for cautious use of advanced CSS features. Fixes include using specific Tailwind settings or waiting for Chrome updates.
Foojay.io·1yFront End Debugging Part 2: Console.log() to the Max
Explore advanced usage of `console.log()` for front-end debugging, including leveraging log levels, customizing output with CSS, stack tracing, assertions, and printing tables for clearer data visualization. Discover methods for copying objects to the clipboard, inspecting with console.dir(), counting function calls, organizing logs with groups, and utilizing Chrome-specific debugging features such as monitoring functions and events.
Bram.us·1yCSS Wrapped 2024
The Chrome DevRel team has published CSS Wrapped 2024, an end-of-year overview detailing 17 new CSS and Web UI features in Chrome and The Web Platform. These features are categorized into Components, Interactions, and Developer Experience. The project was a collaborative effort with contributions from several team members.
Bram.us·1yMisconceptions about View Transitions
The View Transition API allows seamless transitions between views on single or multi-page websites, providing native-like experiences for users. Common misconceptions debunked include misunderstandings about screenshots, multiple view transitions, browser support, incremental rendering, and performance. Progressive enhancement ensures compatibility, and browsers maintain existing rendering heuristics.
Smashing Magazine·1yAn Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine
CSS scroll-driven animations allow for dynamic effects linked to scrolling without the need for JavaScript or external libraries. These animations run on the main thread, providing smooth, high-performance experiences. They are currently supported in Chrome and Firefox (with a flag), but not yet in Safari. Scroll progress timelines and view progress timelines are two types of scroll-driven animations that can be easily implemented and customized in CSS.