Jak tworzyć strony pod MSIE?
Friday, 26. May 2006, 13:56:34
Ten post będę rozbudowywał, albo pisal kolejne posty mające być jego uzupełnieniem. Docelowo stworzę krótki, albo dłuższy, artykuł na ten temat i opublikuję go na swojej stronie, którą muszę kiedyś skończyć.
Artykuł:
Błędy
Nigdy nie należy opierać się na obsłudze błędów w przeglądarkach. Implementacja owej obsługi jest różna w różnych produktach. W dodatku bardzo szybko zmienia się z wersji na wersję. Zawsze trzeba starać się pisać kod zgodny ze standardami. Na chwilę obecną nie znam wyjątków od tej reguły. To właśnie przez różną obsługę błędów pojawia się najwięcej problemów z wyświetlaniem strony pod różnymi przeglądarkami.
Komentarze
Właściwie są dwie (może trzy) implementacje komentarzy. Można jednak napisać taki komentarz, który będzie zgodny ze wszystkimi implementacjami. Komentarze zaczyna się „<!-- ”, a kończy się „ -->”, należy też pamiętać, aby nie stosować w nich znaków „--”. Niestety wiele osób nie stosuje się do tych zaleceń.
Tryby Standard i Quirks
Microsoft Internet Explorer 6, podobnie jak większość innych przeglądarek, pracuje w trybie Standard i Quriks. Różnice między tymi trybami dotyczą głównie interpretacji CSS. Tryb Strict jest dużo bezpieczniejszy, bowiem przeglądarki w tym trybie zachowują się podobniej. Należy więc przełączyć tą przeglądarkę w tryb Strict, który niestety nie jest trybem domyślnym. Robi się to przez umieszczenie na początku deklaracji odpowiedniego doctype, zalecam HTML 4.x Strict albo XHTML 1.0 Strict. Pozostałe deklaracje są różnie interpretowane przez różne przeglądarki.
Internet Explorer 5 i wcześniejsze zawsze pracuje w trybie Quirks, na szczęście te przeglądarki mają już bardzo mały udział w rynku. W każdym razie łatwiej sprawić, aby strona wyświetlała się podobnie we wszystkich przeglądarkach, jeśli jest stworzona w trybie Standard, niż w trybie Quirks.
HTML i XHTML
Microsoft Internet Explorer 6 ma nienajlepszą obsługę HTML i nie posiada obsługi XHTML. Obsługuje jednak strony XHTML w trybie zgodności z HTML. Jeśli jednak wysyłamy do przeglądarki Microsoftu strony XHTML w trybie HTML, należy do innych przeglądarek wysłać je podobnie. Występują pewne różnice w obsłudze błędów, których to różnic lepiej unikać.
Adresy relatywne
Microsoft Internet Explorer ma problemy z adresami relatywnymi. Ustala je odnośnie dokumentu HTML, a nie dokumentu, który ów adres wywołał. Dlatego też, jeśli pliki CSS są w innym katalogu, niż plik HTML, a odwołują się do zewnętrznych plików, trzeba stosować pełne ścieżki dostępu.
CSS
Microsoft Internet Explorer ma słabą implementację CSS 1 i bardzo ograniczoną implementacją CSS2. Zalecam więc pisać strony tak, aby opierały się głównie właśnie na CSS 1. Potem i tak będzie trzeba robić korekty dla przeglądarki Microsoftu. Można jednak dość swobodnie stosować @import i @media.
Korekty dla MSIE
Istnieje dużo sposobów na serwowanie innego kodu przeglądarce Microsoftu, niż innym przeglądarkom. Najepszy z tych sposobów to zastosowanie komentarzy warunkowych. Komentarze te, jeśli pisać je ostrożnie, są przez większość przeglądarek traktowane jak zwykłe komentarze i są poprawne składniowo.
{tutaj umieszczę kilka przykładów}
OBJECT i MS OBJECT
Microsoft Internet Explorer zamiast tagu OBJECT obsługuje swój własny tag, który ja nazywam MS OBJECT. Specyfikacją tagu OBJECT jest to, że jeśli przeglądarka nie jest w stanie wyświetlić zewnętrznego pliku, do ktorego odnosi się ów tag, powinna wyświetlić jego zawartość. Nie powinna też zwrócić widocznej informacji o błędzie. Może być tam kolejny tag OBJECT. Jeśli potrafi wyświetlić ów zewnętrzny plik, nie może wyświetlić zawartości tagu.
Tag Microsoftu służy głównie do wyświetlania kontrolek ActiveX. Nie ukrywa też zawartości tego tagu, jeśli potrafi wyświetlić plik zewnętrzny, do którego tag się odnosi.
Na szczęście nowoczesne przeglądarki interpretują tag Microsoftu jako zwykły tag OBJECT. Jeśli nie będą w stanie wyświetlić pliku, do jakiego się tag odnosi, zwyczajnie wyświetlą jego zawartość. Proponuję więc dwa rozwiązania:
1. Umieścić tag Microsoftu w komentarzach warunkowych tylko dla IE, a zwykly tag w komentarzach warunkowych nie dla IE.
2. Umieścić tag Microsoftu bez komentarzy warunkowych. W samym tagu umieścić komentarze warunkowe nie dla IE, a w tych kometnarzach zwykły OBJECT.
Korekta CSS
Jeśli mimo stoswania elementarnego CSS przeglądarka Microsoftu ma problemy, najlepiej stworzyć dodatkowy arkusz i korzystająć z komentarzy warunkowych przeznaczyć go tylko dla konkretnych przeglądarek Microsoftu. Teoretycznie można wrzucić niestandardowy atrybuty i selektory, ale nie polegałbym na obsludze błędów w przeglądarkach.
Bardzo wiele problemów wynika z niepoprawnego przypisywania przes silnik przeglądarki Microsoftu atrybutu haslayout. Jeśli jakiś element się nie wyświetla poprawnie, w większości przypadków wystarczy w CSS przypisać obiektowy atrybut „zoom: 1;”.
W przypadku starszej wersji przeglądarki, która pracuje w trybie Quirks, pozostaje jeszcze problem z wymiarowaniem. Jeśli obiekt ma obramowanie i padding, będzie trzeba mu zmienić wymiary w stosunku do wersji bazowej, zredukować je o szerokość owych paddingu i obramowania.
Jeśli z pewnych powodów występuje problem z adresami relatywnymi, trzeba będzie dla przeglądarek Microsoftu podać inne adresy, za podstawę przyjmując położenie dokumentu html.
JavaScript
{Napiszę później.}
Microsoft Internet Explorer 7
Ta przeglądarka jeszcze jest w zbyt wczesnej fazie produkcyjnej. Na chwilę obecną potraktowałbym ją jako przeglądarkę zgodną z nowszymi standardami. Można oczywiście poprawiać błędy, jakie ta przeglądarka posiada, ale w finalnej wersji owe błądy może poprawić sam Microsoft. Poza tym, jeśli wiele stron będzie miało problemy z nową przeglądarką Microsoftu, więcej ludzi przesiądzie się na lepszą przeglądarkę, na czym nam, webmasterom, zależy. Da to także większą motywację firmie Microsoft do ulepszenia swojego produktu, na czym nam też zależy. Kiedy pojawi się finalna wersja MSIE 7, będzie trzeba zacząć poprawiać jego błędy.
Artykuł:
Błędy
Nigdy nie należy opierać się na obsłudze błędów w przeglądarkach. Implementacja owej obsługi jest różna w różnych produktach. W dodatku bardzo szybko zmienia się z wersji na wersję. Zawsze trzeba starać się pisać kod zgodny ze standardami. Na chwilę obecną nie znam wyjątków od tej reguły. To właśnie przez różną obsługę błędów pojawia się najwięcej problemów z wyświetlaniem strony pod różnymi przeglądarkami.
Komentarze
Właściwie są dwie (może trzy) implementacje komentarzy. Można jednak napisać taki komentarz, który będzie zgodny ze wszystkimi implementacjami. Komentarze zaczyna się „<!-- ”, a kończy się „ -->”, należy też pamiętać, aby nie stosować w nich znaków „--”. Niestety wiele osób nie stosuje się do tych zaleceń.
Tryby Standard i Quirks
Microsoft Internet Explorer 6, podobnie jak większość innych przeglądarek, pracuje w trybie Standard i Quriks. Różnice między tymi trybami dotyczą głównie interpretacji CSS. Tryb Strict jest dużo bezpieczniejszy, bowiem przeglądarki w tym trybie zachowują się podobniej. Należy więc przełączyć tą przeglądarkę w tryb Strict, który niestety nie jest trybem domyślnym. Robi się to przez umieszczenie na początku deklaracji odpowiedniego doctype, zalecam HTML 4.x Strict albo XHTML 1.0 Strict. Pozostałe deklaracje są różnie interpretowane przez różne przeglądarki.
Internet Explorer 5 i wcześniejsze zawsze pracuje w trybie Quirks, na szczęście te przeglądarki mają już bardzo mały udział w rynku. W każdym razie łatwiej sprawić, aby strona wyświetlała się podobnie we wszystkich przeglądarkach, jeśli jest stworzona w trybie Standard, niż w trybie Quirks.
HTML i XHTML
Microsoft Internet Explorer 6 ma nienajlepszą obsługę HTML i nie posiada obsługi XHTML. Obsługuje jednak strony XHTML w trybie zgodności z HTML. Jeśli jednak wysyłamy do przeglądarki Microsoftu strony XHTML w trybie HTML, należy do innych przeglądarek wysłać je podobnie. Występują pewne różnice w obsłudze błędów, których to różnic lepiej unikać.
Adresy relatywne
Microsoft Internet Explorer ma problemy z adresami relatywnymi. Ustala je odnośnie dokumentu HTML, a nie dokumentu, który ów adres wywołał. Dlatego też, jeśli pliki CSS są w innym katalogu, niż plik HTML, a odwołują się do zewnętrznych plików, trzeba stosować pełne ścieżki dostępu.
CSS
Microsoft Internet Explorer ma słabą implementację CSS 1 i bardzo ograniczoną implementacją CSS2. Zalecam więc pisać strony tak, aby opierały się głównie właśnie na CSS 1. Potem i tak będzie trzeba robić korekty dla przeglądarki Microsoftu. Można jednak dość swobodnie stosować @import i @media.
Korekty dla MSIE
Istnieje dużo sposobów na serwowanie innego kodu przeglądarce Microsoftu, niż innym przeglądarkom. Najepszy z tych sposobów to zastosowanie komentarzy warunkowych. Komentarze te, jeśli pisać je ostrożnie, są przez większość przeglądarek traktowane jak zwykłe komentarze i są poprawne składniowo.
{tutaj umieszczę kilka przykładów}
OBJECT i MS OBJECT
Microsoft Internet Explorer zamiast tagu OBJECT obsługuje swój własny tag, który ja nazywam MS OBJECT. Specyfikacją tagu OBJECT jest to, że jeśli przeglądarka nie jest w stanie wyświetlić zewnętrznego pliku, do ktorego odnosi się ów tag, powinna wyświetlić jego zawartość. Nie powinna też zwrócić widocznej informacji o błędzie. Może być tam kolejny tag OBJECT. Jeśli potrafi wyświetlić ów zewnętrzny plik, nie może wyświetlić zawartości tagu.
Tag Microsoftu służy głównie do wyświetlania kontrolek ActiveX. Nie ukrywa też zawartości tego tagu, jeśli potrafi wyświetlić plik zewnętrzny, do którego tag się odnosi.
Na szczęście nowoczesne przeglądarki interpretują tag Microsoftu jako zwykły tag OBJECT. Jeśli nie będą w stanie wyświetlić pliku, do jakiego się tag odnosi, zwyczajnie wyświetlą jego zawartość. Proponuję więc dwa rozwiązania:
1. Umieścić tag Microsoftu w komentarzach warunkowych tylko dla IE, a zwykly tag w komentarzach warunkowych nie dla IE.
2. Umieścić tag Microsoftu bez komentarzy warunkowych. W samym tagu umieścić komentarze warunkowe nie dla IE, a w tych kometnarzach zwykły OBJECT.
Korekta CSS
Jeśli mimo stoswania elementarnego CSS przeglądarka Microsoftu ma problemy, najlepiej stworzyć dodatkowy arkusz i korzystająć z komentarzy warunkowych przeznaczyć go tylko dla konkretnych przeglądarek Microsoftu. Teoretycznie można wrzucić niestandardowy atrybuty i selektory, ale nie polegałbym na obsludze błędów w przeglądarkach.
Bardzo wiele problemów wynika z niepoprawnego przypisywania przes silnik przeglądarki Microsoftu atrybutu haslayout. Jeśli jakiś element się nie wyświetla poprawnie, w większości przypadków wystarczy w CSS przypisać obiektowy atrybut „zoom: 1;”.
W przypadku starszej wersji przeglądarki, która pracuje w trybie Quirks, pozostaje jeszcze problem z wymiarowaniem. Jeśli obiekt ma obramowanie i padding, będzie trzeba mu zmienić wymiary w stosunku do wersji bazowej, zredukować je o szerokość owych paddingu i obramowania.
Jeśli z pewnych powodów występuje problem z adresami relatywnymi, trzeba będzie dla przeglądarek Microsoftu podać inne adresy, za podstawę przyjmując położenie dokumentu html.
JavaScript
{Napiszę później.}
Microsoft Internet Explorer 7
Ta przeglądarka jeszcze jest w zbyt wczesnej fazie produkcyjnej. Na chwilę obecną potraktowałbym ją jako przeglądarkę zgodną z nowszymi standardami. Można oczywiście poprawiać błędy, jakie ta przeglądarka posiada, ale w finalnej wersji owe błądy może poprawić sam Microsoft. Poza tym, jeśli wiele stron będzie miało problemy z nową przeglądarką Microsoftu, więcej ludzi przesiądzie się na lepszą przeglądarkę, na czym nam, webmasterom, zależy. Da to także większą motywację firmie Microsoft do ulepszenia swojego produktu, na czym nam też zależy. Kiedy pojawi się finalna wersja MSIE 7, będzie trzeba zacząć poprawiać jego błędy.
You must be logged in to write a comment. if you're not a registered member, please 
