Mastodawn

#Development #Techniques
Better fluid sizing with CSS round() · Using round() to make fluid sizing more predictable https://ilo.im/16d0r2

_____
#ModernCSS #Layouts #Typography #Design #WebDesign #FluidDesign #WebDev #Frontend #CSS #CssClamp

Better fluid sizing with round()

Using the round() function to get a more predictable fluid sizing.

Inautilo 6d ago

#Development #Introductions
Chromium’s new CSS gap decorations · Ready for grid, flexbox, and multi-column layouts https://ilo.im/16cyte

_____
#ModernCSS #Layouts #CssGrid #CssFlexbox #CssMultiColumn #Chrome #Browser #WebDev #Frontend #CSS

Gap decorations: Now available in Chromium | Blog | Chrome for Developers

A new way to style gaps in CSS from Chrome and Edge 149.

Chrome for Developers

Inautilo May 4

#Development #Explorations
Native randomness in CSS · Why it’s a big deal for the web platform https://ilo.im/16cktu

_____
#ModernCSS #Randomness #Creativity #Design #UiDesign #WebDesign #WebDev #Frontend #CSS #JavaScript

The Importance of Native Randomness in CSS | CSS-Tricks

We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.

CSS-Tricks

Inautilo Apr 28

#Development #Guides
Scroll-driven animations · Exploring the majestic new ‘animation-timeline’ API https://ilo.im/16cio9

_____
#ModernCSS #ScrollDrivenAnimations #Animations #Timelines #APIs #WebDev #Frontend #CSS

Scroll-Driven Animations • Josh W. Comeau

The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it.

Inautilo Apr 27

#Development #Releases
CSS recently in all browsers · Highlights from the past few months https://ilo.im/16cggh

_____
#ModernCSS #Baseline #Browsers #Chrome #Firefox #Safari #WebDev #Frontend #CSS

CSS Recently In All Browsers · April 26, 2026

New CSS you feel like you could use today

nerdy.dev

Inautilo Apr 21

#Development #Techniques
Scroll spy with pure CSS · A modern way to highlight active TOC links https://ilo.im/16c1tx

_____
#ModernCSS #Scrolling #Content #ProgressiveEnhancement #Browsers #WebDev #Frontend #HTML #CSS

Scroll Spy with Pure CSS using scroll-target-group - Roland Franke

How the new CSS scroll-target-group and :target-current let you build a table of contents scroll spy without JavaScript.

Roland Franke - Frontend Developer

Inautilo Apr 12

#Development #Techniques
Making complex CSS shapes with shape() · Wavy, wiggly, blob, squiggly, ragged, and torn ones https://ilo.im/16bvpt

_____
#ModernCSS #Generators #Shapes #Curves #Animation #WebDev #Frontend #CSS

Making Complex CSS Shapes Using shape() | CSS-Tricks

Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features.

CSS-Tricks

Inautilo Apr 9

#Development #Techniques
CSS name-only containers · The scoping we needed and the one we have https://ilo.im/16bzll

_____
#ModernCSS #Scoping #Components #Browsers #WebDev #Frontend #CSS

Name-Only Containers: The Scoping We Needed – Frontend Masters Blog

If we give a `container-name` to the root of all our unique components, we can scope styles to them with a simple @container query.

Inautilo Mar 30

#Development #Overviews
The great CSS expansion · How modern CSS reduces the need for JavaScript https://ilo.im/16bpqd

_____
#ModernCSS #Libraries #MotionJS #GSAP #React #WebPerf #WebDev #Frontend #CSS #JavaScript

The Great CSS Expansion

CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.

Butler's Log

Inautilo Mar 19

#Development #Introductions
Easier light‑dark mode switching · light‑dark() is about to support images! https://ilo.im/16bimg

_____
#ModernCSS #Images #LightMode #DarkMode #Browsers #WebDev #Frontend #CSS

More Easy Light-Dark Mode Switching: light-dark() is about to support images!

CSS light-dark() is being extended to support images.

Bram.us