Mastodawn

#Development #Analyses
Your CSS Grid Lanes will likely fail WCAG 2.4.3 · “It’s too easy to create inaccessible Grid Lanes.” https://ilo.im/16e0l7

_____
#ModernCSS #Layouts #GridLanes #Masonry #Accessibility #WCAG #Browsers #WebDev #Frontend #CSS

Your Grid Lanes will likely fail WCAG 2.4.3 - Manuel Matuzovic

I’m a frontend developer, consultant, accessibility auditor, blogger, teacher, and book author from Austria.

Manuel Matuzović

Inautilo 2d ago

#Development #Techniques
Modern theming with new CSS features · Using light-dark(), contrast-color(), and style queries https://ilo.im/16dz6h

_____
#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.

Inautilo 5d ago

#Development #Guides
Alignment in CSS Grid Lanes · How alignment works across grid and stacking axes https://ilo.im/16dws2

_____
#ModernCSS #Layouts #Masonry #Alignment #WebDev #Frontend #CSS #CssGrid #GridLanes

Patrick - Alignment in CSS Grid Lanes

One part of CSS Grid Lanes I didn't talk about during my presentation at CSS Day is how alignment works. In this article, let's quickly go over how alignment will eventually work in CSS Grid Lanes.

Patrick Brosset

Inautilo 6d ago

#Development #Introductions
Single color image · What to expect from the CSS image() function https://ilo.im/16dvet

_____
#ModernCSS #CssFunction #Colors #Images #Backgrounds #Chrome #Browser #WebDev #Frontend #CSS

Single color image

Working with the CSS image() function

Inautilo Jun 17

#Development #Guides
The scope of CSS @function · “CSS functions have a fascinating superpower with scope.” https://ilo.im/16dth7

_____
#ModernCSS #CssFunction #WebDev #Frontend #DOM #CSS #JavaScript

The Scope of CSS @function – Master.dev Blog

There are some real advantages to variable scope and evaluation scope that you get with @function in CSS.

Inautilo Jun 11

#Development #Outlooks
Media queries might look very different soon · Streamlining media queries with @function and if() https://ilo.im/16doju

_____
#ModernCSS #MediaQueries #CssFunctions #CssIf #Chrome #Browsers #WebDev #Frontend #CSS

Media queries might look very different soon.

YouTube

Inautilo Jun 11

#Development #Techniques
Demystifying the view transition pseudo tree · Customizing view transitions via pseudo-elements https://ilo.im/16dnju

_____
#ModernCSS #ViewTransitions #Animations #Browsers #WebDev #Frontend #CSS

Demystifying the View Transition Pseudo Tree – Master.dev Blog

Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.

Inautilo Jun 10

#Development #Cheatsheets
The field guide to Grid Lanes · How to create masonry layouts in pure CSS https://ilo.im/16dmyx

_____
#ModernCSS #Layouts #Masonry #Playgrounds #Demos #ProgressiveEnhancement #WebDev #Frontend #CSS #CssGrid

Introducing the Field Guide to Grid Lanes

This week, we launched the Field Guide to Grid Lanes at gridlanes.webkit.org.

WebKit

Inautilo Jun 2

#Development #Techniques
Entry and exit transitions with modern CSS · Techniques for transitions and view transitions https://ilo.im/16de22

_____
#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.

Joy of Code

Inautilo May 24

#Development #Guides
The state of CSS centering in 2026 · Centering in modern CSS is really about alignment https://ilo.im/16d5a5

_____
#ModernCSS #Centering #Alignment #Layouts #CssGrid #CssFlexbox #AnchorPositioning #WebDev #Frontend #CSS

The State of CSS Centering in 2026 | CSS-Tricks

Despite the countless number of online resources, it’s easy to get confused when trying to center an element. There are documented solutions, but do you really understand why the code you picked works? Let's look at the current state of centering options today in 2026.

CSS-Tricks