Target у CSS. Як це працює? Подія click на чистому CSS без:target Зникає блок при target css

Головна / Захист

Сьогодні ми поговоримо про основні функції, пов'язані із псевдокласом :targetі про те, як ви можете використовувати його для створення приголомшливих ефектів на чистому CSS, навчимося створювати слайд-шоу при допомоги cssі багато іншого.

Що таке: target?

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: target ( font-size: 50px; text-decoration: underline; color: #37aee4; )

Додамо анімацію

Давайте оживимо наш ефект і додамо трохи анімації, наприклад, милі переходи для зміни кольору. Дивіться, як це працює.

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: color 0.5s ease; s ease;-ms-transition: color 0.5s ease; transition: color 0.5s ease; ) h1:target

Управління нецільовими об'єктами

Скажімо, ми хочемо змінити стилі абзацу, що йде після вибраного заголовка.

Зробити це дуже просто за допомогою наступного коду. Дивіться демо.

h1: target + р (background: #f7f7f7; padding: 10px; )

Створення простого слайд-шоу за допомогою CSS

Розробники вигадали тонни додатків із використанням псевдокласу : target. Цей псевдоселектор може стати в нагоді при створенні табів, або навіть слайд-шоу. Погляньмо, як можна реалізувати останнє.

Для утворимо невпорядкований список. Кожен елемент списку міститиме якір тега, що вказує на ідентифікатор фрагмента та зображення з відповідним ідентифікатором.

  • One
  • Two
  • Three
  • Four
  • Five

Тепер додамо наші стилі:

* ( margin: 0px; padding: 0px; ) #slideshow ( margin: 50px auto; position: relative; width: 400px; ) ul ( list-style: none; ) li ( float: left; overflow: hidden; margin: 0 20px 0 0; ) li a ( color: #222; text-decoration: none; font: 15px/1 Helvetica, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; ) li a:hover ( left: 0, z-index: -1; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; ) li img:

Спочатку додамо float: leftвсім елементам нашого списку. Ми використовували для елементів абсолютне та відносне позиціонування.

Далі, встановимо z-index: -1для всіх зображень, а потім встановіть z-index: 1для цільових зображень. Це призведе до того, що коли ви натискаєте на елемент списку, зображення змінюється. Щоб зробити перехід більш плавним, ми встановимо непрозорість для інших зображень. 0 .

Дивіться демонстрацію слайд-шоу на чистому CSS.

Кросбраузерність

Псевдоклас : targetє селектором CSS третього рівня , це означає, що він підтримується практично в будь-якому браузері, за винятком (ні за що не здогадаєтеся ) ... IE. Старий добрий віслюк підтримує CSS3-селектори тільки в 9-ій та 10-ій версіях.

Як і будь-яку іншу проблему відображення CSS3-селекторів в IE, це досить легко виправити за допомогою Selectivizr.

Завдяки цьому плагіну та магії вуду, потрібні CSS3-селектори будуть підтримуватись навіть у IE6.

Висновок

Спочатку використання псевдокласів може здатися складним, але навіщо ви зрозумієте, як вони можуть полегшити роботу та зробити сайт цікавішим. Псевдоселектор

:target-Хороший приклад. Тільки переконайтеся, що ви не переборщили зі стилями.

Ще один цікавий приклад використання :target

У Мережі можна легко знайти безліч уроків із застосуванням псевдокласу: target. Однак, не слідуватимемо чужому коду, а спробуємо розібратися в ньому і зрозуміти, як це працює? Звичайно, не обійдеться і без прикладів

Що таке: target?

У CSS:target це псевдоклас, що дозволяє вибрати деякий цілий «шматок» вашого HTML-документа, над яким буде здійснюватися певна дія. Це може бути абзац тексту чи заголовок, наприклад.

Не потрібно плутати псевдокласи з псевдоелементами, які вміють вибирати лише деяку частину елемента, на зразок першої літери або першого рядка абзацу.

Псевдокласи:

  • a:link(color:#111)
  • a:hover(color:#222)
  • div:first-child(color:#333)

Псевдоелементи:
  • p::first-letter(color:#444)
  • p::first-line(color:#555)

Думаю, із синтаксису ясно, що робить той чи інший псевдоклас чи псевдоелемент. Найпопулярніший псевдоклас - :hover, з ним стикаються всі вебмайстри, він описує стилі елемента при наведенні курсору. target працює аналогічно та описує стилі елемента при настанні певної ситуації.

Ідентифікатори фрагментів

Якщо коротко, це така штука, до якої підв'язується наш псевдоклас. Це хештег зі словом або фразою, яка ставиться наприкінці адреси. Виглядає таким чином:

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

Це працює на чистому HTML, ніяких хитрощів не потрібно. Невеликий ідентифікаторів.

Обробка кліка за допомогою: target

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

H1 ( font: 30px Arial sans-serif; ) h1:target ( font-size: 50px; text-decoration: underline; color: #37aee4; )

Код дуже простий - при натисканні заголовок змінює свій розмір, колір і підкреслюється. Можна додати життя (Руслан, привіт) і зробити анімацію зміни кольору заголовка:

H1 ( font: 30px Arial sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease;

Підсвічувати активний заголовок справа хороша, але що робити, якщо потрібно змінити оформлення тексту, що йде за ним? CSS дає нам таку можливість. Виглядає це так:

H1: target + p ( background: #eaeaea; padding: 10px; )

В даному випадку плюс означає, що стиль повинен бути застосований для наступного за заголовком абзацу. Таким чином, при зміні активного заголовка - ми змінюємо та оформлення розділуз текстом, який йому належить.

Підтримка браузерами

Псевдоклас target відноситься до третьої редакції CSS і відмінно підтримується всіма браузерами, крім IE, старше 9 версії. Тому не варто його впроваджувати, якщо ваша аудиторія використовує цей браузер. Хоча вихід із положення є — це Selectvizr, JS бібліотека, за допомогою якої можна змусити IE працювати з CSS3. Просто додаємо скрипт і все, воно працює.

Єдине, якщо ви не використовуєте у себе JQuery або MooTools - потрібно підключити для роботи цього скрипта. На офіційному сайті є таблиця, які бібліотеки чогось підтримують. Якщо буде цікаво – почитайте. Це.

Висновок

Використання псевдокласів може здатися складним заняттям, але як тільки ви зрозумієте, як вони працюють, ви зможете робити дивовижні речі, використовуючи тільки CSS і більше нічого. Псевдоклас: target- Відмінне тому підтвердження. З його допомогою можна кардинально змінити взаємодію сторінки з відвідувачем. Приклад вище - найпростіший, але і він додає трохи інтерактивності на сторінку. Адже це всього лише кілька рядків коду.

Не перестарайтеся з красою та підтримкою браузерами і все буде чудово.

Вдалого Вам дня

Для переходу до вибраного фрагмента документа в адресі пишеться символ # і вказується ім'я ідентифікатора. Наприклад, на адресі http://www.w3.org/TR/css3-selectors/#target-pseudoвідбувається перехід до елемента, атрибут id якого заданий як target-pseudo. Такий запис адреси називається "цільовий елемент". Псевдоклас :target застосовується до цільового елемента, тобто до ідентифікатора, який вказаний в адресному рядку браузера.

Позначення

Описприклад
<тип> Вказує тип значення.<размер>
A && BЗначення мають виводитися у вказаному порядку.<размер> && <цвет>
A | BВказує, що треба вибрати лише одне значення із запропонованих (A або B).normal | small-caps
A || BКожне значення може використовуватись самостійно або спільно з іншими у довільному порядку.width || count
Групує значення.[crop || cross]
* Повторювати нуль або більше разів.[,<время>]*
+ Повторювати один чи більше разів.<число>+
? Зазначений тип, слово чи група не є обов'язковим.inset?
(A, B)Повторювати щонайменше A, але з більше разів.<радиус>{1,4}
# Повторювати один або більше разів через кому.<время>#
×

приклад

target

  • Історія 1
  • Історія 2

Історія 1

Історія про те, як потрібно було зробити могилу, її почали копати, а потім закопувати, і що з цього вийшло.

Історія 2

Історія про те, як біля їдальні з'явилися загадкові рожеві сліди із шістьма пальцями, і чому це сталося.

У цьому прикладі цільовий елемент виділяється кольором тла.

Примітка

У Safari до версії 3.0 стильові правила не застосовуються, якщо користувач використовує навігацію в браузері (кнопки "Назад" та "Вперед").

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
  • Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
  • Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
  • Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
  • Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
  • Draft ( Чернетка специфікації) – перша чорнова версія стандарту.
×

Браузери

У таблиці браузерів застосовуються такі позначення.

target=»_blank використовується, щоб тег відкрив посилання у новому вікні. Але що таке target HTML? Чому він повинен бути blank? І найцікавіше, чому спочатку варте підкреслення? Розгляньмо цей код і розберемося, що він робить.

Атрибут target

Значення target

Чотири найбільш поширені значення атрибуту target :

_self

Єдина ситуація, в якій це може статися, якщо HTML використовує тег який встановлює певний спосіб відкриття для всіх посилань. Наприклад, якщо між тегами додано наступний код , потрібно використовувати target=»_self» , щоб посилання відкривалося у тому ж вікні.

_blank

Відкриває посилання на новій вкладці або вікні. Це визначається локальними налаштуваннями користувача, у більшості браузерів це нова вкладка. Ви можете подумати, що за допомогою цього значення можна реалізувати рекламні блоки, що випливають. Але це не так. Найчастіше для цього використовується JavaScript, а не HTML.

Це значення атрибуту target HTML найкраще використовувати для відкриття на новій вкладці посилань на зовнішні сайти або PDF-файли . Завдяки цьому після закриття цих вкладок користувач знову попадає на ваш сайт. Але цим не слід зловживати, тому що користувачеві буде досить складно орієнтуватися, якщо кожне посилання відкриватиметься на новій вкладці.

_parent

Значення _parent відкриває посилання у батьківському кадрі для кадру, в якому ви знаходитесь. Це не популярне значення, оскільки теги для створення кадрів і не підтримуються в HTML5. Тим не менш, це значення, як і раніше, можна використовувати всередині тегів