Подія click на чистому CSS без target. Гіперпосилання — що це таке, як зробити посилання та вставити в HTML код (href, target blank та інші атрибути тега a) Значення за замовчуванням

У Мережі можна легко знайти безліч уроків із застосуванням псевдокласу: 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)

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

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

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

Це працює на чистому 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- Відмінне тому підтвердження. З його допомогою можна кардинально змінити взаємодію сторінки з відвідувачем. Приклад вище - найпростіший, але і він додає трохи інтерактивності на сторінку. Адже це всього лише кілька рядків коду.

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

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

Сьогодні ми поговоримо про основні функції, пов'язані із псевдокласом :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

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

Але для того, щоб правильно створювати гіперпосилання та вставляти їх у код веб-сторінок (наприклад, свого сайту), необхідно вивчити відповідну область мови гіпертекстової розмітки (), оскільки ці елементи утворюються за допомогою HTML-тегу a, який має , що дозволяють модернізувати посилання до потрібного виду.

Отже, сьогодні ми розберемо, з яких частин складається гіперпосилання, як використання атрибуту target blank дає можливість відкривати сторінку в новому вікні (вкладці), як будь-яку картинку робити посиланням і багато інших важливих подробиць. Крім того, ця інформація просуне вас у вивченні мови HTML.

Що таке гіперпосилання і чи можна його називати посиланням?

Відповідаючи на запитання, задане в заголовку, скажу, що термін «посилання» має ширший змістовий спектр (посилання в Сибір, банківська для ідентифікації платника, текстова в книзі і т.д.), включаючи значення, закладене в поняття «гіперпосилання» , яке пов'язане лише з гіпертекстом, що дає можливість нелінійного сприйняття інформації

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

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

Наприклад, за допомогою службових гіперпосилань можливе відображення іконки. Їх можна побачити лише у складі HTML-коду (для цього натисніть для будь-якої відкритої у браузері сторінки):

Зараз поки що дамо спокій службовим лінкам і розглянемо загальну закономірність створення гіперпосилань. Загальне у тому, що вони мають обов'язковий атрибут href, як значення якого вказується адреса документа (). Посилання HTML може вести як на внутрішню сторінку сайту, так і зовнішній документ.

Ще одне важливе зауваження. Застосування атрибуту href робить гіперпосилання клікабельними, тобто дає можливість користувачам в результаті кліка автоматично переходити на відповідну сторінку веб-сайту.

Як зробити гіперпосилання в HTML за допомогою href

Отже, ми вже знаємо, що для створення посилання необхідний обов'язково тег a та атрибут href, параметрами якого можуть бути URL різного виду. Оскільки aце , то між відкриваючим і закриваютьрозташований зміст, який і відображатиметься на веб-сторінці.

Це вміст називається анкоромі може бути представлено у вигляді тексту або зображення (про те, як зробити картинку посиланням, поговоримо нижче). Як я вже зазначав, анкор буде клікабельним. Розглянемо приклад гіперпосилання з текстовим змістом. Ось як виглядатиме її конструкція в HTML-коді:

трохи про анкори

Крім HTTP можна використовувати захищений протокол HTTPS. Лінк не обов'язково має вести на веб-сторінку. Все залежить від значення href, в якості якого може бути вказаний шлях до якогось файлика:

//сайт/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

завантажити

На веб-сторінці цей лінк набуде такого вигляду:

Браузер "розуміє", що об'єкт з розширенням.zip може бути призначений тільки для скачування, що і пропонує зробити користувачеві.

До речі, шлях будь-якого файлу іноді вказується через ФТП (). Тоді в URL-адресі, яка застосовується як параметр атрибуту href, слід просто замінити протокол HTTP (HTTPS) на FTP. Посилання на файл буде виглядати так:

завантажити із сервера

Але це не все. Подібним чином створюється посилання на електронну пошту з використанням псевдо-протоколу mailtoдля швидкого доступу до засобу написання листа:

пишіть листи

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

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

Але цей вид комунікації на веб-ресурсах зараз вже не настільки популярний (тим більше, що можна встановити, наприклад, ), тому що відкриті таким чином поштові адреси активно перехоплюються за допомогою софту і використовуються різними спамерами.

Я навів у приклад лише найпоширеніші протоколи, які входять до складу URL, який, у свою чергу, є параметром атрибуту href для формування гіперпосилання. Крім HTTP (HTTPS), FTP і mailtoіснують інші для вирішення завдань більш вузького профілю. Можливо, ми розглянемо їх детальніше в інших публікаціях.

Види гіперпосилань

А тепер спробуємо класифікувати лінки за тими чи іншими ознаками.

По області їхньої дії:

1. Зовнішні— ведуть на сторінки, що знаходяться поза сайтом, на якому вони проставлені;

2. Внутрішні— пов'язують веб-сторінки, що знаходяться в межах одного веб-ресурсу.

За форматом:

2. Графічное — у разі анкором гіперпосилання є зображення (зокрема мініатюра), банер, кнопка тощо.

За типом URL, який виступає як значення атрибуту href:

1. Абсолютні, які містять явну вказівку протоколу передачі даних (наприклад, HTTP) та доменне ім'я сайту (у все про домени).

Такі лінки найчастіше використовують, коли посилаються на сторінки зовнішніх ресурсів. У цьому випадку значення href буде включати повний шлях до потрібного файлу або веб-сторінки. Ось приклад абсолютного гіперпосилання:

Контекст – що це таке

2. Відносні, одним із варіантів створення яких буде шлях, вказаний щодо кореневої папки веб-сайту (звідси і назва цього виду гіперпосилань). При цьому з URL-адреси буде вилучено протокол (HTTP) та домен сайту:

Контекст – що це таке

Відносні посилання на web-сторінці можуть забезпечити переходи на внутрішні сторінки. У такому вигляді вони коротші, що полегшує HTML-код. Звичайно, все не так просто, і вимагає ширшого освітлення, в чому ви зможете переконатися, якщо перейдете за даним посиланням.

Атрибути тега a

Тепер подивимося, які ще атрибути, окрім обов'язкового href, існують, і як вони можуть вплинути на створення гіперпосилання. Найбільш повні дані щодо цього, так би мовити, "з перших рук" ви можете знайти на офіційному сайті Міжнародного Консорціуму W3C, на якому актуальна інформація з'являється найшвидше.

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

Контекст – що це таке

Хоча деякі вебмайстри та сеошники вважають, що краще, якщо відвідувачеві дати можливість вибору (тобто не прописувати target blank), адже за необхідності у новій вкладці сторінку можна відкрити і за допомогою контекстного меню (підвести курсор до лінка, клацнути правою кнопкою мишки та натиснути на відповідний пункт):

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

Але я вважаю, що не всі користувачі повною мірою знайомі з можливостями і налаштуваннями популярних браузерів (). Цілком імовірна ситуація, коли читач, перейшовши за зовнішнім гіперпосиланням і, втративши з уваги сторінку-джерело (замість неї з'явиться документ-реципієнт), у серцях просто закриє вкладку.

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

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

Для створення об'єктивної картини слід додати, що застосування «target="_blank"» до будь-яких зовнішніх посилань, виявляється, приховує певну загрозу безпеці. Якщо комусь цікаво, то можете почитати , де дано рекомендації щодо усунення проблем при використанні target blank, а також представлені альтернативні варіанти реалізації завдання з відкриття вебсторінки в новій вкладці.

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

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

Як створити хеш-посилання, якір і навіщо вони потрібні?

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

За прикладом далеко ходити не треба, просто погляньте на зміст цієї публікації на самому початку. Бачите, там є список розділів статті? Гіперлінки на ці розділи таки є хеш-посиланнями. Після натискання на будь-яку з них браузер прокрутить сторінку до місця, де починається відповідна частина.

Оформляються такі лінки досить легко. Для початку потрібно створити якір (anchor), Проставивши в необхідному місці сторінки відповідну мітку у вигляді ідентифікатора ID, що є одним з глобальних атрибутів, що застосовуються до будь-якого HTML-тегу.

Завдяки універсалізму ID подібні мітки-якоря можна встановити практично будь-де веб-сторінки. Оскільки зазвичай текст поділяється на абзаци, їх можна застосувати і до . Я в основному проставляю якорі, якими статті розділені на логічні частини:

Відзначивши таким чином усі потрібні місця в HTML-коді, далі створюємо гіперлінки на них. Для цього в кінці після останнього слеша «/» в URL (значення атрибуту href, що є, як ви вже знаєте, прописуємо послідовно знак решітки «#» та ім'я мітки (ID):

Як формувати хеш-посилання та якоря?

Причому, якщо подібне якірне посилання проставлено на тій самій сторінці, що і якоря, то частина урла до останнього слішу перед решіткою включно може бути опущена і як параметр href використані тільки «#» плюс найменування ID (по суті, це один з варіантів відносної посилання):

Як формувати хеш-посилання та якоря?

Тобто при складанні змісту мануалу для оптимізації HTML коду ви можете скористатися цим полегшеним варіантом. Якщо як URL ви поставите лише один знак решітки, без назви ідентифікатора, то з місця, де знаходиться таке посилання, сторінка прокручуватиметься до кінця вгору:

Вгору

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

Як прибрати підкреслення та змінити колір посилання

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

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

За замовчуванням та без застосування засобів CSS гіперпосилання виділені підкресленням та трьома варіантами кольору, кожному з яких відповідає свій атрибут для :

• link — задає колір гіперлінка на веб-сторінці (за замовчуванням синій, який позначається #0000ff);
• alink - колір активного гіперпосилання на той проміжок часу, поки воно обробляється веб-браузером (червоний #ff0000);
• vlink - колір відвіданої користувачем посилання (фіолетовий, # 800080).

Як же замінити кольори посилань, які відображаються браузерами для вашого сайту? Ну, для простого HTML-сайту, де сторінки формуються вручну (а повнофункціональних ресурсів такого роду в сучасних реаліях, думаю, практично не залишилося, хіба що простенькі щоденники та лендинги) потрібно просто знайти тег, що відкриває і прописати для нього потрібні параметри (до речі для позначення кольору можна використовувати його назву), наприклад:

Якщо ви встановили для адміністрування свого веб-ресурсу систему управління контентом (), то, незалежно від типу движка, який ви використовуєте, необхідно відкрити на редагування файл, який відповідає за виведення хидера (шапки), де є тег, що відкриває .

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

Потім виділяєте отриманий код картинки і натискаєте кнопку «link» редактора, після чого в вікні вставляєте потрібний скопійований гіперлінк:

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

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

Але нещодавно я дійшла висновку, що ми можемо використовувати псевдоклас: target із більшою користю, створюючи на сторінці інтерактивні елементи без JavaScript.

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

Простим прикладом використання псевдокласу: target буде приховування та показ вмісту, на який ми націлилися. У блозі ми можемо таким чином показувати розділ із коментарями після натискання користувача. Це робиться простим прихованням елемента до тих пір, поки не підпадає під:target .

Show Comments #comments:not(:target) ( display: none; ) #comments:target ( display: block; )

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

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

#nav ( position: fixed; top: 0; height: 100%; width: 80%; max-width: 400px; ) #nav:not(:target) ( right: -100%; transition: right 1.5s; ) #nav:target ( right: 0; transition: right 1s; )

Приклад №3: модальне вікно, що спливає

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

#modal-container ( position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; . transition: opacity 1s, visibility 1s; ) #modal-container:target ( opacity: 1; visibility: visible; transition: opacity 1s, visibility 1s; )

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

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

#body:not(:target) ( main ( width: 60%; ) aside ( width: 30%; ) .show-sidebar-link ( display: none; ) ) #body:target ( main ( width: 100%); ) aside ( display: none; ) .hide-sidebar-link ( display: none; ) )

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

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