LightNews — News, ranked by scholars

Matthias Zöchling

@cssence.com

#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...

Hyphenation

Consistent browser behavior, but still hard to grasp.

cssence.com

December 9, 2024 at 7:28 AM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 21

Call `stopPropagation` twice …

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

#HTML #JS

Form label event bubbling

Call stopPropagation once, shame on you. Call stopPropagation twice, …

cssence.com

December 21, 2024 at 7:21 AM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 15

No distorted images, thank you.

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

#HTML #CSS

aspect-ratio Gotcha!

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

cssence.com

December 15, 2024 at 9:33 AM

Matthias Zöchling

@cssence.com

#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...

Relative CSS units

Quite a few more units have entered the picture.

cssence.com

December 4, 2024 at 7:26 AM

Matthias Zöchling

@cssence.com

#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

CSS System Colors

With some unstyled HTML elements on the side.

cssence.com

December 22, 2024 at 6:43 AM

Matthias Zöchling

@cssence.com

#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

Media Queries Test Page

May contain traces of Media Queries Level 5.

cssence.com

December 24, 2024 at 9:26 AM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 16

Every responsive journey starts without media queries.

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

#CSS #ResponsiveDesign

Not always mobile first

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

cssence.com

December 16, 2024 at 8:40 AM

Matthias Zöchling

@cssence.com

#introduction 👋
My name is Matthias, but online you are more likely to know me as @CSSence. I’m a web developer from Austria with focus on semantic #HTML and #A11Y. I’m into #CSS since its early days. You’ll find me blogging about web development stuff over at cssence.com.

CSSence.com «The Essence of CSS»

Weblog and #IndieWeb Hub of Matthias Zöchling (@CSSence).

cssence.com

November 6, 2024 at 10:28 AM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 7

`:has()` meets `

` meets `

`. Safari fixed the bug mentioned in this article two weeks ago.

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

#CSS

:has() Has Landed

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

cssence.com

December 7, 2024 at 7:32 AM

Matthias Zöchling

@cssence.com

Something something masonry layout.

cssence.com/2026/farewel...

#CSS

Farewell Twitter

@CSSence on Twitter: July 14, 2010 – July 8, 2026.

cssence.com

July 9, 2026 at 7:52 AM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 11

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

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

#CSS #DarkMode

Color scheme switcher

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

cssence.com

December 11, 2024 at 7:10 AM

Matthias Zöchling

@cssence.com

#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

Superior Range Syntax

One more thing about the improved viewport size media queries.

cssence.com

December 6, 2024 at 6:58 AM

Frontend Dogma

@frontenddogma.com

Breakpoints, by @cssence@mas.to:

https://cssence.com/2026/breakpoints/

#design #accessibility #mobile #css

Breakpoints

Screen resolutions and the 320/360 devide mishap.

cssence.com

March 14, 2026 at 9:30 PM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 8

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

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

#HTML #A11Y #WebDev

Native visually hidden

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

cssence.com

December 8, 2024 at 8:05 AM

Matthias Zöchling

@cssence.com

#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

accent-color is no CSS variable, revisited

But did you know there are also AccentColor and AccentColorText?

cssence.com

December 14, 2024 at 7:51 AM

Matthias Zöchling

@cssence.com

#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

Character-based alignment

How to align numbers in table cells by decimal point?

cssence.com

December 17, 2024 at 7:15 AM

Frontend Dogma

@frontenddogma.com

Unicode Variation Selectors, by @cssence@mas.to:

https://cssence.com/2026/font-variant-emoji/

#css #selectors #unicode #emoji

Unicode Variation Selectors

In case you haven’t heard of font-variant-emoji…

cssence.com

April 20, 2026 at 7:24 AM

Matthias Zöchling

@cssence.com

#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

Forced Colors Mode Futility

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

cssence.com

December 23, 2024 at 7:45 AM

Frontend Dogma

@frontenddogma.com

Accessibility Is Personal, by @cssence@mas.to:

https://cssence.com/2025/accessibility-is-personal/

#accessibility #html

Accessibility is personal

Is A11Y work rewarding? Demanding? Exhausting? All of the above?

cssence.com

January 11, 2026 at 9:30 AM

Matthias Zöchling

@cssence.com

#CSSence #AdventCalendar Day 13

Milestone.

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

#weblog #blogging

Keep bloggin’

Following up on the “5000 days” milestone.

cssence.com

December 13, 2024 at 6:24 AM

Matthias Zöchling

@cssence.com

#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

Redesigning in the open

My site now has a dedicated ‘Links’ section. But there’s more.

cssence.com

December 20, 2024 at 7:36 AM

Matthias Zöchling

@cssence.com

#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...

Display flow-root

The end of the clearfix hack, and more.

cssence.com

December 12, 2024 at 9:31 AM

lunamoth

@lunamoth.bsky.social

다크 모드의 여섯 단계 (2024) | GeekNews

news.hada.io/topic?id=28705

Six levels of dark mode - CSSence

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

모바일에서는 다크모드 선호하는데, PC 웹에서는 잘 안쓰게 되더군요. 그리고 PC 웹에서는 검은색 배경 사이트 있으면 stylebot 으로 * {background-color: white; color: black;} 넣어서 보는 편

다크 모드의 여섯 단계 (2024) | GeekNews

브라우저 기본 기능부터 JavaScript 미디어 쿼리까지, 다크 모드 구현 범위를 점진적으로 넓혀 가는 8단계 구분 정리가장 단순한 방식은 <meta name="color-scheme" content="light dark"> 또는 color-scheme: light dark 선언만으로 사용자 색상 스킴 선호를 따르게 하는 구성더 높은 단계에서는 light

news.hada.io

April 20, 2026 at 3:03 PM

Matthias Zöchling

@cssence.com

#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