Archiv rubriky: IE (Internet Explorer)

Přehled CSS hacků

Moderní poučky o CSS tvrdí, že hackům od odzvonilo a místo nich by se měla používat feature detect a fallbacky. To je sice pravda v okamžiku, kdy chcete stylovat vzhled stránky, ale pokud potřebujete vyřešit nějaký bug, který se projevuje jen v konkrétním prohlížeči (hádáte správně, mluvím o Internet Exploreru), je CSS hack tou nejlepší cestou.

Pokračování textu Přehled CSS hacků

Pro testování IE už nepotřebujete Windows

Pokud potřebujete otestovat stránku v IE (Internet Explorer, Trident, Edge), můžete použít virtuální stroje, které nabízí Microsoft zdarma ke stažení na modern.ie.

Druhou možností je použítí vzdáleného testování přes Microsoft Azure. Zatím jde o Technical preview, takže je zdarma, ale je možné, že později bude tato možnost zpoplatněna nebo dostupná jen uživatelům Azure nebo MSDN. Oproti virtualizaci zde stačí stáhnout několika megabytovou aplikaci a samotný několika GB virtuální stroj bude uložen v Azure cloudu.

Pokračování textu Pro testování IE už nepotřebujete Windows

Absolutně pozicovaný odkaz nefunguje na IE9?

Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.

Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:

.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }

V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.

Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url('link.png') transparent;
}

Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
} 

nebo

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
   což není validní obrázek a proto
   se v pozadí nic nezobrazí */
} 

Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:

a { background: url(#); /* Fix IE9 anchor */ }

Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.

Ani tohle nepomohlo?

V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.

To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.

Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.

Debugování starších Internet Explorer a Windows Phone

Pokud potřebujete ověřit své stránky například v Internet Exploreru 7 nebo na mobilním Windows Phone 8, může vám k tomu posloužit nejnovější Internet Explorer 11, který lze nainstalovat do Windows 7 a 8. Pokračování textu Debugování starších Internet Explorer a Windows Phone

Emulace IE9 na Windows Phone 7

Pro testování webů na mobilním Internet Explorer 9, který je dostupný hlavně na telefonech Nokia Lumia s Windows Phone 7, budete potřebovat počítač s Windows Vista SP2 nebo novější (Windows 7 nebo Windows 8 jsou doporučené) a také Microsoft (Live) účet.

UPDATE: pro testování IE10 na Windows Phone 8 potřebujete Windows 8 Pro; následně si z níže uvedené stránky stáhněte Windows Phone Emulator 8.1. Pokračování textu Emulace IE9 na Windows Phone 7

Transform generators

Jednou z nejužitečnějších vlastností CSS3 je možnost použití transformace. Díky ní můžete objekty zvětšovat, otáčet nebo naklápět.

Problém ale tkví v tom, že každý prohlížeč používá vlastní definici a je pak dost obtížné na žádný nezapomenout.

S tím vám ale pomohou následující nástroje:

Pomocí Matrix generátoru můžete snadno naklikat přesně takovou transformaci, jakou chcete. Stačí jen zobrazený obdélník otočit (rotate), zvětšit (scale) či skosit (skew) a pak si zkopírovat CSS definice. Nevýhodou je, že nefunguje pro IE8 a starší.

Druhý nástroj, CSS3 Transforms translator naopak překládá vámi zadanou transformaci a zajistí, abyste nezapomněli na žádný prohlížeč. Do políčka zadejte požadované metody (rotate(), translate_(), scale(), apod.; použít můžete i matrix() vygenerovaný předchozím nástrojem) a klikněte na Translate.

Translator (docela paradoxně :)) nejlépe funguje v IE8, protože pak si může sám ověřit správnost nastavení fitrů pro IE. Navíc vám přímo zobrazuje ukázku toho, jak se transformace bude aplikovat a tak si můžete sami ověřit, zda funguje nebo ne.

Pokud translator hlásí nepodporovanou funkci, zkontrolujte, že text obsahuje pouze transform metody a nejsou v poli uvedeny žádné další znaky (např. středník na konci) ani texty (např. transform:) a používáte správné závorky. Pokud překlad nefunguje ani po opravě, zkuste stránku obnovit (F5).