Chrome 131 updates the inheritance behavior for ::selection and ::target-text pseudo-elements, aiming for consistency with other highlight styles
https://developer.chrome.com/blog/selection-styling
https://developer.chrome.com/blog/selection-styling
Chrome for Developers
Inheritance changes for CSS selection styling | Blog | Chrome for Developers
A change to CSS highlight inheritance is coming in Chrome 134.
Create a fan-out animation using CSS Grid and the @property feature to animate item expansion smoothly
https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/
https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/
Frontend Masters
CSS Fan Out with Grid and @property
A “fan out” is an expanding animation where a group of items appear one after another, next to each other, as though they were spread out from a stack. There’s usually a subtle bounciness in the reveal.
Learn how to use appropriate wording for ending user interactions to improve clarity and user experience
https://css-tricks.com/close-exit-cancel-how-to-end-user-interactions-well/
https://css-tricks.com/close-exit-cancel-how-to-end-user-interactions-well/
CSS-Tricks
Close, Exit, Cancel: How To End User Interactions Well | CSS-Tricks
What’s in a word? Actions. In the realm of user interfaces, a word is construed as the telltale of a control’s action. Sometimes it points us in the correct
Learn to create dynamic 3D grid animations that react to scrolling, using GSAP’s SplitText plugin and various CSS effects
https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/
https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/
Codrops
Staggered (3D) Grid Animations with Scroll-Triggered Effects | Codrops
A playful concept where we use staggered scroll-based animations to create 3D grid effects and other transitions.
Exploring two experimental CSS features: tree-counting functions and random values, with practical prototypes
https://kizu.dev/tree-counting-and-random/
https://kizu.dev/tree-counting-and-random/
kizu.dev
Possible Future CSS: Tree-Counting Functions and Random Values
Many exciting things were added to CSS specs over the years, but some have yet to be implemented by browser engines. In this article, I spotlight two features from Level 5 of the CSS Values and Units Working Draft, describe how we can prototype them with…
Exploring various approaches to handling the behavior of the <selectedoption> element in customizable <select> dropdowns
https://jakearchibald.com/2024/how-should-selectedoption-work/
https://jakearchibald.com/2024/how-should-selectedoption-work/
Jakearchibald
How should <selectedoption> work?
It's part of the new customisable `<select>`, but there are some tricky details.
The State of CSS 2024 explores recent trends, tools, and new features in CSS, marking a shift towards "New CSS"
https://2024.stateofcss.com/en-US/
https://2024.stateofcss.com/en-US/
Stateofcss
State of CSS 2024
The 2024 edition of the annual survey about the latest trends in the CSS ecosystem.
The article examines different alternatives to WordPress for content management systems (CMS) in light of the recent controversy
https://tedium.co/2024/10/20/wordpress-cms-alternatives-content-strategy-advice/
https://tedium.co/2024/10/20/wordpress-cms-alternatives-content-strategy-advice/
Tedium: The Dull Side of the Internet.
So, Your CMS Blew Up. Any Decent WordPress Alternatives Out There?
If your favorite content management system feels like it’s sinking into a shallow well of hubris, you might want alternatives. I have a few ideas.
DevPedia is a resourceful guide for developers, covering diverse technical topics with concise explanations
https://devpedia.pages.dev/
https://devpedia.pages.dev/
devpedia.pages.dev
Dev Encyclopedia | A dictionary for programmers
Community-driven encyclopedia for programmers with 400+ terms + category filters. Learn about programming concepts and tech jargon in Plain English
An exploration of web components' best use cases
https://daverupert.com/2024/10/super-web-components-sunshine/
https://daverupert.com/2024/10/super-web-components-sunshine/
daverupert.com
Where web components shine
The personal blog of Dave Rupert, web developer and podcaster from Austin, TX.
Learn how text fragments enable linking directly to exact words or phrases within web pages
https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html
https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html
Ahmad Alfy's Blog
Smarter than 'Ctrl+F': Linking Directly to Web Page Content
Discover how text fragments revolutionize web navigation. Learn to link directly to specific text on any web page, surpassing traditional 'Ctrl+F' searches. Explore this powerful, user-friendly feature for precise content sharing and improved web experiences.
This article provides practical accessibility improvements for dropdowns, modals, and tabs to make web interfaces more inclusive
https://www.smashingmagazine.com/2024/10/css-min-all-the-things/
https://www.smashingmagazine.com/2024/10/css-min-all-the-things/
Smashing Magazine
CSS min() All The Things — Smashing Magazine
Victor Ayomipo experiments with the CSS `min()` function, exploring its flexibility with different units to determine if it is the be-all, end-all for responsiveness. Discover the cautions he highlights against dogmatic approaches to web design based on his…
Create components that adapt automatically to content variations with CSS :has(), grid, and quantity queries
https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/
https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/
Piccalilli
Making content-aware components using CSS :has(), grid, and quantity queries
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
A comprehensive guide to optimizing Core Web Vitals (CWV) performance
https://web.dev/articles/top-cwv
https://web.dev/articles/top-cwv
web.dev
The most effective ways to improve Core Web Vitals | Articles | web.dev
A collection of best practices that Chrome has identified as the biggest opportunities to optimize web performance and improve Core Web Vitals
A refined, opinionated CSS reset leveraging new CSS capabilities for easier, cleaner default styles
https://jakelazaroff.com/words/my-modern-css-reset/
https://jakelazaroff.com/words/my-modern-css-reset/
Jakelazaroff
My Modern CSS Reset | jakelazaroff.com
A CSS reset I've been using for new projects.
Google Chrome’s latest performance controls help users optimize their browsing experience with tools like Performance Detection and Memory Saver modes
https://blog.google/products/chrome/google-chrome-performance-controls-october-2024/
https://blog.google/products/chrome/google-chrome-performance-controls-october-2024/
Google
Boost your browsing with Chrome's new performance controls
Google is introducing new and improved Chrome performance controls for a faster, more efficient browsing experience.
Best practices and tools for toggling between light and dark themes on websites
https://css-tricks.com/come-to-the-light-dark-side/
https://css-tricks.com/come-to-the-light-dark-side/
CSS-Tricks
Come to the light-dark() Side | CSS-Tricks
Dark mode interfaces have matured a lot in the past few years. We all know the "traditional" approach using media queries but in this article, Sara Joy demonstrates modern CSS features that make respecting user color scheme preferences pretty darn easy.
The article discusses the underutilization of HTML form validation and the challenges associated with implementing it effectively
https://expressionstatement.com/html-form-validation-is-heavily-underused
https://expressionstatement.com/html-form-validation-is-heavily-underused
Expression Statement
HTML Form Validation is heavily underused
HTML Forms have powerful validation mechanisms, but they are heavily underused. In fact, not many people even know much about them. Is this because of some flaw in their design? Let’s explore.
A guide summarizing best practices for tooltips, emphasizing accessibility and proper usage
https://css-tricks.com/tooltip-best-practices/
https://css-tricks.com/tooltip-best-practices/
CSS-Tricks
Tooltip Best Practices | CSS-Tricks
What are tooltips, exactly? There's two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.
This article teaches how to create a 3D hand controller using a webcam and the MediaPipe library alongside Three.js for 3D graphics
https://tympanus.net/codrops/2024/10/24/creating-a-3d-hand-controller-using-a-webcam-with-mediapipe-and-three-js/
https://tympanus.net/codrops/2024/10/24/creating-a-3d-hand-controller-using-a-webcam-with-mediapipe-and-three-js/
Codrops
Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js
Learn how to create a full 3D hand controller with depth, using @mediapipe/hands and Three.js.
A guide to using ??= in JavaScript to handle null and undefined values effectively
https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator
https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator
JavaScript's ??= Operator: Default Values Made Simple
A guide to using ??= in JavaScript to handle null and undefined values elegantly