Archive - CSS isn't magic

background-color doesn't allow controls merge with the white screen

Controls merge with a white screen before loading pictures.

Jul 9 •

What does :not(class) make useful?

How do you define basic typography styles?

Jul 2 •

June 2025

animation without prefers-reduced-motion might lead to dizziness or headache

Motion animation might lead users with vestibular disorders to experience dizziness.

Jun 25 •

Please, stop using resize: none

We used to use resize: none to disable textarea resizing.

Jun 18 •

The hidden attribute removes the need to define display: none

We don't need to define display: none by hand when creating the elements that can be shown or hidden.

Jun 11 •

scroll-behavior: scroll can lead to dizziness or headache

Please, wrap it in the prefers-reduced-motion media feature.

Jun 4 •

May 2025

We don't need to use 0 anymore to define margins and paddings

I had to make a not logical thing, i.e.

May 28 •

position: absolute frees us from using display: block

Are you used to defining display: block for ::before or ::after?

May 21 •

justify-content: center and align-items: center leads to loss of elements

May 14 •

The gap property smashes margins!

Stop, stop, stop defining margins to set the gap between a few elements.

May 7 •

April 2025

Let's reduce the combination of the width and max-width properties to one

The min() function allows us to define values, and browsers will choose the smallest value from them.

Apr 30 •

Reduce top: 0; right: 0; bottom: 0; left: 0 to one line!

Did you use the top, right, bottom and left properties to stretch elements over the full width and height of the parent?

Apr 23 •

#nojs-banner { position: fixed; bottom: 0; left: 0; padding: 16px 16px 16px 32px; width: 100%; box-sizing: border-box; background: red; color: white; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 13px; line-height: 13px; } #nojs-banner a { color: inherit; text-decoration: underline; } This site requires JavaScript to run correctly. Please turn on JavaScript or unblock scripts