Reset css что это
Сброс CSS стилей, примеры работающих решений
Все HTML элементы страниц по-умолчанию имеют свои определенные значения. И, к сожалению, не одинаково трактуются разными браузерами. В результате страдает оформление сайта, его дизайн меняется при смене браузера (интернет обозревателя). Цель процедуры сброса стилей состоит в том, чтобы уменьшить несогласованность браузера в таких вещах, как высоты строки, поля, размеры шрифтов заголовков и т. д.
Примеры скриптов сброса CSS стилей
Есть мнение, что каждый уважающий себя вебмастер должен написать свой собственный код сброса CSS. Но я сторонник другого подхода, взять готовое решение, разобраться в нем и подкорректировать при необходимости.
Eric Meyer CSS Reset
Скрипт сброса от Eric Meyer, со слов самого автора, намеренно очень общий. Например в нем для элемента body не задан какой-либо цвет фона по-умолчанию. Поэтому он должен быть изменен, отредактирован, расширен и иным образом настроен в соответствии с вашими потребностями. Добавьте нужные цвета для страниц, ссылок и так далее.
Yahoo! (YUI 3) Reset CSS
Сброс стилей CSS YUI 3 смягчает противоречивый стиль HTML-элементов браузерами, так же как и любой другой скрипт сброса CSS, чтобы создать надёжную основу для создания веб-сайтов и веб-приложений.
Сброс стилей normalize.css
Normalize.css — это настраиваемый CSS-файл, который позволяет браузерам отображать все элементы более последовательно и в соответствии с современными стандартами. Его авторы исследовали различия между стилями разных браузеров по-умолчанию, чтобы скорректировать только те стили, которые нуждаются в нормализации.
Сброс через универсальный селектор * (звездочка)
На первый взгляд это может показаться самым простым и удачным решением, зачем описывать все HTML элементы и присваивать им значения, когда можно использовать селектор *, ведь его действие распространяется на все HTML.
Но к сожалению, это не хорошая практика. Браузеру очень тяжело (занимает много времени по сравнению с другими процедурами сброса CSS) применять правила к каждому элементу в документе, особенно на больших веб-страницах, а также может разрушить много хороших стилей по умолчанию.
Сброс стилей и WordPress
Если вы хотите использовать один из вышеописанный методов сброса CSS стилей для сайта на WordPress, то это можно сделать двумя способами.
Первый заключается в том, что вам необходимо скопировать код сброса в начало файла style.css вашей темы WordPress (после строчек об авторстве и названии темы, то есть после текста обрамленного дробью и звездочкой /* … */.
Во втором случае код сброса нужно сохранить в отдельный файл, например reset.css, положить рядом с файлом style.css и затем подключить его, добавив нижеследующий код в начало файла style.css:
Если в CSS есть директива @import, то она должна находиться в самом начале таблицы (перед всеми правилами). В противном случае браузер может ее проигнорировать.
В прочем, для повышения быстродействия, таблицы CSS стилей, как правило, наоборот соединяют в один файл. Поэтому использовать @import без реальной необходимости не стоит.
Как видите, сброс стилей в WordPress ничем особенным не выделяется.
Благодарности
При написании статьи были использованы следующие источники:
Обнуление CSS стилей — зачем это делать, типы CSS Reset файлов
У каждого браузера есть свои предустановленные правила оформления веб-страниц и элементов на них (user agent stylesheet), подключаемые автоматически по умолчанию. Тем не менее, большинство верстальщиков при создании нового проекта добавляет в него специальный файл Reset CSS, который осуществляет полное обнуление CSS стилей и позволяет разработчикам творить с «чистого листа». Почему и как это все делается — разберу в текущей статье.
Если вы посмотрите на картинку-превью к посту, то увидите, что обычная строка поиска по сайту в Safari, Chrome и Firefox отображается абсолютно разным образом. Да, иногда правила в них совпадают, например, все скрывают тег head через опцию display: none!, однако во многих случаях есть серьезные различия при рендеринге объектов на странице. Подозреваю, что некоторым вашим клиентам может не понравится, когда итоговый вариант верстки выглядит не так, как на макете.
Поэтому, если вы начинающий веб-разработчик, публикация вам однозначно пригодится для общего развития. Она является переводом этой заметки с обзором состояния дел в сфере CSS Resets в 2018 году. Уверен, что в 2019 и позже все это еще будет актуально, т.к. данной теме уже исполнилось больше 10лет (с момента выхода первого подобного решения).
Зачем нужен сброс CSS настроек
Как вы уже поняли из вступления, они позволяют устранить разбежности между базовыми стилями веб-браузеров и привести их к одному плюс-минус стандартизированному виду. Применяются всегда в самом начале перед остальными пользовательскими наработками. В статье Эрика Мейера о Reset CSS десятилетней давности упоминается основная причина этого подхода, которая спустя годы до сих пор актуальна:
Проблема заключается в том, что разные браузеры имеют свои настройки по умолчанию, причем все они не одинаковые. Мы думаем, что наш код изменяет начальное оформление страницы, однако это не совсем так, и с помощью reset-файлов можем сделать этот стандартный вид документа более однообразым для всех программ. Следовательно придется меньше времени тратить на борьбу с базовыми установками Firefox, Chrome и др. по умолчанию.
Но ведь сейчас ситуация в верстке менее противоречивая?
Да, действительно, в наше время многие параметры в user agent стали более похожими. Практически везде заголовку H1 задается размер шрифта 2em и горизонтальный отступ 0.67em. Однако это все относительно новые изменения, и как минимум, нужно учитывать поддержку старых версий программ, где подобной согласованности нет.
Кроме того, в некоторых случаях в зависимости от типа обнуления CSS (об этом ниже) нам все еще пригодится эта фишка даже, если бы рассматривались только современные веб-браузеры.
Но мы ведь применяем свои стили, переопределяя базовые?
Эта один из основных тезисов противников данного подхода — в конечном итоге все равно те или иные параметры заменяются собственным style.css, так зачем добавлять еще один лишний файл и уменьшать скорость загрузки сайта? Не смотря на то, что в этой фразе есть смысл, использование ресета оправдано двумя моментами:
Типы CSS Reset (скачать можно по ссылкам в статье)
Начиная с далекого 2004, когда появились первые подобные наработки, сейчас есть достаточно много методов, отличающихся по сложности и своей специфике. По сути, существует 3 цели, которые пытается решить сброс стилей CSS:
Есть варианты, решающие все три задачи и те, которые заточены только под одну конкретную проблему.
Коррекция/исправление ошибок
Рассмотрим первую из целей, озвученных выше. Как вы уже поняли, ликвидация разных недочетов и косяков броузеров наиболее актуальна для поддержки устаревших релизов. Один из хороших примеров такой ситуации — когда после появления HTML5 тот же Internet Explorer 9 не применил корректный тип display к новым объектам.
Поэтому в решениях по типу Normalize.css все ошибки учтены и обработаны:
/** * Add the correct display in IE. */ main
Поскольку эти действия нужны только для старого софта, есть смысл использовать постпроцессор PostCSS такой как PostCSS Normalize совместно с Browserlist дабы добавлять их только, когда вам требуется реализовать поддержку определенных браузеров.
Другой пример кода от Pure CSS, который подходит в том числе и к современным веб-программам — исправление display элементов и атрибутом hidden.
Убираем своеобразные стили браузеров
Это вторая причина сброса настроек CSS. В принципе, у каждого свое мнение относительно того какое оформление в user-agent stylesheet считать «своеобразным». Определение автора оригинальной заметки достаточно логичное: это такой стиль, который не является «голой» версией отображения элемента. Например, добавление отступов для заголовков в 2em (как это делают многие), идея не плохая, но почему именно 2em, а не 3em или не 4em. В таком случае базовым вариантом было бы отсутствие какого-либо отступа, то есть нулевой margin.
Самый простой универсальный подход, удаляющий отступы/поля тегов:
Данный метод слишком радикальный, т.к. применяется ко всем объектам, даже тем, где вы не ожидаете (в том же input). В качестве альтернативы чаще используется Eric Meyer Reset CSS, который убирает параметры margin/padding, границы и размер шрифта (в 0 или none) там, где это логически оправдано:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
Переопределение стилей
В отличии от предыдущего раздела, здесь основная задача не обнуление CSS у тех или иных объектов, а переопределение их собственными актуальными значениями.
Например, вместо установки всем шрифтам размера 1em и margins = 0 в Sanitize.css задаются другие величины:
/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1
В Bootstrap’s Reboot найдете еще одну иллюстрацию текущей задачи. Разработчики пошли чуть дальше и прописали шрифты и цвет фона для body.
Итого. Что же выбрать
В оригинальной заметке есть результат соответствующего опроса из твиттера среди фолловеров — какие решения по данной теме они используют чаще всего.
В итоге победил Normalize.css, который комбинирует корректировку разных ошибок веб-браузеров с заданием базовых совместимых правил. Также многие респонденты сказали, что используют собственные наработки.
Что касается мнения автора статьи (Ire Aderinokun, фронтенд и UX девелопер), то она предпочитает скачать Reset CSS Эрика Мейера и немного модифицировать его под себя. Причины тут две:
Кастомный подход для нормализации и сброса стилей (custom-reset.css)
Здесь я поделюсь своими наработками для нормализации и сброса стилей.
За несколько лет у меня сформировался небольшой файл, за основу которого, изначально, был взят нормалайз.
Почему нормалайз, а не ресет. Он заточен именно под кросбраузерность, что очень важно. Но в чистом виде он меня вообще не устраивал, различные отступы, бордеры и т. д. только мешали, потому я немного подогнал его под свои потребности, поудаляв то, что мне было не нужно.
Со временем файл разрастался, лишнее из нормалайза удалялось, недостающее добавлялось.
Основной целью его создания было максимально подготовить основу для любого проэкта, что по-моему получилось, даже очень удачно. Файл получился довольно универсальный, но все же перед подготовкой проэкта в него нужно заглядывать и возможно что-то коректировать.
Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.
custom-reset.css
Краткое описание
Определение блочной модели
Базовые настройки
focus это важно, а outline нет
Состояние фокуса это очень важный момент для взаимодействия с интерективными элементами. (Как и почему здесь). Но outline зачастую не вписывается в дизайн. И сами дизайнеры редко прорисовывают это состоние, потому частой практикой стало дублирование стилей ховера.
Это ленивый способ.
Нормальные дизайнеры всегда прорисовывают состояние фокуса.
Три основных состояния должны всегда присутствовать на каждом интерактивном элементе ( :hover, :focus, :active ).
Отступы
Отступы обнулены, текстовые свойства наследуются.
Если вам нужны отступы для пользовательского контента (а они нужны), должен быть свой класс обертка и свой стайлгайд.
Текстовый контент тоже нужно уметь правильно верстать выставляя правильные отступы и высоту строки.
О том, каким может быть пользовательский контент:
Текстовые элементы
Полное наследование. Ссылки больше не синие, стронг не болд, ем не италик. Em, strong это семантические элементы, они используются не для оформления. Например для названиях товаров, в карточках. То что они имеют по дефолту стили не значит, что они будут нужны именно в том, месте где используется этот тег.
Цвет и подчеркивание ссылки мешает когда эта ссылка в виде кнопки или в виде большой кнопки с картинкой и текстом.
Элементы форм:
Удаляются полностью стили присвоенные кнопкам и инпутам, что может кому-то показаться спорным.
Бывает, возникают неудобства с кнопками при смене тегов, чаще всего это бывает с ссылки на кнопку и наоборот.
(Тег button нельзя использовать как флекс контейнер. На IOSах сломается.)
fieldset и legend
Часто встречал, что эти семантические элементы форм использовались в декоратиыных целях.
Никогда так не делайте, это пример худшей практики. Вот пару примров с нормальной реализацией:
(Тег fieldset нельзя использовать как флекс контейнер. Не работает просто.)
select
Отменяем стандартное отображение select’а
→ Оформляем select сами: codepen
placeholder
Плейсхолдер наслудует цвет. Исчезает при фокусе.
svg (работа с иконками)
Тег svg хоть и полноценный тег, который поддерживает любые свойства, я всегда использую для него обертку, которой и задаю размеры и цвет. Такой подход очень удобный для работы с спрайтами 2-х типов.
Расскажу, как мы работаем с иконками:
Иконочный шрифт мы не используем.
У нас есть 2 типа иконок:
— одноцветные
— цветные (иконки и мелкие изображения).
Все они в формате svg.
Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется. Выглядит это так:
И инклюдится на страницу он так:
И стили для него: (этот код добавляется в файл)
Для цветных используется css спрайт:
Загружается css спрайт асинхронно
Генерируется это, понятное дело, галпом.
Что дает такой подход
Для иконки делается контейнер нужного размера и не зависимо от того, будет иконка цветной или нет, она в него отлично впишется.
hidden
Атрибут, который скрывает элемент. Пригодится.
:disabled
Правильный курсор. Так как задизейбленной кнопкой может быть ссылка, то псевдокласс уже не сработает, так как ссылка не элемент формы. Для этого добавляйте класс.
::-ms-clear
Псевдоэлемент в инпуте IE для очистки текста.
:-webkit-autofill
С помощью внутренней тени закрашиваем этот псевдоэлемент под нужный цвет. И наследует заданный цвет.
::selection
Классы
.clearfix
Хоть сейчас во всю используются флексы, не стоит забывать про флоаты, и тем более не стоит забывать про чистку потока для флоатов.
.visually-hidden
Для семантики: Когда надо спрятать заголовок, который должен быть, но его нет в дизайне. Скрытие этим способом не игнорируется скринридером.
Для кастомизация цекбоксов/радиобаттонов:
Скрывать с помощью display: none; или атрибута hidden плохая идея, так как инпут теряет способность получать фокус, а фокус (как мы знаем) это важно.
В работе с изображениями, а именно с тегом
есть некоторые сложности:
Но нельзя просто задать высоту обертке или изображению, потому что при ресайте страницы потеряются нужные пропорции.
И чтоб этого не происходило, высота задается за счет padding в % для псевдоэлемента обертки (:before). Как известно padding в % берет значение ширины родителя, не зависимо заданы вертикальные или горизонтальные значения.
(padding в % некоректно отображается в мозиле, если он задан флекс итему).
Само изображение нужно спозиционировать абсолютно относительно обертки. Когда необходимо, чтоб изображение занимало все пространство (на подобии background-size: cover;). Используется класс .cover-pic
Когда необходимо, чтоб изображение занимало не все пространство (на подобии background-size: contain;). Используется класс .contain-pic
В итоге получается:
Тем же методом сверстаны изображения в инстаграмме, только они нарезаются нужной формы и необходимость в object-fit отпадает.
→ Пример
Прижатие футера
Фикс при прижатии футера для IE. В блоке с min-height (которым в данном случае служит body) flex некоректно работает.
Выше показан один из самых оптимальных способов. Прижатие с помощью таблиц и гридов тоже не требует знать высоту футера, но табличный способ как-то не принято (и немного неудобно) использовать, а гриды не очень кросбраузерно.
Так почему не ресет или не нормалайз? Они не могут полноценно подготовить проект, в любом случае приходится немало дописывать, и потому практически у каждого верстальщика есть свои наработки.
Спасибо, что прочитали мою статью, надеюсь она будет вам полезна. Вопросы и предложения, идеи и замечания приветствуются.
P. S. Советую ознакомиться с публикацией Организация отступов в верстке (margin/padding). И советую использовать css линтеры. И кому интересно, может решить css задачку.
История о CSS-сбросах и все, что о них нужно знать. Еще раз об этом
Полное ( или почти полное, надеюсь) руководство по библиотекам CSS Reset
Фото Sasha • Stories на Unsplash
Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.
Чем тщательнее вы подготовитесь (dev-ops, пайплайны, бандлинг заказов) к проекту заранее, тем больше времени сэкономите в долгосрочной перспективе, то есть наличие правильных начальных настроек для reset.css потенциально может сэкономить вам часы отладки вашего CSS.
Это моя попытка собрать всю возможную информацию о них и создать всеобъемлющее руководство, а также предоставить вашему вниманию некоторый обзор.
Корень проблемы
Каждый веб-проект обычно начинается с того, что дизайнер создает макет веб-страницы и передает его веб-разработчику. Я создала фейковый макет в демонстрационных целях.
Немного экспресс-дизайна для демонстрационных целей
А вот как это выглядит без стилей, просто “голый” HTML.
По мере формирования страницы вы будете добавлять стили CSS в ваш HTML. Создав весь первый раздел, проверьте его в разных браузерах, между ними вы заметите несколько небольших расхождений.
В данном примере это может показаться вам несущественным, только если вы не проверите мобильные браузеры (и особенно стили форм).
Эти мелкие несоответствия накапливаются со временем и в итоге дизайн вашего сайта выглядит непоследовательным во всех браузерах. Именно по этой причине люди используют сброс настроек: чтобы сайт выглядел одинаково в каждом браузере.
Никогда еще мы не имели так мало контроля над агентами пользователя и устройствами, на которых люди просматривают наши веб-сайты, но при этом у нас никогда еще не было так много контроля над тем, как мы можем стилизовать наши веб-сайты.
Хорошим напоминанием об этом является проект «Веб-дизайн за 4 минуты«, который иллюстрирует прогресс, достигнутый веб-дизайном за последние два десятилетия (я не говорю о креативных веб-сайтах).
Более наглядным примером, вероятно, будет Codepen, визуализирующий “футпринт браузера”:
Что с этим делать?
Это довольно простая тема и достаточно доступная для новичков (одна из первых вещей, которые вы изучаете, когда начинаете писать CSS), тем не менее, ее очень часто упускают из виду.
Последствия игнорирования особенностей сброса могут привести к непоследовательности дизайна вашего приложения на разных платформах и браузерах, не говоря уже о том, что вы можете потерять много времени на отладку CSS.
Зачем нужен сброс CSS?
Необработанный нестилизованный HTML-файл, url: https://jsbin.com/tesaxiqeti/edit?html,output
Открыв файл в браузере, вы, вероятно, увидите нестилизованный контент, который был помещен в HTML-страницу. Еще одним отличным примером этого может служить самый первый веб-сайт. Любопытно, что на нем нет ни одного CSS. Буквально. Абсолютно нет.
Почему мы видим что-то, несмотря на отсутствие стилей? Мы привыкли к этому, но обычно не задумываемся о том, как браузер отображает страницу.
В принципе, при полном отсутствии CSS вы, скорее всего, увидите пустой экран.
Если объяснить более понятно, то у каждого браузера есть стандартная таблица стилей «агента пользователя», которая по умолчанию применяется к каждой веб-странице в каждом браузере. Почему? Мы не будем углубляться в то, как работает критический путь рендеринга браузера, тем не менее, вы должны знать, что после того, как ваш браузер сделал парсинг DOM, он должен иметь по крайней мере несколько правил CSS для того, чтобы нарисовать элементы HTML на своем экране.
DOM и CSSOM составляются в единое дерево рендеринга, после чего происходит отрисовка макета.
Только после создания дерева рендеринга браузер начинает отрисовывать элементы следующим образом:
Выполните компоновку дерева рендеринга для вычисления геометрии каждого узла.
Нарисуйте отдельные узлы на экране.
При полном отсутствии CSS вы, скорее всего, увидите пустой экран. Как указано в официальной документации:
«Агент пользователя: Соответствующие агенты пользователя должны применять таблицу стилей по умолчанию (или вести себя так, как будто они ее применяют). Таблица стилей по умолчанию агента пользователя должна представлять элементы языка документа способами, которые удовлетворяют общим ожиданиям представления для данного языка (например, для визуальных браузеров элемент EM в HTML представляется с помощью курсивного шрифта). Рекомендуемая таблица стилей по умолчанию для документов HTML приведена в разделе Образец таблицы стилей для HTML.
Обратите внимание, что пользователь может изменять системные настройки (например, системные цвета), которые будут оказывать влияние на таблицу стилей по умолчанию. Однако некоторые варианты имплементации агентов пользователя делают невозможным изменение значений в таблице стилей по умолчанию. [. ]
По умолчанию правила в авторских таблицах стилей имеют больший вес, чем правила в пользовательских таблицах стилей. Однако для правил «!important» приоритет меняется на противоположный. Все пользовательские и авторские правила имеют больший вес, чем правила в таблице стилей UA’s (агента пользователя) по умолчанию».
Поскольку браузеры имеют встроенные таблицы стилей (нечто подобное показано ниже), они предотвращают появление пустого экрана, когда мы создаем наш HTML-код без кода CSS.
Вы можете легко ознакомиться с таблицами стилей по умолчанию для всех основных браузеров или посмотреть список наиболее популярных здесь, поскольку почти все они находятся в открытом доступе.
https://bitsofco.de/a-look-at-css-resets-in-2018/
Итак, почему мы должны переопределять CSS по умолчанию?
Таблицы стилей браузеров по умолчанию отличаются друг от друга.
Более подробно об этом рассказывается на сайте cssreset.com:
Конечно, вы, вероятно, приведете контраргумент:
Однако многочисленные преимущества этой техники перевешивают все недостатки, и не в последнюю очередь благодаря более логичному развитию: вставьте свой CSS Reset, свои базовые стили (если необходимо), а затем определите все остальное. Кроме того, приятно знать, что у вас есть все необходимое.
Поскольку каждый браузер по умолчанию отображает DOM-дерево немного по-разному, хорошей идеей будет сбросить некоторые стандартные настройки, чтобы веб-страница выглядела одинаково.
Гораздо безопаснее включить сброс CSS, чем его не включать.
Если вы используете какую-то библиотеку пользовательского интерфейса, например Bootstrap, Foundation, Materialize, тогда все в порядке: они уже включают первоначальные сбросы.
По сути, мы хотим, чтобы ваш сайт был единообразным.
Как найти и выбрать библиотеку сброса?
Многие разработчики не задумываются о том, КАКИЕ библиотеки сброса они используют в своем коде. Они просто скачивают первую попавшуюся и идут дальше. Но когда дело доходит до сброса CSS браузера, перед вами открывается множество вариантов, даже больше, чем вы думаете.
Один из пионеров метода сброса CSS, Эрик Мейер, еще в 2004 году создал таблицу стилей Reset, которая до сих пор используется на миллионах сайтов. Без сомнения, это самая популярная библиотека сброса на сегодняшний день. Большинство людей используют ее в неотредактированном виде, несмотря на рекомендацию Мейера не делать этого:
«Проблема в том, что многие просто вставляют любой старый CSS Reset без изменений. А это плохо».
Эрик Мейер, когда он впервые применил технику сброса CSS (см. «Сброс CSS» Эрика Мейера), прямо заявил, что:
«Стили сброса, приведенные здесь, намеренно очень общие. Например, нет никакого цвета или фона по умолчанию для элемента body . Я не рекомендую использовать их в неизменном виде в своих проектах. Его следует подправить, отредактировать, расширить и иным образом настроить в соответствии с вашими конкретными исходными данными. Внесите предпочтительные цвета страницы, ссылки и т.д.».
Другими словами, это отправная точка, а не самодостаточный «черный ящик» с неприкосновенностью.
Поэтому, даже если вы используете сброс, никогда не стоит «просто скачивать его», поскольку в результате вы можете получить не совсем то, что ожидаете, а некоторые старые версии сбросов могут испортить CSS вашего проекта.
Множество способов сброса CSS
Еще в 2007 году Джефф Старр собрал воедино множество различных способов сброса CSS. С тех пор кое-что изменилось и улучшилось, поэтому в данной статье я представлю вам различные библиотеки сброса от самой маленькой до самой большой, не стесняйтесь, выбирайте свою любимую. Скоро вы увидите, что истина заключается в следующем
Как оказалось, этот факт уже был отмечен Крисом Койером в его статье CSS-Tricks. Для того чтобы вы могли убедиться в этом, я создала небольшую демонстрацию (по ссылке ниже), основанную на идее Дэниела Бокса:
Вариант 1: Сброс универсального селектора ‘*’
или еще немного более «причудливая» версия этого:
В случае, если вы не хотите включать никакие сбросы вообще, все равно не помешает сбросить поля и отступы. Это сэкономит вам много усилий по подстройке CSS в дальнейшем.
NB: Сброс контуров включать не следует, стили фокуса не удаляются, а только заменяются (для сохранения их доступности).
Вариант 2: Tantek Celik`s undohtml.css
Относительно минимальный сброс с несколькими улучшениями по сравнению со сбросом универсального селектора ‘*’.
Единственный файл, который мне удалось найти, датирован 2004 годом, но с точки зрения HTML с тех пор мало что изменилось. Этот документ сделает самый обычный сброс для вашего приложения, особенно для псевдоклассов ( :link,:visited ). Интересно, что он не сбрасывает поля и отступы для тегов
Теперь тот же сброс без комментариев:
Вариант 3: MiniReset.css
Я бы рекомендовала использовать это в вашем коде для минималистичного сброса стилей.
Вариант 4: Сброс CSS Эрика Мейера
Некоторые теги в представленном сбросе устарели, однако одна из причин его популярности заключается в том, что люди привыкли к нему, и в конечном итоге он выполняет свою работу достаточно неплохо. Я бы все-таки рекомендовал держаться подальше от библиотек, использующих старые теги, зачем они вообще нужны?
Вариант 5: HTML5 Doctor CSS Reset
Основанная на Reset CSS Эрика Мейера, таблица стилей HTML5 Reset от HTML5Doctor.com призвана обеспечить основу для любых веб-сайтов, использующих новые атрибуты HTML 5, улучшая при этом некоторые области, а также удаляя поддержку устаревших элементов HTML 4.
Как описано здесь, он основан на печально известном Reset CSS. Данная библиотека практически встроена поверх библиотеки Reset и имеет некоторые улучшения, такие как
1. Улучшения в тегах (старые теги удалены и добавлены новые):
2. Новые дополнения: внимание к тегам и
HTMLdoctor имеет некоторые усовершенствования по сравнению со стандартным сбросом
NB: Остерегайтесь того, что он включает в себя некоторые самоуверенные цвета, которые вы, возможно, захотите изменить в своей собственной версии!
Вариант 6: Yahoo Reset CSS
Вариант 7: Tripoli CSS Reset
Вариант 8: Normalize.css
Он скорее следит за тем, чтобы элементы выглядели единообразно в разных браузерах. Отсюда и все эти конкретные цифры. Кроме того, одна из замечательных сторон заключается в том, что специалисты по сопровождению действительно заботятся о том, чтобы следить за всеми несоответствиями браузеров, даже с префиксами браузера. Приятным моментом является то, что эта библиотека хорошо поддерживается и обновляется.
Вариант 9: Sanitize.css
Джонатан, разочарованный тем, что не нашел именно то, что ему было нужно, создал библиотеку на основе Normalize.css с некоторыми улучшениями. Вот сравнение с Normalize слева и Sanitize справа.
Эта библиотека очень хорошо поддерживается, и я рекомендую обратить на нее внимание.
Вариант 10: Reboot.css
Еще одна мощная библиотека сброса, основанная на Normalize.css. Bootstrap использует ее для сброса стилей браузера по умолчанию и придания веб-страницам единообразного вида. Вот сравнение Normalize и Reboot (слева и справа соответственно):
Если вы хотите узнать больше, я настоятельно рекомендую прочитать следующие статьи:
Вариант 11: Destyle Reset
Самоуверенная таблица стилей сброса, которая обеспечивает чистый лист для стилизации вашего html.
У него достаточно неплохая документация, с которой вы можете ознакомиться здесь.
Вариант 12: CSS remedy
Данный вариант еще не доработан, но я уверен, что это не помешает людям использовать его! CSS Remedy утверждает, что использует другой подход:
CSS Remedy устанавливает свойства или значения CSS такими, какими они были бы, если бы CSSWG создавала CSS сегодня, с нуля, и не беспокоилась об обратной совместимости.
Я бы, наверное, посоветовал критически оценить документацию и, может быть, частично включить ее в свой собственный сброс CSS в проекте.
Специализированные сбросы
Конечно, есть некоторые сбросы, которые направлены на достижение конкретной цели, например, сброс формы: https://formalize.me/ Он решает проблему полей формы, когда они в разных местах работают непредсказуемым образом.
«Vanilla предназначена для вставки в вашу таблицу стилей CSS, а затем корректируется и настраивается по мере необходимости. Она задумана как базовая таблица стилей, которую можно использовать, чтобы не начинать каждый раз сначала».
Написание собственного сброса
В качестве альтернативы вы можете написать свой собственный пользовательский сброс CSS. Существует множество примеров, некоторые из них объясняются довольно подробно, и я рекомендую вам ознакомиться с ними:
Другая статья от Хельмута Вандля, где он показал свой подход к написанию сброса в минималистическом стиле.
Единственное, что я действительно рекомендую при написании собственного сброса: проверьте, какие свойства критичны в плане доступности (контур, :focus), и убедитесь, что вы не удаляете их, а заменяете. Существует много ресурсов, которые можно найти, например, здесь и здесь. И помните, что все сбросы являются самоуверенными.
Теперь, когда нам все известно, что мы будем с этим делать?
Добавляя их после, вы рискуете нарушить некоторые из существующих стилей и получить проблемы с выравниванием макета. Лично я использую Sanitize.css в тандеме с html5doctos (именно в таком порядке). Сначала я нормализую все, а затем сбрасываю остальное. Конечно, Destyle также является хорошим вариантом.
Сбрасывать или не сбрасывать? Вот в чем вопрос.
Я видела много статей, в которых подробно объяснялось, зачем нужен сброс CSS, а также много статей против его использования. Вот одна из них. А вот еще одна.
Вы должны быть своим собственным техническим руководителем и сами решать, как вы хотите организовать свой CSS. Это моя попытка объяснить, к чему все это привело и почему я являюсь большим сторонником CSS.