🗿 Тег optgroup — это одна из функций, которая зачастую не используется, большинство даже не в курсе его существования.

Optgroup, как контейнер объединяет в группу теги. Этот тег выделяет варианты в выпадающем списке select в отдельную группу.

🗿 Тег - Onerror

onerror — это JavaScript событие, которое будет запущено прямо перед отображением маленького красного крестика.

Это можно использовать для написания сценариев замены «битых» изображений каким-либо альтернативным контентом

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

Тег kbd используют для обозначения клавиш на клавиатуре.

🗿 Тег blink

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

🗿Тег marquee

Если использовать этот тег, элементы будут ездить по странице. Не совсем понятно, зачем это нужно, но вдруг захочется экспериментов)

Малоизвестно, но можно указать lowsrc для показа превью, пока загружается основное изображение из src.

Кстати в 2000-м году это свойство использовалось для атаки на Hotmail.

Для того, чтобы промаркировать удалённые элементы, можно использовать теги <del> и <ins>:

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

Можно определить в какой области картинки будет отображаться ссылка используя тег <area>, который должен быть внутри тега <map>.

Используя <datalist> можно сделать список подсказок, которые будут появляться по время ввода данных в input.

Выглядит так:

🗿 Вертикальное заполнение относительно ширины элемента, а не высоты
padding: 50% не добавляет отступ 50% от оригинальной высоты элемента, а добавляет 50% отступ от ширины родительского элемента.

Зная это, мы можем легко создавать чувствительные элементы, которые сохраняют соотношение высоты и ширины.

id > class
🗿 Идентификаторы стилей отменяют все стили классов. Это связано с тем, что идентификатор более точен, чем класс, аналогично «.foo.bar» будет отменяться только «.foo» или «.bar».

Инкрементный счетчик

Можно использовать свойство content: counter () для инкрементного подсчёта псевдо элементов:

Инкрементный счетчик

Можно использовать свойство content: counter () для инкрементного подсчёта псевдо элементов.

Font – это свойство-сокращение

«Font» — это свойство сокращения CSS. Поэтому вместо того, чтобы писать все свойства, вы можете просто объединить их все под одним.

👻 Советую хорошую книгу по освоению базы: Создание Web-страниц: HTML, CSS, JavaScript - Мархвида И.В.

@supports для проверки поддержки браузера

Можноиспользовать запрос функции @supports для проверки поддержки браузера. В качестве примера: можно использовать «display: flex» только тогда, когда он действительно поддерживается, его можно настроить так: