Какво представляват връзките заместници на HTML5 за?
idUp до HTML5, маркерът изисква един атрибут: href. HTML5 обаче прави този атрибут по избор. Когато напишете маркер без атрибути, той се нарича връзка заместител.
Заместителната връзка изглежда така:
ПредишнаИзползване на заместващи връзки по време на разработката
Почти всеки уеб дизайнер е създал връзки със заместители по едно или друго време, докато проектира и изгражда уеб сайт. Преди HTML5, щяхме да напишем:
текст на връзкатакато заместител. И изпратих макети до клиентите с тези местоположения, за да може клиентът да ме попита "защо не работят връзките в текста?"
Проблемът с използването на маркер за хакване (#) като връзка със заместител е, че връзката може да бъде кликвана и това може да предизвика объркване за клиентите ви. И ако някой забрави да ги актуализира с правилните URL адреси, тези връзки могат да изглеждат повредени в сайта на живо, защото не се свързват с нищо.
Вместо това трябва да започнете да използвате маркери без атрибути. Можете да ги оформите така, че да изглеждат като всяка друга връзка на страницата ви, но те няма да могат да се кликнат, защото са просто заместващи символи.
Използване на връзки заместители в сайтове на живо
Но връзките със заместители имат място в уеб дизайна за повече от просто развитие. Едно място, което връзката със заместители може да блести, е в навигацията. В много случаи списъците за навигация на уебсайта имат някакъв начин да посочат коя страница се намирате. Те често се наричат "вие сте тук" индикатори.
Повечето сайтове разчитат на идентификационните атрибути на елемента, който се нуждае от маркера "сте тук", но някои използват и атрибута клас. Въпреки това, независимо от атрибута, който използвате, трябва да направите куп работа на всяка страница, която има навигация върху нея, добавяне и премахване на атрибута от правилните елементи.
С помощта на връзката заместител можете да напишете навигацията си, както бихте желали, и след това просто да премахнете атрибута href от съответната връзка, когато добавите навигацията към страница. Съхранявам целия си списък за навигация като фрагмент в моя редактор, така че е просто бърз copy-paste и след това изтрийте href. Можете също така да получите вашата CMS да направи същото.
И освен добавянето на специален стил (ще ви покажа колко по-долу) на заместителна връзка, връзката не може да се кликва. Така че клиентите не се объркват, мислейки, че биха могли да получат нещо друго, ако кликнат върху навигационната връзка, където те са в момента.
Стилизиране на връзките за местонахождения
Заместващите връзки са лесни за стил и стил, различни от другите връзки на уеб страницата ви. Просто се уверете, че сте поставили стила както на маркера, така и на маркера за връзка: a. Например:
a {цвят: червен; шрифт-тегло: удебелен; текстова декорация: няма; } a: връзка {цвят: син; шрифт-тегло: нормално; текст-украса: подчертаване; }Този CSS ще направи заместник-връзки бурни и червени, без подчертаване. Докато редовните връзки ще бъдат с нормално тегло, сини и подчертани.
Не забравяйте да възстановите всички стилове, които не искате да бъдат пренесени от маркера. Например, нагласях теглото на шрифта до получер шрифт за връзките със заместители, така че трябваше да го задам на:
шрифт-тегло: нормално;за стандартните връзки. Същото важи и за декорацията на текста, като го премахнете със селектора, той щеше да бъде премахнат за селектора за връзка: ако не бях го върнал.