Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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

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:



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />



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


<title>Przykładowa strona w html5 której kod będzie interpretowany poprawnie w Internet Explorer 5</title>
</head>
<body>

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.

r   e   k   l   a   m   a

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.

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:


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


/**dalsze elementy pliku css**/
......

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

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 ;-) 

internet porady programowanie

Komentarze