Atributový case-insensitive selektor

Při stylování HTML pomocí CSS musí odpovídat velikosti písmen v HTML atributu a CSS selektoru.

Element <div class="trida"> jde zaměřit selektorem .trida, ale už ne třeba přes .TRIDA. Toto chování jde v případě atributového selektoru změnit:

div[class="TrIdA" i] {
  /* styly */
}

Výše uvedené styly se v podporovaných prohlížečích aplikují na <div class="trida">, <div class="TRIDA"> a podobně.

Živá ukázka

Podpora v prohlížečích

Příznak i začaly podporovat prohlížeče Chrome 49 a Opera 36.

Zpětná kompatibilita

V nepodporovaných prohlížečích se tato konstrukce chová jako syntaktická chyba a celá deklarace se zahodí. Vše se zahodí i v případě, že se k selektoru napíše něco podporovaného:

div[class="TRIda" i],
.trida {
    color: red;
}

Ani v tomto případě nebude mít <div class="trida"> červenou barvu.

Využití

Na první pohled se nezávislost na velikosti písmen u atributového selektoru zdá jako poměrně nepotřebná věc. Těžko najít důvod proč by dodržování jednotné velikosti písmen bylo problematické.

V případě jednoduchého vyhledávání/filtrování dat v CSS, kdy jsou klíčová slova v data-* atributu a filtruje se pomocí CSS selektoru, může ale příznak i usnadnit trochu práce:

[data-slova*="fytopuf" i]

Výše uvedený selektor zaměří element:

<span data-slova="Fytopuf je nejlepší">

A stejně tak i:

<span data-slova="Kupte si fytopuf">

Hack

Druhá možnost je hackování chování prohlížečů. K selektoru s i jde uvést pravidla, která budou nepodporované prohlížeče ignorovat.

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ářů ↓

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

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.

CSS 3 selektory

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

CSS 3 selektory v IE 6, 7, 8

CSS 3 selektory ve starých IE

Doplnění podpory CSS 3 selektorů do starých prohlížečů pomocí JavaScriptu.

Označení externích odkazů

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

Komentáře