#ModernCSS
LightNews LightNews
inautilo.bsky.social
#Development #Approaches
Ship it! · Use new CSS without breaking anything ilo.im/16hr3c by Kevin Powell

_____
#ModernCSS #Baseline #CanIUse #ProgressiveEnhancement #Fallbacks #Browsers #WebDev #Frontend #CSS
Use new CSS without breaking anything
👉 Start writing CSS with confidence: https://thecascade.dev/courses...
ilo.im
November 9, 2026 at 6:12 AM
inautilo.bsky.social
#Development #Guides
Taming typography · Building a modern CSS reset ilo.im/16horz by Stuart Robson

_____
#ModernCSS #CssReset #Fonts #VariableFonts #Typography #Fallbacks #FluidDesign #WebDev #Frontend #CSS
Taming Typography: Building a Modern CSS Reset | CSS-Tricks
Stu created tidy-typography.css: a style reset for taming typography with modern CSS features for everything from fluid typography and vertical rhythm, to hyphens and variable fonts.
ilo.im
November 5, 2026 at 11:08 PM
inautilo.bsky.social
#Development #Pitfalls
Modern CSS might make frontends harder · What replacing JavaScript with CSS really costs ilo.im/16hlsa by Gabriel Shoyombo

_____
#ModernCSS #Migration #Complexity #Maintainability #Workflows #WebDev #Frontend #CSS #JavaScript #Checklists
Modern CSS Might Make Your Front-End More Complex — Smashing Magazine
Replacing JavaScript with a modern CSS feature can simplify a piece of code while making the wider application harder to reason about. Gabriel Shoyombo explores what happens when logic is split between...
ilo.im
November 5, 2026 at 8:42 PM
inautilo.bsky.social
#Development #Previews
Groundbreaking SVG upgrade is approaching · CSS variables will soon reach inside your SVGs ilo.im/16hnv1 by Roman Komarov

_____
#ModernCSS #SVG #LinkedParameters #CustomProperties #Browsers #Design #WebDesign #WebDev #Frontend #CSS
Groundbreaking Upgrade to SVG is Approaching: Linked Parameters Are Almost Here
“This feature will change everything” might be a bit of an exaggeration, but it, surely, will change a lot, both in #CSS and #SVG. In this post, I’ll report on what is happening right now with it,...
ilo.im
November 6, 2026 at 1:58 PM
inautilo.bsky.social
#Development #Previews
Useful @custom-media presets · I can’t wait to use custom media queries.” ilo.im/16hfso by Daniel Schwarz

_____
#ModernCSS #CssReset #MediaQueries #ContainerQueries #CustomProperties #HDR #Browsers #WebDev #Frontend #CSS
Useful @custom-media Presets
Custom media queries let you name and reuse media queries the way custom properties do for values. Here’s a set of drop-in @custom-media presets for input mechanisms, breakpoints, and true HDR, plus...
ilo.im
October 29, 2026 at 10:35 AM
inautilo.bsky.social
#Development #Previews
Scroll-triggered animation · The missing piece for scrollytelling on the web ilo.im/16gyjw by Brecht De Ruyte

_____
#ModernCSS #Scrollytelling #Scrolling #Chrome #Browsers #Accessibility #ProgressiveEnhancement #WebDev #Frontend #CSS
Scroll-triggered animation as the missing piece for scrollytelling on the web | utilitybend
An in-depth look at CSS scroll-triggered animations (animation-trigger), how view ranges and actions work, sibling-index staggering, and progressive enhancement.
ilo.im
October 20, 2026 at 12:07 AM
inautilo.bsky.social
#Development #Guides
The math of CSS typesetting · Recommendations for typography on the web ilo.im/16gyxe by Donnie D’Amato

_____
#ModernCSS #Fonts #Text #Formulas #Typography #Playground #Browsers #APIs #WebDev #Frontend #CSS
CSS Typesetting: The Math Parts
Recommendations for typography on the web.
ilo.im
October 14, 2026 at 4:20 AM
inautilo.bsky.social
#Development #Techniques
The best way to use icons in web UIs · Insert and tweak icons in CSS without touching HTML ilo.im/16gx8a by Lea Verou

_____
#ModernCSS #Icons #Images #SVG #DesignSystems #DesignTokens #Accessibility #WebDev #Frontend #CSS #StyleQueries
The best way to use icons in Web UIs • Lea Verou
What if I told you, you could use CSS to insert and tweak icons without touching any HTML? And that it could be more flexible and maintainable than what you’ve been using?
ilo.im
October 13, 2026 at 4:52 AM
inautilo.bsky.social
#Development #Techniques
Sidenotes with CSS anchor positioning · Margin notes for your content without JavaScript ilo.im/16ga6m by Vincent Bernat

_____
#ModernCSS #AnchorPositioning #SideNotes #Content #Blogs #Websites #WebDev #Frontend #CSS
Sidenotes with CSS anchor positioning
Sidenotes positioned in the margin with CSS anchor positioning, without JavaScript. On narrow viewports and older browsers, they fall back below...
ilo.im
September 26, 2026 at 7:12 PM
inautilo.bsky.social
#Development #Techniques
Detecting overlapping elements with CSS · ”At first, I thought this was not possible.” ilo.im/16ggbd by Ahmad Shadeed

_____
#ModernCSS #Overlap #Detection #ScrollDrivenAnimations #AnchorPositioning #Browsers #WebDev #Frontend #CSS
Detect when elements overlap with CSS
Detecting when two elements overlap using only CSS anchor positioning and scroll-driven animations.
ilo.im
September 24, 2026 at 10:11 PM
inautilo.bsky.social
#Development #Techniques
Comparing values with CSS progress() · Boolean-like conditional styling without JavaScript ilo.im/16g5mn by Preethi Sam

_____
#ModernCSS #StyleQueries #Styling #Conditions #Layouts #Typography #WebDesign #WebDev #Frontend #CSS
ilo.im
September 16, 2026 at 7:01 AM
inautilo.bsky.social
#Development #Techniques
Animating CSS Grid layouts · Smooth grid reflows with CSS Anchor Positioning ilo.im/16fyjw by Bram Van Damme

_____
#ModernCSS #CssGrid #AnchorPositioning #Layouts #FluidDesign #WebDesign #WebDev #Frontend #CSS
Animating CSS Grid Layouts with CSS Anchor Positioning
At CSS Day (back in June), someone asked me how Brave (the browser) might have built their New Tab Page which features some tiles laid out in a grid. While the grid is nothing spectacular, something special...
ilo.im
September 8, 2026 at 7:03 AM
inautilo.bsky.social
#Development #Outlooks
CSS multiple-column layout, rows, rules, and floats · Missing pieces for creating print-style reading experiences ilo.im/16fkkf by Rachel Andrew

_____
#ModernCSS #Layouts #Columns #Print #Typography #Chrome #Browsers #WebDesign #WebDev #Frontend #CSS
Multiple-column layout, rows, rules, and floats | Rachel Andrew
Floating things in columns
ilo.im
August 29, 2026 at 3:23 AM
inautilo.bsky.social
#Development #Introductions
Detecting “undetectable” CSS features · Enter named-feature() for use with @supports ilo.im/16fotx by Bram Van Damme

_____
#ModernCSS #FeatureDetection #ProgressiveEnhancement #Chrome #Browsers #WebDev #Frontend #CSS
Feature Detecting “Undetectable” CSS Features with @supports named-feature()
In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports. But how do you feature detect a change to an underlying implementation, or two existing...
ilo.im
August 28, 2026 at 6:20 AM
inautilo.bsky.social
#Development #Guides
Migrating from Sass to native CSS · Why you no longer need Sass and how to move on ilo.im/16fg6z by Chris Smith

_____
#ModernCSS #Sass #Compiler #Migration #WebDev #Frontend #CSS
The process of migrating from Sass to native CSS
I took the decision to replace all our Sass with native CSS as I could see some benefits.
ilo.im
August 21, 2026 at 6:12 PM
javidevedu.bsky.social
No JS, no problem — build smooth carousels with pure CSS 🎠 Dive deeper at javidev — link in my profile! Creation by mystic.js

#csshacks #purecss #imagecarousel #frontendtips #webdevtricks #codingmagic #responsivewebdesign #developertools #nocodecarousel #moderncss #webdesignskills
June 17, 2025 at 10:01 PM
javidevedu.bsky.social
Tips #24: CSS Effortless tips for cool selector – :is() 🧙🏻‍♂️📌 – Write cleaner code with less effort. Visit my website: javidev (link in my profile). Created by mystic.js
#CSSSelector #CSSTips #WebDev #FrontendMagic #CodeSmart #CSSis #DevLife #CleanCode #ModernCSS #CodingTips
June 6, 2025 at 3:02 PM
javidevedu.bsky.social
Magical Coding Tips Part #4: Inset CSS Shorthand 🔮
Position like a pro with clean, powerful CSS — visit javidev (link in my profile).
mystic.js

#CSSInset #PositioningTips #ShorthandCSS #FrontendDev #CodeEfficiency #CleanLayout #DevTips #WebTricks #ModernCSS #UIWizard
May 16, 2025 at 3:02 PM
jsutherland.dev
buymeacoffee.com/moderncss great resource! Well worth the price of a coffee!
Stephanie Eckles (5t3ph) is the author of ModernCSS.dev, StyleStage.dev, 11ty.Rocks
Hey 👋If you're enjoying the "Modern CSS Solutions for Old CSS Problems" series, StyleStage.dev (a modern CSS showcase styled by community contributions), 11ty.Rocks (a collection of Eleventy reso
buymeacoffee.com
February 17, 2026 at 2:50 PM
webdirections.org
scroll-timeline, view-timeline, scroll-state queries - CSS has superpowers now! Create immersive scroll experiences without a single line of JS #ModernCSS #DevSummit25

Lee Meyer at Dev Summit 25 bit.ly/3KbjJfT
Banner for conference presentation. Text reads Lee Meyer Supercharged scrolling with CSS Eng AI 2025 Sydney Sept 12
September 19, 2025 at 5:10 AM
johnfallsopp.com
scroll-timeline, view-timeline, scroll-state queries - CSS has superpowers now! Create immersive scroll experiences without a single line of JS #ModernCSS #DevSummit25

Lee Meyer at Dev Summit 25 bit.ly/3KbjJfT
Banner for conference presentation. Text reads Lee Meyer Supercharged scrolling with CSS Eng AI 2025 Sydney Sept 12
October 27, 2025 at 12:56 AM
johnfallsopp.com
scroll-timeline, view-timeline, scroll-state queries - CSS has superpowers now! Create immersive scroll experiences without a single line of JS #ModernCSS #DevSummit25

Lee Meyer at Dev Summit 25 bit.ly/3KbjJfT
Banner for conference presentation. Text reads Lee Meyer Supercharged scrolling with CSS Eng AI 2025 Sydney Sept 12
September 27, 2025 at 1:55 AM
rotecodefraktion.bsky.social
The same CSS function, two colors — depending on dark mode. Sass resolves at build time, native @function at render time. That's the new part, not the catch-up.
#CSS #ModernCSS #Frontend #WebDev #WebDevelopment
With live demos: www.rotecodefraktion.de/en/blog/css-...
CSS Gets Real Functions: The @function Rule
With @function you define your own CSS functions. The real novelty is not that CSS rebuilds Sass, but that a CSS function decides in the browser instead of at build time.
www.rotecodefraktion.de
June 15, 2026 at 7:57 PM