Трюки з псевдоклас - target

Псевдоклас: target (мета) вибирає той елемент в документі, на який вказує фрагмент URL. Наприклад, цей фрагмент тексту обгорнутий елементом з ID # target-test. Якщо ви перейдете по посиланню # target-test. то цей елемент стане метою і стилі псевдокласу: target почнуть діяти.

У минулому році я вже писала про псевдоклас: target в статті 5, що рідко використовуються селекторів CSS (і їх застосування). Першим прикладом було використання псевдокласу: target для підсвічування розділу сторінки, на який здійснений перехід. Це може бути, наприклад, додавання фонового кольору або кордону, як в прикладі з # target-test.

Приклад №1: приховування та показ вмісту

Приклад №2: висувається навігація

Наступний приклад це створення висувається панелі навігації. Ми поміщаємо панель навігації фіксовано щодо області видимості, щоб забезпечити відсутність стрибків після кліка користувача.

Приклад №3: спливаюче модальне вікно

Розвиваючи цю ідею, ми можемо створити модальне вікно, що заповнює сторінку цілком.

Приклад №4: зміна глобальних стилів

Останній приклад можна назвати вірним в плані семантики, це застосування псевдокласу: target до елементу з наступною заміною стилів або розкладки сторінки.

Як щодо семантики і доступності?

Як я вже згадувала в статті "Посилання або кнопки". при використанні елемента браузер очікує перехід на іншу сторінку або інший розділ сторінки. У моїх прикладах (крім останнього) саме це і відбувається. Трюк тільки в тому, що в звичайному стані стілізуемий елемент прихований, він динамічно появлется тільки в націленому стані.