Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так?

Почему так?

Может показаться, что в обоих случаях на этапе каскада победит последнее CSS-правило. Но нет.

Во втором случае объявление background-color: 20px вообще невалидное, поэтому оно отбросится ещё на этапе фильтрации. А на вход алгоритма каскадной сортировки попадёт только одно объявление — background-color: red. Оно же и победит.

В первом случае всё ещё интереснее.

Сначала оба объявления пройдут через этап фильтрации. Затем они поборются друг с другом на этапе каскада и победит объявление background-color: var(--not-a-color).

На этапе определения вычисленного значения браузер заглянет внутрь переменной --not-a-color, а там окажется 20px. Это невалидный цвет фона, поэтому придётся его отбросить и запустить алгоритм выбора значений по умолчанию.

Наследуемое значение получить не выйдет, ведь background-color не наследуется, поэтому будет использовано начальное значение свойства из спецификации — transparent.

Как браузер разбирает CSS

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

Давайте подробнее разберёмся, из чего состоит процесс обработки значений.

Обработка значений

Обработка значений — процесс, после которого свойства всех элементов на странице получают конкретные значения. Он происходит после того, как парсер разделит весь код на токены и выделит среди них объявления. Напомним, что объявлениями называют пары свойство: значение. Например, font-style: italic.

Обработку значений можно разделить на четыре этапа:

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

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

Фильтрация

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

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

p {
  color: #101010;
}

.warning {
  color: #22ff22;
}

p.warning {
  font-size: 24px;
  color: #744ce5;
}

Тогда у элемента <p class="warning"> будет три объявленных значения свойства color, одно значение свойства font-size и ни одного объявленного значения свойства font-weight.

Каскад

На следующем этапе для каждого объявленного свойства с помощью алгоритма каскада вычисляется каскадированное (cascaded) значение.

При каскадировании учитывается:

  • происхождение — стили самого браузера, стили разработчика и пользователя учитываются с разным приоритетом;
  • важность — стили бывают «важные» (!important) или «обычные»;
  • контекст — стили могут быть изолированы в отдельном контексте «теневого» DOM-дерева;
  • специфичность — селекторы (по тегу, классу и так далее) имеют разный вес;
  • порядок появления в коде — стили применяются по очереди и последующие переопределяют предыдущие.

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

Например, у элемента <p class="warning">, о котором говорилось выше, останется только одно значение свойства color — это #744ce5. Два других объявленных значения будут отброшены.

Получение значений по умолчанию

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

Недостающую информацию браузер получает с помощью значений по умолчанию. К ним относятся унаследованные (inherited) и начальные (initial) значения.

Узнать, наследуется ли свойство, и его начальное значение, можно из его описания:

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

Вычисления

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

Этап вычислений можно разделить на три подэтапа: получение вычисленных, используемых и действительных значений.

Получение вычисленных значений

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

Что может быть вычисленным значением свойства, можно узнать из его описания:

Разберём пример:

p {
  font-size: 16px;
  line-height: 1.2em;
  padding: calc(3em + 20px);
  background-image: url("image.jpg");
  width: 50%;
}

После первого этапа вычислений значения превратятся в следующие:

p {
  font-size: 16px; /* Ничего вычислять не нужно */
  line-height: 19.2px;
  padding: 68px;
  background-image: url("http://www.example.com/image.jpg");
  width: 50%;     /* Невозможно вычислить на этом этапе */
}

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

Даже если сам элемент не использует какое-то значение, оно может наследоваться и влиять на отрисовку. Так, например, свойство text-transform не применяется к блочным боксам, но наследуется и влияет на вложенные в них строчные боксы.

<style>
  div {
    text-transform: uppercase;
  }
</style>

<div>                  <!-- Свойство text-transform не играет
														роли для этого элемента -->
  <p>                  <!-- И для этого -->
    <span>Текст</span> <!-- Но оно влияет на отрисовку потомка -->
  </p>
</div>

В описании свойств в спецификации указано, к каким элементам они применяются:

Кстати, по историческим причинам метод getComputedStyle не всегда возвращает именно вычисленное значение. Иногда это будет используемое значение (см. ниже).

Получение используемых значений

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

Кроме того, отбрасываются значения, которые для конкретного элемента не имеют смысла. Например, grid-template-columns для элемента, который не является грид-контейнером.

В результате остаются и вычисляются все значения, которые нужны для отрисовки страницы. Такие значения называют используемыми (used).

Получение действительных значений

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

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

div {
  border-width: 13.2px; /* Действительное значение — 13px */
}

Другой пример — действительный размер текста может отличаться от используемого, если желаемый шрифт по какой-то причине недоступен и задано свойство font-size-adjust.

.rule {
  font-family: "Futura", "Verdana", sans-serif;
  font-size: 20px; /* Если первый шрифт не загрузится,
  										то действительное значение — 41px */
  font-size-adjust: 1;
}

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

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

Как работает каскад

  1. Сначала браузер анализирует и фильтрует значения, чтобы получить список объявленных значений.
  2. Затем включается алгоритм каскада, и в результате для каждого свойства остаётся только одно каскадированное значение.
  3. Если какое-то значение не было объявлено, оно получается с помощью наследования или начальных значений. Таким образом каждый элемент получает полный набор определённых значений.
  4. Затем наступает первый этап вычислений, и браузер преобразует определённые значения в вычисленные. Именно они передаются по наследству потомкам элемента.
  5. На втором этапе вычислений браузер разрешает те значения, которые зависят от устройства пользователя и относительного расположения элементов на странице, а также отбрасывает те значения, которые не нужны для отрисовки. В результате получаются используемые значения.
  6. В конце концов к веб-странице применяются некоторые ограничения, и используемые значения становятся действительными.

Финальный тест, чтобы закрепить пройденное

Какого цвета будет ссылка в обоих случаях?

Первый случай
Первый случай
Второй случай
Второй случай

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Селектор потомков (пробел)

Селектор потомков (пробел)

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

Пример использования селектора потомков:

article p {
  color: #333;
  line-height: 1.6;
}

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

Селектор потомков особенно полезен в следующих случаях:

  1. Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
  2. Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
  3. Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.

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

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

CSS
  • 4 апреля 2024
Псевдокласс :focus

Псевдокласс :focus

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

Пример использования :focus:

input:focus {
  border: 2px solid blue;
  background-color: lightblue;
}

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

Псевдокласс :focus особенно важен для:

  1. Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
  2. Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
  3. Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.

Применение :focus в сочетании с другими псевдоклассами, такими как :hover и :active, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.

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

CSS
  • 4 апреля 2024
Селектор по id

Селектор по id

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

Селектор по id обозначается знаком решетки (#) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id мощным инструментом для стилизации конкретных элементов.

Пример использования селектора по id:

<div id="uniqueElement">Этот элемент уникален.</div>
#uniqueElement {
  color: green;
  font-size: 20px;
}

В этом примере элементу <div> с id="uniqueElement" присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.

Преимущества использования селектора по id:

  1. Точечная стилизация: Селектор по id позволяет применять стили к конкретному элементу, не влияя на другие элементы.
  2. Высокий приоритет: Стили, примененные через селектор по id, имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.

Важно помнить:

  • Идентификатор должен быть уникальным в пределах всего HTML-документа.
  • Злоупотребление селекторами по id может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно.
  • Селекторы по id могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.

Использование селектора по id является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.

CSS
  • 4 апреля 2024
Псевдокласс :link

Псевдокласс :link

Интересный фронтенд — в телеграм-канале «Доктайп»

Подписаться

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

Пример использования псевдокласса :link для стилизации непосещенных ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

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

При работе с :link, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover и :active, чтобы обеспечить интерактивный и отзывчивый интерфейс.

Пример полного набора стилей для ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #666;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #ff0000;
}

В этом примере задаются различные стили для всех возможных состояний ссылок: :link для непосещённых, :visited для посещённых, :hover при наведении курсора и :active в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.

CSS
  • 4 апреля 2024
Несколько селекторов через запятую

Несколько селекторов через запятую

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

Пример использования списка селекторов для стилизации заголовков, абзацев и элементов списка:

h1, h2, p, li {
  color: #333;
  font-family: 'Arial', sans-serif;
}

В этом примере все заголовки первого и второго уровней, абзацы и элементы списка (<li>) окрашиваются в темно-серый цвет (#333) и стилизуются шрифтом Arial. Использование списка селекторов позволяет значительно сократить количество кода, необходимого для применения общих стилей к разным элементам.

Применение списка селекторов эффективно во многих ситуациях, включая:

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

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

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

CSS
  • 4 апреля 2024
Смежный селектор +

Смежный селектор +

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

Пример применения смежного селектора:

h2 + p {
  color: #757575;
  margin-top: 0;
}

В данном случае к абзацу (<p>), непосредственно следующему за заголовком второго уровня (<h2>), применяются определенные стили: цвет текста изменится на серый, а верхний отступ будет устранен. Это особенно полезно для визуальной корректировки расположения текста после заголовков, чтобы обеспечить более четкое и аккуратное представление контента.

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

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

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

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

CSS
  • 4 апреля 2024
Селектор type

Селектор type

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

Пример использования селектора типа для стилизации всех абзацев (<p>) на странице:

p {
  font-family: "Helvetica", sans-serif;
  line-height: 1.6;
  color: #333;
}

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

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

При работе с селекторами типа рекомендуется следовать принципам чистого кода и лучшим практикам веб-разработки:

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

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

CSS
  • 4 апреля 2024
Универсальный селектор *

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

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

Пример использования универсального селектора для сброса стандартных отступов и задания базового шрифта:

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

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

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

При работе с CSS важно следовать рекомендациям по стилю кода, чтобы обеспечить читаемость и поддерживаемость кода. Например, согласно рекомендациям HTML Academy:

  • Селекторы и свойства записываются строчными буквами.
  • Перед открывающей фигурной скобкой ставится пробел, свойства перечисляются с новой строки с одним уровнем отступа.
  • После двоеточия в объявлении свойства следует пробел.
  • В конце объявления свойства ставится точка с запятой.
  • Между блоками правил оставляется одна пустая строка для лучшей читаемости.
Читать дальше
CSS
  • 4 апреля 2024
Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

💡 Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

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

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc(). Ну, поехали!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 5 марта 2024
Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

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

Значение line-height можно указывать как в абсолютных единицах (например, px, pt), так и в относительных (em, %, без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

Примеры использования:

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
Читать дальше
CSS
  • 4 марта 2024