Статьи

Как поставить свой CSS3 на: цель

Февраль 5, 2019

CSS псевдоклассы, которые меняют стили в ответ на действия пользователя, были с нами много лет. Вы почти наверняка использовали: hover,: active и: focus; Я могу (только лишь) вспомнить волнение изменения цвета ссылок IE4 еще в 1997 году.

CSS3 также представил: цель; мощный псевдокласс, который может уменьшить потребность в сценариях в интерактивных виджетах. Рассмотрим URL страницы, например, http://mysite.com/page #mytarget ; элемент с идентификатором «mytarget» может иметь соответствие: применены целевые стили.

: поддержка целевого браузера

Все современные браузеры поддерживают: target, и у вас не возникнет проблем с IE9 или большинством версий Chrome, Firefox, Safari и Opera. К сожалению, это все еще оставляет нас со старыми версиями IE. Я бы не стал сильно беспокоиться о IE6 и 7, но IE8 остается самой используемой версией браузера в мире . Однако, еще не все потеряно, так как можно добавить такие прокладки, как selectivizr : поддержка цели, не требуя сложных обходных путей.

Простой документ: цель

Недавно мы обсуждали контракты на сайте . Общие мелкие шрифты контракта, такие как графики платежей, условия хостинга, условия отмены, политики поддержки, глоссарии и т. Д., Могут содержаться на одной или нескольких веб-страницах. Документ может вырасти до значительной длины, даже если вы попытаетесь сделать его кратким!

Давайте посмотрим на фрагмент HTML5 документа в contract.html : 


<h1>Website Contract</h1>

<nav>
	<ul>
		<li><a href="#payment">Payment Schedule</a></li>
		<li><a href="#support">Support &amp; 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 &amp; 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. Скоро появятся новые статьи SitePoint …

34
Share: