Box model to zagadnienie mocno teoretyczne, ale mające przełożenie na realne działania w świecie CSS i HTML-a. Zacznijmy od tego, że w HTML-u wyróżniamy elementy blokowe i liniowe.
Elementy blokowe, jak P, DIV czy FORM przyjmują postać prostokątów, którym możemy nadać szereg właściwości – np. width, height, padding, border. Nie możemy ich natomiast nadać elementom liniowym.
Box model jest sposobem interpretacji wyżej wymienionych właściwości przez przeglądarki internetowe. Przeglądarki robią to na dwa różne sposoby. Tylko jeden z nich jest poprawny, zgodny ze standardem CSS. Drugi został wymyślony przez autorów Internet Explorera.
Według specyfikacji języka CSS właściwości width, height, padding i border są od siebie niezależne. Posłużę się prostym przykładem. Spójrz na ten kod:
| div { width: 200px; padding: 20px; border: 2px } |
Właściwość width rezerwuje miejsce przeznaczone tylko i wyłącznie dla treści. Aby dowiedzieć się, jaka będzie całkowita szerokość elementu, musimy do głównej szerokości dodać szerokość wewnętrznego odstępu i obramowania. Zdefiniowany DIV zajmie więc razem 200px + 20px * 2 + 2px * 2, czyli 244 piksele.
Oprócz trybu standard istnieje jeszcze drugi sposób interpretacji box modelu. Otóż przeglądarka Internet Explorer odejmuje właściwości padding i border od width. To znaczy, że w naszym przykładzie DIV będzie mieć szerokość 200px, a miejsce przeznaczone na treść zmniejszy się o 44 piksele, czyli szerokość obramowania i odstępu.
Powyższe różnice w interpretacji box modelu mogą być przyczyną wielu problemów z wyglądem Twoich stron. Ignorowanie powyższej różnicy jest jednym z poważniejszych błędów początkujących, którzy chcą określać wygląd strony tylko przy użyciu stylów. Powtórzmy więc to jeszcze raz:
Normalne przeglądarki:
szerokość całkowita = width + padding + border
miejsce na treść = width
Internet Explorer:
szerokość całkowita = width
miejsce na treść = width – padding – border
Jak sobie z tym poradzić?
Na szczęście z opisanym problemem można sobie poradzić i to na kilka różnych sposobów. Pierwszy sposób polega na takim tworzeniu kodu, aby nie podawać właściwości width i padding lub border jednocześnie dla jednego elementu.
Drugą możliwością jest użycie specjalnych hacków, niestandardowych sztuczek w CSS, które umożliwiają zdefiniowanie powyższych właściwości osobno dla IE i osobno dla pozostałych przeglądarek.
Trzeci sposób polega na użyciu komentarzy warunkowych, które nie zawsze są wygodne, ale niekiedy naprawdę przydatne.
Czwarta metoda – zmuszenie Internet Explorer do przejścia w tryb zgodności ze standardem CSS. Jest to możliwe tylko w przypadku szóstej i siódmej wersji tej przeglądarki, ale na szczęście mało kto używa IE 5 i nie ma już sensu przejmować się tą wersją przeglądarki.
Metoda 1: sprytne użycie właściwości
Zwróć uwagę na taki kod HTML:
| <div id=”jeden”> <p>Tu znajduje się treść.</p> </div> |
Kod CSS mógłby w jego przypadku wyglądać na przykład tak:
| #jeden { width: 300px; height: 100px; padding: 10px; background: red; } #jeden p { margin: 0; } |
Ustaliłem margines dla akapitu, aby zniwelować domyślne style przeglądarki. Efekt działania powyższego kodu będzie różny dla Internet Explorer i innych przeglądarek:
Obrazek po lewej stronie przedstawia wygląd pudełka z przeglądarce Firefox, a po prawej w IE.
Co z tym zrobić ? Zamiast dla DIV-a, ustalmy odstęp dla akapitu. Akapit nie ma zdefiniowanej szerokości, więc problem powinien zniknąć:
| #jeden { width: 300px; height: 100px; background: red; } #jeden p { padding: 10px; } |
Efekt:
Jak widać, wygląd DIV-a w normalnych przeglądarkach zmienił się na taki sam, jak w IE. Jednak nie to było naszym celem. To raczej efekt w IE powinien się dopasować do tego prawidłowego.
Stosowanie wyżej opisanej metody ma sens, ale często może być kłopotliwe, ponieważ niepotrzebnie komplikuje kod.
Metoda 2: hackujemy CSS
Ten zbiór metod opisuję tylko dla formalności. Nie warto ich już stosować, ponieważ poniższe sztuczki nie zadziałają w siódmej wersji przeglądarki Internet Explorer. Hacki bazują na tym, że IE do wersji 6 nie potrafi poprawnie poradzić sobie z niektórymi elementami CSS – części nie interpretuje, a cześć interpretuje źle.
My możemy to oczywiście wykorzystać, aby zdefiniować osobne style dla IE lub osobne dla normalnych przeglądarek.
Wykorzystanie selektora gwiazdki. Sztuczka ta jest również określana, jako Tan Hack. Jest ona bardzo prosta:
| * html { …to zobaczy tylko IE… } |
Kod umieszczony wewnątrz takiej reguły zadziała tylko i wyłącznie w przeglądarce IE, ponieważ nowoczesne przeglądarki dobrze wiedzą, że element HTML nie ma nad sobą żadnego innego, czyli jest zawsze pierwszy w strukturze elementów.
Wykorzystanie selektora dziecka. Ten hack bazuje na tym, że IE 6 nie rozumie tak zwanego selektora dziecka. Następujący kod zadziała więc tylko w nowoczesny przeglądarkach:
| #body > div { …tego na pewno nie zobaczy IE… } |
Pokazują Ci te hacki tylko dla formalności i przykładu. Nie używaj ich.
Metoda 3: komentarze warunkowe
Jak zapowiedzieli twórcy nowej wersji IE, wszystkie hacki niedługo przestaną być rozpoznawane przez tę przeglądarkę. Warto więc znaleźć inne metody na dostosowywanie stron do IE.
Rozwiązaniem mogą być komentarze warunkowe. Są one modyfikacją zwykłych, HTML-owych komentarzy i są interpretowane tylko i wyłącznie przez IE od wersji 5 w górę.
Przykład:
| <!–[if IE]> … ten kod zadziała tylko w IE… <![endif] –> |
Można to wykorzystać, aby dodać do dokumentu specjalny arkusz stylów:
| <!–[if IE]> <link rel=”stylesheet” href=”style-ie.css” type=”text/css” /> <![endif] –> |
Możemy do tego dołożyć wybór konkretnej wersji IE:
| <!–[if IE 6]> …zadziała tylko w IE 6… <![endif] –> |
Do bardziej szczegółowego określenia wersji przeglądarki możemy użyć operatorów. Jeśli miałeś do czynienia z jakimś językiem programowania, to na pewno w zrozumiesz, o co w tym chodzi.
Dla przykładu operator gt sprawdza, czy wersja IE jest większa od zdefiniowanej w komentarzu:
| <!–[if gt IE 5.0]> …zadziała w każdej wersji IE wyższej, niż 5.0… <![endif] –> |
Z kolei operator lt sprawdzi, czy wersja IE jest mniejsza od podanej:
| <!–[if lt IE 5.0]> …zadziała w każdej wersji IE wyższej, niż 5.0… <![endif] –> |
Wszystkie dostępne operatory:
gt – wersja większa od podanej,
gte – wersja większa lub równa podanej,
lt – wersja mniejsza od podanej,
lte – wersja mniejsza lub równa podanej,
! – wersja różna od podanej.
Metoda 4: przejście w tryb zgodności ze standardami
Omówimy teraz ostatnią, czwartą metodę radzenia sobie z problemami IE w interpretacji box modelu. Nie zadziała ona w wersjach programu niższych od 6, ale tym się nie przejmuję.
Jestem zdania, że za dostosowywanie kodu do IE 5.5 (nie mówiąc już o niższych wersjach) klient powinien zawsze słono dopłacać.
Metoda ta polega na modyfikacji DOCTYPE dokumentu. Jeśli chodzi o HTML 4.01, to następujące rodzaje DOCTYPE sprawiają, że IE przechodzi w tryb zgodności:
| <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Frameset//EN”> <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN” „http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN” „http://www.w3.org/TR/html4/loose.dtd”> |
Tak więc tryb zgodności jest zależny od użytej wersji języka i tego, czy w DOCTYPE występuje adres kierujący do specyfikacji. IE przechodzi w tryb zgodności w przypadku wersji frameset bez adresu, transistional z adresem i zawsze w przypadku wersji strict.
Sprawa jest prostsza w przypadku języka XHTML. Przy każdej wersji DOCTYPE IE przechodzi w tryb zgodności po usunięciu prologu XML. Tak podany DOCTYPE nie zapewni zgodności:
| <?xml version=”1.0″ encoding=”utf-8″?> <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
Ale sam DOCTYPE bez prologu jak najbardziej:
| <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
Liczę na to, że teraz dobrze rozumiesz zagadnienie box modelu i budowa poprawnych, dobrze działających i łatwych do modyfikacji stron będzie dla Ciebie bardzo prosta.
Artykuł jest fragmentem książki autorstwa Bartłomieja Dymeckiego. Autor tekstu prowadzi także blog blog BelloisNadaje.pl poświęcony projektowaniu stron, użyteczności i ebiznesowi.
