Updates to Popover and CSS Anchor Positioning Polyfills
James Stuckey Weber gives an overview of updates to the Popover and CSS Anchor Positioning Polyfills. - https://www.oddbird.net/2025/05/06/polyfill-updates
#css
James Stuckey Weber gives an overview of updates to the Popover and CSS Anchor Positioning Polyfills. - https://www.oddbird.net/2025/05/06/polyfill-updates
#css
OddBird
Updates to Popover and CSS Anchor Positioning Polyfills
hint popovers, position-area and more
🤔5❤2
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?
Gabriel Shoyombo gives an overview of different proposals for adding support for masonry-style layouts in CSS. - https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module
#css
Gabriel Shoyombo gives an overview of different proposals for adding support for masonry-style layouts in CSS. - https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module
#css
Smashing Magazine
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? — Smashing Magazine
There were duelling proposals floating around for adding support for masonry-style layouts in CSS. In one corner is a proposal that extends the existing CSS Grid specification. In the other corner is a second proposal that sets up masonry as a standalone…
👍1
Guitar Chords in CSS
Mads Stoumann looks into the attr() method, demonstrating how it can help you make easily readable components. - https://dev.to/madsstoumann/guitar-chords-in-css-3hk8
#css
Mads Stoumann looks into the attr() method, demonstrating how it can help you make easily readable components. - https://dev.to/madsstoumann/guitar-chords-in-css-3hk8
#css
DEV Community
Guitar Chords in CSS
In my previous article, I looked into the new, improved attr() method in CSS. I was over the moon...
👍3❤1
Use CSS reading-flow for logical sequential focus navigation
Di Zhang and Rachel Andrew explain the reasons behind the design of reading-flow and reading-order properties and some brief details to get you started with them. - https://developer.chrome.com/blog/reading-flow
#css
Di Zhang and Rachel Andrew explain the reasons behind the design of reading-flow and reading-order properties and some brief details to get you started with them. - https://developer.chrome.com/blog/reading-flow
#css
Chrome for Developers
Use CSS reading-flow for logical sequential focus navigation | Blog | Chrome for Developers
Learn how to use the new reading-flow and reading-order properties in Chrome 137.
👍1
Creating Blob Shapes using clip-path: shape()
Temani Afif shows how to create blob shapes using the new shape() function. - https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape
#css
Temani Afif shows how to create blob shapes using the new shape() function. - https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape
#css
Frontend Masters
Creating Blob Shapes using clip-path: shape()
After the flower shapes, let’s move to one of the coolest shapes: the Blob! Those distorted wiggly circles that were almost impossible to achieve using CSS. But now, they are possible using the new shape() function.
💯3👍2
Styling the icon for HTML date and time types
Cassidy Williams shows how to style the icon for the clock or calendar of input types using ::-webkit-calendar-picker-indicator pseudo-class. - https://cassidoo.co/post/input-type-date
#css
Cassidy Williams shows how to style the icon for the clock or calendar of input types using ::-webkit-calendar-picker-indicator pseudo-class. - https://cassidoo.co/post/input-type-date
#css
cassidoo.co
Styling the icon for HTML date and time types
If you want a custom-styled icon for HTML date/time types, there's some options for you.
👍2🔥2
First adventures in View Transitions
Ben Frain gives a nice introduction to View Transitions. - https://benfrain.com/first-adventures-in-view-transitions
#css
Ben Frain gives a nice introduction to View Transitions. - https://benfrain.com/first-adventures-in-view-transitions
#css
Ben Frain
First adventures in View Transitions
Until recently I had taken only the most cursory look at View Transitions. Now they are in Safari too, and therefore viable across multiple platforms, I wanted to understand them a little more and...
👍3❤1
CSS Logical Properties
Chris Ferdinandi gives a short introduction to Logical CSS Properties. - https://gomakethings.com/css-logical-properties
#css
Chris Ferdinandi gives a short introduction to Logical CSS Properties. - https://gomakethings.com/css-logical-properties
#css
Gomakethings
CSS logical properties
Today, I wanted to talk about CSS logical properties, a newer (and arguably better) way to define properties that are directional in nature.
Let’s dig in!
The *-top, *-bottom, *-left, and *-right properties A lot of CSS properties—things like margin, padding…
Let’s dig in!
The *-top, *-bottom, *-left, and *-right properties A lot of CSS properties—things like margin, padding…
👍2
CSS Boilerplate
A default CSS structure for projects of any size by Manuel Matuzović. - https://fokus.dev/tools/css-boilerplate
#css
A default CSS structure for projects of any size by Manuel Matuzović. - https://fokus.dev/tools/css-boilerplate
#css
fokus.dev
CSS boilerplate | fokus
UA+ (User agent plus), a different type of reset style sheet
👍1
Refactoring a scroll-driven animation from JavaScript to CSS
Ever feel like your JS scroll animations are a bit heavy? This article is perfect for you; it guides you through converting those animations to CSS, making them much smoother and more efficient. The author explains how to pinpoint JS inefficiencies, then shows how to use CSS properties like scroll-behavior and scroll-snap for better performance. - https://component-odyssey.com/articles/08-refactoring-a-js-driven-scroll-animation-to-css
#css
Ever feel like your JS scroll animations are a bit heavy? This article is perfect for you; it guides you through converting those animations to CSS, making them much smoother and more efficient. The author explains how to pinpoint JS inefficiencies, then shows how to use CSS properties like scroll-behavior and scroll-snap for better performance. - https://component-odyssey.com/articles/08-refactoring-a-js-driven-scroll-animation-to-css
#css
Component-Odyssey
Refactoring a scroll-driven animation from JavaScript to CSS
Cut down on the amount of JavaScript you ship by refactoring a scroll-linked animation from JavaScript to CSS.
👍1
How to Use Rem Units in CSS for Accessible Design
Ever wonder how rem units work in CSS? This guide explains it clearly. It covers how rem (root em) units are based on the root element's font size, making scalable and accessible design easier. The author also compares rem with px and em, and provides practical examples for using rem in font sizing, media queries, and more. - https://www.a11y-collective.com/blog/what-is-rem-in-css
#css
Ever wonder how rem units work in CSS? This guide explains it clearly. It covers how rem (root em) units are based on the root element's font size, making scalable and accessible design easier. The author also compares rem with px and em, and provides practical examples for using rem in font sizing, media queries, and more. - https://www.a11y-collective.com/blog/what-is-rem-in-css
#css
The A11Y Collective
How to Use Rem Units in CSS for Accessible Design
Learn what rem units are, how they differ from other units, and how to apply them for optimal, scalable, and responsive designs.
👍1
CSS Wishlist 2025
CSS Wishlist time! Sarah Gebauer shared recently and inspired me. - https://nerdy.dev/css-wishlist-2025
#css
CSS Wishlist time! Sarah Gebauer shared recently and inspired me. - https://nerdy.dev/css-wishlist-2025
#css
nerdy.dev
CSS Wishlist 2025
Holy crap I guess I want 15 more things!
👍2❤1