Свежие статьи

Как работает :not() в CSS — исключаем элементы из стилей правильно
Доступно в Baseline в статусе «Widely Available» с 2023-07-21
Псевдокласс :not()
позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.
- 20 июля 2025

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

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

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

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

Использование CSS функций pow, sqrt, hypot, log и exp
С 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.
- 8 июля 2025

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

Как работает ping в HTML
Атрибут ping
используется в теге <a>
для отправки фонового POST-запроса на указанный URL, когда пользователь переходит по ссылке. Это позволяет отслеживать переходы без изменения поведения самой ссылки.
Функция находится в статусе ограниченной доступности в Baseline, что означает: она поддерживается не во всех браузерах, и может быть отключена настройками безопасности.
- 7 июля 2025

Методы окон alert, confirm и prompt в JavaScript
JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert()
, confirm()
и prompt()
. Эти функции встроены в глобальный объект window
и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.
С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.
- 7 июля 2025

Как использовать классы в JavaScript
Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.
За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.
- 5 июля 2025

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

CSS-свойство cursor для управления отображением курсора
Свойство cursor
управляет тем, как выглядит указатель мыши, когда пользователь наводит его на элемент. Оно помогает визуально показать, что элемент интерактивный, требует внимания или, наоборот, недоступен. Это особенно важно для улучшения удобства и предсказуемости интерфейса.
Хотя cursor
— базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.
- 2 июля 2025

Цвет текста в CSS: свойство и изменение
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
Цвет CSS — это свойство, которое устанавливает основной цвет для текста, границ и линий украшения. Оно влияет на визуальную сторону элементов и помогает сделать интерфейс более приятным и читаемым. Можно задавать цвет через названия, HEX, RGB или HSL, выбирая подходящий способ в зависимости от задачи.
Пример установки цвета текста:
<p style="color: #ff5733;">Этот текст будет оранжево-красным</p>
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 25 июня 2025

slot
Элемент <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>
Как работает
- Компонент
user-card
создаёт Shadow DOM и добавляет в него элемент<slot>
. - Внешние элементы, вложенные в тег
user-card
, автоматически подставляются в слоты:<h2 slot="name">
попадает в<slot name="name">
<p>
попадает в безымянный слот<slot>
- Если слот пуст — отображается его содержимое по умолчанию.
Атрибуты
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.
- 25 июня 2025

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

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

focus-visible
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab
.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible
. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
- 21 июня 2025

CSS font-palette: управление цветами шрифтов
Свойство font-palette
позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color
уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)
Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.
- 18 июня 2025

Как анимировать CSS Grids без JavaScript
Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float
, flex
и position
. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
Да, grid-template-columns
и grid-template-rows
существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.
Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns
и grid-template-rows
вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents
. Просто работает.
- 1 июня 2025

FormControl и FormGroup в Angular
Если вы разрабатываете веб-приложение, вам рано или поздно придётся собирать данные от пользователя. К счастью, реактивные формы в Angular позволяют делать это без лишней сложности — без нагромождения директив и с минимальным количеством шаблонного кода. Более того, их просто валидировать, так что можно обойтись даже без end-to-end тестов.
Говоря проще, form control’ы в Angular дают полный контроль разработчику — ничего не происходит автоматически, и каждое решение по вводу и управлению принимается явно и осознанно. В этом руководстве мы покажем, как объединять form control’ы в form group’ы, чтобы структурировать форму и упростить доступ к её элементам — как к логическим блокам. Чтобы лучше понять, как работают form group’ы в Angular, мы шаг за шагом соберём реактивную форму.
Для работы с примером скачайте стартовый проект с GitHub и откройте его в VS Code. Если ещё не обновляли Angular, поставьте актуальную на момент написания версию — Angular v18.
- 1 июня 2025