Малоизвестно, но можно указать 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.

A:nth-of-type(n)

Этот селектор делает следующее: смотрит, элемент какого вида вы поместили в него и выбирает, например, третий элемент на вашей странице, соответствующий тому, что вы написали. Для выбора третьего абзаца в div’е можно применить (см. фотку)