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.

Výběr potomků

<style type="text/css">
#obsah p a { color: #FF0000; }
</style>
<div id="obsah">
 <p>
 <a href="https://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="https://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="https://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

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

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é.

Profile picture for user Jan Polzer

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

návštěvník

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? :-)

Profile picture for user Jan Polzer

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

návštěvník

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

návštěvník

vyber podle atributu jsem neznal, diky

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru