Komentarze warunkowe
Wyobraźmy sobie taki scenariusz: W arkuszu stylów swojej strony skorzystałeś z takich rozwiązań, które dają ciekawe rezultaty i są poprawnie wyświetlane przez Operę oraz Firefoksa, ale nie przez Internet Explorera.
Na przykład w arkuszu tej strony umieszczone zostały właściwości min-width i max-width, powodujące że strona co prawda rozszerza się i zwęża zgodnie z wielkością okna przeglądarki, ale nie bez końca. Dzięki temu można ją wygodnie przeglądać pod rozdzielczością 800×600 pikseli, a jednocześnie "design" nie zostaje zburzony.
Problem polega jednak na tym, że IE nie obsługuje min-width i max-width, powodując brzydkie rozciągnięcie strony przy wyższych rozdzielczościach.
Jaka jest więc na to rada? Korzystać ze skryptów Javy serwujących inny arkusz stylów Internet Explorerowi? A co, jeśli użytkownik wyłączył lub ograniczył obsługę JavaScript?
Prostym i skutecznym sposobem na osiągnięcie tego samego efektu (załadowanie dodatkowego CSS dla Internet Explorera) jest wykorzystanie komentarzy warunkowych (conditional comments). Kod będący częścią takich komentarzy rozpoznawany jest jedynie przez tę przeglądarkę (lub jej konkretną wersję - jeśli tak sobie zażyczymy), a ignorowany przez inne.
Sztuczka polega na tym, by w sekcji <head> umieścić taki komentarz warunkowy, który zawiera odwołanie do zewnętrznego pliku CSS lub po prostu osadzone style, serwujące inny (nieco inny) wygląd strony.
W przypadku letwist.net jest to:
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="themes/seatwist/ie.css" /><![endif]-->
co powoduje załadowanie arkusza, w którym szerokość strony ustalona jest "na sztywno", bez użycia min-width i max-width. Pod Internet Explorerem (w wersji niższej niż 7) strona nie będzie się co prawda rozszerzać i zwężać, ale lepsze to niż nic...
Na stronach MSDN znaleźć można szczegółowe omówienie conditional comments.
A tutaj mała ściągawka:
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> powoduje załadowanie arkusza stylów ie.css w Internet Explorerze w wersji niższej niż 7;
<!--[if lte IE 7]> (...) - w wersji niższej lub równej 7;
<!--[if gt IE 7]> (...) - w wersji wyższej niż 7;
<!--[if gte IE 7]> (...) - w wersji wyższej lub równej 7.
Navigation
User login
Syndicate
Dzięki właśnie to było mi
Dzięki właśnie to było mi potrzebne dzięki za ściągawkę.