Mastodawn

Frontend Dogma Oct 30

Top 11 CSS Tricks Every Web Developer Should Know, by (not on Mastodon or Bluesky):

https://archive.ph/JbGFA

#css #customproperties #layout #animations #selectors #positioning #darkmode #resets #tipsandtricks

Frontend Dogma Oct 28

Making Context-Aware Components: How CSS “inherit()” Could Simplify Design Systems, by @sturobson:

https://www.alwaystwisted.com/articles/making-context-aware-components

#components #css #functions #customproperties

Making Context-Aware Components: How CSS inherit() Could Simplify Design Systems

Make your components context-aware with CSS inherit(): learn how the new inherit() function lets components derive spacing, colour and motion from their container, reduce token bloat, and implement robust fallbacks for browsers that don’t yet support the feature. Practical card examples included.

Always Twisted

Inautilo Sep 25

#Development #Techniques
Custom properties in media queries? · A workaround powered by modern CSS https://ilo.im/1675st

_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS

A workaround for using custom properties in media queries

One of the most frustrating aspects of media queries is that we can’t use custom properties with them. This often results in hard-coded values in otherwise, highly configurable codebases. Manuel has a novel approach to get around this.

Piccalilli

Inautilo Sep 24

#Development #Approaches
The best CSS unit for spacing · “We don’t have to choose between px and rem.” https://ilo.im/1673zo

_____
#CssUnits #CssClamp #CssCalc #CustomProperties #WebDev #Browser #Frontend #CSS

The Best CSS Unit Might Be a Combination

We don't have to choose between px and rem for spacing

OddBird

Inautilo Sep 23

#Development #Approaches
The double focus ring problem · A smart solution built with modern CSS https://ilo.im/166zfq

_____
#ModernCSS #Themes #Accessibility #Keyboard #FocusRing #CustomProperties #WebDev #Frontend #HTML #CSS

Taking a shot at the double focus ring problem using modern CSS

A double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS.

Piccalilli

Inautilo Sep 22

#Development #Approaches
Automatic dark mode · A solid technique with web component support https://ilo.im/166xyi

_____
#DarkMode #CSS #CustomProperties #JavaScript #WebComponents #ShadowDOM #DesignTokens #WebDev #Frontend

Automatic dark mode

The most straightforward way to implement automatic mode switching.

Inautilo Aug 30

#Development #Techniques
CSS elevator · A pure CSS state machine with floor navigation https://ilo.im/166hlb

_____
#Elevator #StateMachine #Accessibility #WebDev #Frontend #HTML #CSS #CustomProperties #CssClamp #Techniques

CSS Elevator: A Pure CSS State Machine With Floor Navigation | CSS-Tricks

In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.

CSS-Tricks