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.

Strona projektu: html5shivDostę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

0 nowych
Ardziej   5 #1 19.04.2012 17:29

A obsługa warstw, pozycji, png, gradientów itd będzie ?
Bo zaokrąglone rogi czyli haki dla IE6 to jest jakaś porażka.
Wpis jest okej, ale po co piszesz o tym jak trupa przywrócić do życia ?
Niech IE6 wymiera nie zwracajmy uwagi na IE6. Blokujmy IE6 :)

Pozdrawiam serdecznie

Spectator   8 #2 19.04.2012 18:10

IE6 - w domyśle "IE6 i wersje wyższe które nie obsługują html5 i css3", czyli 7 i 8 które są w nadal jeszcze niezwykle popularnym windows xp, a na wersje 9 i 10 pod xp nie ma już szans.

Co do obsługi elementów które wymieniłeś nie sprawdzałem. Sam z chęcią wykonałbym bardziej szczegółowe testy, ale mam zainstalowanego windows 7, a microsoft na test drive ie zrezygnował już z tej fajnej wersji w której można było oglądać strony w trybie zgodności z starszymi wersjami ie.

Jak na początku zaznaczyłem - "możliwość (przynajmniej częściowego) użycia...".

gowain   18 #3 19.04.2012 18:41

Z tego co czytam w statystykach Gemiusa (http://ranking.pl/pl/rankings/web-browsers.html) IE6 ma udział 0,6%. W moim Google Analytics patrzę po stronach klientów i wychodzi max 2% - jeśli tak jest na prawdę to pytanie czy warto się tym zajmować? Czy nie warto już porzucić swoich przyzwyczajeń albo przynajmniej zrobić wyskakujący pasek z informacją o przestarzałej przeglądarce. Z IE6 trzeba walczyć, a nie robić jej dobrze :P

soanvig   9 #4 19.04.2012 18:43

Teraz IE6 praktycznie wyszło z użytku, bo sam MS umieszcza agresywne informacje o konieczności zaktualizowania tego programu do nowszej wersji, tak więc można go już uznać za obiekt wymarły i zamiast bawić się w kompatybilność wsteczną zająć się najnowszymy technologiami

Igloczek   7 #5 19.04.2012 19:12

Ja osobiście używam Modernizr (http://modernizr.com/). Znalazłem ten skrypt w HTML5 Boilerplate.

W IEu mnie wygląda wszystko względnie ok, a to najważniejsze :) Zresztą sami sprawdźcie, może u was się coś nie prawidłowo wyświetli - http://naukajazdypasja.pl/.

Spectator   8 #6 19.04.2012 19:14

Zedytowałem tytuł, bo zauważyłem, że nie załapliście o co chodzi.... Mam nadzieję, że teraz wszystko jasne.

gowain   18 #7 19.04.2012 19:19

Lepiej, choć nadal twierdzę, że bez sensu pisać o IE 6, a zwłaszcza 5 :P Ale, żeby nie było, że się czepiam to i pochwalę, bo wpis fajny i pewnie niejednemu się przyda :)

Ardziej   5 #8 19.04.2012 20:16

@Spectator, polecam IETester :)

przemek1234   7 #9 19.04.2012 21:22

Jeszcze jest ExplorerCanvas: http://excanvas.sourceforge.net/
Przykładowa strona z załączonym skryptem i canvas'em: http://www.themaninblue.com/experiment/AnimationBenchmark/canvas/

przemek1234   7 #10 19.04.2012 21:23

Tu jest też fajne demko: http://bodytag.org/excanvas1/

  #11 23.04.2012 08:51

W ogóle powinno się olać starsze przeglądarki,chcesz interfejsu IE6 ?,wgraj sobie np. Maxthona i ustaw skórkę IE6,bez tego nie będzie lepszych stron internetowych,webmasterzy muszą skupiać się na szczegółach w stylu,czy to zadziała na IE 7,8,pisać podwójny kod strony

RONINZGR   4 #12 24.04.2012 12:49

Firmy takie jak IAI (http://www.iai-shop.com/pr-press-release.phtml?id=1235324004) już robią zamach na IE7 a co dopiero na IE6. Obsługa tych przeglądarek to bzdura, a tego typu projekty, hmm, sprawiają że rynek się cofa a nie idzie na przód. Rozumiem że można się bawić, kombinować itd bo to jest fajne, ale według mnie celowe wprowadzanie tego typu działań w produkcyjne projekty to głupota. Strony powinny odstraszać użytkowników tych zabytków a nie dawać im jeszcze ordery "wzorowy staruszek".

acabose   2 #13 24.04.2012 21:16

"obsługa tych przeglądarek to bzdura"- tu się zgodzę - należy jeszcze dopisać " i używanie ich", ale trzeba w to wpisać też najnowsze wypusty MS (nie widziałem IE 10 :D ... tyle już o nim mówią). Jakiś czas temu zrobiłem w pracy prostą stronkę do zgrabnego otwierania plików MS Excel umieszczonych gdzieś w firmowej sieci (nie lubię klikać po katalogach - nie śmiać się "lenistwo motorem postępu") i tak w ramach ćwiczeń wykorzystałem HTML5 i CSS3 (zaokrąglone rogi, gradient, cień w tekście, jakieś nowe znaczniki i z blokowych na inline je ustawiłem żeby zrobić kafelki sąsiadująco w liniach) .... wszystko śmiga pod firefox-em .... kiedyś całkiem przez przypadek (modernizacja kompa i firefox nie był jeszcze domyślny) wczytałem tą stronkę przez IE (zaktualizowany do 9 na 99%) i bardzo się zdziwiłem - ponoć wszystko powinno być ok - IE 9 obsługuje HTML5 i CSS3 ponoć lepiej niż konkurencja a tu wszystko się rozjechało i brak efektów :| - nie mam czasu żeby się zastanowić nad tym dlaczego nie działa więc zakładam że IE jednak nadal ma problem z nowościami.
HTML5 i CSS3 na IE widziałem tylko dzięki skryptowi js od googla .... o istnieniu tego drugiego nie wiedziałem.
#RONINZGR moim zdaniem nie chodzi tu o reanimację staruszków ale pisanie jednego kodu a jak się znajdą "staruszkowie" to zobaczą co nieco świata dzięki js ale trzeba współczuć doznań w zakresie wydajności (nie przewiduję że na nowym sprzęcie ktoś zainstaluje XP i IE6).

Użyteczny wpis .... każdy piszący w nowych odsłonach html i css powinien mieć taką ściągawkę pod ręką - chyba że zna już na pamięć - w końcu strony www tworzy się dla wszystkich internautów.

zelazowy   2 #14 20.06.2012 22:50

No, dogrzebałem się, akurat mi się Twój wpis przydał, dzięki za niego :)

Co do wspierania IE6/7 to fakt, sensu nie ma to najmniejszego, ja w ogóle zastanawiam się kto tak naprawdę używa IE7? Przecież z tego co mi wiadomo domyślnie było tylko w tak (niesłusznie) znienawidzonej Viście, na XP albo ktoś (mając pirata) używa IE6 albo mając włączony Windows Update ma IE8, Vista z włączonym Update'm również ma IE8 (a może i 9?), na Windows 7 już było IE8. Pozostaje mi grupa ludzi piracących Vistę lub mających wyłączonego Update, obie grupy wydają mi się równie niedorzeczne. Kto więc używa IE7, no kto?

Ale myk (nie)stety nadal bardzo przydatny jest do obsłużenia IE8, którego nie można już ot tak po prostu porzucić, jest to ostatnie IE obsługiwane przez XP, a ten prędko nie umrze.

  #15 13.11.2012 06:17

Znacie jakiś program do prowadzenia sklepu z wyjątkiem http://sky-shop.pl który obsługuje HTML5 w sklepie ?

  #16 14.11.2012 00:34

Boilerplate a co za tym idzie również Modernizr używają tacy giganci jak Google, Twitter czy nawet sam Microsoft (jak na ironię...) ale nie jest to argument sam w sobie za tymi narzędziami. Moim zdaniem powstały one po to właśnie, żeby taki przeciętny front-end developer nie musiał się głowić jak zrobić, żeby jego strona działała też w starych przeglądarkach, tylko mógł poświęcić na to minimum wysiłki i zająć się tworzeniem kreatywnych stron. Wiadomo, że wszystkich nas wkurza to, że musimy wykonywać dodatkowe zabiegi ale pamiętajmy, że to zazwyczaj naszym klientom zależy na tym, by ich strona otwierała się "każdemu użytkownikowi" mimo że czasem mija się to z celem bo np. są oni poza targetem marki...

  #17 20.01.2013 15:00

ekborowiecki.pl skąd masz taką wiedzę z jakiego oprogramowania korzysta google twitter czy microsoft? pracujesz tam czy co?

  #18 02.03.2013 03:04

Nie pracuję tam. Wejdź na strony tych projektów - sami się chwalą, że te firmy z tego korzystają.

  #19 13.05.2013 07:10

dzięki wielkie za motyw z IE, prawie zacząłem przerabiać cały projekt na html4/css2... :)