Málo známé vlastnosti CSS

Na letošním Remixu byla jedna z přednášek věnována také málo známým trikům v použití kaskádových stylů. Každý asi zná podmíněné formátování pro nastavení stylů podle použitého webového prohlížeče, rozdíly mezi identifikátory a třídami, dědičnost atd. Molly Holzschlag ukázala i několik méně známých fint, jak přivést webové stránky k dokonalosti pomocí kaskádových stylů. Nabízím vám stručný přehled těch nejzajímavějších.

Reklama

Výběr potomků

<style type="text/css">
#obsah p a { color: #FF0000; }
</style>
<div id="obsah">
 <p>
 <a href="http://www.maxiorel.cz">Maxiorel</a>
 </p>
</div>

<div id="obsah2">
 <p>
 <a href="http://www.rejpal.cz">Rejpal.cz</a>
 </p>
</div>

Ukázka kaskádových stylů

Výběr po sobě jdoucích prvků

Tento trik není moc praktický, protože při velkém počtu po sobě jdoucích prvků (třeba řádků tabulky), vyžaduje velice dlouhou definici v CSS:

<style type="text/css">
tr{background-color: #39f;}
tr+tr{background-color: #fff;}
tr+tr+tr{background-color: #39f;}
</style>
<table cellpadding="5">
    <tr>
        <td>jedna</td>
        <td>dvě</td>
    </tr>
    <tr>
        <td>tři</td>
        <td>čtyři</td>
    </tr>
    <tr>
        <td>pět</td>
        <td>šest</td>
    </tr>
</table>

Ukázka použití kaskádových stylů

Výběr podle atributů

Zajímavá možnost výběru prvků v závislosti na tom, zda mají definovánu nějakou vlastnost anebo zda hodnota vlastnosti odpovídá konkrétní hodnotě.

a[title] { cursor:help; color:#FF0000; text-decoration:none;}
<a href="http://www.maxiorel.cz/">Maxiorel</a>
<br />
<a href="http://www.rejpal.cz/" title="Diskuze pro rejpaly">Rejpal</a>

Ukázka použití kaskádových stylů

a[id="diskuze"] { color:#0000FF; text-decoration:none;}
<a href="http://www.rejpal.cz/" id="diskuze">Rejpal</a>

Ukázka použití kaskádových stylů

Chcete-li styl aplikovat pouze na prvek, jehož hodnota některého atributu obsahuje určitý text, použijte následující postup:

a[title~="Nejlepší"] { color:#33CC33;}
<a href="http://www.maxiorel.cz/" title="Nejlepší odkaz">Maxiorel</a>
<a href="http://www.rejpal.cz/" title="Nejlepší fórum">Rejpal</a>

Ukázka použití kaskádových stylů

Ukázkový soubor HTML se všemi zde uvedenými příklady najdete zde. Pokud tyto techniky použijete na svém webu, budu rád, když se pochlubíte v diskuzi pod článkem.

Tagy: 

Reklama

Komentáře

Toto je nestabilní řešení:
#obsah p a { color: #FF0000; }

nemělo by tam být spíše toto?

#obsah p a:link,
#obsah p a:visited { color: #FF0000; }

Co se týče dalších příkladů, tak ty jsou bohužel také nepoužitelné.

a:link, a:visited. Samozřejmě, pokud nastavujeme barvu, je lepší uvést link a visited. Mně šlo ale jen o ukázku výběru. Tam nemusí být color, může tam být border či cokoli jiného, kde není potřeba pracovat s link a visited ;-)

Proč by měly být další příklady nepoužitelné?

Jan Polzer, Maxiorel.cz, Screenshots Archive, Anastacia.cz

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Ono je v zásadě jedno jestli nastavujete color, border či cokoli jiného. Samotná konstrukce bez uvedení "dynamické pseudotřídy" (link, visited, hover, active, focus) je nestabilní (v různých prohlížečích se chová různě).

Proč by měly být další příklady nepoužitelné?
Konstrukce typu: a[title~="Nejlepší"] { color:#33CC33;}
To je v majoritním SW prostředí (XP,IE6) dnes pořád ještě sci-fi, nemyslíte? :-)

Funguje mi to v IE7. IE6 stejně bude co nevidět nahrazen, až budou uživatelé nuceni k přechodu pomocí automatické aktualizace (na REMIXu padla zmínka o letošním podzimu), takže je dobré o tom vědět a připravit se. Ale svůj názor Vám nevnucuju :-)

K tomu a nebo a:link. Já si myslím, že pokud měním třeba barvu u odkazů a u navštívených odkazů, použiju link a visited, ale pokud chci třeba rámeček u jakéhokoli “a”, pak snad link nebo visited uvádět nemusím, ne? Či se pletu? ;-) Nikdo není neomylný.

Jan Polzer, Maxiorel.cz, Screenshots Archive, Anastacia.cz

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Nadpis je správny, ale potom tieto nič-viac ako vlastnosti css nazývate trikmi, ja v tom teda žiadny trik nevidím.

Méně známé a méně používané vlastnosti se občas označují jako triky, tipy, finty a podobně.

Jan Polzer, Maxiorel.cz, Screenshots Archive, Anastacia.cz

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

vyber podle atributu jsem neznal, diky

Zdá se, že "Výběr po sobě jdoucích prvků" v IE 6.0 nefunguje.

Přidat komentář