Современный CSS reset (генератор)

Современный CSS reset (генератор): для чего нужен

Каждый проект начинается с исправления одного и того же: отступы по умолчанию, box-sizing, изображения, ломающие вёрстку, поля форм с другим шрифтом и длинные слова, разрывающие экран на телефоне.

Отметьте нужные правила и скопируйте короткий reset с комментариями: box-sizing border-box, минимальная высота в dvh, адаптивные медиа, font: inherit в формах, overflow-wrap, text-wrap balance и pretty для заголовков и абзацев, плавная прокрутка только для тех, кто не просил меньше движения, и отключение анимаций для тех, кто просил.

Как пользоваться

1. Отметьте правила, которые хотите использовать.
2. Прочитайте комментарий к каждому.
3. Скопируйте или скачайте reset.css и поместите в начало CSS.

Когда использовать

• Начать сайт с нуля.
• Стандартизировать проекты команды.
• Понять, что делает каждое правило reset.

Частые вопросы

Что такое CSS reset?

Небольшой набор правил в начале CSS, который убирает различия и неудобные значения по умолчанию в браузерах: отступы у body, изображения, ломающие вёрстку, и поля форм с другим шрифтом. Облегчает написание остального CSS.

Reset или normalize?

normalize.css сохраняет стили по умолчанию и лишь устраняет различия между браузерами; современный reset идёт чуть дальше и убирает то, что почти всегда переопределяют. Современные браузеры стали куда более похожими, поэтому короткие reset вроде этого стали самыми популярными.

Почему плавная прокрутка находится внутри media query?

Анимированная прокрутка может вызывать тошноту у людей, чувствительных к движению. Внутри prefers-reduced-motion: no-preference она включается только у тех, кто не просил в системе меньше движения.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты