Príklad sa vzťahuje na článok Klasické iniciály pomoocou CSS.
Príklad je otestovaný a funguje v prehliadačoch: Internet Explorer 5.5 – 7, Mozilla Firefox 1.5 a 2, Opera 8.51, Safari 2 a 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam augue quam, volutpat ac, tristique nec, mattis sed, ligula. Proin ullamcorper ante at justo. Quisque est lorem, auctor quis, sodales vel, euismod in, magna. Mauris at pede. Proin nec nisi. Etiam ut augue. Ut pulvinar enim ut lorem. Phasellus rutrum eleifend ligula. In nisi felis, commodo non, consequat id, interdum porta, dui. Maecenas dignissim dui nec nisl. Aenean et turpis. Vivamus nec mauris semper risus malesuada laoreet. Integer augue eros, condimentum ac, elementum in, tristique ac, lorem. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent adipiscing turpis eu eros.
Donec posuere lectus malesuada neque. Ut ante ligula, mattis at, nonummy ut, porttitor nec, arcu. Duis volutpat tortor at mi. Praesent nunc dolor, porttitor sed, ultrices non, luctus et, massa. Phasellus rhoncus neque id risus. Aenean tristique, lacus pharetra congue feugiat, urna est interdum nisl, vel cursus lacus odio id eros. Vestibulum arcu. Aliquam erat volutpat. Praesent aliquet magna at ante. Donec iaculis convallis est. Quisque tristique dolor ac erat. Phasellus id massa id diam mattis imperdiet. Duis non mi. Vestibulum eget odio. Pellentesque aliquet consectetuer urna. Phasellus non velit. Proin tortor. Sed non magna. Nunc aliquam. In quis velit. Donec ut neque. Cras quis justo.
Príklad je založený na použití pseudo triedy first-letter, ktorý podporujú všetky moderné prehliadače a IE 5.5 a vyššie. Použite first-letter v selektore umožňuje formátovať prvé písmeno textu, v našom prípade odstavca.
Použité hodnoty sa líšia v závislosti od použitého fontu, veľkosti písma a hodnoty line-height. Preto je uvedená použitá veľkosť písma celého dokumentu (tag body). Pre iný spôsob formátovania je potrebné nájsť iné, ideálne hodnoty. Pozrite si aj pôvodný príklad s jednoduchším formátovaním.
body {
margin: 0;
padding: 0;
font: 0.9em/1.6em Arial,sans-serif
}
p:first-letter {
float: left;
font: 5.1em/0.9em Arial,sans-serif;
margin: 0.14em 3px 0 0;
}
Uvedený kód funguje vo všetkých prehliadačoch okrem IE 6 a starších. Aby sa inicála zobrazila aj v IE 6 a 5.5, je potrebné pred doctype vložiť xml deklaráciu: <?xml version="1.0"?>. Takže začiatok xhtml dokumentu bude vyzerať nasledovne:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Xml deklarácia však spôsobí, že IE 6 sa prepne do quirk modu, čiže bude zobrazovať web s chybným box modelom, tak ako IE 5.5. Tento problém rieši napríklad takzvaná matrioška. Pokiaľ sa na začiatok dokumentu nevloží xml deklarácia, nič sa nedeje, IE 6 a 5.5 si inicálu jednoducho nebude všímať a text bude formátovať štandartne.
Na konci je ešte nutné ošetriť chybné zobrazenie v IE. Pretože poterbujeme nastaviť odlyšnú hodnotu line-height oproti ostatným prehliadačom, použijeme podmienený komentár, ktorý moderné prehliadače ignorujú, takže hodnotu berie do úvahy iba IE. Komentár treba vložiť do hlavičky xhtml dokumentu.
<!--[if IE]>
.iniciala p:first-letter {line-height: 0.94em}
<![endif]-->
Výsledkom sú krásne trojriadkové inicály, odolné voči všetkým rozšíreným prehliadačom a zväčšovaniu textu. Kód je samozrejme validný.
© 2007 Macova fotošopa – Jozef Mak (aka Mac)