🗿 Тег 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 после верхнего колонтитула, то можно написать:

A[href*="example"]

Это – действительно классный селектор, когда нужно немного по-иному назначить стили отдельной ссылке; то, что находится в кавычках, будет сопоставлено с href ссылки.
Есть еще версия без *, которая сопоставляет точный url, который можно использовать для точных ссылок.

A:nth-child(n)

Селектор nth-child – простой способ выбрать любой дочерний элемент по порядку. Если, к примеру, вам нужен третий элемент неупорядоченного списка, результат получится такой.

Можно применять nth-child для выбора каждого множителя числа, используя переменную n , например, если вставить 3n, он выберет номер элемента списка 3, 6, 9, 12 и так далее.

A:nth-last-child(n)

Селектор nth-last-child работает как nth-child, но вместо того, чтобы начать отсчет с первого элемента списка, он начинает считать с последнего, поэтому если вы примените его с числом два, он выберет тот элемент списка, который идет перед последним, и будет применяться как селектор nth-child.