Public and private CSS cascade layers in a design system
Chris Ferdinandi shares how he uses a mix of public and private cascade layers to provide CSS hooks for developers. - https://gomakethings.com/public-and-private-css-cascade-layers-in-a-design-system
#css
Chris Ferdinandi shares how he uses a mix of public and private cascade layers to provide CSS hooks for developers. - https://gomakethings.com/public-and-private-css-cascade-layers-in-a-design-system
#css
gomakethings.com
Public and private CSS cascade layers in a design system
One of the most important native modern CSS features I’m using in Kelp UI is cascade layers and the @layer at-rule. Today, I wanted to share how I use a mix public and private cascade layers in Kelp to provide CSS hooks for developers. Let’s dig in! (If you…
👍1
:has() Is More Than a Parent Selector
Kevin Powell explores some creative ways to utilize :has() pseudo-class. - https://www.youtube.com/watch?v=cxSowU9sDdU
#css
Kevin Powell explores some creative ways to utilize :has() pseudo-class. - https://www.youtube.com/watch?v=cxSowU9sDdU
#css
YouTube
:has() is more than a parent selector
🔗 Links
✅ :has() browser support: https://caniuse.com/css-has
✅ :nth(of S) browser support: https://caniuse.com/css-nth-child-of
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord…
✅ :has() browser support: https://caniuse.com/css-has
✅ :nth(of S) browser support: https://caniuse.com/css-nth-child-of
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord…
👍1
The Gap Strikes Back: Now Stylable
Patrick Brosset explains how a new CSS feature enables you to style gap areas. - https://css-tricks.com/the-gap-strikes-back-now-stylable
#css
Patrick Brosset explains how a new CSS feature enables you to style gap areas. - https://css-tricks.com/the-gap-strikes-back-now-stylable
#css
CSS-Tricks
The Gap Strikes Back: Now Stylable | CSS-Tricks
Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your…
👍2
Custom Select (That Comes Up From the Bottom on Mobile)
Chris Coyier demonstrates how to create a beautiful and functional custom select. - https://frontendmasters.com/blog/custom-select-that-comes-up-from-the-bottom-on-mobile
#css
Chris Coyier demonstrates how to create a beautiful and functional custom select. - https://frontendmasters.com/blog/custom-select-that-comes-up-from-the-bottom-on-mobile
#css
Frontend Masters
Custom Select (that comes up from the bottom on mobile)
Custom <select> menus are a thing now, especially because they can be progressively enhanced into. Una has some great examples.
❤1👍1
CSS Intelligence: Speculating On The Future Of A Smarter Language
Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift. - https://www.smashingmagazine.com/2025/07/css-intelligence-speculating-future-smarter-language
#css
Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift. - https://www.smashingmagazine.com/2025/07/css-intelligence-speculating-future-smarter-language
#css
Smashing Magazine
CSS Intelligence: Speculating On The Future Of A Smarter Language — Smashing Magazine
CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the `if()` function. Is it still just for styling, or is it becoming something more? Gabriel…
❤1👍1
A revisit of the Every Layout sidebar with :has() and selector performance
Heydon Pickering explores how modern CSS selectors can improve some common layout patterns. - https://piccalil.li/blog/a-revisit-of-the-every-layout-sidebar-with-has-and-selector-performance
#css
Heydon Pickering explores how modern CSS selectors can improve some common layout patterns. - https://piccalil.li/blog/a-revisit-of-the-every-layout-sidebar-with-has-and-selector-performance
#css
Piccalilli
A revisit of the Every Layout sidebar with :has() and selector performance
Heydon Pickering takes a fresh look the Every Layout Sidebar layout, 6 years on, to see if modern CSS selectors can improve it.
❤1👍1
Playing With the New Caret CSS Properties
Manuel Rego Casasnovas gives a brief introduction to the new caret-animation and caret-shape CSS properties. - https://blogs.igalia.com/mrego/playing-with-the-new-caret-css-properties
#css
Manuel Rego Casasnovas gives a brief introduction to the new caret-animation and caret-shape CSS properties. - https://blogs.igalia.com/mrego/playing-with-the-new-caret-css-properties
#css
Igalia
Playing with the new caret CSS properties
Some quick experiments playing with the new caret-animation and caret-shape CSS properties that Igalia is developing in Chromium.
👍1
Setting Line Length in CSS (and Fitting Text to a Container)
Daniel Schwarz explores different ways to control line length when working with text, including two proposed properties that could make it easier in the future. - https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container
#css
Daniel Schwarz explores different ways to control line length when working with text, including two proposed properties that could make it easier in the future. - https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container
#css
CSS-Tricks
Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks
The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.
👍2
Responsive Video Is (Almost) Easy Now
Koos Looijesteijn explains how you can serve high-quality, vertical, and horizontal video variants, breaking free from platforms like YouTube. - https://www.kooslooijesteijn.net/blog/responsive-video-easy
#css
Koos Looijesteijn explains how you can serve high-quality, vertical, and horizontal video variants, breaking free from platforms like YouTube. - https://www.kooslooijesteijn.net/blog/responsive-video-easy
#css
www.kooslooijesteijn.net
Responsive video is (almost) easy now | Koos Looijesteijn
How to serve high-quality, vertical and horizontal video variants and break free from platforms like YouTube
👍3
A Friendly Introduction to SVG
Joshua Comeau shares a fantastic introduction to SVG, covering the most important fundamentals to provide a solid foundation you can build on. - https://www.joshwcomeau.com/svg/friendly-introduction-to-svg
#css
Joshua Comeau shares a fantastic introduction to SVG, covering the most important fundamentals to provide a solid foundation you can build on. - https://www.joshwcomeau.com/svg/friendly-introduction-to-svg
#css
Joshwcomeau
A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously…
👍5
Public CSS Custom Properties in the Shadow DOM
Michael Warren created an in-depth guide to using public CSS Custom properties to configure web components externally. - https://michaelwarren.dev/blog/css-variables-in-wc
#css
Michael Warren created an in-depth guide to using public CSS Custom properties to configure web components externally. - https://michaelwarren.dev/blog/css-variables-in-wc
#css
michaelwarren.dev
Public CSS Custom Properties in the Shadow DOM
The definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.
👍2
CSS Hyphens, Words, Syllables, and Languages
Frank M Taylor on the importance of correctly identifying the language in your HTML if you want to use CSS hyphens. - https://blog.frankmtaylor.com/2025/07/17/css-hyphens-words-syllables-and-languages
#css
Frank M Taylor on the importance of correctly identifying the language in your HTML if you want to use CSS hyphens. - https://blog.frankmtaylor.com/2025/07/17/css-hyphens-words-syllables-and-languages
#css
Frank M Taylor
CSS Hyphens, Words, Syllables, and Languages
There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we…
❤1👍1
A Handy Use of Subgrid To Enhance a Simple Layout
Andy Bell shows how CSS subgrid can help you maintain a nice reading line in your layouts. - https://piccalil.li/blog/a-handy-use-of-subgrid-to-enhance-a-simple-layout
#css
Andy Bell shows how CSS subgrid can help you maintain a nice reading line in your layouts. - https://piccalil.li/blog/a-handy-use-of-subgrid-to-enhance-a-simple-layout
#css
Piccalilli
A handy use of subgrid to enhance a simple layout
subgrid in CSS is really handy for getting a nice level of design detail in place, especially in terms of maintaining a nice reading line, as Andy shows in this article.
❤1👍1
So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
Saron Yitbarek explains everything you need to know about animation-ranges in scroll-driven animations. - https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation
#css
Saron Yitbarek explains everything you need to know about animation-ranges in scroll-driven animations. - https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation
#css
WebKit
So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
Background If you’re new to scroll-driven animations, welcome!
👍3
Responsive Video Is (Almost) Easy Now
Koos Looijesteijn explains how you can serve high-quality, vertical, and horizontal video variants, breaking free from platforms like YouTube. - https://www.kooslooijesteijn.net/blog/responsive-video-easy
#css
Koos Looijesteijn explains how you can serve high-quality, vertical, and horizontal video variants, breaking free from platforms like YouTube. - https://www.kooslooijesteijn.net/blog/responsive-video-easy
#css
www.kooslooijesteijn.net
Responsive video is (almost) easy now | Koos Looijesteijn
How to serve high-quality, vertical and horizontal video variants and break free from platforms like YouTube
👍2
Public CSS Custom Properties in the Shadow DOM
Michael Warren created an in-depth guide to using public CSS Custom properties to configure web components externally. - https://michaelwarren.dev/blog/css-variables-in-wc
#css
Michael Warren created an in-depth guide to using public CSS Custom properties to configure web components externally. - https://michaelwarren.dev/blog/css-variables-in-wc
#css
michaelwarren.dev
Public CSS Custom Properties in the Shadow DOM
The definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.
👍1
CSS Hyphens, Words, Syllables, and Languages
Frank M Taylor on the importance of correctly identifying the language in your HTML if you want to use CSS hyphens. - https://blog.frankmtaylor.com/2025/07/17/css-hyphens-words-syllables-and-languages
#css
Frank M Taylor on the importance of correctly identifying the language in your HTML if you want to use CSS hyphens. - https://blog.frankmtaylor.com/2025/07/17/css-hyphens-words-syllables-and-languages
#css
Frank M Taylor
CSS Hyphens, Words, Syllables, and Languages
There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we…
👍1
A Handy Use of Subgrid To Enhance a Simple Layout
Andy Bell shows how CSS subgrid can help you maintain a nice reading line in your layouts. - https://piccalil.li/blog/a-handy-use-of-subgrid-to-enhance-a-simple-layout
#css
Andy Bell shows how CSS subgrid can help you maintain a nice reading line in your layouts. - https://piccalil.li/blog/a-handy-use-of-subgrid-to-enhance-a-simple-layout
#css
Piccalilli
A handy use of subgrid to enhance a simple layout
subgrid in CSS is really handy for getting a nice level of design detail in place, especially in terms of maintaining a nice reading line, as Andy shows in this article.
👍1
So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
Saron Yitbarek explains everything you need to know about animation-ranges in scroll-driven animations. - https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation
#css
Saron Yitbarek explains everything you need to know about animation-ranges in scroll-driven animations. - https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation
#css
WebKit
So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
Background If you’re new to scroll-driven animations, welcome!
👍1
Impact of AI on Tech Content Creators
Chris Coyier shares some thoughts on how AI might impact content creators. - https://chriscoyier.net/2025/07/23/impact-of-ai-on-tech-content-creators
#css
Chris Coyier shares some thoughts on how AI might impact content creators. - https://chriscoyier.net/2025/07/23/impact-of-ai-on-tech-content-creators
#css
Chris Coyier
Impact of AI on Tech Content Creators
Wes on Syntax: I write content. That content is consumed by people. But a lot of it has been used to train AIs for people to get a very quick answer. You can see the amount of bots visiting website…
👍1