frame|Powyższy obrazek demonstruje różnice pomiędzy zawartością (content; czerwoną) i ramką (border; niebieską) w modelu pudełkowym (box model) – jeden z błędów software’owych implementacji kaskadowych arkuszy stylów CSS. Błędem dotknięte są przeglądarki Microsoft Internet Explorer dla Windows aż do wersji 6, oficjalnie obsługujące style CSS. Internet Explorer 6 i Internet Explorer 7 nie generują błędu podczas renderowania stron w trybie „standards”. Błąd nadal występuje w „quirks mode”. Problem nie dotyczył przeglądarki Internet Explorer dla komputerów Apple Macintosh, jednak przestała być ona rozwijana w 2003 roku.
Bug (błąd) Model pudełkowy CSS opisuje wizualną prezentację elementów strony w przeglądarkach graficznych. Model pudełkowy precyzuje graficzną strukturę elementów blokowych, takich jak p lub blockquote, na którą składają się zawartość (), odstępy (), ramka () i marginesy (). Zgodnie ze specyfikacją CSS1, wydaną przez World Wide Web Consortium w 1996 r. i poprawioną w 1999 r., jeżeli szerokość lub wysokość elementu blokowego jest ściśle zdefiniowana, odnosi się ona do zawartości (content), a następnie dodawane są do niej odstępy, ramka i marginesyCascading Style Sheets, level 1; Håkon Wium Lie, Bert Bos; http://www.w3.org/TR/REC-CSS1-961217#formatting-model.Cascading Style Sheets, level 1; Håkon Wium Lie, Bert Bos; http://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model.. Internet Explorer 5 niepoprawnie ustala szerokość lub wysokość elementu, włączając w obliczenia odstępy i ramkę. Skutkuje to węższymi lub niższymi obiektami na stronieCSS Enhancements in Internet Explorer 6; Lance Silver; http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3..
Obejścia problemu Internet Explorer 6 i Internet Explorer 7 nie wyświetlają tego błędu, jeśli strona zawiera odpowiednią Deklarację Typu Dokumentu (DOCTYPE). Przeglądarki jednak zachowują się niepoprawnie podczas renderowania stron w trybie „quirks”. Dzieje się tak w celu zachowania kompatybilności wstecznejCascading Style Sheet Compatibility in Internet Explorer 7; Markus Mielke; http://msdn2.microsoft.com/en-us/library/bb250496.aspx.. „Quirks mode” zostaje użyty, gdy: brakuje Deklaracji Typu Dokumentu lub jest ona niekompletna; napotkano dokument HTML 3 lub wcześniejszy; użyta Deklaracja Typu Dokumentu to HTML 4.0 Transitional lub Frameset, lecz identyfikator DTD nie został podany; przed Deklaracją Typu Dokumentu pojawi się komentarz SGML lub inny nierozpoznany ciąg znaków; w treści dokumentu występują błędy składniowe. Internet Explorer 6 także używa trybu „quirks”, jeśli przed sekcją DOCTYPE napotkany zostanie prolog XML!DOCTYPE http://web.archive.org/web/20011221150001/http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/doctype.asp
Wymyślono wiele różnych trików, wymuszających na Internet Explorerze 5 poprawne wyświetlanie stron. Triki te wykorzystują głównie błędy obsługi selektora CSS zaimplementowanego w Internet Explorerze i polegają na ukrywaniu części kodu przed przeglądarką. Najbardziej popularnym trikiem jest „box model hack” stworzony przez . Çelik wpadł na pomysł napisania pomocnego kodu podczas pracy nad Internet Explorerem dla komputerów Macintosh w firmie Microsoft, której ten problem nie dotyczy. Rozwiązanie polega na zdefiniowaniu szerokości elementu dla przeglądarki Internet Explorer pod Windows, a następnie nadpisaniu jej kolejną definicją szerokości dla przeglądarek poprawnie obsługujących CSS. Ta druga deklaracja jest ukryta przed Internet Explorerem pod Windows dzięki wykorzystaniu buga w parserze reguł CSS. Sens implementacji tego rozwiązania w kolejnych projektach został podważony z uwagi na powstanie Internet Explorera 7, w którym poprawiono niektóre błędy.
Wykorzystywanie podobnych haków () nie jest wskazane, gdyż opierają się one na błędach implementacji CSS w przeglądarkach, które w przyszłości prawdopodobnie zostaną usunięte. Z tego powodu niektórzy web developerzy rekomendowali unikanie jednoczesnego definiowania szerokości i odstępów w danym elemencie lub używanie komentarzy warunkowych () albo filtrów CSS () do obejścia problemuInternet Explorer and the CSS box model; Roger Johansson; http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/.Hack-free CSS for IE; Arve Bersvendsen; https://web.archive.org/web/20070115183512/http://virtuelvis.com/archives/2004/02/css-ie-only..
Poparcie dla modelu pudełkowego Internet Explorera Zawodowi web designerzy Douglas Bowman i Ethan Marcotte doszli do wniosku, że model pudełkowy, reprezentowany przez Internet Explorera, wydaje się być bardziej logicznym podejściem niż rozwiązanie w specyfikacji CSS.Vorsprung durch Webstandards; Douglas Bowman; https://web.archive.org/web/20100614070042/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/.Vorsprung durch Webstandards; Ethan Marcotte; https://web.archive.org/web/20080211164541/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/ethan-marcotte/. Przykładem, którym posługuje się Peter-Paul Koch, jest fizyczne, rzeczywiste pudełko, którego wymiary zawsze odnoszą się do samego pudełka z ewentualnymi odstępami, ale nigdy do samej jego zawartościCSS2 – Box model tweaking http://www.quirksmode.org/css/box.html.. Takie podejście pozwala na używanie wymiarów względnych pudełka i sztywno ustawionych odstępów zarazem, co nie jest możliwe w modelu przyjętym przez W3C (bez użycia trików)CSS Box Model http://www.washington.edu/webinfo/snippets/css/boxmodel.html.. Peter-Paul Koch twierdzi, że taka idea modelu pudełkowego jest bardziej użyteczna dla grafików, którzy projektują layouty, bazując raczej na widocznych na ekranie szerokościach poszczególnych bloków, a nie na domniemanej szerokości ich przyszłej zawartościVorsprung durch Webstandards; Peter-Paul Koch; https://web.archive.org/web/20100227061437/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/.. Kolejnym argumentem „za”, podanym tym razem przez Berniego Zimmermanna, jest fakt podobieństwa tej idei do idei działania wymiarów i odstępów komórek w tabelach HTML. Sposób wyświetlania komórek został zawarty w specyfikacji W3C i zaimplementowany w większości przeglądarekBox Model Enlightenment; Bernie Zimmermann; https://web.archive.org/web/20101227135212/http://www.bernzilla.com/item.php?id=33..
We wczesnych szkicach CSS3 Box Model Specification i Basic User Interface Module, W3C rozważało wprowadzenie możliwości jawnego wyboru modelu pudełkowego, którego twórca zamierza użyć. Służące temu nowe właściwości noszą nazwy: box-width oraz box-height. Nie są one jednak zawarte w obecnym szkicu CSS3.
Przypisy
Linki zewnętrzne Tantek Çelik’s opis „box model hack” – artykuł na temat radzenia sobie z błędami IE.
Cascading Style Sheet Compatibility in Internet Explorer 7 – artykuł MSDN, lipiec 2006.
Kategoria:Błędy programów komputerowych Kategoria:HTML Kategoria:Języki arkuszy stylów Kategoria:Internet Explorer