Как сбросить стили CSS браузера

Мой сброс CSS может не соответствовать классическому определению «сброса CSS», но я беру на себя эту творческую свободу.

Викторина! Измеряя видимой розовой рамкой, насколько широк элемент .box в следующем сценарии, при условии, что никакие другие CSS не применялись?

Наш элемент .box имеет ширину: 100%. Поскольку его родитель имеет ширину 200 пикселей, эти 100 % будут преобразованы в 200 пикселей.

Но где применяется ширина 200 пикселей? По умолчанию этот размер применяется к окну содержимого.

Если вы не знакомы, «блок содержимого» — это прямоугольник в модели блока, который фактически содержит содержимое внутри границы и заполнения:

Объявление width: 100% установит для поля содержимого .box значение 200 пикселей.Отступ добавит дополнительные 40 пикселей (по 20 пикселей с каждой стороны). Граница добавляет последние 4 пикселя (по 2 пикселя с каждой стороны). Когда мы посчитаем, видимый розовый прямоугольник будет иметь ширину 244 пикселя.

Когда мы пытаемся втиснуть блок размером 244 пикселя в родительский элемент шириной 200 пикселей, он переполняется:

Площадка для кода

Это странное поведение, верно? К счастью, мы можем это изменить, установив следующее правило:

При применении этого правила проценты будут определяться на основе границы. В приведенном выше примере розовое поле будет иметь размер 200 пикселей, а внутреннее поле содержимого уменьшится до 156 пикселей (200–40 – 4 пикселя).

На мой взгляд, это обязательное правило. Это делает CSS значительно более удобным для работы.

Мы применяем его ко всем элементам и псевдоэлементам, используя селектор подстановочных знаков ( * ). Вопреки распространенному мнению, это неплохо сказывается на производительности.

Я видел в Интернете несколько рекомендаций по этому поводу:

Это может оказаться полезной стратегией, если вы пытаетесь перенести большой уже существующий проект на использование рамки. В этом нет необходимости, если вы начинаете новый проект с нуля. Для простоты я исключил его из сброса CSS.

Разверните, чтобы увидеть пример того, когда это может быть полезно.

Браузеры исходят из здравого смысла в отношении полей. Например, h1 по умолчанию будет содержать больше полей, чем абзац.

Эти предположения разумны в контексте текстового документа, но могут быть неточными для современного веб-приложения.

Отступы — коварная вещь, и чаще всего мне хочется, чтобы элементы не имели их по умолчанию. Поэтому я решил удалить все это. 🔥

Если/когда я хочу добавить некоторое поле к определенным тегам, я могу сделать это в своих собственных стилях проекта. Селектор с подстановочными знаками ( * ) имеет крайне низкую специфичность, поэтому это правило легко обойти.

Вы когда-нибудь пытались использовать высоту в процентах в CSS, но обнаруживали, что это не дает никакого эффекта?

Вот пример:

Площадка для кода

Основной элемент имеет высоту: 100% , но элемент вообще не увеличивается!

Это не работает, потому что в макете Flow (основной режим макета в CSS) высота и ширина действуют по совершенно разным принципам. Ширина элемента рассчитывается на основе его родительского элемента, а высота элемента рассчитывается на основе его дочерних элементов.

Это сложная тема, и она выходит за рамки данной статьи. Я планирую написать об этом сообщение в блоге, а пока вы можете узнать все об этом в моем курсе CSS, CSS для разработчиков JavaScript.

В качестве быстрой демонстрации здесь мы видим, что наш основной элемент может расти, когда мы применяем это правило:

Площадка для кода

Если вы используете фреймворк JS, такой как React, вы также можете добавить в это правило третий селектор: элемент корневого уровня, используемый фреймворком.

Например, в моих проектах Next.js я обновляю правило следующим образом:

Вы можете задаться вопросом: зачем вообще возиться с ростом в процентах? Почему бы вместо этого не использовать единицу vh?

Проблема в том, что блок vh не работает должным образом на мобильных устройствах; 100vh будет занимать более 100 % площади экрана, потому что мобильные браузеры делают то же самое, что и пользовательский интерфейс браузера.

В будущем эту проблему решат новые блоки CSS. До тех пор я продолжаю использовать высоту в процентах.

line-height определяет интервал по вертикали между каждой строкой текста в абзаце. Значение по умолчанию зависит от браузера, но обычно оно составляет около 1,2.

Это безразмерное число представляет собой соотношение, основанное на размере шрифта. Он работает так же, как единица em. При высоте строки 1,2 каждая строка будет на 20 % больше размера шрифта элемента.

Вот в чем проблема: для тех, кто страдает дислексией, эти строки расположены слишком близко друг к другу, что затрудняет чтение. Критерии WCAG гласят, что высота строки должна быть не менее 1,5.

Теперь это число приводит к появлению довольно больших строк в заголовках и других элементах с крупным шрифтом:

Площадка для кода

Возможно, вы захотите переопределить это значение для заголовков. Насколько я понимаю, критерии WCAG предназначены для основного текста, а не для заголовков.

Я экспериментировал с альтернативным способом управления высотой строк. Вот оно:

Это довольно сложный небольшой фрагмент, и он выходит за рамки этой записи в блоге, но вот краткое объяснение.

Хорошо, это немного спорно.

На компьютерах с MacOS браузер по умолчанию будет использовать «субпиксельное сглаживание». Это метод, призванный облегчить чтение текста за счет использования цветов R/G/B в каждом пикселе.

Раньше это считалось преимуществом специальных возможностей, поскольку улучшало контрастность текста. Возможно, вы читали популярную запись в блоге «Прекратите «исправлять» сглаживание шрифтов», в которой выступает против перехода на «сглаживание».

Вот в чем проблема: эта статья была написана в 2012 году, еще до появления дисплеев Retina с высоким разрешением. Современные пиксели намного меньше и невидимы невооруженным глазом.

Физическое расположение пиксельных светодиодов также изменилось. Если вы посмотрите на современный монитор под микроскопом, вы больше не увидите упорядоченной сетки линий R/G/B.

В MacOS Mojave, выпущенной в 2018 году, Apple отключила субпиксельное сглаживание во всей операционной системе. Я предполагаю, что они поняли, что на современном оборудовании это приносит больше вреда, чем пользы.

Как ни странно, браузеры MacOS, такие как Chrome и Safari, по-прежнему используют субпиксельное сглаживание по умолчанию. Нам нужно явно отключить его, установив для параметра -webkit-font-smoothing значение antialiased .

Вот разница:

Сглаживание

Субпиксельное сглаживание

MacOS — единственная операционная система, использующая субпиксельное сглаживание, поэтому это правило не действует на Windows, Linux или мобильных устройствах. Если вы работаете на компьютере с MacOS, вы можете поэкспериментировать с рендерингом в реальном времени:

Площадка для кода

И вот странная вещь: изображения считаются "встроенными" элементами. Это означает, что их следует использовать в середине абзаца, например или .

Это не соответствует тому, как я чаще всего использую изображения. Обычно я обращаюсь с изображениями так же, как с абзацами, заголовками или боковыми панелями; это элементы макета.

Однако если мы попытаемся использовать встроенный элемент в макете, произойдут странные вещи. Если у вас когда-либо возникал загадочный промежуток в 4 пикселя, который не был ни полем, ни отступом, ни границей, вероятно, это было «волшебное встроенное пространство», которое браузеры добавляют с помощью line-height .

Установив display: block по умолчанию для всех изображений, мы обходим целую категорию странных проблем.

Я также установил максимальную ширину: 100%. Это делается для того, чтобы большие изображения не переполнялись, если они помещены в контейнер, ширина которого недостаточна для их размещения.

Большинство элементов блочного уровня будут автоматически увеличиваться/уменьшаться, чтобы соответствовать их родительскому элементу, но мультимедийные элементы, например, особенные: они известны как заменяемые элементы и не подчиняются тем же правилам.

Если исходный размер изображения 800 × 600, элемент также будет иметь ширину 800 пикселей, даже если мы поместим его в родительский элемент шириной 500 пикселей.

Это правило предотвратит выход изображения за пределы контейнера, что мне кажется гораздо более разумным поведением по умолчанию.

Еще одна странная вещь: по умолчанию кнопки и элементы ввода не наследуют типографские стили от своих родителей. Вместо этого у них есть свои странные стили.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

На днях я увидел в статье Николаса Серминары (осторожно перейдя по этой ссылке, похоже, что у них запущены некоторые скрипты отслеживания), что в Bootstrap 4 есть новый встроенный сброс CSS, который они называют Reboot:

Reboot, коллекция изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для дальнейшего развития.

Если вы новичок в разработке CSS, вся идея сброса CSS заключается в устранении несоответствий стилей в разных браузерах. Например, только что я открыл страницу без каких-либо других стилей. Chrome применяет отступы: 2px 6px 3px; – Firefox применяет отступы: 0 8px; . Сброс CSS применит к этому элементу новое заполнение, чтобы все браузеры единодушно относились к тому, что они применяют. Таких примеров масса.

Кстати, немного истории…

В 2007 году Джефф Старр провел множество различных сбросов CSS. Самый старый из датированных — undohtml.css Тантека Челика (это прямая ссылка на источник). Мы видим, что цель этого заключалась в том, чтобы убрать стили по умолчанию.

Начните с такого сброса (в верхней части рабочей таблицы стилей), и стили, которые вы пишете в послесловии, будут иметь прочную основу.

Спустя годы, когда HTML5 стал более реальным, такие сбросы, как сброс HTML5 Ричарда Кларка, приобрели популярность. Это все еще была модифицированная версия перезагрузки Мейера, и она сохранила этот дух.

Помимо всего этого, было много разработчиков, которые пошли по минимуму, просто убрав поля и отступы от всего, и на этом остановившись:

Глупые мелочи: логотип CSS-Tricks был вдохновлен универсальным селектором и этой идеей.

А вот и Normalize.css…

Normalize.css представляет собой первый значимый сдвиг в духе того, что должен делать сброс CSS. Вот что мне показалось в нем таким необычным:

• Это была свежая оценка всего, что могло быть оформлено по-разному в разных браузерах, и оно касалось всего этого. Там, где старые сбросы CSS представляли собой несколько строк кода, несжатое и задокументированное нормализованное значение равно 447.
• Стили элементов, которые уже были согласованы во всех браузерах (по большей части), не удалялись. Например, в Normalize нет ничего для элементов h2-h6, только исправление для странного элемента h1. Это означает, что вы не удаляете иерархию заголовков, а стиль по умолчанию остается.
• Идея его изменения была более приемлемой, чем просто добавление. Например, есть раздел только для

Сегодня у Normalize 7.0.0 и 30 000 звезд на GitHub. Он чертовски популярен.

Значит, сбросы могут быть самоуверенными?

Мы видели много разных подходов к сбросу CSS, и мы видели фундаментальные изменения в подходе, поэтому я думаю, будет справедливо сказать, что сброс CSS может занимать самоуверенную позицию.

Давайте рассмотрим несколько способов…

• Затрагивает ли сброс каждый возможный элемент? Или подмножество элементов? Как он решает, какие элементы трогать, а какие нет?
• Какие свойства изменены? Только с кроссбраузерными различиями? Или какие-то другие критерии, например сходство с другими элементами, которые требовали изменений? Можно ли применять свойства к элементам, у которых нет кроссбраузерных проблем, во имя единообразия и эффективности?
• Пытаетесь ли вы сохранить дух таблицы стилей пользовательского агента? Разумные значения по умолчанию?
• Применяете ли вы какие-либо свойства, у которых нет проблем с кросс-браузерностью, которые можно было бы считать полезными для «сброса», например типографские значения по умолчанию или размер окна?
• Включаете ли вы классы "набор инструментов" для общих нужд? Или оставить это для других проектов?
• Вас беспокоит его размер?
• Используете ли вы препроцессор или другие инструменты?

Посмотрите на отмену сброса ванильного CSS. Здесь множество мнений, начиная с идеи о том, что это предназначено для изменения стиля элементов после того, как вы отмените стиль, а затем со сбросом. Он устанавливает размер основного шрифта в pt, устанавливает очень специфический стек моноширинных шрифтов, включает селектор ol ol ol ol, clearfix и вспомогательные классы выравнивания. Там нет приговора. Люди создают вещи, чтобы решить свои собственные проблемы, и я уверен, что это было полезно для создателя. Но мы можем видеть, как здесь просвечивают мнения.

Теперь посмотрите на MiniReset.css. Очень разные! Он стирает стили шрифтов, «чтобы использование семантической разметки не влияло на стиль», но намеренно оставляет некоторые значения по умолчанию, «чтобы кнопки и элементы ввода сохраняли макет по умолчанию», добавляет некоторые элементы, которые не имеют перекрестия. -проблемы с браузером, но полезны в глобальном масштабе ( box-sizing ), а также добавляет несколько вспомогательных функций адаптивного дизайна.

Там совершенно другой набор мнений.

Джонатан Нил создал файл сброса под названием santize.css, который очень четко выражает свое мнение. Найдите слово «мнение» в исходном коде, и вы увидите его 19 раз. Все эти выборы Джонатан сделал на основе исследований и того, что кажется современным передовым опытом, и, без сомнения, приправлен его собственными потребностями и желаниями относительно того, что должно быть в перезагрузке.

Лично я думаю, что полезно думать обо всех них под одним и тем же общим термином и просто помнить о философских различиях. Но Normalize намеренно отделяет себя:

Современная альтернатива сбросу CSS с поддержкой HTML5

Sanitize называет себя библиотекой CSS и нигде не использует слово «сброс», кроме ссылки на сброс Мейера.

Reboot интересен тем, что это, пожалуй, самый новый игрок в этом мире. История его файлов восходит к 2015 году, что, вероятно, связано с тем, что Bootstrap 4 потребовалось некоторое время, чтобы отказаться от Bootstrap 3. Reboot не имеет собственного репозитория, это часть Bootstrap. Вот прямой файл и документы.

Интересно, как они об этом думают:

У вас может быть класс, который выполняет стили, но если вы используете сброс, вам не нужно перегружать этот класс стилями сброса, которые обрабатывают проблемы согласованности в разных браузерах.

Это, безусловно, самоуверенно, но таким образом, чтобы оно прекрасно сочеталось с Bootstrap. Тот факт, что он спрятан внутри Bootstrap, довольно хорошо сигнализирует о том, что он разработан для этого мира, а не как дополнение к какому-либо проекту. Тем не менее, я сделал все возможное, чтобы скомпилировать здесь чистую CSS-версию.

Настройка сброса на основе поддержки браузера

Поскольку мы говорим о прошлом и будущем сбросов, стоит еще раз упомянуть список браузеров, который представляет собой стандартизированный формат для объявления того, какие браузеры/версии поддерживает проект.

Сброс можно построить таким образом, чтобы входящие в него элементы знали, зачем они здесь. Какой именно браузер и версию он поддерживает.Затем, если конфигурация списка браузеров говорит, что конкретный браузер все равно не поддерживается этим проектом, этот CSS можно удалить.

Я уверен, что это, должно быть, упоминалось/спрашивалось раньше, но я безуспешно искал возраст, моя терминология, должно быть, неверна!

Я смутно припоминаю твит, который я видел некоторое время назад, в котором говорилось, что существует доступное правило CSS, которое удаляет все стили, ранее установленные в таблице стилей для определенного элемента.

Хорошим примером использования может быть сайт RWD, ориентированный прежде всего на мобильные устройства, где большая часть стилей, используемых для определенного элемента в представлении для маленького экрана, требует «сброса» или удаления для того же элемента в представлении для настольного компьютера.

Правило css, которое может привести к чему-то вроде:

Поэтому мы могли быстро удалить или переустановить стиль, не объявляя каждое свойство.

Нет, такого не существует. После того как элемент получил определенный стиль CSS с помощью правила, его нельзя просто «забрать обратно» — единственный способ — явно перезаписать каждое свойство CSS желаемым значением.

Существует имеется свойство с именем all, которое предлагается для сброса всех свойств CSS для данного элемента на определенные значения в масштабе CSS — значение, которое вы хотите использовать, будет be unset , который сбрасывает свойство либо до его унаследованного значения, если оно наследуется по умолчанию, либо, в противном случае, до его начального значения. Ни слова о реализации, но приятно знать, что кто-то до этого додумался.

15 ответов 15

Ключевое слово CSS3 initial устанавливает для свойства CSS3 начальное значение, определенное в спецификации. Исходное ключевое слово широко поддерживается браузерами, за исключением семейств IE и Opera Mini.

Поскольку отсутствие поддержки IE может вызвать проблемы, вот несколько способов, которыми вы можете сбросить некоторые свойства CSS до их первоначальных значений:

Как упоминалось в комментарии пользователя @user566245 :

В принципе это правильно, но индивидуальный пробег может отличаться. Например, некоторые элементы, такие как текстовое поле, по умолчанию имеют границу, применение этого сброса сделает границу этого текстового поля меньше.

Никто не думал о том, чтобы сбросить css, кроме css? Да?

getElementsByTagName("*") вернет все элементы из DOM. Затем вы можете установить стили для каждого элемента в коллекции:

ответил VisioN 09 фев. 2013 в 20:15

С учетом всего сказанного; я не думаю, что сброс css - это что-то осуществимое, если только у нас не будет только одного веб-браузера ... если в конце концов браузер устанавливает «по умолчанию».

Для сравнения вот список значений Firefox 40.0 для файла

где font-style: oblique запускает операцию DOM.

Я думаю, что в принципе это правильно, но индивидуальный пробег может отличаться. Например, некоторые элементы, такие как текстовое поле, по умолчанию имеют границу, применение этого сброса сделает границу этого текстового поля меньше. Так что это не настоящий сброс. В итоге я использовал его только для определенных свойств, о которых я заботился. Вы также можете комбинировать его с селектором *, чтобы сбросить все элементы или сбросить все элементы внутри определенного элемента.

@user566245 Применение этого с селектором * уничтожит ваш браузер И котенка. Это НЕ настоящий сброс. Настоящего сброса просто не существует.

@Jeremy: Вы имеете в виду настройки браузера по умолчанию, которые различаются для разных элементов. Начальное значение display всегда является встроенным, независимо от того, к какому элементу оно применяется.

@mmmshuddup Спасибо за подсказку. Если вы посмотрите на оригинальный ответ, я преобразовал его в CSS. За сжатие ну это ответ, а не копипастный патч. Не так ли?

• Поддерживается в (источник): Chrome 37, Edge 79, Firefox 27, IE 11, Opera 24, Safari 9.1, WebView Android 37, Chrome Android 37, Firefox для Android 27, Opera Android 24, Safari на iOS 9.3, Samsung. Интернет 3.0
• Не поддерживается: Internet Explorer

Найдено совершенно новое решение этой проблемы.

Используйте all: revert или all: unset .

Из MDN:

Ключевое слово revert работает точно так же, как unset во многих случаях. Единственная разница заключается в свойствах, значения которых задаются браузером или пользовательскими таблицами стилей, созданными пользователями (установленными на стороне браузера).

Вам необходимо «Доступное правило css, которое удалит все стили, ранее установленные в таблица стилей для определенного элемента."

Итак, если элемент имеет имя класса, например remove-all-styles :

Сбрасывает все стили, примененные other-class , other-class и всеми другими унаследованными и примененными стилями к этому div .

Или в вашем случае:

Например: если мы хотим изолировать встроенные виджеты/компоненты от стилей страницы, которая их содержит, мы могли бы написать:

Что вернет все авторские стили (т.е. CSS разработчика) к пользовательским стилям (стили, установленные пользователем нашего веб-сайта - менее вероятный сценарий) или к самим пользовательским стилям, если пользовательские стили не установлены.

Единственная проблема заключается в поддержке: на момент написания статьи только Safari 9.1 и iOS Safari 9.3 поддерживали возврат значения.

Поэтому я предлагаю использовать этот стиль и отступать от любых других ответов.

Позвольте мне подробно ответить на этот вопрос, потому что он был для меня источником боли в течение нескольких лет, и очень немногие люди действительно понимают проблему и почему важно ее решить. Если бы я вообще отвечал за спецификацию CSS, мне было бы, честно говоря, стыдно за то, что я не занимался этим в последнее десятилетие.

Проблема

В HTML-документ необходимо вставить разметку, и она должна выглядеть определенным образом. Кроме того, вы не являетесь владельцем этого документа, поэтому вы не можете изменить существующие правила стиля. Вы понятия не имеете, какими могут быть таблицы стилей и на что они могут измениться.

Случаи использования для этого, когда вы предоставляете отображаемый компонент для использования неизвестными сторонними веб-сайтами. Примерами этого могут быть:

1. Тег объявления
2. Создание расширения для браузера, которое вставляет контент
3. Виджет любого типа

Простейшее решение

Поместите все в iframe. У этого есть свой набор ограничений:

1. Ограничения между доменами: ваш контент вообще не будет иметь доступа к исходному документу. Вы не можете накладывать контент, изменять модель DOM и т. д.
2. Ограничения отображения: ваш контент заблокирован внутри прямоугольника.

CSS-решение

Я долго искал решение этой проблемы, но, к сожалению, его нет. Лучшее, что вы можете сделать, это явным образом переопределить все возможные свойства, которые можно переопределить, и переопределить их теми значениями, которые, по вашему думанию, должны быть по умолчанию.

Даже когда вы переопределяете, нет способа гарантировать, что более точное правило CSS не переопределит ваше. Лучшее, что вы можете здесь сделать, это настроить правила переопределения как можно более конкретно и надеяться, что родительский документ случайно не превзойдет их: используйте неясный или случайный идентификатор для родительского элемента вашего контента и используйте !important для всех определений значений свойств. .

Это очень реальная проблема, но она возникает только из-за плохо разработанного CSS. Если вы создаете разметку и CSS, если вы сделали это правильно, ни один из ваших стилей не должен перетекать в стороннее приложение. Если бы я отвечал за спецификацию CSS, я бы не смутился, но расстроенные люди жестоко злоупотребляют тем, что я создал.

@DanDascalescu Свойство all не вернется к стилям CSS браузера «по умолчанию». Он вернется только к «исходным» стилям CSS. Разница в том, что один стилизует страницу так, как будто CSS не существует, другой будет использовать стили элемента (т.е. p < color: blue>не будет сброшен)

Быстрый ответ: используйте "all:revert"

all:revert вернет все свойства стиля вашего элемента к исходным значениям свойств таблицы стилей UA по умолчанию для браузера. Но он не УДАЛИТ свойства стиля, такие как initial , и вернет их в полностью не стилизованное состояние.

В случае текста или унаследованных свойств, "revert" сбрасывает свойство CSS вашего элемента обратно к его унаследованным значениям, полученным из вашего элемента "body" или к значению стиля UA по умолчанию в браузере, а не к базовому стилю свойства. Для неунаследованного свойства он снова сбрасывает его обратно к таблице стилей браузера UA по умолчанию, а не к базовому стилю свойства. all позволяет воздействовать на все свойства. Скорее всего, это то, что вы хотите увидеть.

Проблемы с использованием "all:revert"

"all:revert" — это новое объявление CSS, которое работает только в более современных браузерах HTML5 (после 2015 г.) и даже в этом случае имеет очень плохую поддержку в некоторых современных браузерах, таких как Internet Explorer 1–11, Edge Trident и некоторых мобильные браузеры. Ни один из старых браузеров, отличных от HTML5 (до 2010 г.), не поймет это объявление, поэтому оно будет игнорироваться многими браузерами, как старыми, так и новыми. (См. мое смешанное решение CSS ниже, в котором есть исправления для Internet Explorer).

Проблемы с использованием "initial"

Вы можете использовать "initial" или "unset", но вам придется вручную применять их для каждого свойства, и, что еще хуже, они не вернут свойствам значения отображения элемента по умолчанию, установленные таблицей стилей UA по умолчанию для каждого браузера. , но "initial" по существу удалит значения свойств элемента и создаст полностью не стилизованный элемент. Например, «display: block» на элементах блочного уровня будет стерто. Поскольку свойству стиля по-прежнему требуется какое-то значение по умолчанию, все элементы блочного и неблочного уровня с «отображением» будут изменены на «отображение: встроенный», когда вы используете «отображение: инициализация».Вы никогда не захотите этого делать, так как это полностью стирает ваши стили И стили элементов UA браузера по умолчанию из выбранного элемента.

Я рекомендую ИЗБЕГАТЬ использования all:initial или любой формы инициализации в CSS, если только вы не пытаетесь стереть отдельное свойство CSS, которое нельзя стереть каким-либо другим способом. Почему? Initial стирает не только стили, которые вы применили, но и все стили, примененные в таблице стилей UA браузера по умолчанию. all:revert этого не сделает. С точки зрения использования initial , он лучше поддерживается в Internet Explorer, как и его двоюродный брат inherit . Но только IE8+ понимает начальный . Таким образом, существует широкий спектр проблем со значением этого свойства. Это ненадежно.

Причина, по которой CSS работает таким образом, заключается в том, что все элементы HTML поставляются без каких-либо стилей до тех пор, пока браузер не применит таблицу стилей пользовательского агента по умолчанию, которая придает всем элементам HTML базовый стиль. Все HTML-элементы действительно не имеют НИКАКИХ СТИЛЕЙ, и, кроме «замененных» элементов, таких как текстовое поле и кнопки, выглядят одинаково до тех пор, пока не будет применен лист UA по умолчанию для каждого браузера. «initial» и «unset» сотрут большую часть этого из браузера. «revert», по крайней мере, сохраняет их базовый набор стилей, применяемый браузером пользователя, и поэтому превосходит «initial» и «unset». Вы можете просмотреть все различные таблицы стилей по умолчанию, которые поставляются с браузерами, по ссылке ниже.

ЕЩЕ ЛУЧШЕЕ РЕШЕНИЕ

Здесь путаются две идеи:

1. Первая идея заключается в "возвращении" стилей обратно в набор значений таблицы стилей UA браузера (таблица стилей, которая поставляется вместе с браузером при установке и определяет, как выглядит каждый элемент). Каждый браузер определяет свои собственные стили того, как элементы должны выглядеть по умолчанию. Эта идея заключается в том, чтобы вернуть все стили страницы обратно в собственные стили элементов каждого браузера.
2. Вторая идея заключается в «сбросе» всех стилей браузера по умолчанию к общему внешнему виду и функциям, общим для всех браузеров. Люди создают специальные листы «сброса», чтобы попытаться привести все элементы браузера к единому общему согласованному стилю. Это не имеет ничего общего со стилями UA браузеров по умолчанию и больше касается «очистки» и выравнивания всех браузеров с общим базовым стилем. Это только дополнительный процесс.

Здесь люди путают два совершенно разных понятия.

Поскольку у каждого браузера часто были стандартные, стандартные элементы и стили макета, которые выглядели немного по-разному, людям пришла в голову идея "сбросить" или "перезагрузить" таблицу стилей, чтобы выровнять все браузеры ДО применения Пользовательские CSS. Bootstrap теперь делает это, например. Но это никак не связано с желанием людей вернуться к стандартному внешнему виду браузера.

Проблема заключалась не в создании этих настраиваемых таблиц стилей «сброса», а в выяснении того, какой CSS по умолчанию был для каждого браузера и каждого элемента ДО того, как были применены какие-либо стили. Большинство обнаружило, что вы не можете перестроить существующий чистый каскад, пока не «очистите» все уже примененные стили. Но как вернуться к стилю браузера по умолчанию?

Для некоторых это означало выход за рамки возврата элементов в таблицу стилей UA браузера, которая поставляется вместе с браузером. Многие хотели вернуться к «начальным» значениям свойств, которые не имеют НИЧЕГО общего со стилем браузера по умолчанию, но на самом деле свойства по умолчанию. Это опасно, так как в случае «отображения» элементы уровня блока возвращаются во «встроенные» и нарушаются макеты таблиц и другие вещи.

Поэтому я НЕ согласен с тем, что пользователи здесь используют "initial" для сброса чего-либо или настраиваемые классы сброса, которые изменяют каждое свойство обратно на какой-то произвольный базовый набор значений.

Для меня лучшим решением всегда была попытка вернуть стили всех основных элементов обратно к значениям таблицы стилей UA браузера, которые все равно используют все наши конечные пользователи. Если вы создаете новый веб-сайт, вам не нужно этого делать. Вы начинаете со стилей браузера по умолчанию и стилем поверх них. Только после того, как вы добавили сторонние продукты CSS или столкнулись со сложными каскадами CSS, вы захотите выяснить, как вернуться к значениям таблицы стилей браузера по умолчанию.

По этой причине я выступаю за создание собственного листа «сброса», чтобы в качестве первого шага сбросить все элементы к одному общему стилю, который используется всеми старыми и новыми браузерами. После этого у вас будет надежная структура, к которой гораздо проще вернуться, не возвращаясь к настройкам браузера по умолчанию. Вы просто строите общий базовый набор значений стилей элементов. После того, как вы создадите свой собственный лист «сброса», который ДОБАВЛЯЕТ, а не ИЗМЕНЯЕТ стили пользовательского интерфейса браузера, у вас есть сайт, который очень легко изменить.

Единственная оставшаяся проблема — это когда у вас есть сайт, на котором НЕТ такого листа сброса или есть сложный сторонний CSS, и вам нужно попытаться вернуться к стилям UA браузера. Как вы это делаете?

Я понимаю, что Internet Explorer заставлял нас вручную сбрасывать каждое свойство, чтобы вернуться к любому виду сброса.Но возврат всех этих значений свойств к «начальным» полностью уничтожает значения таблицы стилей браузера UA! ПЛОХАЯ ИДЕЯ! Лучше просто использовать «all:revert» для браузеров, отличных от IE, для каждого элемента, использующего подстановочный знак, и «наследовать» только для нескольких унаследованных свойств корневого уровня, найденных в элементах «html» и «body», которые влияет на все наследуемые дочерние элементы на странице. (Смотри ниже). Я НЕ за эти огромные сбросы свойств с использованием «начального» или возврата к какому-то воображаемому стандарту, который, как мы предполагаем, будут использовать все браузеры или IE. Во-первых, «начальный» имеет плохую поддержку в IE и не сбрасывает значения по умолчанию для элементов, а только значения по умолчанию для свойств. Но это также бессмысленно, если вы собираетесь создать лист сброса, чтобы привести все элементы к общему стилю. В этом случае бессмысленно очищать стили и начинать заново.

Итак, вот мое простое решение, которое в большинстве случаев делает достаточно, чтобы сбросить те текстовые значения, которые просеиваются в IE из корня, и использовать «all:revert» для всех браузеров, отличных от IE, чтобы принудительно вернуть неунаследованные значения к таблицу стилей UA браузера полностью, что дает вам настоящий перезапуск. Это не мешает классам и стилям более высокого уровня, наложенным поверх стилей ваших элементов, которые в любом случае всегда должны быть целью. Вот почему я НЕ за эти настраиваемые классы сброса, которые утомительны и ненужны и в любом случае не возвращают элемент в его стиль браузера UA. Обратите внимание на чуть более избирательные селекторы ниже, которые заменяют, например, значения стиля «перезагрузки» Bootstrap, возвращая их к стилям браузера по умолчанию. Конечно, они не будут сбрасывать стили элементов для IE, но для браузеров, отличных от IE, и для большинства наследуемых стилей текста это вернет элементы в большинстве агентов в таблицы стилей UA, которые поставляются с браузерами:

Читайте также:

  
• Как сделать круглое размытие в фотошопе
  
• Караоке-программа для компьютера с очками
  
• Как расширить рамку в ворде на альбомном листе на одной странице
  
• Файл или файлы, предназначенные для установки какой-либо программы 11 букв
  
• Visual studio 2012 что это за программа и нужна ли она