Skip to content

Instantly share code, notes, and snippets.

@iiic

iiic/css3-plural.html

Created March 21, 2013 15:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iiic/5214175 to your computer and use it in GitHub Desktop.
Save iiic/5214175 to your computer and use it in GitHub Desktop.
Download ZIP
Změna tvaru slova podle počtu, který se k němu váže. Zároveň i skloňování (je/jsou) vše realizované jen css3 a html5 data- atribut.
Raw
css3-plural.html
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>Plurál jen s pomocí CSS</title>
<style>
*[data-plural]:after {
content: attr(data-plural-n);
}
*[data-plural][data-count='1']:after {
content: none;
}
*[data-plural][data-count='2']:after, *[data-plural][data-count='3']:after, *[data-plural][data-count='4']:after {
content: attr(data-plural);
}
*[data-pronoun][data-count='2'], *[data-pronoun][data-count='3'], *[data-pronoun][data-count='4'] {
font-size:0;
}
*[data-pronoun][data-count='2']:after, *[data-pronoun][data-count='3']:after, *[data-pronoun][data-count='4']:after {
content: attr(data-pronoun);
font-size:medium;
}
</style>
<a href="http://www.misantrop.info/pluraly-pomoci-css/">originál článku</a>
<hr>
<div>Diskuze obsahuje <span data-count="0" data-plural="e" data-plural-n="ů">0 komentář</span></div>
<div>Diskuze obsahuje <span data-count="1" data-plural="e" data-plural-n="ů">1 komentář</span></div>
<div>Diskuze obsahuje <span data-count="2" data-plural="e" data-plural-n="ů">2 komentář</span></div>
<div>Diskuze obsahuje <span data-count="3" data-plural="e" data-plural-n="ů">3 komentář</span></div>
<div>Diskuze obsahuje <span data-count="4" data-plural="e" data-plural-n="ů">4 komentář</span></div>
<div>Diskuze obsahuje <span data-count="5" data-plural="e" data-plural-n="ů">5 komentář</span></div>
<div>Diskuze obsahuje <span data-count="6" data-plural="e" data-plural-n="ů">6 komentář</span></div>
<hr>
<div>
Policií
<span data-count="0" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="0" data-pronoun="jsou">je</span>
už
<span data-count="0" data-plural="ové" data-plural-n="ů">0 člen</span>
této vlády
</div>
<div>
Policií
<span data-count="1" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="1" data-pronoun="jsou">je</span>
už
<span data-count="1" data-plural="ové" data-plural-n="ů">1 člen</span>
této vlády
</div>
<div>
Policií
<span data-count="2" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="2" data-pronoun="jsou">je</span>
už
<span data-count="2" data-plural="ové" data-plural-n="ů">2 člen</span>
této vlády
</div>
<div>
Policií
<span data-count="3" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="3" data-pronoun="jsou">je</span>
už
<span data-count="3" data-plural="ové" data-plural-n="ů">3 člen</span>
této vlády
</div>
<div>
Policií
<span data-count="4" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="4" data-pronoun="jsou">je</span>
už
<span data-count="4" data-plural="ové" data-plural-n="ů">4 člen</span>
této vlády
</div>
<div>
Policií
<span data-count="5" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="5" data-pronoun="jsou">je</span>
už
<span data-count="5" data-plural="ové" data-plural-n="ů">5 člen</span>
této vlády
</div>
<div>
Policií
<span data-count="6" data-plural="i" data-plural-n="o">vyšetřován</span>
<span data-count="6" data-pronoun="jsou">je</span>
už
<span data-count="6" data-plural="ové" data-plural-n="ů">6 člen</span>
této vlády
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment