Это руководство описывает правила оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.
Для создания отступов всегда используйте символ табуляции. Не используйте пробелы и не смешивайте табуляцию с пробелами. Настройте редактор кода так, чтобы он отображал невидимые символы. Это позволит избегать случайных пробелов в конце строк, будет легче отслеживать изменения в коде.
Настрой свой PHPStorm:
- Показ невидимых символов: Preferences -> Editor -> General -> Appearence -> Show Whitespaces.
- Табуляция вместо пробелов: Preferences -> Editor -> Code Style -> (PHP|HTML|CSS|JavaScript) -> Use tab character.
Несмотря на то, что UTF-8 захватил весь мир, клиенты могут установить наш продукт либо в ANSI-кодировке, либо в UTF-8.
Исходной кодировкой репозитария является windows-1251. В этой кодировке должны создаваться и
редактироваться все текстовые файлы.
Настрой свой PHPStorm:
- Кодировка файлов проекта: Editor -> File Encodings. Укажите
windows-1251. - В нижней статусной строке показывается, какая кодировка используется для текущего файла (должна быть
windows-1251).
Строки должны заканчиваться только символом перевода на новую строку (LF) — стандарт для текстовых файлов в Unix-системах. Не используйте комбинацию символов возврата каретки/перевода строки (CRLF), как это принято в Windows.
Настрой свой PHPStorm:
- Перевод строки для новых файлов: Editor -> Code Style -> Line separator (for new files) -> Unix and OS X \n.
- В нижней статусной строке показывается, какой перевод строки используется для текущего файла (должен быть
LF).
Длина строки не должна превышать 120 символов. Настройте редактор кода так, чтобы он отображал правую границу строк.
Настрой свой PHPStorm:
- Показ правой границы: Editor -> General -> Appearence -> Show right margin
- Ширина правой границы: Editor -> Code Style -> Right margin (columns)
Названия тегов, атрибутов и названия классов должны быть всегда в нижнем регистре.
Убирайте пробелы в конце строки. Пробелы в конце строк не обязательны и усложняют сравнение файлов в системе контроля версий.
Настрой свой PHPStorm:
- Удаление пробелов перед сохранением файла: Editor -> General -> Strip Trailing Spaces on Save.
Все комментарии должны быть на английском языке.
Семантика - это когда смотришь на html-код страницы и понимаешь логическое и функциональное назначение каждого тега.
В HTML существует довольно много тегов, которые в своем названии несут четкую семантику: <a>, <p>, <i>, <menu>.
Не стоит с помощью CSS таким тегам менять их базовый смысл.
Идеально для верстальщика было бы удобно использовать теги с произвольными названиями.
<users>
<user>
<avatar></avatar>
<name></name>
</user>
</users>HTML5 предлагает механизм для создания произвольных тегов (Web Components), но, к сожалению,
его реализация не самая простая (нужно писать JavaScript) и поддержка в браузерах неполная.
Единственный нормальный способ писать семантический код — использовать атрибут class.
Он позволяет описать смысл тега естественными словами, не требователен к уникальности (в отличие от атрибута id) и
поддерживает возможность указать несколько классов к одном тегу.
-
Используйте теги
div(для блочных элементов) иspan(для строчных и строчно-блочных элементов). -
Остальные теги используйте только согласно их базовому смыслу.
-
<b>,<i>,<s>,<p>,<h1>-<h6>,<ul>,<li>- используются только для форматирования текста. Как правило, эти стили находятся в шаблоне сайта и в стилях компонентов не присутствуют. -
Для привязки CSS-свойств к тегу используйте только атрибут
class. -
Если нажатие на элемент приводит к открытию новой страницы, используйте тег
<a>. В противном случае используйте<span>или<div>. -
Отступы между логическими блоками никогда не делайте пробелами или тегом
<br>. -
Структуру html-тегов необходимо делать по сетке дизайна. "Колонки" и логические блоки одного уровня обязательно помещайте в контейнер.
Плохо:
<span class="task-detail-sidebar-info-link">сменить</span> <div class="task-detail-sidebar-info-title">Ответственный</div> <div class="task-detail-sidebar-info-user"> <a href="#" class="task-detail-sidebar-info-user-photo"></a> <a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a> <div class="task-detail-sidebar-info-user-post">Бухгалтер</div> </div>
Лучше:
<div class="task-detail-sidebar-info"> <div class="task-detail-sidebar-info-head"> <div class="task-detail-sidebar-info-link">сменить</div> <div class="task-detail-sidebar-info-title">Ответственный</div> </div> <div class="task-detail-sidebar-info-user"> <a href="#" class="task-detail-sidebar-info-user-photo"></a> <div class="task-detail-sidebar-info-user-title"> <a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a> <div class="task-detail-sidebar-info-user-pos">Бухгалтер</div> </div> </div> </div>
-
Удаление логических блоков не должно рушить дизайн.
-
Всегда есть вероятность, что на реальном сайте количество текста будет больше, чем нарисовано в макете. Верстка должна быть адаптивной к появлению дополнительных строк и к длинным строкам без пробелов.
-
Текстовый элемент не может быть на одном уровне с тегом.
Плохо:
<div class="task-detail-group">Задача в проекте: <div class="task-detail-link">добавить</div></div>
Хорошо:
<div class="task-detail-group"> <span class="task-detail-group-label">Группа:</span> <span class="task-detail-group-name">Название группы</span> </div>
-
Каждый компонент должен иметь родительский контейнер. Для этого элемента в CSS необходимо указать шрифт (font-family), а также размер текста (font-size), чтобы избежать конфликтов со стилями шаблона сайта.
- Внимательно относитесь к элементам
inline-block, перевод строки между ними будет отображен как пробел. Чтобы не писать теги в одну длинную строку, можно воспользоваться следующим приемом:Визуально теги разбиты и отделены отступами, а в результирующем HTML-коде будет одна строка. Другой прием с помощью HTML-комментариев:<div class="inline-block-items"><? ?><span class="inline-block-item">Inline Item 1</span><? ?><span class="inline-block-item">Inline Item 2</span><? ?><span class="inline-block-item">Inline Item 3</span><? ?><span class="inline-block-item">Inline Item 4</span><? ?></div>
<div class="inline-block-items"><!--
--><span class="inline-block-item">Inline Item 1</span><!--
--><span class="inline-block-item">Inline Item 2</span><!--
--><span class="inline-block-item">Inline Item 3</span><!--
--><span class="inline-block-item">Inline Item 4</span><!--
--></div>-
Элементы с обтеканием (float)
- Неприятной особенностью свойства float является то, что такой блок может "вывалиться" из блока-родителя.
Это происходит из-за того, что float-элемент удаляется из потока и родитель не выделяет место под него.
Решить эту проблему можно несколькими способами:
- Поставить родителю
overflow: hidden/auto. - Поставить родителю
float. - Добавить в родителя элемент с
clear. Чтобы не добавлять в HTML-код лишний элемент, можно задать его через:after.
- Поставить родителю
- Элементы с обтеканием обязательно должны находится в контейнерах, чтобы не влиять на соседние логические блоки.
- Неприятной особенностью свойства float является то, что такой блок может "вывалиться" из блока-родителя.
Это происходит из-за того, что float-элемент удаляется из потока и родитель не выделяет место под него.
Решить эту проблему можно несколькими способами:
-
Для повторяющихся элементов в строчку (пункты меню, список фотографий) отдавайте приоритет
inline-blockвместоfloat.
Создавайте новую верстку по стандарту HTML5. В старых шаблонах по возможности избавляйтесь
от XHTML (слешей в конце тегов <br />, <img />).
<!DOCTYPE html>Очень часто разработчики забывают указывать альтернативные подписи к иконками, кнопками или другим графическим элементам.
Наличие атрибутов title и alt в верстке поможет решить эту проблему.
Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму. Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение — в скрипты. Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.
- В верстке всегда должен присутствовать тег
<form>. - Подписи полей должны быть слинкованы к соответствующим элементам формы.
- Должно быть показано, как выводится ошибка и/или сообщение об успешном выполнении операции.
- Переключение между элементами формы по клавише
Tab. - Интерактивность: смена фокуса должна визуально подсказывать пользователю активный элемент.
-
Используйте SVG вместо растровых изображений.
-
В случае, если SVG использовать затруднительно, используйте формат PNG.
-
Объединяйте картинки в спрайты. Это ускорит отображение страницы.
-
Называйте файлы с указанием имени модуля и блока, к которому относится изображение. Для разделения слов используйте дефис (-).
Плохо:
.crm-lead-history { background: url(images/sprite.svg); } .crm-lead-log { background: url(images/arrow_left.svg); }
Хорошо:
.crm-lead-history { background: url(images/crm-lead-sprite.svg); } .crm-lead-log { background: url(images/crm-lead-arrow-left.svg); }
Выделяйте новую строку для каждого блочного элемента, ставьте отступы для каждого дочернего элемента.
Плохо:
<div class="menu">
<div class="menu-item"><span class="menu-item-title">Home</span></div><div class="menu-item"><span class="menu-item-title">Search</span></div>
</div><div class="breadcrumb"></div>Хорошо:
<div class="menu">
<div class="menu-item">
<span class="menu-item-title">Home</span>
</div>
<div class="menu-item">
<span class="menu-item-title">Search</span>
</div>
</div>
<div class="breadcrumb"></div>Значения HTML-атрибутов всегда пишутся в двойных кавычках.
Плохо:
<div class='navigation'>
<div class=menu></div>
</div>Хорошо:
<div class="navigation">
<div class="menu"></div>
</div>Теги с большим количеством атрибутов можно переносить на новые строки. Это улучшит читаемость кода, а также облегчит сравнивание файлов в системе контроля версий (diff).
Атрибуты в одну строку:
<a class="task-detail-special-link" id="task-detail-special-link-id" data-id="13" href="" title="Special Link">
<span class="task-detail-special-text">Link</span>
</a>Атрибуты с разбивкой на две строки:
<a class="task-detail-special-link" id="task-detail-special-link-id"
data-id="13" href="" title="Special Link">
<span class="task-detail-special-text">Link</span>
</a>HTML-атрибуты должны быть перечислены в следующем порядке:
classid- атрибуты тега (
src,href,titleи др.) data-*
Любой блок на странице должен описываться селектором класса.
Не используйте каскадные селекторы т.к. они нарушают принцип независимости компонентов.
Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).
- Исключения
- Селекторы состояний (selected, active, hover).
- Селекторы контекста. Существуют случаи, когда компонент используется на разных страницах или в разном окружении. В этом случае удобно использовать селекторы контекста. Важно, чтобы эти контекстные стили содержались в родительском компоненте.
- Верстка, в которой нельзя изменить структуру HTML-тегов.
-
Имена классов записываются на английском языке в нижнем регистре.
-
Если не уверены в написании английского слова, проверьте его по словарю. PHPStorm имеет встроенную проверку орфографии.
-
Желательно, чтобы терминология в названии класса совпадала с названиями, которыми оперирует разработчик (названия полей в базе данных, названия PHP-классов).
-
Для разделения слов в именах используется дефис (-).
-
Создавайте имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода. Не стесняйтесь использовать длинные названия классов.
-
Название класса должно отражать суть блока, а не его внешний вид.
-
Первым словом в названии класса должно идти название модуля. На втором месте — название блока. Название блока может состоять из нескольких слов. Такой формат, с одной стороны, сразу показывает принадлежность стилей, с другой — гарантирует их уникальность. Уникальность стилей обеспечивает независимость верстки компонентов.
<div class="task-detail"> <div class="task-detail-title"></div> <div class="task-detail-description"></div> </div>
<div class="crm-lead-form"> <div class="crm-lead-form-title"></div> <div class="crm-lead-form-description"></div> </div>
-
Вложенные элементы должны сохранять контекст именования блока. Блок не обязательно должен быть прямым родителем элемента.
Оба варианта именования допустимы:
<div class="disk-user"> <div class="disk-user-info"> <div class="disk-user-avatar"></div> <div class="disk-user-name"></div> </div> </div>
<div class="disk-user"> <div class="disk-user-info"> <div class="disk-user-info-avatar"></div> <div class="disk-user-info-name"></div> </div> </div>
-
Не допускайте сокращений. Сокращения могут привести к ситуации, когда одинаковые вещи будут названы по-разному (btn/button).
-
Не используйте старый префикс
bx-. -
Если к элементу происходит обращение по классу через JavaScript, то такой класс должен иметь префикс
js-. -
Для верстки шаблона сайта допускается опускать префикс модуля.
Избегайте инлайновых стилей, все стили должны задаваться в CSS-файле через назначение классов элементам. Инлайновые стили применимы, только если они являются неотъемлемой часть контента страницы (аватар пользователя, размер ползунков в фильтре и т. п.).
Избегайте использование имен классов с селектором тега и атрибута.
Плохо:
div.task-detail-title {
margin: 20px;
}
input[name=user] {
margin: 20px;
}Хорошо:
.task-detail-title {
margin: 20px;
}
.task-detail-user-field {
margin: 20px;
}CSS предлагает множество различных сокращенных форм записи (например, margin, padding, border и др.), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Плохо:
.meeting-sidebar {
margin-top: 5px;
margin-bottom: 3px;
border-width: 1px;
border-style: solid;
border-color: #fff;
}Хорошо:
.meeting-sidebar {
margin: 5px 0 3px;
border: 1px solid #fff;
}Сокращенные формы для шрифта (font) и фона (background) допускается разделять на несколько свойств.
Используйте значения в пикселях. Размеры, указанные в px, абсолютные, четкие, понятные и не зависят ни от чего.
Допустимо использовать проценты % везде, кроме размера текста (font-size).
Не указывайте единицы измерения для нулевых значений.
Плохо:
.timeman-task-list {
margin: 0px 12px 0px 13px;
}Хорошо:
.timeman-task-list {
margin: 0 12px 0 13px;
}Не используйте кавычки с функцией url(), кроме случая, когда ссылка содержит пробел.
Плохо:
.im-user-status {
background: url("images/im-sprite.png");
}Хорошо:
.im-user-status {
background: url(images/im-sprite.png);
}Для указания цвета элемента используйте шестнадцатеричную запись или rgba(), если требуется указать прозрачность.
Не используйте rgb() и верхний регистр в значении свойства.
Плохо:
.disk-invitation-popup {
background: #FFFFFF;
}Хорошо:
.disk-invitation-popup {
background: #fff;
}Избегайте хаков в CSS-коде. Если все таки требуется сделать уникальные свойства для конкретного браузера, воспользуйтесь
специальными классами .bx-chrome, .bx-firefox, .bx-ie10.
Плохо:
*+ html .vote-answers {
margin: 5px;
}Хорошо:
.bx-ie7 .vote-answers {
margin: 8px;
}Старайтесь, чтобы селекторы, описывающие определенный блок верстки, находились в одном месте и не были раскиданы по CSS-файлу.
Позволяют не нагромождать HTML-код лишними элементами, имеющими декоративное назначение. Важно понимать, что этих элементов нет в DOM и обратиться к ним через JavaScript невозможно.
Не используйте CSS Reset в верстке. Компоненты являются независимыми блоками. На них не должны влиять CSS-правила, созданные для всей страницы. Это нарушает независимость блоков и затрудняет их повторное использование. Общий сброс стилей реализуется с помощью глобальных CSS-правил, которые в большинстве случаев пишутся к селекторам на тег, что нежелательно использовать в нашей верстке. Кроме того, сброс стилей влияет на производительность рендеринга страницы и может конфликтовать с версткой клиентов.
Свойство без префикса всегда должно быть в конце.
Плохо:
.menu-item {
-webkit-box-shadow:0 0 10px 20px #000;
box-shadow:0 0 10px 20px #000;
-moz-box-shadow:0 0 10px 20px #000;
}Хорошо:
.menu-item {
-webkit-box-shadow:0 0 10px 20px #000;
-moz-box-shadow:0 0 10px 20px #000;
box-shadow:0 0 10px 20px #000;
}Классы-модификаторы должны именоваться согласно общим правилам:
<div class="menu">
<div class="menu-item"></div>
<div class="menu-item menu-item-selected"></div>
<div class="menu-item"></div>
</div>Избегайте использования модификатора приоритета !important.
Для оформления текста всегда указывайте семейство шрифтов.
Плохо:
.disk-external-folder {
font: 12px "Helvetica Neue";
}Хорошо:
.disk-external-folder {
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}-
При создании правила для нескольких селекторов помещайте каждый селектор на отдельной строке.
-
Перед открывающей скобкой ставьте один пробел.
-
Внутри блока объявлений помещайте каждое объявление на отдельной строке.
-
Добавляйте один уровень отступов перед каждым объявлением.
-
Ставьте пробел после двоеточия внутри объявления.
-
Всегда ставьте точку с запятой после последнего объявления в блоке.
-
Ставьте закрывающую скобку на одной вертикальной линии с первым символом в селекторе.
-
Ставьте пробел после каждой запятой в объявлениях со множественным значением
-
Разделяйте правила пустой строкой.
-
Сортируйте свойства по принципу: свойства, сильно влияющие на элемент, в начале, а самые незначительно влияющие — в конце.
- Display
- Позиционирование (
position/float) - Боксовая модель (
width/height/margin/padding/border/box-sizing) - Цвета и типографика
- Остальное
-
Плохо:
.crm-lead-form { margin: 34px; color: #000; } .crm-lead-title, .crm-invoice-title, .crm-company-title { position: relative; background: #000; height: 15px; padding: 10px; border: 1px solid red; margin: 12px 0 17px; display: block; color: #fff; width: 15px; }
-
Хорошо:
.crm-lead-form { margin: 34px; color: #000; } .crm-lead-title, .crm-invoice-title, .crm-company-title { display: block; position: relative; width: 15px; height: 15px; padding: 10px; border: 1px solid red; margin: 12px 0 17px; color: #fff; background: #000; }
-
Для значений с пробелами (
font-family,url()) и для свойстваcontentиспользуйте двойные кавычки..disk-user-profile { font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif; } .disk-user-profile:after { display: block; content: ""; }
-
Исключения
-
К большим группам правил, состоящих из одного свойства, может применяться запись в одну строку. В таком случае следует ставить пробел после открывающей и перед закрывающей скобками.
.crm-column-title { width: 10%; } .crm-column-author { width: 20%; } .crm-column-actions { width: 30%; } .menu-icon-create { background-position: 0 0; } .menu-icon-delete { background-position: -15px -35px; } .menu-icon-approve { background-position: -34px -35px; }
-
Длинные значения свойств, разделяемые запятыми — как, например, набор градиентов или теней — могут быть помещены на отдельной строке каждое, чтобы повысить читабельность кода и сообщений в системе управления версиями. Формат записи может слегка различаться, один из вариантов приведён ниже.
.disk-info-popup { box-shadow: 1px 1px 1px #000, 2px 2px 1px 1px #ccc inset; background-image: linear-gradient(#fff, #ccc), linear-gradient(#f3c, #4ec); }
-
Следующие пункты являются обязательными перед отдачей верстки в производство.
- Проверка верстки на соответствие макету (Pixel Perfect)
- Браузеры
- Chrome
- Firefox
- IE11
- IE Edge
- Safari
- Минимальное и максимальное разрешение экрана
- Переполнение блоков
- Длинный текст без пробелов
- Длинный текст с пробелами
- Удаление необязательных блоков, которые могут отсутствовать
- Retina-экран
В рамках продукта верстку можно разделить на два вида:
- Верстка компонентов
- Верстка шаблона сайта
Компонент — логически и функционально независимый компонент страницы, инкапсулирует в себе поведение (JavaScript), шаблоны и стили. Независимость компонентов обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.
Шаблон сайта — определяет внешний вид сайта. Включает в себя HTML и CSS для layout'а страницы (header, footer, колонки), оформление текста и другие элементы, общие для всех страниц сайта.
Прежде чем приступать к работе, необходимо выяснить в каком продукте и в каком шаблоне (или шаблонах) сайта будет использоваться верстка. От контекста использования зависит следующее:
- Стандарт HTML (HTML5, HTML4, XHTML)
- Standard Mode и/или Quirks Mode
- Гибкость верстки
- Устойчивость к внешним стилям
- Тестирование
- Кросс-браузерность
Существует следующие контексты использования верстки:
-
Корпоративный портал
Данный продукт поставляется с двумя шаблонами дизайна — Bitrix24 и Light. Компоненты должны хорошо отображаться в обоих шаблонах. В сложных ситуациях отдавайте приоритет шаблону Bitrix24.
-
Управление сайтом
Именно с помощью этого продукта наши клиенты создают новые сайты. Компоненты будут работать в абсолютно разных по дизайну и по верстке проектах. Как правило, партнер, интегрируя стандартный компонент на сайте, идет по пути наименьшего сопротивления. Сначала пробует изменить только CSS шаблона и если этого недостаточно — копирует шаблон и на его основе создает новый.
-
Публичные интерфейсы
Административная верхняя панель, диалоги создания и редактирования страницы — это все примеры публичных интерфейсов, которые должны хорошо отображаться в любом дизайне. Здесь важно, чтобы верстка была "пуленепробиваемой" — внешние стили шаблона не должны влиять на ее отображение.
-
Административный раздел
Представляет собой по сути отдельный сайт со своим шаблоном и интерфейсами. Однако часть этих интерфейсов могут отображаться в публичной части сайта.
-
Сайты готовых решений
Для данных сайтов создается отдельный набор шаблонов, использование которых предназначено только для соответствующего шаблона сайта.
-
Решение Интернет-магазин
Несмотря на то, что сайт интернет-магазина является готовым решением, его шаблоны используются в компонентах как стандартные (по умолчанию). Это значит, что такие шаблоны могут использоваться в любых других дизайнах.
-
Мобильное приложение
Данный продукт использует браузер на основе движка WebKit.
Чтобы сообщить браузеру, что ваша страница адаптируется к любым устройствам, добавьте в заголовок документа такой метатег:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Метатег viewport содержит инструкции для браузера по корректировке размеров и масштабированию страницы по ширине экрана устройства. Если этого элемента нет, мобильные браузеры по умолчанию показывают страницу для экрана компьютера (ширина которого обычно составляет около 980 пикселей, но это значение может отличаться у разных устройств). Затем мобильные браузеры пытаются оптимизировать содержание, увеличивая шрифты и либо масштабируя содержание по размеру экрана, либо показывая только часть контента, которая помещается на экране.
- Используйте изображения в формате SVG.
- Для растровых изображений используйте двукратный размер и свойство
background-size.
Часто дизайнеры требуют сделать границу блока шириной в 1 физический пиксесь. Если присвоить блоку свойство border: 1px solid #000, на ретине это будет выглядить жирной полосой в 2 физических пикселя.
Раньше эту проблему решали путем создания картинки, которой обтягивали бордер с помощью свойства border-image. А это лишнее обращение к серверу.
Начиная с iOS 8 и Android 4.4, стандартные браузеры на базе WebKit поддерживают дропные свойства border: .5px solid #000.
На данный момент поддержка этого способа на используемых девайсах равна 97% на iOS и 75% на Android.
В этом разделе собраны типовые подходы к решению частых задач верстки.
WebKit поддерживает srcset атрибут изображений в img и image-set в стилях. Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей.
Обязательно задается изображение для браузеров не поддерживающих это свойство.
.class {
/* задаем фоновое изображение, если браузер не поддерживает image-set */
background-image: url(image-set-not-supported.png);
/* задаем фоновые изображения, для различных разрешений */
background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x);
background-size: cover;
}Не забудьте использовать свойство background-size для того что бы большие изображения корретно отображались.
Атрибут srcset работает аналогичным образом.
<img src="srcset-not-supported.png" srcset="low-res-image.jpg 1x, high-res-image.jpg 2x">Как в первом так и во втором случае, после ссылки на изображение указывается условие при котором это изображение будет работать. В примерах выше в качесиве условия ppi устройства. Также можно указывать разрешения экранов.