: цель - CSS-хитрости | CSS Альманах 2024

:targetСелектор псевдо в CSS соответствует , когда хэш в URL и идентификатор элемента являются одинаковыми. Например, если текущий URL-адрес:

https://css-tricks.com/#voters

И это было в HTML:

 Content

Этот селектор будет соответствовать:

:target ( background: yellow; )

И у этого sectionэлемента будет желтый фон.

С этим универсальным селектором (совпадающим со всем, что может быть целью), если URL-адрес изменился так, чтобы заканчиваться, #faqи был другой элемент с идентификатором faq, этот селектор снова совпадет, и #faqэлемент будет иметь желтый фон.

Вы можете ограничить его, указав, на какие элементы вы хотите настроить таргетинг, например

#voters:target ( )

Когда бы вы это использовали?

Одна из возможностей - когда вам нужен стиль с «состояниями». Когда страница имеет определенный хеш, она находится в этом состоянии. Это не так универсально, как манипулирование именами классов (поскольку может быть только один и он может быть связан только с одним элементом), но он похож. Все, что вы могли сделать, изменив класс, чтобы изменить состояние, вы могли сделать, когда элемент находится внутри :target. Например: изменить цвета, изменить положение, изменить изображения, скрыть / показать вещи, что угодно.

Я бы использовал эти практические правила, когда :targetэто хороший выбор:

Когда нужно «государство»
Когда допустимо поведение перехода вниз / хэш-ссылки
Когда допустимо влиять на историю браузера

Как получить хеши в URL-адресах?

Чаще всего пользователь щелкает ссылку с хешем. Это может быть внутренняя ссылка (на той же странице) или полный URL-адрес, который заканчивается хешем и значением. Примеры:

Go To There Go To There

Прыжковое поведение

Независимо от того, является ли это ссылкой на ту же страницу или нет, поведение браузера заключается в прокрутке страницы до тех пор, пока этот элемент не окажется в верхней части страницы . Или, насколько это возможно, если он не может прокручивать так далеко. Это довольно важно знать, потому что это означает, что использование этого «заявленного» поведения немного сложно / ограничено.

Например, однажды я попробовал различные методы для репликации функциональных вкладок CSS, но в конечном итоге решил, что использование взлома флажков было бы лучшей идеей, поскольку оно позволяет избежать проблем с переходом по страницам. У Яна Ханссона из CSS Science также есть несколько примеров вкладок. В его третьем примере используются :targetабсолютно позиционированные элементы, скрытые над верхней частью страницы, чтобы предотвратить переход между страницами. Это умное, но в целом идеальное решение, потому что это означало бы, что страница будет прыгать вверх, если вкладки будут опускаться дальше на странице.

Дополнительная информация

Статья о CSS-трюках: On: target
Селекторы уровня 4 спецификации
Простая галерея изображений с использованием: target (страдает от скачка страницы, хороший пример этого) Криса Хейлмана
Демонстрация техники затухания желтого цвета (но для существующего, а не для нового контента) из Web Designer Notebook.
CSS Target, буквально, Калеб Огден.
CSS: цель для дизайна вне экрана
Документы MDN