Skloňování v CSS

Skloňování

Redakční systém neumí správně česky skloňovat, dává ale informaci o počtu celkových komentářů? Celkový počet tedy použijeme jako CSS třídu a vlastností content podle počtu vypíšeme správný tvar. Zároveň je třeba v prohlížečích, co content podporují (IE 8+), skrýt špatný tvar slova. Přesněji řečeno ve starších Explorerech špatný tvar zobrazit, aby tam bylo alespoň něco.

  • 0 komentářů
  • 1 komentářů
  • 2 komentářů
  • 3 komentářů
  • 4 komentářů
  • 5 komentářů
  • 50 komentářů

HTML

V HTML se pouze obalí tvar určený k vylepšení skloňování.

<p>3 <span class='celkem-3'><span>komentářů</span></span>

CSS

/* skrytí vnitřního <span>u a jeho zobrazení ve starších IE */
.kometare span span {display: none; =display: inline;}
/* všechny neurčené počty budou mít tvar „komentářů“ */
.kometare span:before {content: "komentářů";}
/* určení tvarů pro jeden až 4 */
.kometare .celkem-1:before {content: "komentář"}
.kometare .celkem-2:before, 
.kometare .celkem-3:before, 
.kometare .celkem-4:before {content: "komentáře";}

Zvýraznění aktuální položky

Obdobným způsobem lze zajistit zvýraznění aktuální stránky. Stačí použít jako nadřazenou třídu nějakou dostupnou proměnnou stránku identifikující.

<p class='strankovani strana1'>
	<a href='?strana=1' class='strana1'>Strana 1</a>
	<a href='?strana=2' class='strana2'>Strana 2</a>
	<a href='?strana=3' class='strana3'>Strana 3</a>

A po přidání jednoduchého (ale únavně se opakujícího) CSS se bude odkaz na aktuální stranu zobrazovat tučně.

.strana1 .strana1, 
.strana2 .strana2,
.strana3 .strana3 {font-weight: bold}

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

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Zobrazení popisku při najetí myší

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

Vícenásobné CSS pozadí

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

CSS ikony

CSS ikony

Ikony bez obrázků v čistém CSS.

Komentáře