Podpora jazyků XHTML a CSS v moderních prohlížečích VIII.

18.08.2008 - PaedDr. Petr Pexa Počet zobrazení: 913  

V tomto dílu našeho seriálu se budeme věnovat obdobné problematice jako v díle sedmém - (ne)vytvoření prostoru pro obrázek při načítání stránky, tedy podpoře atributů width a height (resp. CSS deklarace výšky a šířky) u elementu < img / > v jednotlivých aktuálních verzích prohlížečů (včetně aktuálního Firefoxu 3).

Na problém s vytvořením prostoru pro obrázek při načítání stránky jsme přišli úplnou náhodou při testování předchozího problému s mezerou pod obrázkem. Přiznáváme, že jsme o tomto problému dříve nevěděli, protože jsme o něm nikde neslyšeli ani nečetli, je totiž poměrně těžké ho odhalit. Ale vezměme to opět po pořádku.

Představme si stránku s textem, ve kterém jsou vložené obrázky (fotografie), tímto textem obtékané. Protože se obrázky stahují později než text, stránka se nejprve zformátuje bez obrázků a teprve jakmile obrázky ze serveru dorazí, vkládají se do již formátované stránky a stránka se tak formátuje znovu. Text se dodatečně rozestupuje a dělá tak vlastně obrázkům místo.

Tomuto neprofesionálnímu řešení se lze snadno vyhnout použitím atributů width a height elementu < img / >:

< img src="obrazek.jpg" width="190" height="190" alt="obrázek" / >,

nebo CSS deklarací výšky a šířky elementu < img / >:

< img src="obrazek.jpg" style="width:190px; height:190px; border:solid 1px black" alt="obrázek" / >,

Již v průběhu stahování dat se tak na stránce vytvoří v textu prostor (ideálně se skutečnou velikostí obrázku), do kterého se obrázek vloží a stránka se tak formátuje jen jednou.

Zda se prostor vytvoří nebo ne, je ale vidět jen tehdy, je-li velmi pomalé připojení k internetu, nebo pokud se z nějakého důvodu obrázek nezobrazí (např. je chyba v názvu obrázku, nebo soubor s obrázkem na serveru vůbec není). Proto je také složitější si problému všimnout.

V čem tedy ale je vlastně problém? V prohlížeči Firefox se prostě prostor definovaný výškou a šířkou obrázku nezobrazí! Aby byl problém dobře vidět, konkrétní obrázek se v následujícím příkladu záměrně nezobrazuje. V Exploreru a Opeře je rámeček o správné velikosti 190 x 190px, ve Firefoxu ale pouze malý rámeček kolem alternativního textu.

< img src="obrazek.jpg" style="width:190px; height:190px; border:solid 1px black" width="190" height="190" alt="obrázek" / >

• funkční ukázka

Nejdříve jsme považovali tento problém za chybu Firefoxu, ale předchozí testování problému mezer pod obrázky nám jednak velmi pomohlo s řešením a také změnilo náš prvotní názor, které zobrazení je vlastně správné.

Jak již bylo zmíněno v předchozím dílu, element < img / > je podle specifikace CSS prvkem typu in-line (řádkovým) a u těchto prvků se velikosti zobrazovat nesmí (viz 4. díl tohoto seriálu a ukázka elementu < span > ). Otázkou zůstává, proč Explorer ve standardním módu a Opera u < span > velikost správně nepodporuje, ale u < img / > ano, každopádně chybné zobrazení prostoru pro obrázek je tedy v Exploreru a Opeře, správně by podle předchozí teorie rámeček s nastavenou velikostí být zobrazen opravdu neměl. Jeho praktický význam je ale pro rychlé formátování stránky značný a tak (po prostudování předchozího dílu s mezerami pod obrázkem) již asi řešení tušíte také - display:block! Následující ukázka zobrazí správně velký rámeček již ve všech prohlížečích.

< img src="obrazek.jpg" style="display:block; width:190px; height:190px; border:solid 1px black" alt="obrázek" / >

• funkční ukázka

Řešení je ještě jedno - vkládat navíc obrázky vždy do < div > s nastavenou velikostí shodnou s obrázkem, ale řešení předchozí se mi zdá profesionálnější (i proto, že v Exploreru 6 je pod obrázkem mezera, takže se nastavení vlastnosti display:block pro obrázek stejně nevyhneme, viz opět předchozí sedmý díl seriálu):

< div style="border: solid 1px black; width:190px; height:190px" >
  < img style="border:solid 1px red; width:190px; height:190px" src="obrazek.jpg" alt="obrázek" / >
< /div >

• funkční ukázka