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"><br />#obsah p a { color: #FF0000; }<br /></style> <div id="obsah"><br /> <p><br /> <a href="http://www.maxiorel.cz">Maxiorel</a><br /> </p><br /></div><br /><br /><div id="obsah2"><br /> <p><br /> <a href="http://www.rejpal.cz">Rejpal.cz</a><br /> </p><br /></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"><br />tr{background-color: #39f;}<br />tr+tr{background-color: #fff;}<br />tr+tr+tr{background-color: #39f;}<br /></style> <table cellpadding="5"><br />    <tr><br />        <td>jedna</td><br />        <td>dvě</td><br />    </tr><br />    <tr><br />        <td>tři</td><br />        <td>čtyři</td><br />    </tr><br />    <tr><br />        <td>pět</td><br />        <td>šest</td><br />    </tr><br /></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 /><br /><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><br /><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
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

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

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

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

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
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.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru