Kolega mi nedávno doporučil zajímavý článek s tipy, jak přimět Internet Explorer 6, aby se choval jako "pořádný" prohlížeč. Považuji za slušné vychování se s vámi o tyto vyzkoušené triky podělit. Originální text je v angličtině, a tak ho po přeložení také publikuji. Ukážeme si například, jak na stínování písma, průhlednost, kulaté rohy přes CSS nebo zprovoznění HTML 5.

HTML 5 v Internet Exploreru

Slyšeli jste už o HTML 5? Pokud se zajímáte o novinky v oboru tvorby webových stránek, pak určitě ano. Pokud ne, HTML 5 je velká revize jazyka HTML, která je zatím stále ve vývoji. I když ho většina moderních prohlížečů podporuje, Internet Explorer, jak všichni víme, nemá rád velké změny.

Html5.js je zajímavý projekt, který si dal za úkol vyřešit kompatibilitu HTML 5 v IE. Implementace je snadná: před volání jakýchkoli stylů stačí načíst následující skript:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Více informací: HTML 5 enabling script

CSS vlastnost text-shadow

Díky podpoře text-shadow ve Firefoxu 3.5 začala být tato vlastnost hojně využívaná. Většina moderních prohlížečů ji dnes už podporuje, ovšem Internet Explorer opět zklame. Naštěstí ale dokáže tuto vlastnost dobře napodobit pomocí filtru. Níže uvedený příklad ukazuje, jak za pomocí filtru imitovat stínování textu.

p.shadowed {
    text-shadow: #0000ff 0px 0px 3px; /* Normální prohlížeče */
    filter: glow(color=#0000ff,strength=3); /* IE */
}

Více informací: text-shadow

CSS vlastnost box-shadow

Krása této vlastnosti spočívá v možnosti přidat stín k jakémukoli HTML elementu bez použití obrázků. To ale samozřejmě nemůžeme chtít po Exploreru. Znovu proto využijeme filtru k dosažení požadovaného efektu.

.shadowed{
    box-shadow: 10px 10px 5px #888; /* Normální prohlížeče */
}

.shadowed { /* IE */
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

Více informací: Using CSS3 box-shadow

Kulaté rohy

Sám jsem vždy odsuzoval zatěžování renderování stylů ještě i kulatýma rohama, ovšem pokud nám tuto možnost CSS3 nabízí, určitě půjde využít i chytře. Koneckonců, jsou velice oblíbené. V CSS3 slouží k tomuto účelu vlastnost border-radius, díky které docílíme krásných zaoblených okrajů bez použití obrázků.

.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Tady už ale nepomůže žádný filter, je potřeba nasadit silnější kalibr. Jedna z možností, jak zprovoznit zakulacené rohy v Internet Exploreru je použití JavaScriptové knihovny DD roundies. Následující příklad zakulatí okraje všem elementům s třídou .roundify.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
	DD_roundies.addRule('.roundify', '10px');
</script>

Více informací: DD roundies

Více sloupcové layouty

CSS3 umožňuje automatické zobrazení definovaného obsahu ve sloupcích. Výborná věc, kodérům rozšíří možnosti při rozvržení stránky. Následující CSS je podporované pouze ve Firefoxu a Safari. Automaticky rozdělí div na sloupce.

.column {
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}

Pro ošetření nedostatku v Internet Exploreru je potřeba využít jQuery. Chytrý plugin udělá práci za nás.

$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });

Více informací: jQuery columize

Pseudo-atributy v CSS 3

CSS3 nám uvádí velké množství takzvaných pseudo-atributů. Jeden z nic, :nth-child() cílí n-tého potomka daného prvku dle parametru v závorce.

p:nth-child(3) {
    color:#069;
}

Pro IE jsou ale takové vychytávky příliš futuristické... Pro nápravu stačí zalinkovat v hlavičce skript ie-css3.js, který nám otevře široké možnosti CSS3.

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

Více informací: IE CSS3

Průhlednost

V dnešní době už trochu méně pokroková věc, ale její znalost se myslím vyplatí trochu oprášit. Atribut opacity sice IE nepochopí, lze ho ale snadno nahradit filtrem.

.element{
    opacity:.7; /* Standarní CSS */
    filter:alpha(opacity=70); /* IE patch */
}

Otáčení HTML elementů

K otáčení slouží vlastnost transform:

.transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);

Bohužel, Internet Explorer bude všechny výše uvedené zápisy ignorovat. Pro něj tu ale máme filter, že ano?

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

Více informací: Matrix Filter

Podpora alfa kanálu u background

Slušné prohlížeče nám dovolí definovat i průhlednost u barvy na pozadí. Namísto obvyklého zápisu background: rbg(255,255,255); využijeme rgba:

.color-block  {
   background-color: rgba(0, 0, 255, 0.2);
}

I v tomto případě nám pomůže opravit nedostatky Exploreru vlastnost filter.

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

Více informací: RBGa Browser Support

Použití vlastních fontů

Posledních 15 let dominovaly webu fonty jako Arial, Verdana, Courier či Times New Roman - fonty označené jako "bezpečné", což znamená, že by je většina uživatelů měna mít nainstalované. Nové technologie nám nyní ale umožní vkládat vlastní fonty bez ohledu na to, zda-li je má koncový uživatel v systému nebo ne.

Asi nejčisčí technikou je použití @font-face. Metoda, které přiřadí k nadefinovanému jménu rodiny písma ttf soubor. A věřte nevěřte, v IE je podporovaná už od verze 4. Opět to ale není úplně stejné: je potřeba soubor ttf převést do formátu *.eof, který Explorer pochopí. To lze pomocí online nástroje.

@font-face {
    font-family: "Vera Humana";
    src: url( /location/of/font/FontFileName.eot ); /* IE */
    src: local("Vera Humana 95"), url( /location/of/font/FontFileName.ttf ) format("TrueType"); /* ostatní */
} 
 
/* Následně lze normálně použít*/
.element {
    font-family: "Vera Humana", verdana, helvetica, sans-serif;
}