CSS

Collections

The Guide To Responsive Design In 2023 and Beyond
When to Avoid the text-decoration Shorthand Property
CSS underline bugs in Chrome
revert
Dynamic CSS Secrets
The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the var() function and custom properties.
Claymorphism
The evolution of scalable CSS
Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide
Let’s Make A Better “Light / Dark” Toggle
Guide to image overlays in CSS
12 CSS Tricks You Might Not Know

Deploying CSS Logical Properties On Web Apps

margin-inline: auto;
margin-block: 0;
inset: 0;
inset-inline: 10%;

CSS Named Colors: Groups, Palettes, Facts, & Fun

Easy implemented dark mode

Invert all colors, set a nice background, and invert again images and emojis so they look correctly.

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .emoji {
    filter: invert(100%);
  }
}

Resizing with CSS
Everything You Need to Know About the Gap After the List Marker
Laying Out a Print Book With CSS
- https://pagedjs.org/documentation/
- https://www.print-css.rocks/
- https://doc.courtbouillon.org/weasyprint/stable/
CSS Masking - Ahmad Shadeed
Improving CSS Shapes with Trigonometric Functions
Understanding ITCSS: Real case using ITCSS
- font가 settings에 들어가는게 맞아? 다른 articles에선 CSS generate 하는 곳이 아니라는데...
Resume and pause animations in CSS
- animation-play-state property. - running and paused
Tailwind, and the death of web craftsmanship

While Tailwind may help with initial development speed, it can reduce craftsmanship and make code harder to work with over time.
Styling External Links with Attribute Selectors
- Class contains the word 'link' - a[class~='link']
- Case sensitive - a[href*='css-irl' s]
- Case insensitive - a[href*='css-irl' i]
CSS Wrapped: 2023!
Essential Tips and Tricks for Coding HTML Emails
Using the CSS contain property: A deep dive

to decrease the burden on browsers for layout calculations, paints, repaints, and reflows.
A Guide To Designing For Older Adults
Today, one billion people are 60 years or older. That’s 12% of the entire world population, and the age group is growing faster than any other group. Yet, online, the needs of older adults are often overlooked or omitted.
- Avoid disappearing messages: let users close them.
- Avoid long, fine drag gestures and precision.
- Avoid floating labels and use static field labels instead.
- Don’t rely on icons alone: add descriptive labels.
- Ask for explicit confirmation for destructive actions.
- Add a “Back” link in addition to the browser’s “Back” button.
- In forms, present one question or one topic per screen.
- Use sufficient contrast (particularly shades of blue/purple and yellow/green can be hard to distinguish).
- Make error messages helpful and forgiving.
Blur radius comparison

the three Sketch blur types, scaled to the equivelent CSS box-shadow value. They now all match!
CSS :has() Interactive Guide
CSS scoping from What You Need to Know about Modern CSS (Spring 2024 Edition)
Old CSS, new CSS

<H1><FONT COLOR=red>...</FONT></H1> …every single goddamn time.

is in fashion again! Only now it’s called class="text-red-500" :o)
Hardest Problem in Computer Science: Centering Things

STOP. USING. FONTS. FOR. ICONS.
Gap is the new Margin

Margin breaks component encapsulation. A well-built component should not affect anything outside itself.
Prediction: margins in stylesheets will decline as gap in stylesheets climb
CSS: Specificity
The Times You Need A Custom @property Instead Of A CSS Variable

CSS custom properties allow developers to specify the syntax, initial value, and inheritance behavior of CSS variables. This provides more control over how variables are used, enabling advanced animations that were previously only possible with JavaScript.
CSS Length Units
CSS display contents

Pseudo-class

Understanding the Difference Between : and :: in CSS

:: are used to create additional elements within an element
CSS Features We’re Thankful For and CSS Features We Need
- OK - :is(), :where(), grid
- not yet - :has(), subgrid
Three important things you should know about CSS :is()
- The selector list of :is() is forgiving: Invalid CSS selectors will simply be ignored.
- The specificity of :is() is that of its most specific argument
- :is() does not work with pseudo-element selectors (for now)
4 ways CSS :has() can make your HTML forms even better
How to Kill the Cascade

Cascade Precedence

The Entire Cascade (as a funnel)

Layers

Hello, CSS Cascade Layers

To overcome the fights with the cascade and specificity issues, we need to be careful about where to write a specific CSS block. In small projects, this can be okay, but for large ones, it’s a time-consuming task. As a result, we started to see different methods to help us organize our CSS better and thus reducing the cascade issues. The first three that came to my mind are the BEM (Block, Element, Modifier), Smacss by Jonathan Snook and Inverted Triangle CSS by Harry Roberts.

In this article, we’ll explore how cascade layers work, and how they will help us write CSS with more confidence, along with use-cases and examples.

History

!important

CSS co-designer here.
!important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.
Anything else is probably misuse, and a sign you may not understand the cascade properly.

SVG

Where, When, And When NOT To Use SVG!

When Shouldn’t We Use SVG?
- Presentational monochrome images such as flat icons. Webfonts can be cached, the two modern formats of WOFF and WOFF2 compress much smaller than gzipping minified SVG.
Is It Presentational And/Or Decoration? Then Don’t Put It In The Markup!
If Not In The Markup, Where?
- Your stylesheet. As a background-image.

stylable
cacheable
dimensional

Functions

CSS Image fragments - image()

.hero {
  background-image: image("images/my-image.jpg#xywh=150,50,500,300");
}

Grid

Styles

linear-gradient()
Web Design in 4 minutes
The hanging-punctuation property in CSS

Spicing up text with text-emphasis in CSS

.text-emphasis-dollar {
  text-emphasis: "$" lime;
  text-emphasis-position: under;
}

What is safe alignment in CSS?

.flex {
  display: flex;
  align-items: safe center;
}

The power of CSS Variables 💪: A flexible solution for spacing utilities

<div style="--space-top: 30px; --space-bottom: 100px;"></div>

@media (min-width: 992px) {
  [style*="--space-bottom"] {
    margin-bottom: var(--space-bottom);
  }
  [style*="--space-top"] {
    margin-top: var(--space-top);
  }
}

CSS Button Styles You Might Not Know
The manipulation value disables gestures like ‘double-tap to zoom’. Other gestures like ‘panning’ and ‘pinch to zoom’ are unaffected. An extra benefit is that the browser no longer needs to delay the click event waiting for a second tap.
```
.button,::file-selector-button {
  inline-size: fit-content;
  touch-action: manipulation;
  user-select: none;
}
*:focus-visible {
    outline: 2px solid magenta;
    outline-offset: 2px;
  }
}
```