Czy zewnętrzne, płynne układy stron CSS, działające na każdej platformie są tylko marzeniem projektantów? Sądzimy, że nie. Wzięliśmy pod lupę narzędzia i zasady, które trzeba znać.
Zaczniemy od prostego twierdzenia: Gdzie byliśmy, jeśli przy tworzeniu naszych stron jeszcze nie korzystamy z CSS-ów? Czas zapomnieć o układach stron opartych na tabelach, sztuczkach z niewidocznymi plikami GIF i przeładowanym znacznikami HTML-u opisującymi czcionki. Stare odeszło w zapomnienie, teraz nastał czas zewnętrznych CSS.
Głównym powodem używania CSS jest to, że World Wide Web Consortium (W3C), oficjalne ciało zajmujące się sieciowymi standardami tego wymaga. W ostatniej wersji XHTML-a, języka opartego na XML-u, który zastępuje HTML-a, wbudowano zaledwie kilka opcji formatowania. Cały układ strony, formatowanie tekstu i justowanie dokonuje się za pomocą CSS. Stosowanie CSS-a przy tworzeniu układu strony jest zgodne z zaleceniami W3C.
Rygorystyczne wersje HTML-a i XHTML-a zostawiają mały wybór w tej kwestii. W XHTML-u 1.0, przejściowej i najczęściej używanej wersji języka znaczników, wszystkie formatowania i wiele funkcji układu strony nie są zalecane. Choć nadal są wspierane, nie znajdą się już w następnej wersji. XHTML 1.1 jest już dostępny i W3C dotrzymało swojej obietnicy – w jego specyfikacji znalazło się zaledwie kilka znaczników formatowania. Zniknął znacznik {html}{/html} oraz powiązane z nim atrybuty koloru i wielkości. Na szczęście, za pomocą stylów CSS-a można formatować, podobnie jak w języku HTML, choć to tylko część ich możliwości.
Reguły CSS
Choć reguły CSS da się zastosować wprost na stronach, zarówno jako style bezpośrednie (ang. inline), jak i osadzone (wstawione w nagłówku strony), najkorzystniejsze jest utworzenie zewnętrznych arkuszy stylów. Idealnym rozwiązaniem jest, gdy strony nie zawierają niczego poza treścią i gołymi oznaczeniami, natomiast w zewnętrznych arkuszach stylów znajdują się jedynie układ strony i informacje o formatowaniu. Oddzielenie treści od formy jest ostatecznym celem obecnych standardów W3C.
Zewnętrzne arkusze stylów mają wiele zalet. Z elementami CSS w blokach pracuje się łatwiej, niż za pomocą mieszanych starych technik, do których przywykliśmy. Tabele w ogóle nie są już wykorzystywane do umieszczania treści. Wszystkie metody, które ewoluowały, są w gruncie rzeczy przeróbkami, umożliwiającymi projektantom obchodzenie tabel. Z drugiej strony CSS został zaprojektowany od zera w celu tworzenia układów stron.
Przy użyciu starych metod, nawet z wykorzystaniem zagnieżdżonych stylów, aby nanieść poprawki lub przebudować serwis, trzeba było edytować każdą stronę osobno. Jeśli używamy zewnętrznego arkusza stylu do zarządzania układem strony, wystarczy wyedytować jedynie jeden plik, w którym można zmienić wygląd wszystkich stron. Schematy kolorów i style tekstu w całym serwisie mogą być zmienione za pomocą niewielkich korekt w pojedynczym pliku.
Te same atrybuty, które pozwalają zarządzać układem strony z poziomu jednego pliku, umożliwiają ponowne wykorzystanie zewnętrznych arkuszy stylów. Jeśli zaprojektujmy wspaniałą stronę, będziemy mogli skorzystać z jej układu na innych stronach. Aby uniknąć prostego kopiowania wygląd może być w dużym stopniu zmieniany poprzez modyfikacje krojów czcionek i kolorów. Co ważniejsze, ustawienia strony mogą być tak dobrane, by uwzględniały różne zewnętrzne arkusze stylów dla różnych mediów. Można korzystać ze stałego układu dla strony WWW i rozproszonego, płynnego układu w przypadku platform mobilnych. Można też użyć różnych arkuszy stylów dla przeglądarek wspierających style złożone (ang. multiple style).
Style
Oczywiście, nie byłoby sieci bez różnego rodzaju niedociągnięć. Jednym z nich jest brak narzędzi projektowych dedykowanych CSS. Można mówić o dobrym wsparciu dla stałych układów stron w CSS i tworzenia stylów w Dreamweaverze i innych dobrych programach do tworzenia stron, ale trudno znaleźć narzędzie do budowania płynnych układów o zmieniających się rozmiarach w środowisku wizualnym. Nawet w Dreamweaverze 8 niektóre układy o zmienne wielkości łamią okno dokumentu, nawet jeśli dobrze działają w przeglądarkach, które są zgodne ze standardami.
Problem jest trochę szerszy, gdy przyjrzymy się sposobom, w jaki przeglądarki traktują CSS. Pewien chaos związany jest ze stopniem wsparcia dla obecnych standardów CSS. Twórcy przeglądarek nie ułatwiają śledzenia, który fragment którego protokołu zdecydowali się ignorować. Jak często bywa, największym winowajcą jest Internet Explorer, a zważywszy na jego dominację na rynku przeglądarek, sprawa jest jeszcze bardziej irytująca.
W3C zaleciło trzy rekomendacje dla CSS. Wsparcie dla CSS3 jest jak dotychczas tak nierówne, że jest on prawie bezużyteczny, choć w kwestii wsparcia na czele jest Mozilla wraz z Firefoksem. Co zaś tyczy się Internet Explorera, mamy wsparcie dla CSS2 z kilkoma istotnymi wyjątkami. Z drugiej strony Firefox i Mozilla borykają się z dwoma nierozwiązanymi starymi problemami ze swoim wsparciem CSS2, przy czym wszystkie wspierają CSS1. W skrócie, użycie składni CSS2 jest teraz względnie bezpieczne przy definiowaniu stylów, tak długo jak trzymamy się z daleka od tych elementów, których jeszcze nie rozpoznaje IE6. Wykaz elementów, które można bezpiecznie użyć umieszczono na stronie W3Schools Reference http://www.w3schools.com/css/css_reference.asp
W przytłaczającej liczbie przypadków użycie CSS-a nie jest bezpieczniejsze niż przestarzałego formatowania HTML. World Wide Web Consortium przestało popierać wiele funkcji formatowania w ostatniej wersji języka oznaczeń. Jednym z najbardziej znaczących atrybutów, który stracił zajęcie, jest \”align\”, stosowany do rozmieszczania tekstu i innych elementów względem siebie. Jednym z popularnych zastosowań tego atrybutu było zawijanie tekstu wokół obrazków. W znaczniku obrazu kod wyglądał jak poniżej:
![\"dummy](\"image.gif\")
Zgodny ze standardami odpowiednik tego w CSS wygląda następująco:
Zauważmy, że atrybut stylu na końcu drugiej linijki jest przykładem zastąpienia atrybutu align. To przykład stylu wbudowanego (ang. inline). Mieszanie tego stylu z zewnętrznymi arkuszami stylów przy formatowaniu nie jest dobrą praktyką, choć takie użycie jest dopuszczalne.
Wyśrodkowanie treści strony to prosty sposób zachowania stałej kontroli nad różnymi aspektami strony, przy jednoczesnym umożliwieniu renderowania na różnych platformach. W najnowszej wersji HTML-a przestano popierać znacznik {html}
Po pierwsze dodajemy tę definicję stylu do naszego zewnętrznego dokumentu CSS:
div#container {
position: relative;
margin: 0 auto;
width: 80%;
}
Po drugie umieszczamy całą zawartość kodu między znacznikami {html}
{/html} z deklaracją {html}
page content here
Po tych zabiegach treść powinna zostać elegancko wyśrodkowana na stronie, w zależności od rozdzielczości ekranu użytkownika. Powyższy kod powinien też dobrze działać w Firefoksie i IE 6, jednak nie w IE5 lub 5.5. Jeśli to jest problem – przykładowo logi rejestrujące ruch na serwisie pokazują, że odwiedza go wielu użytkowników IE 5.5 – można spróbować wyśrodkować stronę, korzystając z text-align w kodzie CSS, tak jak poniżej:
body {
text-align: center;
}
div#container {
position: relative;
margin: 0 auto;
width: 80%
text-align: left;
}
Internet Explorer 5.5 oraz IE6 także renderuje boksy CSS odmiennie od innych przeglądarek. Gdy dodamy wypełnienie do {html}
Płynne kontra stałe
Dla twórców stron świadomych sieciowych standardów utworzenie raczej płynnego niż stałego zewnętrznego CSS-a zasilającego układ strony to kwestia honoru. Być może prostsze wydaje się utworzenie układu strony z wbudowanymi stylami, jednak korzyści z całkowitego oddzielenia układu strony od treści są oczywiste. Profity są jeszcze większe, jeśli owe układy stron można rozszerzać i stosować w każdym środowisku.
Przemawiają za tym względy użyteczności. Zmiany wielkości rozmiaru strony, tak by działała w każdej przeglądarce, oznaczają, że będzie lepiej funkcjonować na wielu platformach – od komputerów stacjonarnych do przenośnych urządzeń. Jednakże uzyskanie takiej elastyczności nie jest proste. Konieczne są dodatkowe testy, by upewnić się, że utworzone strony elegancko zmieniają rozmiary na wielu platformach. Niektórzy projektanci preferują tworzenie częściowo płynnych układów stron z wykorzystaniem CSS-a. To pociąga za sobą konieczność ustalenia stałej
szerokości dla obszaru z treścią, która zastała wyśrodkowana za pomocą kodu, którego użyliśmy wcześniej. Natomiast wysokość jest określana objętością treści.
Którąkolwiek drogę obierzemy, cel powinien pozostać ten sam. Nadszedł czas rozdziału form od funkcji i treści od projektu. A najlepiej zrobić to za pomocą CSS-a.
Źródła
{tlo_1}
1 . MeyerWeb
http://www.meyerweb.com/eric/css
Eric Meyer jest najbliżej zostania oficjalnym guru CSS-a. Jest odpowiedzialny za współtworzenie specyfikacji dla CSS3, a jego strona to skarbnica zawierającą podręczniki i tipsy.
{/tlo}
{tlo_0}
2. W3C
Zrozumienie specyfikacji CSS czasem wymaga sięgnięcia do źródeł. Dział CSS na http://www.w3.org rzuca światło na szczegóły myślenia stojącego za obecnymi poleceniami CSS.
{/tlo}
{tlo_1}
3. CSS Vault
Może trochę natchnienia? CSS jest panaceum twórców stron pod warunkiem, że jest stosowane właściwie. Zajrzyjmy do CSS Vault, by zobaczyć przykłady tego, jak inni ludzie wykorzystają pełnię jego możliwości.
{/tlo}
{tlo_0}
4. HTMLHelp
Web Design Group od dawna udostępnia miejsce obszernym referencjom HTML-a. Przewińmy w dół strony do analogicznego opracowania zawierającego przewodniki i narzędzia CSS.
{/tlo}
{tlo_1}
5. CSS Pointers
CSS Pointers jest tym, czym twierdzi, że jest – zbiorem odnośników do innych zasobów poświęconych CSS. Na samej stronie znajdziemy też trochę tipsów i opracowań.
{/tlo}
CSS w programie Dreamweaver 8
Dreamweaver 8 wprowadził kilka nowych funkcji CSS, dzięki czemu łatwiej jest tworzyć arkusze stylów. Jednak nie wszystko poprawiono…
{tlo_1}
Krok 1
Osobne style CSS i panele edycyjne umieszczono razem. Obecnie bardzo łatwo jest zobaczyć wszystkie zastosowane style do specyficznej zasady i wybrać sposób jej edycji. Można przejść do edytora definicji stylu i zmienić elementy w menu lub zrobić to za pomocą szybkiej edycji we własnościach siatki.
{/tlo}
{tlo_0}
Krok 2
Nowe narzędzia CSS Layout Visualisation ułatwiają wybór pojemnika CSS lub układu strony Dreamweavera. Teraz obramowania układu zmieniają się na czerwony, jeśli naprowadzimy na nie wskaźnik myszy, oraz na żółty, gdy zostaną zaznaczone. Można też włączyć kody kolorów w CSS Box Model i CSS Layout Backgrounds oraz dodać kontrastu do układu strony.
{/tlo}{tlo_1}
Krok 3
Zwiększył się wybór dostępnych szablonów Dreamweavera o gotowe do użycia układy stron. Znajdziemy je w New Document. Najpierw gamę prostych przykładów arkuszy stylów w podstawowych schematach kolorowych i wyborze czcionek. Dalej umieszczono kilka pełnych CSS Page Designs – idealnych dla każdego projektu.
{/tlo}
{tlo_0}
Krok 4
Macromedia twierdzi, że renderowanie CSS i trafność podglądu projektu została poprawiona w Dreamweaverze 8. Być może dotyczy to spozycjonowanych układów stron. Ale nie tłumaczy tego, że niektóre płynne układy stron, które działają w MX 2004 i są dobrze renderowane w przeglądarkach zgodnych z CSS2, wysypują się w Dreamweaver 8.
{/tlo}
Narzędzia CSS
{tlo_1}
1. TopStyle Pro
http://www.bradsoft.com/topstyle
Powszechnie znany jako najlepsze narzędzie do edycji CSS dla bardziej spostrzegawczych twórców w przeszłości. TopStyle dostępny jest w bezpłatnej wersji lite, jak też wydaniu pro.
{/tlo}
{tlo_0}
2. Style Studio CSS Editor
http://www.highdots.com/css-editor
Style Studio może pochwalić się wbudowanym walidatorem CSS, dzięki któremu można sprawdzić istniejące pliki, jak też wbudowaną funkcję konwersji umożliwiającą zmianę starych stron w HTML-u na strony w XHTML-u i CSS.
{/tlo}
{tlo_1}
3. StyleMaster
http://www.westciv.com/style_master
Style Master dostępny jest zarówno dla użytkowników Windows, jak i Mac OS-a. To porządniejszy pakiet, niż niektórzy jego konkurenci. Wyposażono go w przykłady i wiele gotowych fragmentów kodu.
{/tlo}
{tlo_0}
4. Rapid CSS
http://www.blumentals.net/rapidcss
Z pomocą narzędzia Rapid CSS można dokonać prostej edycji wyboru zasad CSS za pomocą interfejsu wzorowanego na programie TopStyle. Wart zainteresowania, jeśli nie możemy pozwolić sobie na szastanie pieniędzmi.
{/tlo}
{tlo_1}
5. HTML-Kit Pro
Nie możemy się nachwalić HTML-Kita. Można go bezpłatnie pobrać w podstawowej wersji, dodać rozszerzenia poszerzające wspieranie CSS. Gdy zarejestrujemy go dla zastosowań profesjonalnych, otrzymamy dostęp do dodatkowych wtyczek.
{/tlo}
