Testování vytvoření prostoru pro obrázek při načítání stránky
(podpora <img /> atributů width a height v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)
- Na problém s vytvořením prostoru pro obrázek při načítání stránky jsem přišel úplnou náhodou
při testování předchozího problému s mezerou pod obrázkem. Přiznávám, že jsem o tomto problému dříve nevěděl,
protože jsem o něm nikde neslyšel ani nečetl, je totiž poměrně těžké ho odhalit. Ale vezměme to opět popořá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" border="1" />,
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" />,
které již v průběhu stahování dat vytvoří na stránce 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 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 3 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, Safari 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" />
Nejdříve jsem považoval tento problém za chybu Firefoxu, ale předchozí
testování problému mezer pod obrázky mi jednak velmi pomohlo s řešením a také změnilo můj
prvotní názor, které zobrazení je vlastně správné.
Jak již bylo zmíněno v předchozím testu, element <img /> je podle specifikace CSS prvkem typu
in-line (řádkovým) a u těchto prvků se velikosti zobrazovat nesmí, viz např.
tento testovací soubor a ukázka elementu <span>. Otázkou zůstává, proč
Explorer ve standardním módu, Safari 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, Safari 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 problému s mezerami) 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" />
Řešení je ještě jedno - vkládat navíc obrázky vždy do <div> s nastavenou velikostí, ale
řešení předchozí se mi zdá profesionálnější (i proto, že v Exploreru 6 a 7 je pod obrázkem mezera, takže se
nastavení vlastnosti display:block pro obrázek stejně nevyhneme, viz opět předchozí test):
<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>
<div style="border: solid 1px black; width:190px; height:190px">
<img style="display:block; border:solid 1px red; width:190px; height:190px" src="obrazek.jpg" alt="obrázek" />
</div>
Nakonec jsem téměř o rok později od napsání předchozího textu objevil jednu zvláštnost
prohlížeče Firefox, v němž není velikost prostoru definovaného výškou a šířkou
obrázku (správně) zobrazena. Když chcete mít obrázek obtékaný textem a použijete tedy např. vlastnost
float:right, rámeček se s nastavenou velikostí zobrazí! Vlastnost
float tedy zřejmě přepíná element <img />
automaticky na display:block (viz ukázka v tomto odstavci).
<img src="obrazek.jpg" style="float:right; width:120px; height:120px; margin-left:5px; border:solid 1px black" alt="obrázek" />
pepe © 2007