Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание сброса для кода CSS

10 марта 2017 | Опубликовано в css | 1 Комментарий »

У каждого браузера неизбежно есть небольшая разница в значениях по умолчанию для разных элементов. Например, у браузера Internet Explorer значение внешнего отступа тега bodyпо умолчанию отличается на 1 пиксель от значений других браузеров. Браузер Firefox создаст промежуток между верхом страницы и элементом заголовка, если элемент заголовка расположен первым на странице, что соответствует спецификации W3C, а браузер Internet Explorer не сделает это.

 

 

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

Пожалуй, самый широко известный сброс кода CSS создал Eric Meyer, хотя сброс кода CSS Yahoo! User Interface тоже довольно распространен. Многие системы управления содержимым и программные платформы, такие как WordPress, также используют сброс кода CSS перед тем, как применить темы.

Мы считаем большую часть сбросов кода CSS перегибом, равносильным сносу здания для его косметического ремонта. Сбросы кода CSS могут быть довольно большими, что увеличивает размер файла стилей и усложняет процесс задания стилей в дальнейшем. Также сбросы кода CSS обычно стараются задать правильные значения для браузера Internet Explorer, чего можно добиться и с помощью условных комментариев. И, наконец, можно стать настолько одержимым идей сделать так, чтобы все выглядело одинаково во всех браузерах, что сам дизайн пострадает: гибкость внешнего вида содержимого, зависящая от устройства отображения, является особенностью, а не недостатком.

Мы обычно используем несколько следующих объявлений в начале файла стилей, которые можно назвать мини-сбросом кода CSS:

html {
        box-sizing: border-box;
}
*, *:before, *:after {
        box-sizing: inherit;
}
body, figure {
        margin: 0;
}

Этот код CSSупрощает задание размеров элементам, при этом позволяя при необходимости переназначить правило. Также сбрасываем в нуль значение внешнего отступа элементов <body> и <figure>.

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

За дополнительной информацией можно обратиться к следующим источникам: хорошо сбалансированные сбросы кода CSS normalize.css и strppd.css, созданный Iain MacDonald. 

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Комментарии

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые