#CSSence #AdventCalendar Day 24

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

»Media Queries Test Page«
https://cssence.com/2024/media-queries-including-level-5/

#CSS #MediaQueries

#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«
https://cssence.com/2024/forced-colors-mode-futility/

2024 has clearly been a #ForcedColorsMode year for me.

#A11Y #CSS

#CSSence #AdventCalendar Day 22

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

»CSS System Colors«
https://cssence.com/2024/css-system-colors/

#CSS SystemColors #Test

#CSSence #AdventCalendar Day 21

Call `stopPropagation` twice …

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

#HTML #JS

#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«
https://cssence.com/2024/redesigning-in-the-open/

#WebDev #Redesign

#CSSence #AdventCalendar Day 19

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

»Web Share API meets A11Y«
https://cssence.com/2024/web-share-api/

#A11Y #JS #WebShareAPI

#CSSence #AdventCalendar Day 18

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

»Forced Colors Mode Strategies«
https://cssence.com/2024/forced-colors-mode-strategies/

#CSS #ForcedColors

#CSSence #AdventCalendar Day 17

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

»Character-based alignment«
https://cssence.com/2024/text-align-decimal/

#CSS #Tabular #Alignment

#CSSence #AdventCalendar Day 16

Every responsive journey starts without media queries.

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

#CSS #ResponsiveDesign

#CSSence #AdventCalendar Day 15

No distorted images, thank you.

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

#HTML #CSS

#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«
https://cssence.com/2024/accent-color-is-no-css-variable-revisited/

#CSS #SystemColors

#CSSence #AdventCalendar Day 13

Milestone.

»Keep bloggin’«
https://cssence.com/2024/keep-blogging/

#weblog #blogging

#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«
https://cssence.com/2024/display-flow-root/

#CSSence #AdventCalendar Day 11

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

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

#CSS #DarkMode

#CSSence #AdventCalendar Day 10

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

https://cssence.com/2024/six-levels-of-dark-mode/

#WebDev #DarkMode

#CSSence #AdventCalendar Day 9

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

https://cssence.com/2024/hyphenation/

#CSSence #AdventCalendar Day 8

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

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

#HTML #A11Y #WebDev

#CSSence #AdventCalendar Day 7

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

https://cssence.com/2024/has-has-landed/

#CSS

#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«
https://cssence.com/2024/superior-range-syntax/

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

#CSS #RangeSyntax

#CSSence #AdventCalendar Day 5

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

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

#CSS #not