Я думаю об очень скучных CSS-вещах и получаю от этого удовольствие — возможно, гораздо больше, чем следовало бы, если честно. Есть одна вещь, из-за которой я, вероятно, потратил слишком много времени на размышления за эти годы — это сброс CSS.
В современную эпоху веб-разработки нам на самом деле не нужна жесткая перезагрузка или даже перезагрузка вообще, потому что проблемы с совместимостью браузера с CSS гораздо менее вероятны, чем в старом IE6. Это была эпоха, когда появились сбросы, такие как normalize.css, и спасли нас всех от ада. Те дни прошли, и мы можем доверять нашим браузерам, чтобы они вели себя хорошо, поэтому я думаю, что подобные сбросы, вероятно, в основном излишни.
Сброс до разумных значений
Мне все еще нравится сбрасывать, поэтому я медленно и постоянно возился со сбросом сам на протяжении многих лет в одержимой манере код-гольфа. Я объясню, что к чему, но прежде чем я это сделаю, вот оно целиком:
/* Правила размеров боксов */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Убираем margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Скидываем стили ul, ol элементов с ролью «список» */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Установить основные корневые значения по умолчанию */
html:focus-within {
scroll-behavior: smooth;
}
/* Установить основные значения по умолчанию для body */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Элементы, у которых нет класса, получают стили по умолчанию */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Упростите работу с изображениями */
img,
picture {
max-width: 100%;
display: block;
}
/* Наследование шрифта для ввода и кнопок */
input,
button,
textarea,
select {
font: inherit;
}
/*Удалите все анимации, переходы и плавную прокрутку для людей, которые предпочитают их не видеть */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Разбор полётов
Начнем с размеров коробки. Я просто сбросил все элементы и псевдоэлементы, чтобы использовать box-sizing: border-box.
*,
*::before,
*::after {
box-sizing: border-box;
}
Некоторые люди думают, что псевдоэлементы должны inheritограничивать размеры блоков, но я думаю, что это глупо. Если вы хотите использовать другое значение box-sizing , задайте его явно — по крайней мере, я так делаю. Я уже писал о box-sizing в CSS From Scratch .
/* Убираем дефолтные отступы */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
После изменения размера окна я выполняю общий сброс margin, где он устанавливается стилями браузера. Это все довольно очевидно, поэтому я не буду вдаваться в подробности.
html:focus-within {
scroll-behavior: smooth;
}
«Сброс» сейчас в основном сделан, поэтому первое, что я делаю для основных стилей — настраиваю плавную прокрутку. Ранее это было установлено прямо для html элемента, но недавние обновления привели к тому, что это было обновлено, чтобы применять плавную прокрутку только при наличии :focus-within элемента html.
Мне нравится, что это было обновлено недавно. Я никогда даже не думал, что поиск на странице может стать таким проблематичным (вы обязательно должны прочитать этот пост). Большое спасибо Дэвиду Дарнсу за работу по связям с общественностью.
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
Далее: стили кузова. Я делаю это очень просто. Это полезно для <body>заполнения области просмотра, даже когда она пуста, поэтому я делаю это, устанавливая min-heightзначение 100vh.
Я установил только два стиля текста. Я установил значение line-height, 1.5потому что значение по умолчанию 1.2просто недостаточно велико, чтобы иметь доступный, читаемый текст. Я тоже text-renderingпоставил optimizeSpeed. Использование optimizeLegibilityделает ваш текст более красивым, но может иметь серьезные проблемы с производительностью, такие как 30-секундные задержки загрузки, поэтому я стараюсь избегать этого сейчас. Хотя я иногда добавляю его в разделы микрокопии.
ul[role='list'],
ol[role='list'] {
list-style: none;
}
Я сбрасываю только list-style там, где элемент списка имеет role=["list"] атрибут. Это помогает решить некоторые проблемы с доступностью, как экспертно объяснил Скотт.
a:not([class]) {
text-decoration-skip-ink: auto;
}
Для ссылок без атрибута класса я устанавливаю text-decoration-skip-ink: autoтак, чтобы подчеркивание отображалось более читаемым образом. Это можно было бы установить для ссылок глобально, но в прошлом это вызывало у меня один или два конфликта, поэтому я оставлю это так.
img {
max-width: 100%;
display: block;
}
Следующими идут старые добрые стили плавных изображений. Я установил изображения как блочный элемент, потому что, честно говоря, жизнь слишком коротка для этого странного промежутка, который вы получаете внизу, и на самом деле изображения — особенно с моей работой — имеют тенденцию вести себя как блоки.
input,
button,
textarea,
select {
font: inherit;
}
Еще одна вещь, которую я, наконец, осмелился установить по умолчанию — это font: inherit элементы ввода, которые, если коротко, делают именно то, что написано на жестяной банке . Нет больше крошечного (в некоторых случаях моно) текста!
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
И наконец, что не менее важно, это одиночный @mediaзапрос, который сбрасывает анимацию, переходы и поведение прокрутки, если пользователь предпочитает уменьшение движения. Мне нравится это в сбросе, когда специфичность превосходит !important, потому что, скорее всего, теперь, если пользователь не хочет движения, он его не получит, независимо от CSS, следующего за этим сбросом.
Обновление : благодаря @atomiks сделано обновление, чтобы не нарушать отслеживание событий JavaScript animationend и transitionend.
Подведение итогов
Вот и все, очень маленькая перезагрузка, которая делает мою жизнь намного проще. Если вам это нравится, вы можете использовать его и сами! Вы можете найти его на GitHub или NPM .