The five best design links, every weekday

Category: Css

All Categories

smashingmagazine.com

Combining :has() And select For Greater Conditional Styling

Amit Sheen demonstrates using :has() to apply styles conditionally.

frontendmasters.com

Popover API is Here

This API allows you to open an element on top of everything despite where it lives in the DOM and without any particular styling.

css-irl.info

Shades of Grey with color-mix()

When it comes to building websites, it can be handy having a few shades of grey at your disposal, no matter your colour palette.

bram.us

Misconceptions about CSS Specificity

To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS.

developer.chrome.com

An alternative proposal for CSS masonry

A proposal to define masonry and grid in different specifications.

kizu.dev

Self-Modifying Variables: the inherit() Workaround

Style queries will unlock many doors.

cruncher.ch

Printing music with CSS grid

Music notation should be as accessible and as fluid as text is on the web. CSS Grid helps us get there.

kizu.dev

Alternating Style Queries

With container style queries on the horizon, it is a good time to do more experiments with them.

ryanmulligan.dev

Detect JavaScript Support in CSS

I had been aware of the scripting CSS media feature but I was still under the impression that cross-browser support was lacking.

piccalil.li

A primer on the cascade and specificity

Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS.

frontendmasters.com

Things That Can Break aspect-ratio in CSS

CSS has an aspect-ratio property, which has had full support since around 2021.

webkit.org

Help us invent CSS Grid Level 3, aka “Masonry” layout

If you’ve been making websites for years, you know how frustrating it was to lay out a web page with CSS floats.

javier.xyz

Motion extraction with mostly CSS

A simple way to extract motion from a video using CSS.

heydonworks.com

Testing HTML With Modern CSS

CSS can be a great HTML testing tool, especially in 2024

piccalil.li

How we’re approaching theming with modern CSS

We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out.

anchor-tool.com

Anchor Position Tool

A Chrome Canary demo of the new CSS anchor positioning features.

smashingmagazine.com

Sliding 3D Image Frames In CSS

Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup.

dev.37signals.com

Modern CSS patterns in Campfire

An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors.

joshwcomeau.com

Folding the DOM

In this post, we’ll explore a technique we can use to “fold” a DOM node, like folding a letter in real-life.

frontendmasters.com

Gap is the new Margin

In 2020, Max Stoiber wrote the spicy "Margin considered harmful".