Элемент 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» только тогда, когда он действительно поддерживается, его можно настроить так:

* (звездочка)

Можно вспомнить о селекторе *, но он часто недоиспользуется. Он назначает всем элементам на странице стили и великолепно подходит для создания сброса, а также создания стилей страницы по умолчанию, таких как нужные шрифты и размер.

A + B

Этот селектор называется смежным и выбирает тот элемент, который следует сразу за первым. Если нужно выбрать первый div после верхнего колонтитула, то можно написать: