728b.gif

Průhledné PNG v IE6 – Jednodušší už to nebude nikdy!

03.10.08 23:59 | Tvorba webu | autor: Chates (profil) | Čteno: 2655x |
Nic mocUjde toPrůměrDobréVýborné (Žádná hodnocení)

Jak na průhlednost v IE 6O této problematice jsem již napsal 2 články (první, druhý). Probrali jsme old school metodu založenou na přímém volání AlphaImageLoaderu, a pak jsme se dostali k modernějším metodám. Zmiňoval jsem nejprve jQuery.pngFix, který se následně přejmenoval a vylepšil na můj oblíbený jQuery.ifixpng.

Implementace skriptu jQuery.ifixpng vyžaduje 5 strojově nezáživných kroků a téměř nikdy mi to na stránkách nefungovalo na první pokus. Vždy jsem někde udělal chybu. Já vám dnes ukážu metodu, která vyžaduje pouze 1 krok + 1 důležitou podmínku! Celá věc se jmenuje IE7.js! Jak na to?

  1. Do hlavičky stránek umístíme následující kód
    <!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
    <![endif]-->
  2. Všechny png obrázky, na které budeme chtít skript použít se musí jmenovat jméno_souboru-trans.png!
  3. To je vše!

Použili jsme známý trik zvaný conditional comments. Ostatní prohlížeče kód ignorují, zatímco internet explorery ho vidí jako podmíněné výrazy. V našem případě <!–[if lt IE 7]> znamená If lower than Internet Explorer 7 (Pokud nižší verze IE než 7), pak se vloží náš javascript IE7.js.

Ještě připomenu, že stejně jako u všech známých metod na průhledné png v IE6, to nefunguje na opakující se pozadí a nelze aplikovat vlastnost background-position v CSS.

Průhledné png je ale jen jedna věc, kterou skript IE7.js řeší. Celý projekt má mnohem vyšší ambice, a to učinit IE6 kompatibilní s IE7. Nevím, do jaké míry se jim to podařilo, příliš detailně jsem to netestoval. Všiml jsem si ale, že v IE6 začaly fungovat pokročilejší CSS selektory typu input[type=submit], takže zřejmě budou fungovat i další!

Existuje také skript IE8.js, který už je o něco dál a snaží se z IE7 učinit IE8. Více na domovské stránce projektu.

336b.gif

Líbil se ti tento článek? Ukaž ho i ostatním! Pro snadné přidání odkazu na Facebook, Linkuj.cz nebo Twitter klikni na jednu z ikonek výše a nech další, ať si článek také přečtou.

Zanechat odpověď