reset css что это
Что такое CSS Reset?
Перевод статьи: What is a CSS Reset?
Автор: Joss Crowcroft.
CSS Reset — это небольшой, зачастую сжатый (минимизированный) набор CSS правил, в результате применения которых сбрасываются стили всех HTML элементов до соответствующих изначальных значений.
Это безусловно создает ряд трудностей для разработчиков в процессе CSS кодирования, связанных с кроссбраузерностью или другими словами с обеспечением единого внешнего вида сайта во всех существующих браузерах.
Простейший пример сайта до и после использования CSS Reset.
Ниже представлен первый когда-либо созданный веб-сайт в двух вариантах — один в своем обычном виде, когда браузер применяет собственные каскадные таблицы стилей, используемые по умолчанию и второй, после их сброса с помощью CSS Reset :
Для чего предназначен CSS Reset?
Вы, возможно, думаете зачем все это нужно. Все довольно просто. Произведя сброс всех, предусмотренных в любом браузере стилей до самого основания, вы можете смело приступать к CSS кодированию и оформлять ваш документ необходимым образом, совершенно не беспокоясь о том, что какие-либо имеющиеся в барузерах предустановки повлияют на отображение вашей страницы.
Спорные вопросы.
Однозначного мнения по поводу применения CSS Reset нет. Некоторые считают, что в нем нет необходимости, поскольку сбрасывать стили элемента лишь для того, чтобы потом их переопределить бессмысленно. Действительно, если рассматривать отдельно определенный элемент, применяя к нему соответствующий фрагмент CSS Reset кода с последующим назначением ему необходимых стилей, то эта точка зрения становится очевидна:
…
/* #element rules: */
#element
В большинстве случаев они правы, поскольку использование этого приема приводит к повторному выполнению кода и увеличению времени обработки документа, в то время как одного правила было бы вполне достаточно. Поэтому многие разработчики и дизайнеры придерживаются мнения, что применение CSS Reset нарушает один из основных принципов CSS кодирования — ‘DRY’ (Don’t Repeat Yourself — Не повторяйтесь).
Надеюсь, что данная статья пролила свет на вопрос «Что такое CSS Reset?» для многих из вас. Предлагаю ознакомиться с одной из своих следующих статей — «Какой вариант CSS Reset лучше использовать?», которая является продолжением изложенного выше материала ( *перевод этой статьи будет предоставлен вашему вниманию ближайшее время ).
Современный сброс стилей CSS
Oct 12, 2019 · 5 min read
В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.
👉 Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.
В эпоху современной веб р а зработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.
Сброс разумных настроек по умолчанию
Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:
Ну, а теперь разбираемся
Дальше идут старые добрые резиновые изображения. Я решил сделать все изображения блочными элементами, потому что, откровенно говоря, жизнь слишком коротка, чтобы мириться с этим мелким, стрёмным отступом снизу и вообще, в реальности, изображения — особенно те, с которыми я работаю — обычно подразумевают под собой блочное поведение.
Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!
Заключение
Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.
История о 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.
CSS: reset или normalize?
Дата публикации: 2013-07-15
От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.
Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul
СБРОС ИСХОДНЫХ НАСТРОЕК CSS
Чтобы добиться небольшой стабильности, некоторые разработчики сбрасываю все поля и отступы с помощью универсального селектора:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Определив отступ списка и начав с этого свою таблицу стилей, вы получите то, что ожидали. Однако применение * означало, что поле и отступ по умолчанию «грохнулись» для всех элементов и, как только вы добавляли элемент form, становилось совсем тяжко.
Тантек Челик (Tantek Celik) и Эрик Майер (Eric Meyer) начали обсуждение более точного способа адресации к различиям стилей по умолчанию в 2004г., при этом в 2006г. появился YUI CSS Reset, и Meyer Reset в 2007г.
Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей — Эрик Майер (Eric Meyer)
Он делает сброс некоторых свойств многих (но не всех) элементов до эквивалента простого текста. Так как сбрасываются только соответствующие элементы, таким образом обходятся некоторые проблемы *
ПРОБЛЕМЫ СБРОСА НАСТРОЕК CSS
Сбросы CSS были настоящим спасением, но сейчас, особенно при условии возвышения каркасов-фреймов, они часто используются «как есть». Например, Эрик предполагал, что другие разработчики начнут строить сайты на предложенных им стилях сброса, соответствующим образом отменяя их, и в первую версию Meyer Reset временно включалось это правило:
К сожалению, на деле не все определяли стили фокуса, и из второй версии Эрик его удалил.
Применяя сбросы, ощущаешь себя немного извращенцем. Сброс стилей браузера по умолчанию заставляет размышлять о том, как должен показываться каждый элемент, помогая убедиться, что элементы применяются по семантике, а не стилям по умолчанию. Но для элементов вроде i и em почти всегда имеется стиль браузера по умолчанию. Другие браузерные стили по умолчанию, такие, как бывший некогда смехотворно большим размер текста заголовков, изменились и по умолчанию стали довольно сносными. Проблемы начинаются, когда кто-то хочет после передачи применить сброшенный элемент HTML только с назначенными «обесстиленными» стилями сброса.
Для меня важнейшей проблемой сбросов является наследование, ведущее к спаму в браузерных инструментах. При попытке отследить в чужом коде проблему CSS глубоко вложенного элемента это не поможет:
Правила сброса CSS, повторяемые по причине наследования
NORMALIZE.CSS
Николас Галлахер (Nicolas Gallagher) и Джонатан Нил (Jonathan Neal) предприняли иной подход с помощью Normalize.css, «маленького файла CSS, гарантирующего лучшую кроссбраузерную последовательность в стилях по умолчанию элементов HTML». Как и в случае со сбросами CSS, он дает нам надежную кроссбраузерную стартовую точку — в первую очередь основную причину применения сброса — но два этих подхода разнятся с философской точки зрения.
Сбросы CSS отменяют стили агента пользователя и возвращают множество элементов к их «обесстиленному» состоянию, некому ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части элементов до того, как мы сможем строить с их помощью. Вместо этого Normalize.css адресуется только к несообразностям стилей агента пользователя, выбирая самые подходящие настройки по умолчанию, в чем и заключается различие. Здесь мы тоже получаем безопасный кроссбраузерный фундамент, но такой, который включает нормализованные стили агента пользователя в качестве готовых к использованию базовых строительных материалов. В основном это нечто вроде идеализированной кроссбраузерной версии таблицы стилей по умолчанию CSS 2.1. В обоих случаях мы затем должны добавлять собственные доминирующие стили для создания изображения, но оттого, что настройки браузера по умолчанию в Normalize.css остаются, в общем приходится добавлять меньше стилей.
Так как изменения в Normalize.css более адресные, в ваших браузерных инструментах разработки отсутствует каскад наследования переписанных правил. Вот простой ul:, «обесстиленный» с помощью Meyer Reset и Normalize.css версий 1 и 2:
«Обесстиленный» элемент неупорядоченного списка
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Применяем Meyer Reset
Применяем Normalize.css v1
Applying Normalize.css v2
Явно видна разница в философии, когда пример Meyer Reset появляется как пара строк простого текста без полей, отступа или маркеров, тогда как примеры Normalize.css похожи на стили по умолчанию. Разница в стилях, примененных к этому ul, тоже легко заметна.
Однако это не все стили, примененные к ul. Для сравнения вот вам тот же самый «обесстиленный» скриншот, но с видимыми стилями агента пользователя, в Firefox 21 и Opera Next 15:
Стили агента пользователя Mozilla
Стили агента пользователя Opera
Это тот CSS, который мы сбрасываем или нормализуем.