Označení externích odkazů

S vyhynutím IE 6 je bezpečně možné používat přímo v CSS selektory atributů.

To vytváří prostor pro relativně jednoduchý způsob zaměření odkazů vedoucí:

  1. na cizí web,
  2. na jinou interní stránku,
  3. na soubor určitého typu.

Pro tyto účely je zajímavý selektor hledající začátek nebo konec atributu href.

Adresa začíná…
E[atribut^="hodnota"]
Adresa končí…
E[atribut$="hodnota"]

Odkaz na cizí web

Pokud se pro interní odkazy neuvádí absolutní cesta a pro externí ano, bude v drtivé většině případů externí odkaz cokoliv začínající na http:// nebo https://.

a[href^="http://"], a[href^="https://"] {color: red}

Pokud by se absolutní cesty používaly i pro interní odkazy, stačí pro danou doménu výše uvedené pravidlo přebít.

a[href^="http://jecas.cz"] {color: green}

Odkaz na vlastní web

Relativní odkaz na vlastní web bude začínat zpravidla na / nebo .

a[href^="/"], a[href^="."] {color: green}

Odkaz na soubor

Při odkazování na soubor určitého typu lze nastavit specifický styl podle přípony, tedy konce odkazu. V tomto případě bude odkaz na PNG soubor červený.

a[href$=".png"] {color: red}

Odkaz na stránku a obrázek.

Ilustrační ikona

Odkaz je ještě možné vyzdobit ikonou. Od Internet Exploreru 7 ji lze docela úspěšně brát z favicon.ico.

Nejprve nadefinovat pro externí odkazy umístění obrázku:

.ikona a[href^="http://"] {
  background: left center no-repeat; padding-left: 20px; background-size: 16px
}

A pro jednotlivé stránky nastavit favicon.ico jako obrázek na pozadí.

a[href^="http://jecas.cz"] {background-image: url(http://jecas.cz/favicon.ico)}

V případě, že se z dané stránky na jiné weby s faviconou odkazuje často, je vhodné všechny ikony spojit do jednoho CSS spritu.

Textový popisek

Kromě ikony můžeme i něco připsat vlastností content.

a[href^="http://jecas.cz"]:before {content: "jecas.cz"; background: #0D6AB7; color: #fff}

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Odkaz jako tlačítko

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

Lepší podtržení odkazu

Lepší podtržení odkazu

Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

Navštívený odkaz :visited

Navštívený odkaz :visited

Pomocí CSS pseudo třídy :visited jde měnit některé styly navštíveného odkazu.

Odkaz přes celý box

Odkaz přes celý box

Jak udělat, aby celý box s několika prvky byl klikací.

Komentáře