Скидання стилів CSS
Орієнтовний час читання: 2 хвилин
Переклад з Modern CSS Reset
У цій статті ви дізнаєтесь про те, як скидати CSS.
Якщо чесно, то здається я занадто багато і занадто захоплено забиваю голову всякою нудною нісенітницею з CSS. Одним із таких моментів є скидання CSS, це можливо той момент, який забрав у мене надто багато часу за останні роки.
В епоху сучасної веб розробки, нам не так то й потрібне завантажене скидання стилів або взагалі зовсім не потрібне, оскільки проблеми сумісності CSS в браузерах зараз зустрічаються набагато рідше, ніж це було в дні старого доброго IE6. Це був момент часу, коли з'явилися такі реалізації скидання стилів у CSS, як normalize.css
і врятували нас від пекла з нескінченною метушнею при правці стилів. Але ці дні вже минули і зараз ми цілком можемо довіряти браузерам у цьому плані, так що подібні підходи до скидання стилів здебільшого вже досить зайві.
Скидання розумних налаштувань за замовчуванням
Мені досі подобається робити скидання, так що я довго і старанно, роками копирсався, як одержимий в Code golf (прим. це коли перемагає найкоротший і найдієвіший підхід у програмуванні) стилі на цьому напрямку. Я все поясню, що в цьому коді де і як, але спочатку подивіться на нього:
/* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @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
. Тут я простим і елегантним рухом відразу ж скидаю всі елементи та псевдоелементи на box-sizing: border-box
.
*, *::before, *::after { box-sizing: border-box; }
Хтось вважає, що псевдоелементи повинні успадковувати параметри блокової моделі, але я вважаю це дурним. Якщо ви хочете використовувати інше значення для box-sizing
, то просто вкажіть його — це те, як я роблю, в будь-якому випадку. Я написав про box-sizing
більше у CSS From Scratch .
/* Забираємо внутрішні відступи */ ul[class], ol[class] { padding: 0; } /* Забираємо зовнішні відступи */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; }
Після того box-sizing
, я скидаю margin
і padding
навіть там, де вони виставлені дефолтними налаштуваннями браузерів. Тут і так все зрозуміло, так що я не приділятиму цьому моменту багато уваги.
Але хоча я згадаю ситуацію зі списками. Тут я вибрав тільки ті списки, які мають атрибут class
, тому що якщо я буду використовувати чистий <ul>
або <ol>
, то я хочу, щоб він виглядав реально як список. Тут головне не перестаратися, охопивши все, як у попередньому моменті, що видалить усі відступи.
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; }
Ідемо далі: стилі для body
. Тут у мене просто. Дуже корисно вказати body
зайняти весь viewport
, навіть коли він порожній, роблю я це, виставляючи min-height
на 100vh
. Ще мені подобається плавний скролл до анкор, так що тут я виставлю scroll-behavior: smooth
.
Ще, я виставив лише два текстові стилі. line-height на 1.5, тому що по-дефолту варто 1.2, чого відверто недостатньо в плані доступності та читабельності тексту. Також я виставив text-rendering на optimizeSpeed. Використовуючи optimizeLegibility ви робите ваш текст приємнішим на вигляд, але можете зіткнутися з серйозними проблемами продуктивності, такими як затримки в 30 секунд при завантаженні , так що я намагаюся його уникати. Хоча, я іноді додаю його для секцій із мікротекстом.
ul[class], ol[class] { list-style: none; }
Як і з відступами, я скидаю стилізацію списків лише у елементів, у яких вказано class
.
a:not([class]) { text-decoration-skip-ink: auto; }
Для посилань без вказівки класу, я виставлю text-decoration-skip-ink: auto
, так що підкреслення буде рендер куди читабельніше. Взагалі, це можна було б виставити всім посиланням, але у мене виникло кілька конфліктів, тому я залишив так, як написано вище.
img { max-width: 100%; display: block; }
Далі йдуть старі чуйні добрі зображення. Я вирішив зробити все зображення блоковими елементами, тому що, відверто кажучи, життя занадто коротке, щоб миритися з цим дрібним, стрімким відступом знизу і взагалі, насправді, зображення — особливо ті, з якими я працюю — зазвичай мають на увазі блочну поведінку.
article > * + * { margin-top: 1em; }
Мені дуже подобається цей трюк в CSS і я нарешті наважився додати його на скидання. Так званий “ lobotomized owl selector ” вибирає прямих нащадків article
і додає їм зверху зовнішній відступ 1em
. Це вказує на зрозумілу періодичність у потоці контенту у article
. Взагалі, насправді, я використовую зручну штуку .flow
, зараз вже майже в кожному проекті. Ви можете більше прочитати про це на 24 Ways . Та й взагалі, мені так здається, що це зараз мій CSS.
input, button, textarea, select { font: inherit; }
Ще одна річ, яку я нарешті наважився виставити по дефолту це font: inherit
для інпутів, які, простіше кажучи, роблять те, що і повинні робити. Досить вже цього дрібного (mono, у деяких випадках) тексту!
@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 при скиданні стилів.
Висновок
Ось і все, ось він маленький і скидання для стилів, яке робить життя набагато простіше. Якщо він вам сподобається, то сміливо можете його брати на озброєння! Беріть його на GitHub або в NPM .