Использование псевдокласса CSS3 :target
19 июня 2015 | Опубликовано в css | 1 Комментарий »
Псевдоклассы CSS, изменяющие стили после определенных действий пользователей, существуют очень давно. Вы точно знакомы с такими псевдоклассами, как :hover, :active и :focus, а некоторые даже могут вспомнить восторг от появления возможности смены цветов ссылок с их помощью в браузере Internet Explorer 4 в далеком 1997 году.
CSS3 представил новый псевдокласс :target, который уменьшает необходимость использования скриптов в интерактивных элементах. Например, у страницы с ссылкой вида http://mysite.com/page#mytarget к элементу с идентификатором mytarget могут применяться соответствующие стили для псевдокласса :target.
Поддержка браузерами псевдокласса :target
Все современные версии браузеров поддерживают псевдокласс :target, проблем не будет и с браузером Internet Explorer от версии 9, и с большинством версий браузеров Chrome, Firefox, Safari и Opera. К сожалению, старые версии браузера Internet Explorer не поддерживают этот псевдокласс. Но если Вам очень нужна поддержка старых версий, можно воспользоваться, например, библиотекой JavaScript selectivizr, которая без особых сложностей добавит поддержку псевдокласса :target.
Простой документ, использующий псевдокласса :target
Рассмотрим пример использования псевдокласса :target.
Например, текст мелким шрифтом в стандартном контракте, такой как расписание платежей, условия хостинга, условия расторжения контракта, условия поддержки, словарь и т. п. может располагаться на одной или нескольких веб-страницах. Даже если стараться быть кратким, эти тексты могут значительно разрастись.
Вот отрывок кода документа HTML5 из contract.html:
<h1>Website Contract</h1> <nav> <ul> <li><a href="#payment">Payment Schedule</a></li> <li><a href="#support">Support & Maintenance</a></li> <li><a href="#hosting">Hosting Terms</a></li> <li><a href="#glossary">Glossary</a></li> </ul> </nav> <article id="payment"> <h2>Payment Schedule</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </article> <article id="support"> <h2>Support & Maintenance</h2> <p>Ut euismod tempor porttitor.</p> </article> <article id="hosting"> <h2>Hosting Terms</h2> <p>Suspendisse ac nisl lorem, ut fermentum erat.</p> </article> <article id="glossary"> <h2>Glossary</h2> <p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.</p> </article>
Можно воспользоваться псевдоклассом :target, чтобы визуально выделить активную часть документа, например:
article:target { background-color: #ffc; border: 2px solid #fcc; }
Так что пользователь, читающий контракт, может нажать на пункт меню, чтобы визуально выделить соответствующую часть документа. А также можно давать пользователям прямые ссылки на определенные разделы, например, contract.html#support.
Псевдокласс :target дает и другие возможности, например, можно создавать динамические эффекты с помощью HTML5 и CSS, без использования JavaScript. В следующих уроках мы покажем другие примеры использования псевдокласса :target.
Автор урока Craig Buckler
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
26 декабря 2020 в 22:59
GeFw2f poarxkdbfmmt, [url=http://nvguutsuveso.com/]nvguutsuveso[/url], [link=http://zcakkdfcjnia.com/]zcakkdfcjnia[/link], eivaohygclbb.com
Ответить