TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #100 3.31K
(Более) современный CSS Reset

Хоть я сам не сторонник «универсальных» библиотек для сброса браузерных стилей, часто что-нибудь в них подсматриваю, когда они обновляются.

Энди Белл делится обновлением своей версии стилей для сброса, которой он пользуется в личных и рабочих проектах. Сразу скажу, просто взять и скопировать — плохая идея, Энди про это в том числе пишет в статье. Но разобраться, зачем нужен каждый блок, точно будет полезно.

box-sizing: border-box — сам использую в своих проектах, хотя в статье справедливо написано, что в современных раскладках это часто уже не нужно.

text-size-adjust: none — чинит необычное поведение горизонтального поворота экрана в iOS.


ul[role='list'],
ol[role='list'] {
list-style: none;
}

— интересная самомотивация расставлять role у списков, чтобы Safari не превращало нестилизованные списки в обычные блоки с текстом.


h1, h2, h3, h4 {
text-wrap: balance;
}

— современно, сам в свои проекты добавляю постепенно.


a:not([class]) {
text-decoration-skip-ink: auto;
}

— тоже как будто уже не нужно в большинстве браузеров, но для консистентности с остальными ссылками добавлял бы.


input, button, textarea, select {
font: inherit;
}

— классика, тоже использую. Жаль, что браузеры не могут сделать это новым дефолтом — сломаются существующие сайты в Интернете.


:target {
scroll-margin-block: 5ex;
}

— о да. Меня тоже бесит, что якоря на странице при переходе по ссылке либо прилипают к самому верху (часто скрывая часть текста), либо вообще спрятаны за залипающей шапкой.

В статье есть ещё несколько стилей. Почитайте, вдруг найдёте для себя что-то полезное.

https://piccalil.li/blog/a-more-modern-css-reset/
Piccalilli A (more) Modern CSS Reset I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.
  • 👍 79
  • ❤ 9
  • 💯 6
  • 🌚 1
More from @mefody_dev
  1. Sep 28, 2026View Transitions Toolkit Брамус делится своей коллекцией утилит, чтобы можно было более уд…
  2. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  3. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  4. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  5. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  6. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →