CSS isn't magic | Stas Melnikov | Substack

The min() function allows us to define values, and browsers will choose the smallest value from them. How can it be used? Define the width and max-width properties in one line ☝️ ❤ Thank you so much, my sponsors: Ben Rinehart, Tatiana Ten

Mar 22

New Top Community

Did you use the top, right, bottom and left properties to stretch elements over the full width and height of the parent? 🤔 Reduce it to one line with…

Mar 15

Folks, did you define display: flex or display: inline-flex to the parent? Yeap? Stop defining display: block for ::before or ::after. Browsers make it…

Mar 8

I'm angry when controls merge with a white screen before loading pictures. Uh uh, why don't you show me them?😡It's easy to add background-color if you…

Mar 1

How do you define basic typography styles? If you set styles via the type selector and reset via class I'll offer to make it without resetting. Just use…

Feb 22

Motion animation might lead users with vestibular disorders to experience dizziness 😩 So we should wrap it in prefers-reduced-motion to avoid problems…

Feb 15

Please, stop using outline: none 🤚 We have another solution! Just reset outline with :focus:not(:focus-visible) for users who click on controls and…

Feb 8

We used to use resize: none to disable textarea resizing. We end up textareas are terrible for typing data😒 resize: vertical and limit height resizing…

Feb 1

Recommendations

The UX&a11y tips

Stas Melnikov

Stas Melnikov

CSS isn't magic

About Archive Recommendations Sitemap

#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