CSS Resets 2020 типы сброса стилей и особенности их использования


Содержание материала:

Простые, но эффективные советы по кросс-браузерной вёрстке, которые должен знать каждый

Многие дизайнеры постоянно ищут кросс-браузерные приёмы, которые помогли бы им решать проблемы совместимости браузеров.

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

Наша постоянная задача как веб-дизайнеров и веб-разработчиков — создание для пользователей наилучшего впечатления от использования нашего сайта. Однообразное отображение сайта во всех браузерах способствует этому как нельзя лучше.

Если вы разрабатываете веб-сайты в течение долгого времени, вы согласитесь со мной, что Internet Explorer 8 и более ранние версии этого браузера — это один из самых больших кошмаров веб-дизайнеров и разработчиков. Несмотря на это, есть ещё люди, использующие эти версии IE для просмотра веб-сайтов.

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

В этой статье я покажу вам некоторые кросс-браузерные стилевые приёмы и трюки, которые серьёзно упрощают разработку веб-сайтов.

Используйте CSS Reset

Давайте смиримся с тем фактом, что веб-браузеры по умолчанию по-разному стилизуют элементы HTML. Некоторые браузеры имеют различный подход к значениям таких стилей как margin и padding .

Чтобы это исправить, есть хороший приём — добавить код CSS reset в начало вашего файла стилей. Это сбросит стили всех элементов.

Также это приведёт к тому, что вы начнёте стилизацию с нуля, то есть получите полный контроль над элементами, не волнуясь о разной изначальной стилизации элементов, вроде полей, заполнений или выравнивания.

У Эрика Майера есть хороший набор правил CSS , чтобы сделать это. Также вы можете посмотреть на Normalize.css от Николаса Галлахера, современную альтернативу для сброса стилей в HTML5.

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

Проверяйте ваш код HTML и CSS

Хорошей практикой перед выкладыванием сайта в сеть является проверка HTML и CSS при помощи валидаторов, так как это поможет вам исправить некоторые мелкие ошибки, которые могут принести проблемы в будущем.

Вы можете использовать валидаторы HTML и CSS от W3C. Эти валидаторы одобрены W3C, но, если вы хотите, то можете использовать любые другие, которые вам нравятся.

Условные комментарии IE

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

Следующий код будет работать во всех версиях IE:

А следующий код предназначен для конкретной версии IE:

Используйте вендорные префиксы

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

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

Рассмотрим список вендорных префиксов:

  • Safari и Chrome (-webkit-)
  • Firefox (-moz-)
  • Opera (-o-)
  • Internet Explorer (-ms-)

В качестве примера давайте используем свойство transition с вендорными префиксами для определённых браузеров:

Очищайте пространство после плавающих элементов

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

Но проблема тут не в этом. Чаще всего мы располагаем плавающие элементы слева и справа и помещаем их в контейнер.

Посмотрите на рисунки ниже:

Рис. 1. Вот, чего мы хотим добиться.

Рис. 2. Однако вот, что у нас получается.

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

Управление размером шрифта

Хотя не существует каких-либо строгих правил использования определённого измерения для размера шрифта, я бы посоветовал использовать единицы em и проценты, поскольку они основаны на настройке размера шрифта в браузере пользователя.

Большинство людей используют пиксели ( px ) или пункты ( pt ), которые основаны на разрешении экрана. Они всегда фиксированы.

Всегда тестируйте ваш веб-сайт в нескольких браузерах

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

Вы можете сэкономить время, используя эмуляторы, вроде spoon plugin , но настоятельно рекомендуется тестировать ваше творение в настоящих браузерах.

Упрощайте код

Упрощение кода делает всю работу простой и быстрой. Что я имею в виду? Одно только использование простых элементов при разработке вашего веб-сайта делает задачу браузера по чтению вашего кода гораздо проще.

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

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

Заключение

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

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

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

Данная публикация представляет собой перевод статьи « Simple Yet Important Cross-Browser Styling Tips Everyone Should Know » , подготовленной дружной командой проекта Интернет-технологии.ру

Does Reset.css влияет на другие таблицы стилей?

Я начинаю новый проект, поэтому я решил начать использовать Reset.css в своих проектах. я получил концепцию использования Reset.css, но одна вещь беспокоит меня, это делает, если влияет на мой другой стиль, применяемый к тому же элементу. Например, в reset.css div есть 0 полей и 0 дополнений. и если я применим край к некоторым из divs в моей таблице стилей, не будет ли это нарушено?

Пожалуйста, очистите мои сомнения

Нет, если стиль, применяемый к вашим другим divs, более КОНКРЕТНЫЙ.

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

всегда будет отменять

Сначала вы должны включить reset.css, а затем добавить свой собственный файл таблицы стилей. и убедитесь, что ваши стили не будут перезаписаны командой reset.php.

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

например, если вы укажете в reset css: p and than load style.css with style: p , а не load style.css со стилем: p padding: 2px>

Будет использоваться стильная загрузка как последняя.

Я лично использую технику с

Поместите его в начало файла css и выполните задание 🙂 Нет необходимости в дополнительном файле.css fil.

Что такое CSS Reset?

Перевод статьи: What is a CSS Reset?
Автор: Joss Crowcroft.

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

Если вы все еще не знаете, то имейте в виду, что любой браузер имеет собственные каскадные таблицы стилей, которые он использует для представления не предусматривающих стилевое оформление сайтов в более удобочитаемом виде. Так, к примеру, вы возможно заметили, что большинство браузеров по умолчанию для отображения имеющихся на странице ссылок используют синий цвет, а для тех, которые были активированы ранее — фиолетовый. Для таблиц изначально установлены определенные границы , отступы и поля , а для элементов заголовков ( h1 , h2 , h3 и т.д.) собственные типы и размеры шрифтов. К тому же в каждом браузере предусмотрены определенные значения отступов практически для всех элементов. Вы, вероятно, обратили внимание и на то, что стандартная кнопка подтверждения во всех браузерах выглядит по-разному.

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


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

Простейший пример сайта до и после использования CSS Reset.

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

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

Для чего предназначен CSS Reset?

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

Спорные вопросы.

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

Топ-пост этого месяца:  Плагин для вставки всех видов объявлений — Ad Inserter plugin


/* #element rules: */
#element

В большинстве случаев они правы, поскольку использование этого приема приводит к повторному выполнению кода и увеличению времени обработки документа, в то время как одного правила было бы вполне достаточно. Поэтому многие разработчики и дизайнеры придерживаются мнения, что применение CSS Reset нарушает один из основных принципов CSS кодирования — ‘DRY’ (Don’t Repeat Yourself — Не повторяйтесь).

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

Другая проблема затрагивает свойство каскадности «каскадыных таблиц стилей» . Если используемый CSS Reset файл разработан неправильно, то может оказаться, что создаваемые вами в последующем CSS правила не будут работать, поскольку код, который по сути должен был просто сбросить стили браузера на базовый уровень, будет переопределять ваши собственные стили. Зачастую эта проблема имеет место при использовании Universal Selector Reset, но при выборе грамотно сконструированного кода, такого как HTML5 Doctor CSS Reset подобные ситуации, как правило, не возникают.

Надеюсь, что данная статья пролила свет на вопрос «Что такое CSS Reset?» для многих из вас. Предлагаю ознакомиться с одной из своих следующих статей — «Какой вариант CSS Reset лучше использовать?», которая является продолжением изложенного выше материала ( *перевод этой статьи будет предоставлен вашему вниманию ближайшее время ).

Gtalk.kz

Наверстываю упущенное …

Урок 5.1 Сброс стилей: reset.css

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как reset.css, либо в css что то подобное * (вспомните Урок 5. Блочная верстка сайта: css файл. ) Если Вы хотите заниматься версткой сайта, то думаю надо также разобраться что это и с чем его едят. А если не хотите заниматься версткой , то для понимая что к чему также будет полезно.

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

Для того, чтобы начать работу с чистого листа, необходимо «обнулить» все стили по умолчанию, так? Ок, если Вы вспомните урок 5 по верстке сайтов, то вспомните как мы это делали, с помощью универсального кода:

Есть? Отлично, теперь Вы понимаете для чего эта строчка там.

Давайте взглянем на нашу демо страницу с универсальным сбросом стилей сайта.

Заметили отличия? Совершенно верно мы сбросили только отступы, у таблиц осталась рамка, у заголовков стили font, а если углубляться то много еще чего. Но на первой демке был полный сброс, давайте теперь посмотрим как его сделать.

Reset.css

Плавно мы пришли к файлу reset.css. Самым популярным сбросом стилей для сайта (тот самый, что мы видели в примере) и одновременно наиболее полным является т. н. reset файл от Эрика Мейера. В статье CSS Tools: Reset CSS можете почитать о его достижении при создании данного кода:

Обычно данные стили выделяют в отдельный файл — reset.css. Зачем спросите Вы, для того чтобы по 100 раз не прописывать его на всех сайта, можно просто добавлять на разных проектах ссылку на данный файл:

Согласитесь удобно. Но если у вас один блог/сайт, добавляйте в общий файл (style.css, template.css и т. д.), ничего страшного.

Еще одно общее условие для всех сбросов стилей — размещение в самом начале в стилях. Тут очевидная ситуация: для начала необходимо обнулить все стиле, а затем уже задавать тегам свои стили.

Css файл сканируется сверху вниз! Поэтому из 2-х одинаковых классов при равных условиях приоритетным будет тот, что находится ниже.

Мой файл reset.css

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

Если Вы не используете html 5, удалите данный блок /* HTML5 display-role reset for older browsers */ ….

Yahoo reset.css

Из вышеизложенного понятно, что каждый может изменять и использовать свой reset файл, например, имени самого себя

Вот поэтому и у Yahoo есть свое видение на данную тему.

Можно взглянуть на наш пример в стиле Yahoo и увидеть отличия, сравнить и возможно Вам понравится данный сброс стилей.

Подключиться к стилям Яхуу можно добавив данную строку:

Можно сохранить себе на хостинг.

Конечно, существуют и другие reset файлы, но напомню. Что самым часто используемым среди html верстальщиков является сброс стилей от Э. Майера, обычно, конечно, измененный. Для первых шагов, думаю, будет достаточно простого его использования, либо есть всегда универсальный метод.

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

Надеюсь данная статья была вам полезна. Подписывайтесь на обновления Уроков по блочной верстке сайтов.

На десерт сегодня трейлер к фильму “Социальная сеть 2″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?

Лучшие CSS Reset или CSS стили для сброса

Привет, друзья! Представляю сегодня Вам несколько таблиц стилей для сброса CSS стиле по умолчанию. Вы спросите, для чего это нужно? Все наши браузеры имеют стили по умолчанию, которые применяются для общих элементов на сайте. С помощью CSS reset мы можем изменить эти стандартные значения. CSS 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 ничем особенным не выделяется.

Благодарности

При написании статьи были использованы следующие источники:


Does Reset.css влияет на другие таблицы стилей?

Я начинаю новый проект, поэтому я решил начать использовать Reset.css в своих проектах. я получил концепцию использования Reset.css, но одна вещь беспокоит меня, это делает, если влияет на мой другой стиль, применяемый к тому же элементу. Например, в reset.css div есть 0 полей и 0 дополнений. и если я применим край к некоторым из divs в моей таблице стилей, не будет ли это нарушено?

Пожалуйста, очистите мои сомнения

Нет, если стиль, применяемый к вашим другим divs, более КОНКРЕТНЫЙ.

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

всегда будет отменять

Сначала вы должны включить reset.css, а затем добавить свой собственный файл таблицы стилей. и убедитесь, что ваши стили не будут перезаписаны командой reset.php.

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

например, если вы укажете в reset css: p and than load style.css with style: p , а не load style.css со стилем: p padding: 2px>

Будет использоваться стильная загрузка как последняя.

Я лично использую технику с

Поместите его в начало файла css и выполните задание 🙂 Нет необходимости в дополнительном файле.css fil.

Топ-пост этого месяца:  Центробанк сможет блокировать финансовые пирамиды

Посмотрите другие вопросы по меткам css css-reset или Задайте вопрос

CSS Resets 2020: типы сброса стилей и особенности их использования

Считаю что этот пункт в FAQ вводит людей в заблуждение и его лучше удалить вообще. Уверенного объяснения почему не нужно использовать reset — нет. Сейчас есть 2 пункта: 1) Нужно прописывать все-все сбросы в каждом блоке, только тогда у вас будет библиотека блоков где все блоки будут независимы (а вдруг их вставят в код где нет reset или normalize!). 2) Сбросив (или нормализовав) стили вы уже не сможете отобразить Browser defaut (а вот вдруг вам понадобится!)

  1. Раньше мне вообще писали что как раз наоборот https://ru.bem.info/forum/-199/ не нужно вносить все сбросы в блок, у нас сверху нормалайз.
  2. «А если вдруг нет normalize или reset?» Хочется ответить — «а вдруг там написано вообще a »! Я видел такие проекты. Но сбрасывать в каждом блоке, чтобы потом этот блок можно было встроить на сайт где другие дефолты — зачем? Ведь всего не предусмотришь и плюс саму библиотеку блоков (свою) используют единицы. БЭМ — это ведь методология, а не набор инструментов, а тут я вижу именно привязку к инструменту — библиотеке блоков Яндекса.

По 2: В тот редком случае когда это понадобится — это решится разработчиком. Это наверно 1 на миллион случаев.

Раньше мне вообще писали что как раз наоборот https://ru.bem.info/forum/-199/ не нужно вносить все сбросы в блок, у нас сверху нормалайз.

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

тут я вижу именно привязку к инструменту — библиотеке блоков Яндекса

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

Предложу тебе простой эксперимент — отключи normalize у себя на проекте и посмотри, сколько правок в конкретных блоках понадобится, чтобы все стало хорошо. Думаю, ты удивишься, как мало в нем смысла на проекте, сверстанном нормально.

Соглашусь и с @delka в части про то, что много проектов использует какой-то «normalize» и поэтому не совсем очевидна польза от его отказа, в то же время @tadatuta говорит о более общем применении методологии, в самом ядре лежит понятие независимости и поэтому в данном случае normalize нарушает это правило и делает ре-использование блоков между проектами сильно сложнее, нельзя просто так взять и вставить, придется что-то костылякать. :pensive:

@delka Всегда есть окружение, но одно дело у нас только браузеры, под которые разработчик подстраивает свои блоки, и которые редко меняются и более-менее стабильны, а другое дело у нас еще и огромная пачка библиотек резетов и нормалайзеров, под которые надо тоже подстраивать блоки. И если первое — неизбежность, то второе — явно грабли. Писать блоки под N браузеров — это одна сложность, а писать блоки под N браузеров с учетом M нормалайзеров и резетов — грубо, в M раз, или на порядок, сложнее.

Какие стили лучше задавать по умолчанию?

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

  • Зачем это делается?
  • Стили каких элементов лучше переопределить в самом начале?
  • Где можно об этом почитать поподробнее и найти код? Гуггл мне не очень помог, каюсь, может плохо гугглил.

5 ответов 5

Зачем это делается?

По умолчанию, в браузерах есть встроенные определения для HTML-элементов. Например, у и

есть margin , у

    и

      есть padding и list-style , ну и так далее. В каждом браузере эти предустановленные значения могут быть разными, соответственно, normalize.css или reset.css нужны для того, чтобы стартовать с одинаковой базы. Различие их состоит в том, что normalize.css приводит все элементы к одинаковому стилю, а reset.css сбрасывает всё полностью в ноль. Лично мне больше нравится использовать reset.css , потому что, как правило, все элементы потом всё равно переопределяются и для каждого проекта формируется некое подобие UI kit. Но если вы верстаете страницу без формирования определения всех элементов, то, возможно, вам подойдет normalize.css — так вам не надо будет задавать отступы между параграфами и заголовками, переопределять списки и т. д.

Стили каких элементов лучше переопределить в самом начале?

Тут всё упирается в то, какую стратегию вы выбрали 🙂 Мой необходимый набор:

Где можно об этом почитать поподробнее и найти код?

Хорошая статья на HTML-академии и на Хабре.

P.S. reset будущего будет выглядеть примерно так:

Есть два основных подхода — reset.css и normalize.css. Остальное — в google.com

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

Переопределяются в основном ссылки, списки, отступы внутренние и внешние у body , div’a , поля ввода, по большому счету, все, что используется в проекте, по хорошему необходимо «обнулить».

  • Гугли всевозможные reset.css .
  • Например, как можно видеть на скрине, в разных браузерах стили рендерятся по разному. В данном случае, FF добавил отступ перед тэгом p . Во избежание таких случаев и применяются сбросы стилей.

    • Сброс стилей — отдельным файлом, включаемым в документ в самом начале.
    • Лучше индивидуальным элементам расписывать сбросы стилей отдельно, дабы достичь максимального контроля над внешним видом страницы. Из минусов — разве что, что-нибудь забыть.
    • Сброс не обязательно приводить к нулевым значениям, можно сразу указать те, что по дефолту будут использоваться в Вашем проекте.

    Написанное выше является выдержкой из статьи с хабра, отсюда, .

    Производительность и организация

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

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

    Кроме того, эти несколько небольших шагов по улучшению производительности сайта могут окупиться в виде дивидендов. Производительность сайта напоминает правило 80/20, где 20% оптимизации ускорит примерно 80% сайта.

    Стратегия и структура

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

    Архитектура стиля

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

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

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

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

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

    Объектно-ориентированный CSS

    Методология объектно-ориентированного CSS впервые была описана Николь Салливан в её работе по написанию стилей для больших сайтов. Объектно-ориентированный CSS определяет два принципа, которые помогут создавать масштабируемые веб-сайты со строгой архитектурой и рациональным количеством кода. Эти два принципа включают в себя:

    • разделение структуры и оформления;
    • разделение содержимого и контейнера.


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

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

    SMACSS

    Похожей стратегии придерживается SMACSS (Scalable and Modular Architecture for CSS, масштабируемая и модульная архитектура для CSS), методология, разработанная Джонатаном Снуком. Масштабируемая и модульная архитектура для CSS способствует разбиению стилей на пять основных категорий, в том числе:

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

    В приведённом выше примере класс alert попадает в категорию модуль, в то время как класс is-error попадает в категорию состояние. Стили от каждой из этих категорий затем наследуются по необходимости.

    Выбор методологии

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

    Производительность селекторов

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

    Сохраняйте селекторы короткими

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

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

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

    Вообще, цель коротких селекторов — уменьшить специфичность, создать чистый, более отзывчивый код.

    Предпочитайте классы

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

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

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

    Стоит также отметить — держитесь по возможности подальше от идентификаторов, поскольку они чрезмерно специфичны и не допускают любых повторений. В конце концов применение идентификатора не сильно отличается от использования !important .

    Повторное использование кода

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

    Повторно используемый код не должен работать за счёт семантики. Одним из методов может быть соединение селекторов вместе, разделяя их запятой и позволяя одинаковым стилям наследоваться сразу двум селекторам. Другой подход, который часто встречается в ранее упомянутых методологиях OOCSS и SMACSS, включает в себя привязывание стилей к одному классу, а затем использование нескольких классов в одном элементе.

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

    Минимизация и сжатие файлов

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

    Сжатие gzip

    Один из наиболее популярных видов сжатия файлов называется gzip. Сжатие gzip берёт типовые файлы, включая HTML, CSS, JavaScript и др. и определяет похожие строки для их сжатия. Чем больше найдено совпадений строк, тем сильнее файл может быть сжат, таким образом пересылая уменьшенный файл от сервера к браузеру.

    Настройка gzip довольно безболезненная и HTML5 Boilerplate проделал большую работу для этого. Для файлов gzip требуется добавить файл .htaccess в корневую папку веб-сервера, помечая конкретные файлы, которые будут сжаты. Точка в начале имени файла правильная, так как файл .htaccess является скрытым.

    В HTML5 Boilerplate часть файла .htaccess предназначается для сжатия gzip. Копирование части .htaccess или его целиком на ваш собственный сервер поможет настроить сжатие gzip. Кроме того, стоит отметить, что файлы .htaccess работают только на веб-серверах Apache, которые должны включать следующие модули.

    • mod_setenvif.c
    • mod_headers.c
    • mod_deflate.c
    • mod_filter.c
    • mod_expires.c
    • mod_rewrite.c

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

    Измерение сжатия

    В браузере Google Chrome веб-инспектор выдаёт изобилие данных связанных с производительностью, особенно во вкладке Network. Кроме того, есть несколько сайтов, которые помогают определить, что сжатие gzip включено.

    Рис. 1.01. Вкладка Network идентифицирует каждый загруженный в браузере файл и выводит размер файла и время его загрузки. Обратите внимание, что применение gzip снизило размеры файлов примерно на 60%.

    Рис. 1.02. Глядя на файл, конкретно определяют, какой тип сжатия поддерживает браузер. В нашем случае gzip, deflate и sdch помечены как поддерживаемые в заголовке запроса. Глядя на заголовки ответа определяют, что файл был отправлен с помощью метода сжатия gzip.

    Сжатие изображений

    Снижение размера текстового файла помогает, но вы получите более высокие результаты путём сжатия размера файлов изображений. Общий размер файлов всех изображений по всему сайту можно быстро сложить и сжатие изображений в значительной степени поможет сохранить размер файлов под контролем.

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

    Есть несколько инструментов, которые помогают сжимать изображения, двумя лучшими являются ImageOptim для Mac и PNGGauntlet для Windows. Оба они предлагают сжимать наиболее популярные форматы изображений, в частности, файлы JPG и PNG.

    Демонстрация сжатия изображения

    Несжатое, 455 Кб

    Рис. 1.03. С помощью ImageOptim это изображение было уменьшено более, чем на 14% без снижения или потери качества.

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

    Уменьшение HTTP-запросов

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

    Объединение файлов

    Одним из способов и, возможно, простейшим путём уменьшения числа запросов является объединение файлов. В частности, объединить все CSS-файлы в один и все JavaScript-файлы в один. Комбинация этих файлов и их сжатие создаёт один, надеюсь небольшой, HTTP-запрос.

    В общем, CSS для веб-страницы должен быть загружен в начале документа в , в то время как JavaScript для веб-страницы должен быть загружен в конце, непосредственно перед закрывающим тегом . Причина этих уникальных размещений происходит потому, что CSS может быть загружен, пока остальная часть сайта также загружается. JavaScript, с другой стороны, может рендерить только один файл за раз, тем самым запрещая загружать что-то ещё. С одним нюансом — когда JavaScript-файлы асинхронно загружаются после самой страницы, то происходит рендеринг. Другой нюанс, когда помощь JavaScript требуется для отображения страницы, как в случае с HTML5 shiv.

    Спрайты

    Практика спрайтов в CSS включает использование одного фонового изображения для нескольких элементов. Цель состоит в том, чтобы сократить число HTTP-запросов, сделанных с использованием нескольких фоновых изображений.

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

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

    Рис. 1.04. Вот спрайт для меню текстового редактора; рамки приведены для справки, как будет изменена позиция фонового изображения.

    Используя спрайт выше, меню может быть создано через фон для элемента . Затем, с помощью классов изменим положение фона спрайта, чтобы показать соответствующие иконки.

    Демонстрация спрайтов

    Картинки через data:URL

    Дополнительно, вместо спрайтов закодированные данные изображения могут быть включены в HTML и CSS напрямую через data:URL, вообще устраняя необходимость в HTTP-запросе. data:URL прекрасно работает для маленьких изображений, которые никогда не меняются и там, где HTML и CSS в значительной степени кэшируются. Есть, однако, несколько проблем. Картинки может быть сложно менять и поддерживать, что приводит к необходимости генерировать другие данные. И они не работают в старых браузерах, в частности, Internet Explorer 7 и ниже.

    Если использование data:URL помогает сократить несколько HTTP-запросов и HTML или CSS могут быть в значительной степени кэшироваться, то преимущества, как правило, перевешивают риск. Несколько инструментов помогут генерировать data:URL, включая конвертеры и генераторы узоров. Будьте осторожны и всегда дважды проверьте, что data:URL меньше, чем само изображение.

    Демонстрация data:URL

    Кэширование общих файлов

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

    Подобно файлам gzip, настройка заголовков для истечения кэширования файлов может быть установлена через файл .htaccess. И снова HTML5 Boilerplate находится на один шаг впереди нас. В их файле .htaccess есть раздел, помеченный как Expires headers.

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

    Изменение «access plus 1 year» на значение «access plus 1 week» лучше подходит для CSS и JavaScript-файлов, которые меняются еженедельно, но не контролем версий с отдельными именами файлов. Для значений заголовков смотрите справку по синтаксису mod_expires.

    Топ-пост этого месяца:  CSS вьюпорт единицы измерения быстрый старт
    Добавить комментарий