CSS

1301 bookmarks
Custom sorting
Easier layout with margin-trim
Easier layout with margin-trim
If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.
·webkit.org·
Easier layout with margin-trim
Reducing CSS complexity with the :is() pseudo-class
Reducing CSS complexity with the :is() pseudo-class
Last week, I finally had a reason to use the newish :is() CSS pseudo-class, and wow is it glorious! Today, I want to show you how it can dramatically reduce selector complexity. Let’s dig in! What :is() does The :is() pseudo-class accepts a comma-separated list of selectors, and can be used to group them together. For example, these two selector strings do the same thing… h1, h2, h3, h4, h5, h6 { font-weight: bold; } :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; } You’re probably look at this and thinking…
·gomakethings.com·
Reducing CSS complexity with the :is() pseudo-class
The :empty pseudo-class in CSS
The :empty pseudo-class in CSS
One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine you have some CSS to layout items in a row using flexbox… .grid-flex { display: flex; gap: 1rem; } .grid-flex div { background-color: #ffdc00; border: 1px solid #665800; color: #665800; padding: 1rem 2rem; text-align: center; } And a row of items generated from an API or database or something.
·gomakethings.com·
The :empty pseudo-class in CSS
CSS Wrapped 2024
CSS Wrapped 2024
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024.
·chrome.dev·
CSS Wrapped 2024
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!
·frontendmasters.com·
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
CSS min() All The Things — Smashing Magazine
CSS min() All The Things — Smashing Magazine
Victor Ayomipo experiments with the CSS `min()` function, exploring its flexibility with different units to determine if it is the be-all, end-all for responsiveness. Discover the cautions he highlights against dogmatic approaches to web design based on his findings.
·smashingmagazine.com·
CSS min() All The Things — Smashing Magazine