ParanoyaBLOG

programmare necesse est,
vivere non est necesse

 

Internet Explorer i CSS3

 

CSS3 wprowadza wiele nowych funkcji ułatwiając webdeweloperom stylowanie stron internetowych. Jako, że niestety nie został on jeszcze uznany za standard cała ta funkcjonalność nie jest dostępna w poszczególnych przeglądarkach, a to z czego możemy skorzystać zazwyczaj wywołujemy dodając odpowiedni prefix (np. -moz). Pomęczyć się z prefixami zawsze można, szczególnie że dodając kilka linii kodu do pliku css zaoszczędzamy sporo czasu uzyskując pożądany efekt bez niepotrzebnego kombinowania.

 

Z większością przeglądarek problemu nie ma, sytuację jednak komplikuje (jak zawsze) dzieło firmy Microsoft. Firma ta stara się jak może, ale spora część rynku jest „opanowana” przez starsze wersję ich aplikacji, które nie są w stanie wyświetlić jakiegokolwiek stylu wprowadzonego przez CSS3.

 

Problem ten omijany jest różnymi trikami, mykami i czarymarami. Przeglądając jednak kilka strona można zauważyć, że bardzo często używany jest skrypt „PIE.htc”. Pozwala on uzyskać kilka, najbardziej chyba, pożądanych efektów CSS3 na starszych wersjach przeglądarki Internet Explorer:

  • zaokrąglone rogów (border-radius);
  • cienia (box-shadow);
  • gradnient (linear-gradient);

 

Żeby użyć tego cuda należy:

  1. Zdefiniować style CSS3 określając odpowiednie parametry dla danego elementy html;
  2. Dodać dyrektywę: behavior: url({sciezka do pliku PIE.htc});

 

I niby wszystko ładnie i pięknie jednak należy zwrócić na kilka rzeczy szczególną uwagę. Po pierwsze i najważniejsze ścieżka do pliku jest ścieżką względną odnośnie dokumentu html a nie pliku css. Druga równie ważna rzecz: plik htc musi się przedstawiać przeglądarce typem mime „text/x-component„. Przydatny tu może się okazać wpis do pliku .htaccess: AddType text/x-component .htc . Trzeba również wspomnieć, że w niektórych przypadkach należy użyć prefixu -pie.

 

Więcej informacji na temat PIE.htc można znaleźć na stronie: http://css3pie.com

 

Brak komentarzy to “Internet Explorer i CSS3”

Komentarze zostały wyłączone.

Zostaw komentarz