Perfection or Vanity

Internet Explorer - ukochana przeglądarka, której nie sposób zignorować (jaka szkoda, prawda?). Piszesz zgodnie ze specyfikacją, skończyłeś - klikasz na niebieskie „e” i pozostaje wyrwać sobie włosy. Postanowiłem więc zebrać kilka porad dotyczących tworzenia stron zgodnych ze standardami, nie powodujących u IE czkawki.

Termin „pisanie stron pod IE” który pojawia się tutaj nie odnosi się oczywiście do oldschoolowych napisów „Tę stronę należy oglądać w IE 3.0 i rozdzielczości 916x666px”. Po prostu znając tylko standardy sieciowe trudno jest zmusić poprawny dokument żeby dobrze wyświetlił się w przeglądarce nastawionej na niepoprawne strony. W artykule założyłem operowanie na IE6.0/win. Wiem, że czasem potrzeba zgodności z IE5.x, lecz należałoby napisać wiele więcej tekstu o różnicach. Gdzie będę mógł, zaznaczę problem z poprzednimi wersjami przeglądarki MS.

Wypisane tutaj porady są bardziej podpowiedziami niż wytycznymi. W większości przypadków da się znaleźć inny sposób rozwiązania problemu, bądź ugryźć go od drugiej strony. To co zebrałem to osobiste doświadczenia w takim pisaniu stron, aby dostosowywanie ich pod IE było kwestią kilku linijek CSS-a w oddzielnym arkuszu niż kilkugodzinnym hakowaniem.

Costa w swoim ostatnim e-mailu poskarżył mi się na nieprawidłową obsługę overflow: auto w Internet Explorerze. Wynalazł hacka aby IE zaczął respektować zasady wystającej treści poprzez nadanie jej szerokości.

1. <!--[if lte IE 6]>
2. <style type="text/css">
3. pre {
4. width: 100%;
5. }
6. </style>
7. <![endif]-->

Lecz nie jest to rozwiązanie optymalne. Problemem tutaj występującym jest dodanie scrollbarów także w pionie. Głównie przez to że po zaaplikowaniu szerokości element dostaje layout i renderowanie wariuje (screen). Wygląda to paskudnie i równie paskudnie się takie pole obsługuje.

Max-width pozwala ustawić maksymalną szerokość dla elementu - gdy zawartości jest mniej, blok zmniejsza się do niej dopasowując. Jeśli natomiast zawartości jest tyle, że wychodzi poza ustawioną wartość, blok przestaje się rozszerzać zatrzymując na maksimum. W ten sposób można zbudować prosty layout, który będzie dość szeroki, żeby wygodnie pomieścić trzy kolumny, ale na rozdzielczościach DTP nie spowoduje powstania lotniska - nie do przeczytania.

Wcześniej: część I (wprowadzenie), część II (rozwinięcie i techniczne informacje).

Mimo, że miało być tutaj dalsze tłumaczenie postanowiłem, że lepiej dać coś od siebie, a nie na sucho przeklepywać słowa. Więc jak pamiętamy z poprzedniej części, aby zaaplikować layout możemy skorzystać z jednej z właściwości CSS. W tym miejscu polecam stosowanie przede wszystkim komentarzy warunkowych. Aplikowanie layoutu elementom przez błędy parsowania CSS może i działają, ale jest to rozwiązanie krótkowzroczne, o czym można się przekonać na przykładzie IE7.

Na IEBlogu pojawił się oficjalny post dotyczący zmian odnośnie obsługi CSS w siódmej odsłonie przeglądarki Microsoftu. Wygląda to mniej więcej tak:

Składając strony internetowe na podstawie przygotowanych plików graficznych (mówi się: tnąc je) często dochodzi się do wniosku, że danego efektu nie można osiągnąć przez CSS, bądź nie wszędzie. Styl linii border-style: dotted jest jednym z nich. Do tego różni się znacznie w trzech głównych przeglądarkach co jeszcze bardziej pogarsza sprawę.

Szerokość obramowania 1px, kolor #666 dla pojemnika na tle #EFEFEF o automatycznej szerokości i wysokości ustawionej przez parę <br/>: