|
Professor Seleznov
|
Привет, Хабр!
Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл как раз с ними.
Я подобрал список фич, которые стали полностью поддерживаться в браузерах восемь лет назад или раньше. Есть даже одна, которая работала, когда я пришёл во фронтенд.
Только, пожалуйста, не думайте, что это какие-то устаревшие возможности. Я считаю, что в сегодняшней разработке они всё так же полезны.
Давайте посмотрим, что я подготовил.
Атрибут contenteditable
Если перед вами поставят задачу, в которой нужно дать пользователю возможность редактирования блока с текстом, как вы её решите? Надеюсь, вы вспомните про атрибут contenteditable. А если вы о нём не слышали, то давайте познакомлю вас с ним.
Лучше всего это сделать сразу на примере. У меня будет элемент div с текстом. Также я для него объявлю атрибут contenteditable со значением true.
Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — это находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл, как раз с ними.
Вроде ничего необычного. Текст и текст. А теперь я произнесу магическое заклинание и кликну по тексту.
Его можно редактировать! Например, добавлю фразу «Этот текст добавлен в начало блока пользователем!».
Атрибут contenteditable разрешает пользователю отредактировать контент элемента. Для этого нам нужно объявить атрибут с пустым значением или со значением true.
Также есть значение inherit, означающее, что элемент доступен для редактирования в случае, если его непосредственный родитель доступен для редактирования.
Забавный факт: в браузере Internet Explorer версии 5.5 уже была реализована функция редактирования контента начиная с июля 2000 года. Фронтендеры моего поколения, включая меня, всегда не любили этот браузер. Думаю, вы видели эти мемы.
Но всё же нужно отдать должное этому браузеру. Он сделал что-то полезное и помог разработать атрибут contenteditable, а потом подтянул остальных. Другие браузеры догнали Internet Explorer в 2013 году.
Элемент time
Когда я смотрю на код современных веб-приложений, мне грустно. Очень жаль, что за восемь лет фронтендеры так и не привили привычку использовать элемент time. Что ж, теперь, видимо, надо напоминать вам, чтобы вы начали его использовать.
Я уверен, что в подавляющем большинстве случаев вы сможете его использовать. Ведь в интерфейсах очень часто встречаются элементы, обозначающие дату или время.
Например, только на одной странице сайта со спортивными новостями я сразу нашёл два вида.
Первым видом является обозначение времени, пройденного с момента публикации. Это текст «56 минут назад», «1 час назад» и «15 часов назад».
Конечно, в такой форме браузеры не поймут время. По этой причине в разметке этот текст нужно обернуть элементом time со специальным атрибутом datetime. В нём мы укажем машинный формат времени.
56 минут назад
1 час назад
15 часов назад
Можно пойти дальше и указать более точное время.
56 минут назад
1 час назад
15 часов назад
Вторым кейсом, где мы можем использовать элемент time, является время публикации статей.
Здесь мы можем использовать атрибут datetime, а можем не использовать, потому что время указано уже в более привычном формате для браузеров.
16:54
16:54
Надеюсь, у меня получилось наглядно показать, где можно использовать элемент time. Пожалуйста, используйте его. Тем более браузерная поддержка очень хорошая, начиная с 2018 года.
Ключевое слово currentColor
Я во фронтенде 15 лет и застал время, когда в CSS не было пользовательских свойств, известных, как «CSS-переменные». Но в те времена уже было ключевое слово curentColor. Фронтендеры моего поколения называли его первой «переменной» в CSS.
В целом с ними можно согласиться, потому что ключевое слово передаёт текущее значение свойства color в другие свойства, которые устанавливают цвет. Например, вы можете использовать его для свойства box-shadow.
.awesome-block {
width: 200px;
height: 200px;
box-shadow: 1px 1px 10px 10px currentColor;
}
Вы используете ключевое слово curentColor, даже не подозревая об этом. Давайте вспомним свойство 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 всё ещё полезны, по вашему мнению. Поделитесь, пожалуйста, ими в комментариях. На этом я прощаюсь.
Спасибо за чтение!
© 2026 ООО «МТ ФИНАНС»-Источник
|
