Зря вы забыли эти HTML- и CSS-фичи / forpes.ru

Главная
Зря вы забыли эти HTML- и CSS-фичи

Зря вы забыли эти HTML- и CSS-фичи +30

05.05.2026 09:01

melnik909 0 9000 Источник

Привет, Хабр!

Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл как раз с ними.

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

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

Давайте посмотрим, что я подготовил.

Атрибут contenteditable

Если перед вами поставят задачу, в которой нужно дать пользователю возможность редактирования блока с текстом, как вы её решите? Надеюсь, вы вспомните про атрибут contenteditable. А если вы о нём не слышали, то давайте познакомлю вас с ним.

Лучше всего это сделать сразу на примере. У меня будет элемент div с текстом. Также я для него объявлю атрибут contenteditable со значением true.

<body>
  <div contenteditable="true">
    <p>Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — это находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл, как раз с ними.</p>
  </div>
</body>

Вроде ничего необычного. Текст и текст. А теперь я произнесу магическое заклинание и кликну по тексту.

Его можно редактировать! Например, добавлю фразу «Этот текст добавлен в начало блока пользователем!».

Атрибут contenteditable разрешает пользователю отредактировать контент элемента. Для этого нам нужно объявить атрибут с пустым значением или со значением true.

<body>
  <div contenteditable="true">
    <!-- здесь контент элемента -->
  </div>
  <div contenteditable="">
    <!-- здесь контент элемента -->
  </div>
</body>

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

<body>
  <div contenteditable="true">
    <div contenteditable="inherit">
      <!-- здесь контент элемента -->
    </div>
  </div>
</body>

Забавный факт: в браузере Internet Explorer версии 5.5 уже была реализована функция редактирования контента начиная с июля 2000 года. Фронтендеры моего поколения, включая меня, всегда не любили этот браузер. Думаю, вы видели эти мемы.

Но всё же нужно отдать должное этому браузеру. Он сделал что-то полезное и помог разработать атрибут contenteditable, а потом подтянул остальных. Другие браузеры догнали Internet Explorer в 2013 году.

Элемент time

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

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

Например, только на одной странице сайта со спортивными новостями я сразу нашёл два вида.

Первым видом является обозначение времени, пройденного с момента публикации. Это текст «56 минут назад», «1 час назад» и «15 часов назад».

Конечно, в такой форме браузеры не поймут время. По этой причине в разметке этот текст нужно обернуть элементом time со специальным атрибутом datetime. В нём мы укажем машинный формат времени.

<body>
  <time datetime="2026-04-28">56 минут назад</time>
  <time datetime="2026-04-28">1 час назад</time>
  <time datetime="2026-04-27">15 часов назад</time>
</body>

Можно пойти дальше и указать более точное время.

<body>
  <time datetime="2026-04-28T10:00">56 минут назад</time>
  <time datetime="2026-04-28T10:56">1 час назад</time>
  <time datetime="2026-04-27T19:00">15 часов назад</time>
</body>

Вторым кейсом, где мы можем использовать элемент time, является время публикации статей.

Здесь мы можем использовать атрибут datetime, а можем не использовать, потому что время указано уже в более привычном формате для браузеров.

<body>
  <time>16:54</time>
</body>

<body>
  <time datetime="2026-04-28T16:54">16:54</time>
</body>

Надеюсь, у меня получилось наглядно показать, где можно использовать элемент time. Пожалуйста, используйте его. Тем более браузерная поддержка очень хорошая, начиная с 2018 года.

Ключевое слово currentColor

Я во фронтенде 15 лет и застал время, когда в CSS не было пользовательских свойств, известных, как «CSS-переменные». Но в те времена уже было ключевое слово currentColor. Фронтендеры моего поколения называли его первой «переменной» в CSS.

В целом с ними можно согласиться, потому что ключевое слово передаёт текущее значение свойства color в другие свойства, которые устанавливают цвет. Например, вы можете использовать его для свойства box-shadow.

.awesome-block {
  width: 200px;
  height: 200px;
  box-shadow: 1px 1px 10px 10px currentColor;
}

Вы используете ключевое слово currentColor, даже не подозревая об этом. Давайте вспомним свойство border.

Каким будет цвет рамки, если не устанавливать значение напрямую?

.awesome-block {
  width: 200px;
  height: 200px;
  border: 3px solid;
  color: tomato;
}

Он будет таким же, как цвет текста, т.е. tomato.

И всё, потому что по умолчанию для свойства border третьим значением используется ключевое слово currentColor.

Казалось бы, зачем в 2026 году использовать его? Такой вопрос у меня был несколько лет, потому что на первый взгляд пользовательские свойства могут полностью заменить ключевое слово currentColor.

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

Есть свойства, такие как border, которые принимают несколько значений. И вам нужно будет сохранить такое же количество.

/* браузеры не применят значение для свойства border */

:root {
  --awesome-border-width: 2px;
  --awesome-border-style: solid;
}

.awesome-block {
  width: 200px;
  height: 200px;
  border: var(--awesome-border-width) var(--awesome-border-style) var(--awesome-border-color);
}

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

.awesome-block {
  width: 200px;
  height: 200px;
  border: var(--awesome-border-width, 2px) var(--awesome-border-style, solid) var(--awesome-border-color, currentColor);
}

Ещё мне нравится использовать ключевое слово currentColor в качестве значения по умолчанию переменных, которые хранят цвет.

.awesome-icon {
  width: 1rem;
  height: 1rem;
  fill: var(--awesome-icon-color, currentColor);
}

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

В общем, я очень рад, что с 2010 года ключевое слово currentColor работает во всех браузерах. И его можно комбинировать с пользовательскими свойствами. Я настоятельно рекомендую вам использовать их вместе. Они вас точно не подведут.

Свойства background-clip и background-origin

Каждый фронтендер знает почти все свойства, входящие в свойство background.

Уверен, вы сразу назовёте свойства background-image, background-color, background-position, background-repeat, background-size и background-attachment. Но есть ещё два свойства, которые многие забывают. Это свойства background-clip и background-origin.

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

/*
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
*/

Свойство background-origin указывает, с какой области браузеры отрисуют фон. Можно указать область с контентом, со свойством padding и со свойством border.

/*
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
*/

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

Во-первых, свойство background-clip помогает отразить фон исключительно в нужных областях. За их пределами браузеры не отрисуют свойства background-image или background-color. В свою очередь, свойство background-origin указывает начальную область, с которой браузеры будут отображать фон.

Для демонстрации разницы я задам значение content-box сразу для свойств background-clip и background-origin.

.awesome-block {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 3px solid;
  margin: 20px;
	
  background-image: url("default.png");
  background-size: contain;
}

.awesome-block:nth-child(1) {
  background-clip: content-box;
}

.awesome-block:nth-child(2) {
  background-origin: content-box;
}

Браузеры отобразили изображение начиная с области контента. Всё оставшееся пространство заполнено его повторами.

Мы можем отключить их с помощью свойства background-repeat.

Второе отличие заключается в том, что свойство background-origin не работает для свойства background-color.

.awesome-block {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 3px solid;
  margin: 20px;
	
  background-color: tomato;
}

.awesome-block:nth-child(1) {
  background-clip: content-box;
}

.awesome-block:nth-child(2) {
  background-origin: content-box;
}

Мы видим, что браузеры отобразили цвет по всему элементу, проигнорировав свойство background-origin.

В общем, оба свойства полезны при работе с фоном и помогают нам добиваться разных эффектов с 2013 года.

Заключение

Подведу итог. В этой статье мы рассмотрели:

в каких ситуациях мы можем использовать элемент time для разметки дат и времени;
атрибут contenteditable, позволяющий разрешить пользователям редактирование контента любого элемента;
ключевое слово currentColor, которое передаёт текущее значение свойства color в другие свойства;
практические кейсы с комбинированием пользовательских CSS-свойств и ключевого слова currentColor,
свойства background-clip и background-origin, управляющие областью отображения фона, а также их разницу между собой.

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

Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.