Media Queries Test Page May contain traces of Media Queries Level 5.

#CSSence #AdventCalendar Day 24

A CodePen that may contain traces of Media Queries Level 5 completes the calendar.

»Media Queries Test Page«
cssence.com/2024/media-q...

#CSS #MediaQueries

Forced Colors Mode Futility Can “Forced Colors Mode” be used as an entry-level debugging tool?

#CSSence #AdventCalendar Day 23

It started with a talk at CSS in Graz, and led to two essays and two extras, one of which has been my contribution to the HTMHell Advent Calendar.

»Forced Colors Mode Futility«
cssence.com/2024/forced-...

2024 has clearly been a #ForcedColorsMode year.

#A11Y #CSS

CSS System Colors With some unstyled HTML elements on the side.

#CSSence #AdventCalendar Day 22

Can you spot the use of the `color-scheme` property in this CSS System Colors test page?

»CSS System Colors«
cssence.com/2024/css-sys...

#CSS SystemColors #Test

Form label event bubbling Call stopPropagation once, shame on you. Call stopPropagation twice, …

#CSSence #AdventCalendar Day 21

Call `stopPropagation` twice …

»Form label event bubbling«
cssence.com/2024/form-la...

#HTML #JS

Redesigning in the open My site now has a dedicated ‘Links’ section. But there’s more.

#CSSence #AdventCalendar Day 20

With all my doings and undoings in 2024, it’s almost as if I’ve been redesigning in the open after all.

»Redesigning in the open«
cssence.com/2024/redesig...

#WebDev #Redesign

Web Share API meets A11Y A Progressive Enhancement conundrum.

#CSSence #AdventCalendar Day 19

The day I chose a questionable bit of added functionality over semantic correctness:

»Web Share API meets A11Y«
cssence.com/2024/web-sha...

#A11Y #JS #WebShareAPI

Forced Colors Mode Strategies A reminder that “Forced Colors Mode” is a thing, and some strategies you can apply today.

#CSSence #AdventCalendar Day 18

The author of »Six levels of Dark Mode« also has six strategies for Forced Colors Mode:

»Forced Colors Mode Strategies«
cssence.com/2024/forced-...

#CSS #ForcedColors

Character-based alignment How to align numbers in table cells by decimal point?

#CSSence #AdventCalendar Day 17

Today’s entry happens to be my most recent article, which already made it into several newsletters.

»Character-based alignment«
cssence.com/2024/text-al...

#CSS #Tabular #Alignment

Not always mobile first With “Basics First” you’ll implement your designs with fewer lines of code.

#CSSence #AdventCalendar Day 16

Every responsive journey starts without media queries.

»Not always mobile first«
cssence.com/2024/not-alw...

#CSS #ResponsiveDesign

aspect-ratio Gotcha! Be careful when you want to use aspect-ratio on an image element that has width/height attributes.

#CSSence #AdventCalendar Day 15

No distorted images, thank you.

»aspect-ratio Gotcha!«
cssence.com/2024/aspect-...

#HTML #CSS

accent-color is no CSS variable, revisited But did you know there are also AccentColor and AccentColorText?

#CSSence #AdventCalendar Day 14

Earlier this year I may have been a bit too optimistic about Chrome/Edge/Opera/… catching up with support of AccentColor(Text).

»Accent Color Access, Revisited«
cssence.com/2024/accent-...

#CSS #SystemColors

Keep bloggin’ Following up on the “5000 days” milestone.

#CSSence #AdventCalendar Day 13

Milestone.

»Keep bloggin’«
cssence.com/2024/keep-bl...

#weblog #blogging

Display flow-root The end of the clearfix hack, and more.

#CSSence #AdventCalendar Day 12

Search engines send a lot of readers who want to know more about `display: flow-root`. Apparently it’s a good idea to also write about lesser-known #CSS stuff.

»Display flow-root«
cssence.com/2024/display...

Color scheme switcher HTML-only and beyond: Automatic, light, or dark color scheme.

#CSSence #AdventCalendar Day 11

```
html:has(meta[name="color-scheme"][content="dark"]) { … }
```

»Color scheme switcher«
cssence.com/2024/color-s...

#CSS #DarkMode

Six levels of dark mode From HTML-only to JS-infused, and all the CSS in between.

#CSSence #AdventCalendar Day 10

If you have read my essay on dark mode, you know that it contains more than six levels.

cssence.com/2024/six-lev...

#WebDev #DarkMode

Hyphenation Consistent browser behavior, but still hard to grasp.

#CSSence #AdventCalendar Day 9

Yes, `hyphens` got Baseline support last year. And yes, #CSS is supercalifragilisticexpialidocious. But hyphenation is still hard to grasp.

cssence.com/2024/hyphena...

Native visually hidden I did some research on last year’s debate whether we need it.

#CSSence #AdventCalendar Day 8

`.visually-hidden`, a code smell for not-so-great design?

»Native visually hidden«
cssence.com/2024/native-...

#HTML #A11Y #WebDev

:has() Has Landed At long last, I’ve added a dash of :has() to my site.

#CSSence #AdventCalendar Day 7

`:has()` meets `<li>` meets `<details>`. Safari fixed the bug mentioned in this article two weeks ago.

cssence.com/2024/has-has...

#CSS

Superior Range Syntax One more thing about the improved viewport size media queries.

#CSSence #AdventCalendar Day 6

No more off-by-one errors in media queries. The article that turned the most heads this year was also the most fun to write.

»Superior range syntax«
cssence.com/2024/superio...

(And it’s already my second most popular article of all time.)

#CSS #RangeSyntax

Not to mention I wrote .something about how to (not) select an ancestor, which turned out rather .specific.

#CSSence #AdventCalendar Day 5

Exactly one month ago I ended up “selecting an element which doesn’t descend from another”.

»Not to mention«
cssence.com/2024/not-to-...

#CSS #not

Relative CSS units Quite a few more units have entered the picture.

#CSSence #AdventCalendar Day 4

While we wait for Rhythmic Sizing, there are a lot of units in #CSS we can put to good use.

»Relative CSS units«
cssence.com/2024/relativ...

CSS-only bottom-anchored scrolling area I’ve added an additional wrapper to Kitty Giraudel’s CodePen.

#CSSence #AdventCalendar Day 3

At one point this year, I did need an additional `<div>` element.
»CSS-only bottom-anchored scrolling area«
cssence.com/2024/bottom-...

#CSS #scrolling

Digital Gardens Digital gardening, an emerging trend?

#CSSence #AdventCalendar Day 2

From April Fools joke to serious article, published under two URLs, announced over the course of three days.
»Digital Gardens«
cssence.com/2024/digital...

#Blogging #Revisited

Is CSS alive? Spoiler alert: More than ever! But let me go back in time a bit.

#CSSence #AdventCalendar Day 1

Gotta start the advent calendar same way I’ve started the year, with my take on how #CSS has progressed.

»Is CSS alive?«
cssence.com/2024/is-css-...

(From tomorrow onwards, things won’t be chronological anymore.)

Advent Calendar 2024 Selecting my 24 favorites among the articles I’ve written this year, a.k.a. my “year in review”.

#CSSence #AdventCalendar Day 0 (Announcement)

As mentioned, 2024 has been my best blogging year so far. For the next 24 days, I’ll be posting my 24 favorite articles; that’s as close as I’ll ever get to doing a “year in review”.

cssence.com/2024/advent-...