1. CSS Reset позволяет избежать несоответствий браузера
2. Простой пример
3. Сброс туда, где все это началось ...
4. Применение CSS Reset: советы и лучшие практики
5. 2. Ваш CSS Reset должен быть первым, что видит браузер (да).
6. 3. Создайте отдельный CSS-документ для CSS Reset.
7. 4. Избегайте использования сброса универсального селектора
8. 5. Избегайте избыточности с помощью CSS Reset и последующих объявлений стилей
9. Дальнейшее чтение
10. [WSG] Обнуление отступов / полей по умолчанию
11. Универсальный селектор
12. Нет сброса CSS
13. Почему я люблю (и использую) Сброс CSS
14. Триполи - стандарт CSS для рендеринга HTML
15. О серии CSS Tips

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

Сегодня мы рассмотрим тему сброса ваших стилей.

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

CSS Reset позволяет избежать несоответствий браузера

Например, допустим, вы используете тег привязки <a> в своем HTML-документе. Обычно браузеры, такие как Internet Explorer и Firefox, отображают его синим и подчеркнутым .

Но через пять лет кто-то решает выпустить новый браузер (назовем его UltraBrowser ) и решает, что им не нравятся синие подчеркнутые ссылки - поэтому вместо этого они устанавливают стиль тегов <a> по умолчанию на красный и полужирный . Если вы всегда устанавливаете базовое значение для своих элементов <a>, то вы гарантированно, что оно всегда будет одинаковым, независимо от того, как UltraBrowser считает, что элементы <a> должны выглядеть. CSS контролирует стилизацию всего Теги H1 для отдельных абзацев, поэтому важно оптимизировать его для разных браузеров.

Простой пример

Пример 1 : Как теги абзаца отображаются по умолчанию.

В Примере 1 я поместил три неустановленных абзаца <p> внутри контейнера <div> (я выделил контейнеру div синий фон и оранжевую рамку, чтобы выделить разницу).

По умолчанию в Firefox вы увидите, что между верхней частью первого абзаца и верхней частью контейнера div есть пробел, а между нижней частью последнего абзаца и нижней частью div контейнера - пространство.

По умолчанию эти пробелы не существуют в Internet Explorer .

Так какой браузер подходит, Firefox или IE? Это не важно Важно то, что интервал между вашими абзацами и другими элементами будет отличаться, если вы не зададите стиль для полей и отступов абзаца.

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

Так что это основная теория сброса ваших стилей, которая означает, что вы устанавливаете свои правила стилей для всех элементов, чтобы браузер не делал это за вас. Далее мы поговорим об этом на практике, но сначала немного о том, как CSS Reset стал стандартной практикой для современных веб-разработчиков.

Сброс туда, где все это началось ...

Концепция CSS Reset впервые была официально обсуждена Эндрю Креспанисом, когда динозавры еще бродили по Интернету (если быть точным, в 2004 году). В своей статье он предлагает использовать универсальный селектор (*) в начале вашего CSS-файла, чтобы выбрать все элементы и дать им 0 значений для полей и отступов, например, так:

* {поле: 0; отступы: 0; }

Универсальный селектор действует как поиск по шаблону , аналогично регулярное выражение соответствие в программировании. Поскольку в этом случае * не предшествует другой селектор, все элементы (в теории - некоторые браузеры не поддерживают его полностью ) является совпадением, и поэтому все поля и отступы всех элементов удаляются (поэтому мы избегаем различий в интервалах, показанных в примере 1).

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

Пример 2 : Применение универсального поля выбора / сброса отступов

Но теперь у нас нет промежутков между абзацами, поэтому где-то под нашим сбросом универсального селектора мы объявим, как должны выглядеть наши абзацы. Вы можете сделать это несколькими способами - вы можете поставить поля (или отступы) в начале или в верхней части абзаца, или и то, и другое. Вы можете использовать EMS в качестве ваших единиц или пикселей или процентов.

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

Вот что я использовал:

* {поле: 0; обивка: 0; } p {margin: 5px 0 10px 0; }

Пример 3 : Объявление правила стиля после универсального селектора.

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

Вскоре после этого - CSS гуру Эрик Мейер далее строится концепция сброса полей и отступов. В Исследование Эрика Мейера он обсуждает Работа Танека отменяет стили HTML по умолчанию (который он назвал undohtml.css ), который не только сбрасывает поля и отступы, но также и другие атрибуты, такие как высота строки, стили шрифта и стили списка (некоторые браузеры используют разные маркеры для неупорядоченных элементов списка).

После многих итераций и доработок мы приходим к замечательному решению под названием CSS Reset Reloaded CSS Reset , что не только делает этот метод сброса CSS более точным, чем метод универсального селектора, используя более высокую специфичность путем именования всех возможных тегов HTML (поскольку универсальный селектор не может применить сброс ко всем тегам HTML), но также устанавливает значения по умолчанию для проблемных элементов как таблицы (в которых атрибут border-collapse не отображается одинаково во всех браузерах).

Конечно, есть и другие способы сброса вашего CSS (например, YUI Reset CSS от Yahoo !., который я сейчас использую в Six Revisions), и вы можете свернуть свой собственный, исходя из своих предпочтений и потребностей проекта.

Теперь давайте рассмотрим некоторые советы и рекомендации по применению решения CSS Reset к вашим собственным проектам.

Применение CSS Reset: советы и лучшие практики

1. Для начала определитесь , как именно вы сбросите стили

Выше я показал вам две крайности CSS Reset. От приятного и простого метода с использованием универсального селектора (который я не рекомендую вам использовать) до более сложного и сложного метода с Эриком Мейером CSS Reset Reloaded (изменить: или более новую версию, Сброс CSS) ,

Я также кратко упомянул YUI Reset CSS, который вы можете использовать непосредственно с YDN, чтобы вам не приходилось обслуживать его, экономя некоторые ресурсы сервера при запросе веб-страниц. Вы также можете свернуть свой и адаптировать его к вашим конкретным потребностям.

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

Чтобы помочь вам сделать свой выбор, вот пара отличных ресурсов для начала:

2. Ваш CSS Reset должен быть первым, что видит браузер (да).

Сброс ваших стилей после объявления правила стиля для элемента приведет вас в замешательство. Вы почесаете голову, задаваясь вопросом, почему поля, которые вы объявили для .some-class, не работают. Поэтому важно, чтобы первое, что видит браузер, это ваш CSS Reset.

Смейся сейчас, но это распространенная ошибка среди ржавых ветеранов и начинающих разработчиков.

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

Просто чтобы продолжить избивать мертвую лошадь, давайте рассмотрим пример. Я использовал Эрика Мейера CSS Reset Reloaded дословно в примере после объявления правила стиля для полей моих <p> элементов.

Пример 4 : Поместить ваш CSS Reset в неправильное место

У меня есть правила стилей в HTML-документе примеров (для удобства), так что вы можете просмотреть исходный код и понять, что я имею в виду.

По сути, вы видите, что, хотя я объявил поля для своих элементов <p>, мой CSS Reset «сбрасывает» их на 0, потому что он имеет приоритет над моим первоначальным объявлением правила стиля.

3. Создайте отдельный CSS-документ для CSS Reset.

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

Я нахожусь в лагере One Big CSS File (конечно, он варьируется в зависимости от конкретного случая) по соображениям производительности страницы (я сохраню это обсуждение на другой день, возможно, в другой статье с советами по CSS), но часто Практика заключается в том, чтобы иметь отдельный CSS-документ (называемый что-то вроде reset.css ), который вы можете использовать в своих проектах. Это помогает вам поддерживать ваши правила стиля организованными и модульными, но, что более важно, облегчает изменение и настройку CSS Reset без необходимости возвращаться к старым проектам и обновлять их.

4. Избегайте использования сброса универсального селектора

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

Я уже упоминал, что IE не применяется и не поддерживает его так, как задумано; он не охватывает все ваши базы, и вы должны использовать его только для простых, коротких, статичных и предсказуемых веб-страниц (если вы действительно должны его использовать).

Этот совет особенно актуален, когда вы распространяете решение «один размер подходит всем», такое как тема системы управления контентом, которое будет использоваться и взламываться непредсказуемым образом. Использование прочной основы на начальном этапе - обширный метод CSS Reset - гарантирует, что вы действительно сбрасываете свои стили, и это стоит добавленных байтов в вашем CSS-документе.

5. Избегайте избыточности с помощью CSS Reset и последующих объявлений стилей

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

body {line-height: 1; черный цвет; фон: белый; }

Если вы уже знаете, что атрибуты стиля тела будут (например):

• цвет фона: #cccccc
• цвет: # 996633
• и вы хотите выложить фоновое изображение горизонтально

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

body {line-height: 1; цвет: # 996633 фон: #ccc url (your-tiled-image.gif) repeat-x top left; }

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

Эрик Мейер повторяет это в своем обсуждении перезагрузки CSS со следующим утверждением:

[…] В этом вся суть: это не тот случай, когда «каждый должен использовать эти стили определенным образом без изменений».

Дальнейшее чтение

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

[WSG] Обнуление отступов / полей по умолчанию

Вероятно, один из первых потоков, обсуждающих сброс универсального селектора в списке рассылки Web Standards Group.

Универсальный селектор

Эрик Мейер обсуждает, как работает универсальный селектор.

Нет сброса CSS

Джонатан Снук обсуждает, почему он не сбрасывает свои стили; отличный контраргумент одного из самых уважаемых веб-разработчиков / дизайнеров.

Почему я люблю (и использую) Сброс CSS

Краткое и приятное обсуждение того, почему сброс CSS - отличная идея.

Триполи - стандарт CSS для рендеринга HTML

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

О серии CSS Tips

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

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

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

Чтобы увидеть все статьи CSS Tips на данный момент, вы можете перейти в категорию CSS.

Похожие

Комментарии