#ModernCSS
LightNews LightNews
minahilakhtar.bsky.social
CSS is getting a new `border-shape` property 📦

No images. No SVG. No clip-path.

Create organic blobs, cut-out borders, and custom outlines directly in CSS.

The future of creative UI looks exciting 🚀

#CSS #WebDesign #Frontend #ModernCSS
June 3, 2026 at 2:12 PM
sturobson.com
A Content List With Bulk Actions Using Ancient HTML and Modern CSS from @tylersticka.com on @cloudfour.com

cloudfour.com/thinks/a-con...

#FrontEnd #WebDev #CSS #ModernCSS
A Content List With Bulk Actions Using Ancient HTML and Modern CSS
This common UI pattern demands a lot less JavaScript than it used to.
cloudfour.com
February 5, 2025 at 2:29 PM
omelcher.com
Catching up on modern CSS and wow, it's wild how much it's evolved! Subrid, container queries, native nesting, view transitions, timeline animations... Considering going #nobuild makes much more sense now.

#WebDev #ModernCSS
February 2, 2025 at 5:02 AM
inautilo.bsky.social
#Development #Releases
CSS recently in all browsers · Highlights from the past few months ilo.im/16cggh by Adam Argyle

_____
#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
ilo.im
April 27, 2026 at 4:14 AM
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
Progressively enhancing CSS Grid Lanes · Can native masonry layouts be used safely today? ilo.im/16e698 by Manuel Matuzović

_____
#ModernCSS #Layout #Masonry #GridLanes #Accessibility #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS
Progressively enhancing Grid Lanes - Manuel Matuzovic
I’m a frontend developer, consultant, accessibility auditor, blogger, teacher, and book author from Austria.
ilo.im
July 4, 2026 at 7:20 AM
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
Fixing full-bleed CSS · A novel approach using some at-rule property magic ilo.im/16e9hv by David Bushell

_____
#ModernCSS #Layout #FullBleed #CssContainment #CssGrid #CssUnits #WebDev #Frontend #CSS
Fixing full-bleed CSS
The one where I apply some at-rule property magic.
ilo.im
July 3, 2026 at 2:07 PM
inautilo.bsky.social
#Development #Techniques
Fluid sizing with CSS round() · Using round() to make fluid sizing more predictable ilo.im/16d0r2 by Ahmad Shadeed

_____
#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.
ilo.im
May 18, 2026 at 4:05 PM
inautilo.bsky.social
#Development #Introductions
Chromium’s new CSS gap decorations · Ready for grid, flexbox, and multi-column layouts ilo.im/16cyte by Javier Contreras and Sam Davis Omekara

_____
#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.
ilo.im
May 16, 2026 at 6:40 AM
claudialn.bsky.social
Modern CSS is cool and all but I've gotten to a point where if I break concentration everything becomes an ancient dialect no one's ever seen before 🫠

#css #moderncss #css4 #frontend #webdesign #webdev #fluidcss #fluidresponsive #containerqueries
css code using where, not, wildcard, child and containing selectors with container query index inside of clamp.
May 29, 2025 at 6:17 AM
inautilo.bsky.social
#Development #Guides
The scope of CSS @function · “CSS functions have a fascinating superpower with scope.” ilo.im/16dth7 by Jane Ori

_____
#ModernCSS #CssFunction #WebDev #Frontend #DOM #CSS #JavaScript
The Scope of CSS @function
There are some real advantages to variable scope and evaluation scope that you get with @function in CSS.
ilo.im
June 17, 2026 at 7:16 AM
inautilo.bsky.social
#Development #Demos
Experimenting with random() in CSS · “Randomness in CSS opens up so much new possibilities.” ilo.im/16e1wy by Kilian Valkhof

_____
#ModernCSS #Randomness #Effects #Creativity #Design #WebDesign #Browsers #WebDev #Frontend #CSS
Experimenting with random() in CSS | Polypane
CSS is getting a random() function that lets you set properties with a random value, letting you make interesting and creative new designs. It's available in…
ilo.im
June 27, 2026 at 6:33 AM
inautilo.bsky.social
#Development #Techniques
Modern theming with new CSS features · Using light-dark(), contrast-color(), and style queries ilo.im/16dz6h by Una Kravets

_____
#ModernCSS #Themes #LightMode #DarkMode #Browsers #WebDev #Frontend #CSS
una.im | Modern CSS theming with light-dark(), contrast-color(), and style queries
Combine three new CSS features to build fully adaptive themed components.
ilo.im
June 23, 2026 at 5:24 AM
inautilo.bsky.social
#Development #Approaches
This website has no class · Zen gardening with modern HTML/CSS ilo.im/166xej by Adam Stoddard

_____
#ModernCSS #CssZenGarden #Website #Browser #WebComponents #WebDev #Frontend #HTML #CSS
This website has no class | Adam Stoddard
Going “full CSS Zen Garden” with modern CSS.
ilo.im
September 20, 2025 at 8:18 PM
inautilo.bsky.social
#Development #Introductions
Getting started with Anchor Positioning · An interactive guide to the Anchor Positioning API ilo.im/16ebs1 by Josh W. Comeau

_____
#ModernCSS #ToolTips #AnchorPositioning #ContainerQueries #PolyFill #APIs #Browsers #WebDev #Frontend #CSS
Getting Started with Anchor Positioning • Josh W. Comeau
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a...
ilo.im
July 6, 2026 at 9:05 PM
inautilo.bsky.social
#Development #Cheatsheets
The field guide to Grid Lanes · How to create masonry layouts in pure CSS ilo.im/16dmyx by WebKit

_____
#ModernCSS #Layouts #Masonry #Playgrounds #Demos #ProgressiveEnhancement #WebDev #Frontend #CSS #CssGrid
ilo.im
June 10, 2026 at 12:46 PM
inautilo.bsky.social
#Development #Techniques
Entry and exit transitions with modern CSS · Techniques for transitions and view transitions ilo.im/16de22 by Matija

_____
#ModernCSS #Transitions #ViewTransitions #Animations #APIs #WebDev #Frontend #HTML #CSS #JavaScript
Entry And Exit Transitions With Modern CSS
Learn how to do enter and exit CSS transitions using @starting-style, animate discrete properties like display, and use the View Transition API for smooth layout animations.
ilo.im
June 2, 2026 at 3:50 AM
inautilo.bsky.social
#Development #Approaches
Card patterns with anchor positioning · A refined approach to accessible clickable cards ilo.im/16ejrc by Emil Björklund

_____
#ModernCSS #Cards #AnchorPositioning #Accessibility #DesignPatterns #Design #WebDesign #WebDev #Frontend #CSS
Improving card patterns with anchor positioning
Digging into anchor positioning and coming out the other side with a better Card pattern? Yes please.
ilo.im
July 17, 2026 at 6:17 PM
inautilo.bsky.social
#Development #Releases
Range syntax for if() and style queries · Chrome 142 has shipped a powerful new CSS feature ilo.im/168dx5 by Una Kravets

_____
#ModernCSS #StyleQueries #IfFunction #Syntax #Browser #Chrome #WebDev #Frontend #CSS
una.im | Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
ilo.im
November 14, 2025 at 2:12 PM
inautilo.bsky.social
#Development #Guides
Setting type like a printed page · Most of a typesetter’s craft is now built into CSS ilo.im/16egwx by Carmen Ansio

_____
#ModernCSS #Print #Typography #Design #DigitalDesign #WebDesign#Browsers #WebDev #Frontend #CSS
Setting type like a printed page
Fluid scales, balanced headings, drop caps, optical sizing, hanging punctuation. The browser now ships most of a typesetter's toolkit in pure CSS, switched off by default until you ask for it.
ilo.im
July 14, 2026 at 12:06 AM
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
inautilo.bsky.social
#Development #Guides
View Transition API · Ways to create smooth, instant page transitions ilo.im/16844p by Brad Woods

_____
#ModernCSS #ViewTransitions #Animations #WebPages #API #Browser #WebDev #Frontend #CSS #JavaScript
Brad Woods Digital Garden
Notes about creative coding on the Web.
ilo.im
November 3, 2025 at 10:00 PM
inautilo.bsky.social
#Development #Demos
Re-imagine the web · What you can do with Scoped View Transitions ilo.im/168vwf by Chrome for Developers

_____
#ModernCSS #ViewTransitions #Animations #Chrome #Browser #Design #WebDesign #WebDev #Frontend #CSS
Re-imagine the web with Scoped View Transitions
With Scoped View Transitions ✨, you can finally unlock the full power of motion by creating multiple, fluid, simultaneous transitions. Isolate and animate va...
ilo.im
December 7, 2025 at 9:17 AM
inautilo.bsky.social
#Development #Techniques
Responsive letter spacing · How to tighten letter spacing in CSS ilo.im/168krf by Tyler Sticka

_____
#ModernCSS #Letters #Spacing #Fonts #Typography #Browser #WebDesign #WebDev #Frontend #CSS
Responsive Letter Spacing
Minimizing the readability impact of a typographic brand requirement.
ilo.im
November 21, 2025 at 2:37 PM