(Более) современный CSS Reset
Хоть я сам не сторонник «универсальных» библиотек для сброса браузерных стилей, часто что-нибудь в них подсматриваю, когда они обновляются.
Энди Белл делится обновлением своей версии стилей для сброса, которой он пользуется в личных и рабочих проектах. Сразу скажу, просто взять и скопировать — плохая идея, Энди про это в том числе пишет в статье. Но разобраться, зачем нужен каждый блок, точно будет полезно.
— интересная самомотивация расставлять
— современно, сам в свои проекты добавляю постепенно.
— тоже как будто уже не нужно в большинстве браузеров, но для консистентности с остальными ссылками добавлял бы.
— классика, тоже использую. Жаль, что браузеры не могут сделать это новым дефолтом — сломаются существующие сайты в Интернете.
— о да. Меня тоже бесит, что якоря на странице при переходе по ссылке либо прилипают к самому верху (часто скрывая часть текста), либо вообще спрятаны за залипающей шапкой.
В статье есть ещё несколько стилей. Почитайте, вдруг найдёте для себя что-то полезное.
https://piccalil.li/blog/a-more-modern-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/