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

Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29

Как использовать: first-line

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

p::first-line {
  font-weight: bold;
  color: red;
}

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

Какие свойства работают

Псевдоэлемент ::first-line не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:

Поддерживаются:

• color
• font и его производные (font-size, font-weight, font-style, font-variant)
• letter-spacing, word-spacing
• line-height
• text-decoration
• text-transform
• vertical-align
• background
• margin-left и margin-right
• padding-left и padding-right
• border-left и border-right

Не поддерживаются:

• display, position, transform, width, height и другие «структурные» свойства.

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

Пример с цитатой

<blockquote>
  Когда вы начнёте, главное — не останавливаться.
</blockquote>

blockquote::first-line {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.

Советы по использованию

• Используйте ::first-line для декоративных акцентов: начало статьи, цитаты, описание карточки.
• Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
• Не используйте псевдоэлемент для логических операций — он только визуальный.
• Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.

Поддержка

Псевдоэлемент ::first-line поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block, inline-block, inline).

Заключение

::first-line — это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

HTTP/3 — это новая версия протокола обмена данными между браузером и сервером. В отличие от предыдущих HTTP/1.1 и HTTP/2, он построен поверх протокола QUIC и использует UDP вместо TCP. Это делает соединения быстрее, стабильнее и безопаснее.

HTTP/3 доступен в Baseline в статусе «Newly Available» с 2024-09-16.

Чем HTTP/3 лучше

• Быстрее устанавливается соединение. Больше нет отдельной стадии TLS: всё объединено.
• Меньше задержек. Даже при потере пакета браузер не ждёт восстановления всего потока, как в TCP.
• Устойчивость к переключениям сети. QUIC сохраняет соединение, даже если пользователь, например, переключился с Wi-Fi на LTE.
• Безопасность по умолчанию. Все соединения — только через шифрование (TLS 1.3).

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

Как работает

HTTP/3 основан на QUIC — это транспортный протокол от Google, который работает через UDP. Он умеет передавать данные параллельно по разным потокам, не блокируя друг друга при сбоях. QUIC внедрён в современные браузеры и серверные платформы.

Нужно ли что-то делать?

Если вы разработчик сайта или веб-приложения, то скорее всего ничего специально делать не нужно — браузер сам выберет HTTP/3, если сервер его поддерживает. Ваш сайт будет работать быстрее просто потому, что инфраструктура на это перешла.

Если вы настраиваете сервер (например, NGINX или Cloudflare), тогда стоит включить поддержку HTTP/3. На популярных платформах это можно сделать одной строчкой.

Как проверить, используется ли HTTP/3

В Chrome или Edge:

1. Откройте DevTools → вкладка Network.
2. Перезагрузите страницу.
3. Добавьте колонку Protocol (правый клик по шапке таблицы).
4. Посмотрите, есть ли h3 у запросов — это и есть HTTP/3.

Через терминал (если у вас установлен curl):

curl -I --http3 https://example.com

Если сервер не поддерживает HTTP/3, будет ошибка или произойдёт откат на HTTP/2.

Через JavaScript

На уровне кода нельзя напрямую узнать версию протокола, но можно сделать fetch и посмотреть заголовки ответа через инструменты разработчика:

fetch('https://example.com')
  .then(response => console.log(response.headers))

А затем проверить в DevTools, какой протокол был использован.

Что важно помнить

• HTTP/3 — это не «фича», которую вы вызываете в коде, а часть транспортного уровня.
• Он поддерживается большинством современных браузеров: Chrome, Firefox, Edge, Safari.
• Но он работает только с HTTPS, как и HTTP/2.

Заключение

HTTP/3 делает интернет быстрее, безопаснее и стабильнее — особенно на слабых сетях и мобильных устройствах. Вам не нужно менять HTML, JavaScript или CSS, чтобы получить преимущество. Главное — чтобы сервер и хостинг поддерживали эту технологию.

Если вы разрабатываете сайт с упором на производительность — убедитесь, что HTTP/3 включён. Это шаг вперёд к более отзывчивым и доступным интерфейсам.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Доступно в Baseline в статусе «Widely Available» с 2023-07-21

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

Атрибуты data-* и свойство dataset — один из самых удобных способов сохранять данные в HTML и использовать их в JavaScript. Они позволяют безопасно и структурированно добавлять пользовательские данные прямо в разметку, не нарушая спецификации HTML.

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

Консоль разработчика — важный инструмент отладки в JavaScript. С помощью методов console можно выводить информацию о работе скрипта, отслеживать ошибки, логировать данные и анализировать производительность. В браузере это доступно через панель разработчика (DevTools), обычно на вкладке «Console».

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

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

С 7 декабря 2023 года (Baseline: Newly Available) в CSS появились нативные математические функции, которые позволяют выполнять вычисления прямо в стилях — без JavaScript, препроцессоров и переменных. Это важный шаг к более гибкому и выразительному управлению размерами, отступами и другими параметрами оформления.

Теперь вы можете применять привычные математические операции, такие как:

• pow(x, y) — возведение числа x в степень y;
• sqrt(x) — извлечение квадратного корня;
• log(x) — натуральный логарифм;
• exp(x) — экспонента (e в степени x).

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

Пример:

.element {
  width: calc(pow(2, 3) * 10px); /* Результат: 8 * 10px = 80px */
}

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

С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em или rem, но и относительно визуальной высоты заглавных букв.

Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.

Атрибут ping используется в теге <a> для отправки фонового POST-запроса на указанный URL, когда пользователь переходит по ссылке. Это позволяет отслеживать переходы без изменения поведения самой ссылки.

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

JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert(), confirm() и prompt(). Эти функции встроены в глобальный объект window и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.

С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.

Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.

За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.

С 11 апреля 2023 года (Baseline: Newly Available) в HTML официально поддерживается атрибут inert. Он делает элемент и всех его потомков полностью неинтерактивными: они не могут получать фокус, не реагируют на нажатия клавиш, клики мыши и вообще исключаются из всех пользовательских взаимодействий. Но при этом остаются в DOM и продолжают рендериться.

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

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

Хотя cursor — базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Цвет CSS — это свойство, которое устанавливает основной цвет для текста, границ и линий украшения. Оно влияет на визуальную сторону элементов и помогает сделать интерфейс более приятным и читаемым. Можно задавать цвет через названия, HEX, RGB или HSL, выбирая подходящий способ в зависимости от задачи.

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

<p style="color: #ff5733;">Этот текст будет оранжево-красным</p>

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

Элемент <slot> используется внутри веб-компонентов и служит для отображения внешнего содержимого, передаваемого в компонент. Это называется «проецирование контента» — <slot> позволяет вставлять элементы в заранее заданные области внутри Shadow DOM.

<slot> входит в Baseline c 15 января 2020 года.

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

<!-- index.html -->
<user-card>
  <h2 slot="name">Иван Иванов</h2>
  <p>Фронтенд-разработчик</p>
</user-card>

<!-- user-card.js -->
<template id="user-template">
  <article>
    <header>
      <slot name="name">Имя не указано</slot>
    </header>
    <section>
      <slot></slot>
    </section>
  </article>
</template>

Как работает

1. Компонент user-card создаёт Shadow DOM и добавляет в него элемент <slot>.
2. Внешние элементы, вложенные в тег user-card, автоматически подставляются в слоты:
   • <h2 slot="name"> попадает в <slot name="name">
   • <p> попадает в безымянный слот <slot>
3. Если слот пуст — отображается его содержимое по умолчанию.

Атрибуты

name — имя слота. Используется для связи с элементами, у которых есть атрибут slot="...".

Свойства и методы в JS

• HTMLSlotElement.assignedNodes() — возвращает список узлов, вставленных в слот.

const slot = shadowRoot.querySelector('slot[name="name"]');
const nodes = slot.assignedNodes();

Стилизация содержимого

Слот нельзя напрямую стилизовать, но можно стилизовать его содержимое с помощью псевдоэлемента ::slotted():

::slotted(h2) {
  font-size: 1.5em;
  color: darkblue;
}

⚠️ Псевдоэлемент ::slotted() работает только с непосредственными потомками, переданными в слот.

Особенности

• Слот без атрибута name — это безымянный слот, туда попадают все элементы без slot="...".
• В компоненте может быть только один безымянный слот.
• Содержимое слотов остаётся в Light DOM — доступно для внешних скриптов и стилей, но не для стилей изнутри Shadow DOM (кроме ::slotted).

Когда использовать

Для создания гибких компонентов: карточек, модалок, выпадающих списков, табов и других UI-элементов, где важна кастомизация содержимого.

Поддержка браузеров

Все современные браузеры поддерживают <slot> как часть спецификации Shadow DOM v1.

Итого

• <slot> используется только внутри Shadow DOM.
• Позволяет проецировать внешний HTML внутрь компонента.
• Поддерживает именованные и безымянные области.
• Работает в связке с slot="..." у передаваемых элементов.

Это один из ключевых элементов при создании веб-компонентов на чистом JavaScript.

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

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

Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.

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

Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

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

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.