Rozdzielenia struktury i prezentacji dokumentu
Dlaczego menu nawigacyjne powinno się wykonywać na liście (wykaz)?
W tym rozdziale chciałbym przedstawić to, co stanowi faktyczną potęgę CSS - praktyczne zastosowanie koncepcji rozdzielenia struktury i prezentacji. Wspólnie postaramy się dla raz ustalonego kodu HTML, zawierającego odnośniki menu nawigacyjnego, zaprojektować kilka osobnych arkuszy stylów, dzięki czemu ten sam kod HTML za każdym razem będzie się prezentował zupełnie inaczej.
Być może zapytasz teraz: jaki jest tego cel? Wyobraź sobie, że Twój serwis internetowy zawiera 100 podstron z artykułami. Na każdej podstronie zostało wstawione menu nawigacyjne. Jeśli teraz zechcesz zmienić jego wygląd, co będzie lepiej zrobić: modyfikować ręcznie 100 plików, czy dokonać zmiany tylko w jednym - zewnętrznym arkuszu stylów? No dobrze, stronę można wykonać w technologii ramkowej lub korzystając ze skryptów na serwerze, takich jak PHP - wtedy również będzie wystarczyło zmienić tylko jeden plik. Są jednak przynajmniej dwa dodatkowe powody, dla których czyste rozwiązanie CSS jest korzystniejsze:
- Przeniesienie całego formatowania do zewnętrznego arkusza stylów zmniejszy rozmiar wszystkich podstron, dzięki czemu będą się ładować szybciej, a dodatkowo ewentualna opłata za transfer, którą właściciel serwisu (czyli Ty) płaci firmie hostingowej, będzie niższa.
- Dzięki obsłudze mediów będzie można przygotować osobny arkusz stylów dla wydruku lub dla urządzeń przenośnych, gdzie menu nawigacyjne powinno wyglądać zupełnie inaczej. Znacznie łatwiej jest przygotować nowy arkusz CSS, niż przerabiać wszystkie strony serwisu i potem jeszcze pamiętać, aby przy każdej aktualizacji witryny nanieść poprawki we wszystkich powstałych wersjach dokumentów.
Zacznijmy więc od przygotowania kodu HTML z odnośnikami, który będzie zupełnie pozbawiony formatowania:
<ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul>
Rezultat bez stylizacji jest następujący:
Kod ten będzie wykorzystywany we wszystkich przykładach, zawartych dalej w tym rozdziale. W rzeczywistych warunkach warto jeszcze dodać do znacznika <ul>...</ul> identyfikator lub klasę CSS, aby poprzez stylizację menu nie zaburzyć normalnego wyświetlania wykazów, które mogą się znaleźć w treści artykułów na stronie oraz aby mieć możliwość wstawienia kilku różnie wyglądających bloków menu w jednym dokumencie.
Dlaczego w ogóle do reprezentacji menu wybiera się listę nieuporządkowaną (wykaz)? Ponieważ jest to poprawne semantycznie. Poprawność semantyczna to stosowanie znaczników zgodnie z ich przeznaczeniem, czyli np. do tworzenia menu wykorzystuje się listę, a nie tabelkę. Lista to zbiór następujących po sobie pozycji, a więc zastosowanie jej do prezentacji pozycji menu jest jak najbardziej prawidłowe. Domyślne ułożenie punktów listy będzie wygodne w przeglądarkach tekstowych, które nie obsługują CSS. Będzie to również wygodne dla niewidomych, którzy do czytania stron internetowych używają syntezatorów mowy. Do tworzenia menu na pewno nie nadaje się znacznik <br>, ponieważ wtedy zmiana wyglądu za pomocą CSS byłaby możliwa tylko w niewielkim stopniu - nie można by np. stworzyć menu poziomego. Nie jest również dobrym pomysłem zastąpienie listy zwykłymi elementami <div>...</div>, ponieważ w przeciwieństwie do listy, nie niosą one ze sobą żadnego znaczenia semantycznego.