NEXT 3/2007 - Kłopotliwe ramki

Konsorcjum W3C opracowuje odpowiednie standardy tworzenia kodu HTML, jednak nie wszyscy producenci przeglądarek internetowych implementują je w jednakowym stopniu. Pokażemy, co zrobić, aby witryna w każdej przeglądarce wyglądała tak samo.

W założeniach XHTML i CSS miały rozwiązać problemy z wyświetlaniem stron na różnych urządzeniach i przeglądarkach poprzez oddzielenie warstwy prezentacyjnej od ich treści. Ale tak się nie stało. Przeglądarki jeszcze nie do końca prawidłowo interpretują standardy, a już najgorzej radzi sobie z tym Internet Explorer: sporo osób używa jeszcze starszych jego wersji, które CSS interpretują źle albo wcale.

Jak wygląda ramka w CSS?

W 1996 r. konsorcjum W3C opublikowało specyfikację CSS, w której zaproponowano, aby każdy element na stronie (akapit, lista, nagłówek itp.) zamieszczany był w ramce. W jej skład wchodziła zawartość (content), dopełnienie (padding), krawędź (border) oraz margines (margin). Każdemu z tych elementów można przypisać wartość. Teoretycznie wydaje się to proste. Praktycznie model ramkowy może być kłopotliwy i nie zawsze można polegać na własnych odczuciach i wczesnych implementacjach. Na przykład, aby określić całkowitą szerokość ramki, należy zsumować wszystkie wartości. Jeżeli zawartość ma 300 pikseli, dopełnienie 25 pikseli z każdej strony, a krawędź 2 piksele, to całkowita szerokość wyniesie 354 piksele. Można sobie też zaplanować, że zawartość ma 67 proc. szerokości strony, rozmiar dopełnienia to 5em, a krawędź – 1 piksel. Ile wyniesie wtedy całkowita szerokość ramki? Dużo będzie zależało od szerokości okna przeglądarki i domyślnej wysokości tekstu. Co więcej, górne i dolne marginesy sąsiadujących elementów mogą się nakładać, a wartość szerokości nie ma znaczenia, jeśli ramka jest pusta.

Rozwiązanie problemu z IE

Niestety, przeglądarki Internet Explorer 6.0 używa na świecie i w Polsce całkiem spora grupa internautów. Kłopot natomiast polega na tym, że zaimplementowano tam inny, a więc błędny model ramkowy. Szerokość ramki jest bowiem ustalana wraz z dopełnieniem.

Ta reguła zadziała, ponieważ jest bardziej szczegółowa od pierwszej, więc będzie miała pierwszeństwo. Oczywiście nie trzeba takiego rozwiązania stosować, jeśli wartość dopełnienia i krawędzi jest ustalona na 0. Jeżeli bierzesz pod uwagę bardzo stare przeglądarki (IE w wersji 4.0 i starsze), to możesz użyć instrukcji @import, która spowoduje, że ukryjesz przed nimi CSS. Po prostu aplikacje te nie potrafią obsłużyć instrukcji. Nie trzeba więc stosować rozwidlenia kodu czy skryptu wykrywającego rodzaj przeglądarki.

Błąd znaków odstępu w IE

Teoretycznie te dwa fragmenty kodu powinny być równoważne:

<td><imgsrc="tlo.gif" /></td>
oraz
<td> <imgsrc="tlo.gif" /> </td>

Praktycznie jednak nie. Błąd ten jest znany od czasów przeglądarki Netscape Navigator 3.0, a kiedy Microsoft postanowił stworzyć swoją, to skopiowano większość jej zachowań, w tym również błędne. Podobnie jest w Internet Explorerze 6. Jeśli strona jest źle wyświetlana, to należy usunąć znaki odstępu (spacje) i końca linii (enter). Taki kod jest znacznie trudniej modyfikować i czytać, ale nie ma innego wyboru. Ostatecznie można zaoszczędzić też kilka bajtów – często białe znaki usuwa się właśnie tylko w tym celu.

Ocena:    (aby ocenić, musisz się zalogować w serwisie)

 del.icio.us |  Wykop mnie |  Digg this story |  dodajdo.com

• Bez przewodów, bez kłopotów »
  rozwiązywanie problemów z sieciami WiFi
• Sieciowy magazyn »
  pojedynek urządzeń do składowania danych w sieci
• Udane zakupy »
  jak planować zakupy podzespołów
• Wirtualnie i bez problemów »
  rozwiązujemy problemy związane z konwersją
• WiFi pod kontrolą »
  diagnostyka i rozwiązywanie problemów