CSS

Браузер определяет, какие стили отображать для элемента, в зависимости от специфичности правил CSS. Мы предполагаем, что браузер уже определил правила, соответствующие конкретному элементу. Среди соответствующих правил для каждого правила рассчитывается специфичность, состоящая из четырех значений, разделенных запятыми: a, b, c, d, на основе следующего:

1. a указывает, используются ли встроенные стили. Если объявление свойства является встроенным стилем элемента, a равно 1, иначе 0.
2. b — это количество селекторов ID.
3. c — это количество селекторов классов, атрибутов и псевдоклассов.
4. d — это количество селекторов тегов и псевдоэлементов.

Полученная специфичность — это не оценка, а матрица значений, которые можно сравнивать по столбцам. При сравнении селекторов для определения того, какой из них имеет наивысшую специфичность, смотрите слева направо и сравнивайте наибольшее значение в каждом столбце. Таким образом, значение в столбце b будет переопределять значения в столбцах c и d, независимо от того, какими они могут быть. В таком случае специфичность 0,1,0,0 будет больше, чем 0,0,10,10.

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

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

• Сброс (Resetting) — Сброс предназначен для удаления всех стилей браузера по умолчанию с элементов. Например, margin, padding, font-size всех элементов сбрасываются до одинакового значения. Вам придется переопределять стили для общих типографских элементов.
• Нормализация (Normalizing) — Нормализация сохраняет полезные стили по умолчанию, а не "убирает" все. Она также исправляет ошибки для общих браузерных зависимостей.

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

float — это свойство позиционирования CSS. Плавающие элементы остаются частью потока страницы и будут влиять на позиционирование других элементов (например, текст будет обтекать плавающие элементы), в отличие от элементов с position: absolute, которые удаляются из потока страницы.

Свойство CSS clear можно использовать для позиционирования под left/right/both плавающими элементами.

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

Хак .clearfix использует хитрый CSS псевдоселектор (::after) для очистки float. Вместо установки overflow для родителя вы применяете к нему дополнительный класс clearfix. Затем примените следующий CSS:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

В качестве альтернативы, присвойте родительскому элементу свойство overflow: auto или overflow: hidden, что установит новый контекст форматирования блока внутри дочерних элементов, и он расширится, чтобы содержать своих дочерних элементов.

Свойство z-index в CSS управляет вертикальным порядком наложения перекрывающихся элементов. z-index влияет только на элементы, у которых значение position не равно static.

Без какого-либо значения z-index элементы располагаются в том порядке, в котором они появляются в DOM (самый нижний на том же уровне иерархии появляется сверху). Элементы с нестатическим позиционированием (и их дочерние элементы) всегда будут располагаться поверх элементов с позиционированием static по умолчанию, независимо от иерархии HTML.

Контекст наложения — это элемент, который содержит набор слоев. Внутри локального контекста наложения значения z-index его дочерних элементов устанавливаются относительно этого элемента, а не относительно корневого документа. Слои вне этого контекста — то есть родственные элементы локального контекста наложения — не могут располагаться между слоями внутри него. Если элемент B находится поверх элемента A, дочерний элемент элемента A, элемент C, никогда не может быть выше элемента B, даже если элемент C имеет более высокий z-index, чем элемент B.

Каждый контекст наложения является самодостаточным — после того, как содержимое элемента уложено в стек, весь элемент рассматривается в порядке наложения родительского контекста наложения. Некоторые свойства CSS запускают новый контекст наложения, такие как opacity меньше 1, filter не none и transform не none.

_Примечание: Точно, что именно квалифицирует элемент для создания контекста наложения, перечислено в этом длинном наборе [правил].

Контекст форматирования блока (BFC) является частью визуального рендеринга веб-страницы CSS, в котором располагаются блочные блоки. Плавающие элементы, абсолютно позиционированные элементы, inline-blocks, table-cells, table-captions и элементы с overflow, отличным от visible (за исключением случаев, когда это значение было распространено на область просмотра), создают новые контексты форматирования блока.

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

BFC — это HTML-блок, который удовлетворяет хотя бы одному из следующих условий:

• Значение float не равно none.
• Значение position не равно static и не равно relative.
• Значение display равно table-cell, table-caption, inline-block, flex или inline-flex, grid или inline-grid.
• Значение overflow не равно visible.

В BFC левый внешний край каждого блока касается левого края содержащего блока (для форматирования справа налево правые края касаются).

Вертикальные поля между соседними блочными элементами в BFC схлопываются. Подробнее о [схлопывании полей].

• Метод пустого div - <div style="clear:both;"></div>.
• Метод clearfix - См. класс .clearfix выше.
• Метод overflow: auto или overflow: hidden - Родительский элемент установит новый контекст форматирования блока и расширится, чтобы содержать свои плавающие дочерние элементы.

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

CSS-спрайты объединяют несколько изображений в одно большее изображение. Это часто используемая техника для иконок (Gmail использует ее). Как это реализовать:

1. Используйте генератор спрайтов, который упаковывает несколько изображений в одно и генерирует соответствующий CSS для него.
2. Каждое изображение будет иметь соответствующий CSS-класс с определенными свойствами background-image, background-position и background-size.
3. Чтобы использовать это изображение, добавьте соответствующий класс к вашему элементу.

Преимущества:

• Уменьшение количества HTTP-запросов для нескольких изображений (для каждого спрайт-листа требуется только один запрос). Но с HTTP2 загрузка нескольких изображений уже не является большой проблемой.
• Предварительная загрузка ресурсов, которые не будут загружены до тех пор, пока не понадобятся, таких как изображения, которые появляются только при псевдосостоянии :hover. Мерцания не будет.

• После выявления проблемы и виновного браузера используйте отдельный файл стилей, который загружается только при использовании этого конкретного браузера. Однако этот метод требует рендеринга на стороне сервера.
• Используйте библиотеки, такие как Bootstrap, которые уже обрабатывают эти проблемы со стилями за вас.
• Используйте autoprefixer для автоматического добавления префиксов поставщика к вашему коду.
• Используйте Reset CSS или Normalize.css.
• Если вы используете Postcss (или аналогичную библиотеку транспиляции), могут быть плагины, которые позволяют вам использовать современный синтаксис CSS (и даже предложения W3C), которые преобразуют эти разделы вашего кода в соответствующий безопасный код, который будет работать в используемых вами целях.

• Градуированная деградация (Graceful degradation) — практика создания приложения для современных браузеров с обеспечением его функциональности в старых браузерах.
• Прогрессивное улучшение (Progressive enhancement) — практика создания приложения с базовым уровнем пользовательского опыта, но с добавлением функциональных улучшений, когда браузер их поддерживает.
• Используйте [caniuse.com] для проверки поддержки функций.
• Autoprefixer для автоматической вставки префиксов поставщиков.
• Определение функций с помощью [Modernizr].
• Используйте [CSS Feature queries @support]

Эти методы связаны с доступностью (a11y).

• width: 0; height: 0. Делает элемент не занимающим никакого места на экране, что приводит к его невидимости.
• position: absolute; left: -99999px. Позиционирует его за пределами экрана.
• text-indent: -9999px. Это работает только для текста внутри блочных элементов. Это широко используемый и известный трюк, но он имеет [некоторые недостатки], такие как проблемы с производительностью, поэтому вы можете рассмотреть возможность использования text-indent: 100% вместо этого.
• Метатеги. Например, с помощью Schema.org, RDF и JSON-LD.
• WAI-ARIA. Техническая спецификация W3C, которая определяет, как повысить доступность веб-страниц.

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

До того, как Flex стал популярным (около 2014 года), сеточная система на основе float была самой надежной, потому что она по-прежнему имела наибольшую поддержку браузеров среди альтернативных существующих систем (flex, grid). Bootstrap использовал подход float до Bootstrap 4, который переключился на подход на основе flex. На момент написания (2020 год) flex является рекомендуемым подходом для создания сеточных систем и имеет [достойную поддержку браузерами].

Для тех, кто любит экспериментировать, они могут рассмотреть [CSS Grid Layout], который использует новый блестящий свойство grid; он даже лучше, чем flex для создания сеточных макетов и станет де-факто способом делать это в будущем.

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

Да, существует несколько способов раскрашивать фигуры (включая указание атрибутов объекта) с использованием встроенного CSS, встроенного CSS-раздела или внешнего CSS-файла. Большинство SVG, которые вы найдете в Интернете, используют встроенный CSS, но каждый тип имеет свои преимущества и недостатки.

Базовая раскраска может быть выполнена путем установки двух атрибутов на узле: fill и stroke. fill устанавливает цвет внутри объекта, а stroke устанавливает цвет линии, нарисованной вокруг объекта. Вы можете использовать те же схемы именования цветов CSS, что и в HTML, будь то названия цветов (например, red), значения RGB (например, rgb(255,0,0)), шестнадцатеричные значения, значения RGBA и т. д.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

Приведенный выше fill="purple" является примером презентационного атрибута. Интересно, что, в отличие от встроенных стилей, таких как style="fill: purple", которые также являются атрибутом, презентационные атрибуты могут быть [переопределены стилями CSS], определенными в таблице стилей. Таким образом, если вы сделаете что-то вроде svg { fill: blue; }, это переопределит определенный нами фиолетовый цвет.

Да, существует четыре типа свойств @media (включая screen):

• all - для всех типов медиаустройств
• print - для принтеров
• speech - для программ чтения с экрана, которые "читают" страницу вслух
• screen - для компьютерных экранов, планшетов, смартфонов и т. д.

Вот пример использования типа медиа print:

@media print {
  body {
    color: black;
  }
}

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

Методология [BEM (Block Element Modifier)] рекомендует, чтобы у всего был один класс, и, там, где нужна иерархия, это также запекается в название класса, что, естественно, делает селектор эффективным и легко переопределяемым.

Знайте, какие свойства CSS [вызывают] перекомпоновку, перерисовку и композицию. По возможности избегайте написания стилей, которые изменяют макет (вызывают перекомпоновку).

Преимущества:

• CSS становится более поддерживаемым.
• Легко писать вложенные селекторы.
• Переменные для согласованного оформления. Можно делиться файлами тем между различными проектами.
• Миксины для генерации повторяющегося CSS.
• Функции Sass, такие как циклы, списки и карты, могут упростить настройку и сделать ее менее многословной.
• Разделение кода на несколько файлов. Файлы CSS также можно разделять, но это потребует HTTP-запроса для загрузки каждого CSS-файла.

Недостатки:

• Требуются инструменты для предварительной обработки. Время перекомпиляции может быть медленным.
• Отсутствие написания текущего и потенциально применимого CSS. Например, используя что-то вроде [postcss-loader] с [webpack], вы можете писать потенциально совместимый с будущим CSS, позволяя использовать такие вещи, как переменные CSS вместо переменных Sass. Таким образом, вы изучаете новые навыки, которые могут окупиться, если/когда они станут стандартизированными.

Плюсы:

• В основном те преимущества, что были упомянуты выше.
• Меньше кода пишется на JavaScript, что хорошо сочетается с Node.

Минусы:

• Я использую Sass через node-sass, который является привязкой для LibSass, написанной на C++. Мне приходится часто перекомпилировать его при переключении между версиями Node.
• В Less имена переменных начинаются с символа @, что может вызвать путаницу с нативными ключевыми словами CSS, такими как @media, @import и @font-face.

Используйте @font-face и определите font-family для разных font-weight.

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

Например, для селектора p span браузеры сначала находят все элементы <span> и перемещаются вверх по их родительским элементам до корня, чтобы найти элемент <p>. Для конкретного <span>, как только он находит <p>, он знает, что <span> соответствует, и может остановить сопоставление.

Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определенную часть выбранного элемента (элементов). Их можно использовать для оформления (:first-line, :first-letter) или добавления элементов в разметку (в сочетании с content: ...) без необходимости изменять разметку (:before, :after).

• :first-line и :first-letter можно использовать для оформления текста.
• Используются в хаке .clearfix, как показано выше, для добавления элемента с нулевым пространством и clear: both.
• Треугольные стрелки в всплывающих подсказках используют :before и :after. Способствует разделению задач, потому что треугольник считается частью стиля, а не частью DOM.

Блочная модель CSS описывает прямоугольные блоки, которые генерируются для элементов в дереве документа и располагаются в соответствии с визуальной моделью форматирования. Каждый блок имеет область содержимого (например, текст, изображение и т. д.) и необязательные окружающие области padding, border и margin.

Блочная модель CSS отвечает за расчет:

• Сколько места занимает блочный элемент.
• Перекрываются ли или схлопываются ли границы и/или поля.
• Размеры блока.

Блочная модель имеет следующие правила:

• Размеры блочного элемента рассчитываются по width, height, padding, border и margin.
• Если height не указана, блочный элемент будет иметь такую же высоту, как и содержащийся в нем контент, плюс padding (если нет плавающих элементов, см. ниже).
• Если width не указана, неплавающий блочный элемент будет расширяться, чтобы соответствовать ширине своего родителя за вычетом padding.
• height элемента рассчитывается по height содержимого.
• width элемента рассчитывается по width содержимого.
• По умолчанию padding и border не являются частью width и height элемента.

• По умолчанию к элементам применяется box-sizing: content-box, и учитывается только размер содержимого.
• box-sizing: border-box изменяет способ расчета width и height элементов, border и padding также включаются в расчет.
• height элемента теперь рассчитывается как height содержимого + вертикальный padding + вертикальная border ширина.
• width элемента теперь рассчитывается как width содержимого + горизонтальный padding + горизонтальная border ширина.
• Учет padding и border как часть нашей блочной модели лучше согласуется с тем, как дизайнеры на самом деле представляют контент в сетках.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Описание | | :-- | :-- | | none | Не отображает элемент (элемент больше не влияет на макет документа). Все дочерние элементы также больше не отображаются. Документ отображается так, как если бы элемента не существовало в дереве документа | | block | Элемент занимает всю строку в блочном направлении (обычно горизонтальном) | | inline | Элементы могут располагаться рядом друг с другом | | inline-block | Похож на inline, но позволяет использовать некоторые свойства block, такие как установка width и height | | table | Ведет себя как элемент <table> | | table-row | Ведет себя как элемент <tr> | | table-cell | Ведет себя как элемент <td> | | list-item | Ведет себя как элемент <li>, что позволяет определять list-style-type и list-style-position |

Для полноты картины я добавлю сравнение с block.

| | block | inline-block | inline | | --- | --- | --- | --- | | Размер | Занимает всю ширину своего родительского контейнера. | Зависит от содержимого. | Зависит от содержимого. | | Позиционирование | Начинается с новой строки и не терпит никаких HTML-элементов рядом с ним (за исключением добавления float) | Располагается рядом с другим содержимым и позволяет размещать другие элементы рядом с ним. | Располагается рядом с другим содержимым и позволяет размещать другие элементы рядом с ним. | | Можно указать width и height | Да | Да | Нет. Будет проигнорировано, если установлено. | | Может быть выровнен с помощью vertical-align | Нет | Да | Да | | Отступы и поля | Учитываются все стороны. | Учитываются все стороны. | Учитываются только горизонтальные стороны. Вертикальные стороны, если указаны, не влияют на макет. Занимаемое вертикальное пространство зависит от line-height, хотя border и padding визуально отображаются вокруг содержимого. | | Float | - | - | Становится похожим на блочный элемент, где можно устанавливать вертикальные отступы и поля. |

Позиционированный элемент — это элемент, вычисленное свойство position которого равно relative, absolute, fixed или sticky.

• static — Позиция по умолчанию; элемент будет располагаться на странице так, как он обычно это делает. Свойства top, right, bottom, left и z-index не применяются.
• relative — Позиция элемента корректируется относительно самого себя, без изменения макета (и, таким образом, оставляя пробел для элемента там, где он был бы, если бы не был позиционирован).
• absolute — Элемент удаляется из потока страницы и позиционируется в указанной позиции относительно его ближайшего позиционированного предка, если таковой имеется, или в противном случае относительно начального содержащего блока. Абсолютно позиционированные блоки могут иметь поля, и они не схлопываются с любыми другими полями. Эти элементы не влияют на позицию других элементов.
• fixed — Элемент удаляется из потока страницы и позиционируется в указанной позиции относительно области просмотра и не перемещается при прокрутке.
• sticky — Липкое позиционирование является гибридом относительного и фиксированного позиционирования. Элемент обрабатывается как relative позиционированный до тех пор, пока он не пересечет указанный порог, после чего он обрабатывается как fixed позиционированный.

• Bootstrap — Медленный цикл релизов. Bootstrap 4 находился в альфа-версии почти 2 года. Добавить компонент кнопки-спиннера, так как он широко используется.
• Semantic UI — Структура исходного кода делает кастомизацию темы чрезвычайно трудной для понимания. Ее нетрадиционная система тем сложна в настройке. Путь конфигурации жестко закодирован в библиотеке поставщика. Не очень хорошо разработан для переопределения переменных, в отличие от Bootstrap.
• Bulma — Требуется много несемантических и излишних классов и разметки. Не обратно совместим. Обновление версий ломает приложение незаметным образом.

Да. Flexbox в основном предназначен для одномерных макетов, тогда как Grid предназначен для двумерных макетов.

Flexbox решает многие распространенные проблемы в CSS, такие как вертикальное выравнивание элементов внутри контейнера, липкий футер и т. д. Bootstrap и Bulma основаны на Flexbox, и, вероятно, это рекомендуемый способ создания макетов в наши дни. Раньше пробовал Flexbox, но столкнулся с некоторыми проблемами несовместимости с браузерами (Safari) при использовании flex-grow, и мне пришлось переписывать код, используя inline-blocks и математику для расчета ширины в процентах, это был неприятный опыт.

Grid, безусловно, является самым интуитивным подходом для создания макетов на основе сетки (так и должно быть!), но поддержка браузерами в настоящее время неширока.

Обратите внимание, что эти два подхода не являются взаимоисключающими.

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

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Стратегия "mobile-first" также является адаптивной, однако она предполагает, что мы должны по умолчанию определять все стили для мобильных устройств, а затем добавлять только специфические адаптивные правила для других устройств. Следуя предыдущему примеру:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Стратегия "mobile-first" имеет 2 основных преимущества:

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

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

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

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

Оба этих метода имеют некоторые проблемы, которые необходимо взвесить:

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

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

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

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

Чтобы преодолеть эту проблему, мы можем использовать адаптивные изображения, как указано в HTML5. Это требует предоставления браузеру файлов одного и того же изображения с различным разрешением и позволяет ему решить, какое изображение лучше, используя атрибут HTML srcset и, при необходимости, sizes, например:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Важно отметить, что браузеры, не поддерживающие srcset HTML5 (например, IE11), будут игнорировать его и использовать src вместо него. Если нам действительно нужна поддержка IE11, и мы хотим предоставить эту функцию по соображениям производительности, мы можем использовать JavaScript-полифилл, например:

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

translate() — это значение CSS-свойства transform. Изменение transform или opacity не вызывает перекомпоновку или перерисовку браузера, но вызывает композицию; тогда как изменение абсолютного позиционирования вызывает перекомпоновку. transform заставляет браузер создавать слой GPU для элемента, но изменение свойств абсолютного позиционирования использует CPU. Следовательно, translate() более эффективен и приведет к сокращению времени отрисовки для более плавной анимации.

При использовании translate() элемент по-прежнему занимает свое исходное пространство (что-то вроде position: relative), в отличие от изменения абсолютного позиционирования.