Blog (7)
Komentarze (253)
Recenzje (0)

HTML5 i CSS3 w IE 5/6/7/8?

Strona główna@SpectatorHTML5 i CSS3 w IE 5/6/7/8?
19.04.2012 16:30

Regularnie przeglądam różne materiały na temat nowych wersji HTML oraz CSS i ostatnio trafiłem na naprawdę interesujące rzeczy: możliwość (przynajmniej częściowego) użycia CSS3 oraz HTML5 w starszych wersjach Internet Explorer. Cała sztuczka opiera się na dwóch ciekawych skryptach.

html5shiv

Jest to skrypt dodający obsługę nowych blokowych znaczników które mają duże znaczenie przy projektowaniu i budowaniu layoutu, np: nav, aside, article, etc. Jak należy użyć tego skryptu? Jest to niezwykle proste i wymaga dodania jedynie trzech linijek kodu w sekcji head dokumentu. Przykład:

bDYOyBIn

[code=HTML5]

Przykładowa strona w html5 której kod będzie interpretowany poprawnie w Internet Explorer 5

[/code]

bDYOyBIt

Dodany został podlinkowany skrypt JS który zostanie wykonany jeśli przeglądarka zostanie rozpoznana jako Internet Explorer. Autorzy skryptu sugerują by dodawać go po linijkach z kodem css.

Strona projektu: html5shiv Dostępne tam także są źródła skryptu więc osoby obeznane w JS mogą rozszerzyć funkcjonalność skryptu gdyż ten jest na dwóch licencjach: MIT i GPL 2.

IE-CSS3

Ten skrypt według mnie jest o wiele ciekawszy ze względu na użycie VML - Vector Markup Language. Jest to język wektorowego rysowania elementów na stronach internetowych. Został stworzony przez Microsoft i jest używany między innymi w Microsoft Office, a w Internet Explorer interpretowany od wersji 5.5.

bDYOyBIu

Użycie skryptu jest bardzo proste, wystarczy pobrać plik ie-css3.htc ze strony projektu i dodać go do elementów blokowych w kodzie css. Przykład:

[code=css3] /**dodanie skryptu**/ div, aside, article, nav, section, footer { behavior: url(ie-css3.htc); }

/**dalsze elementy pliku css**/ ...... [/code]

W tym przykładzie przypisałem wykonywanie skryptu na wszystkich ważniejszych elementach blokowych strony.

bDYOyBIv

Co właściwie daje ten skrypt? Głównie pozwala na uzyskiwanie zaokrąglonych rogów i interpretację selektora box-shadow.

Plik .htc jednocześnie zawiera kod źródłowy dzięki czemu osoby chcące rozszerzyć funkcjonalność mogą to zrobić.

Mam nadzieję, że komuś przydadzą się te informacje. W komentarzach jedyna krytyka z jaką będę się liczyć to ta konstruktywna i tego właśnie od was oczekuję, wskazywania ewentualnych błędów i różnych pomysłów ;-)

bDYOyBJj