CSS - stylistyka strony

2008-12-22 , Papiewski Łukasz , WEB / PHP / HTML5

Artykukuł ten ma na celu przedstawienie kilkuczęściowej serii kursów dotyczących projektowania stron w CSS (Cascade Style Sheets - Kaskadowe Arkusze Stylów).

Historia

Na początku powstania HTML nie było potrzeby zbytniego upiększania wyświetlanej strony, gdyż Internet nie był za szybki, za popularny i nie było nawet takiej potrzeby dla typowej wymiany informacji. W zamyśle więc kod HTML nie był przystosowany do manipulowania wyglądem np. tekstu , czy atrybutów koloru. Był to strukturalny opis części dokumentu a nie jego wyglądu. W pierwszej wersji składał się z prostych tagów określających gdzie są paragrafy, nagłówki i listy i linki. Nie posiadał żadnych wyszukanych form do prezentacji treści, nie było tabel, ramek i innych elementów, które mogą się dla niektórych wydawać konieczne. Jednak to wszystko miało ulec szybkiej zmianie wraz z dynamiką rozwoju Internetu.

Wraz z coraz większym zainteresowaniem oraz realizacją potencjału jaki w sobie kryje Internet, pojawiało się coraz to więcej stron a tym samym wymogów związanych z ich wyglądem i formą prezentacji. Przede wszystkich potrzebne były takie tagi jaki font,br,i,b,em itp oraz różnorakie atrybuty. Rozwiązanie przez dodanie nowych elementów HTML-a do opisu wyglądu, nie było dość idealne ale usatysfakcjonowało wielu użytkowników. Jak pokazało kolejne lata efektem był gęsto usiany atrybutami i różnorakimi tagami dokument, w którym faktyczny tekst stanowił tylko niewielki procent. Echo tego zjawiska dało się zauważyć pod koniec lat 20 kiedy to liczne strony (najczęściej korporacyjne) można było z punktu kodu HTML zdefiniować jako jeden wielki chaos z gdzieś tam ukazującym się tekstem.

Jednym z czynników wpływających na rozwój standardu wyświetlania (stylistyki) dokumentu HTML była rosnąca konkurencja pomiędzy Netscape i Internet Explorer, efektem czego było prześcigania się we wprowadzaniu nowych to funkcji do swoich przeglądarek zarządzającymi sposobem wyświetlania. Programista przez to był zmuszony do tworzenia kodu pod obie przeglądarki co było stratą czasu. Ze względu na to, często kompatybilność wsteczna jest konieczna, to do dziś borykać się trzeba z samowolką ustalania "jedynego standardu", jak to ma miejsce w przypadku IE6 (czyt. niedoszły Internet Exponent).

Rozwiązanie zostało opracowane w odpowiedzi na taką zaistniałą sytuację, przez World Wide Consortium (W3C) - organizację typu non-profit, ustalającą standardy HTML. Skutkiem było wprowadzenie CSS jako dodatku to czwartej specyfikacji języka HTML. (rok 1996 HTML 4)

Nie należy mieszać struktury ze sposobem wyświetlania gdyż jest to mało uniwersalne. O ile sprawdza się to przy wyświetlaniu strony na monitorach to gorzej jest z wydrukiem, rzutnikiem czy inną rodzajem uzewnętrznienia informacji.

Kolejnym krokiem jest powrót specyfikacji HTML do swych strukturalnych korzeni w postaci XHTML. Znikają tu takie tagi jak font, basefont, u, strike, s, center. Literka X wcale nie jest tu przypadkowa, wyraźnie ma ukazywać dalszą prawidłową drogę ku dokumentom XML. O ile XML można by rzec jest bardziej skomplikowany o tyle bardziej uniwersalny, wydajny. XML został z założenia opracowanych jako format dla uniwersalnego dokumentu. Dzięki temu też, łatwy jest to prze-konwertowania na dowolny inny rodzaj.

CSS, biorąc pod uwagę dzisiejsze trendy będzie ewoluowało przejmując na siebie coraz to więcej obowiązków. Dokładne zrozumienie go umożliwia opanowanie technik pozwalających na bardzo efektowne manipulowanie postaci wizualnej dokumentu.

Przy okazji omawiania możliwości arkuszy stylów warto wspomnieć o takich inicjatywach jak CSS Zen Garden, gdzie potęga CSS wywindowana jest do rang sztuki na równi z umiejętnościami photoshopowców i gimpowców - co trzeba przyznać jest lekkim naruszeniem praw fizyki ale przynajmniej wymownym i obfitującym konsekwentnie w wiele ciekawych rozwiązań. Poza tym ostatnie trendy pokazują, że nawet istnieje pojęcie projektowania strony WWW tylko za pomocą sztuczek CSS3 (gradienty, cienie, fonty, efekty tła)

Proste przykłady jak to kiedyś wyglądało

font-family:Calibri,arial,'sans serif'; 
  color:  #c0c0c0; 
  background: #030303; 
  text-align: center; 
  scrollbar-base-color:#c5c5c5 ;  
  scrollbar-track-color: #030303;  
  scrollbar-arrow-color: #c5c5c5; 
  scrollbar-shadow-color: transparent;  
  scrollbar-highlight-color: transparent; 
  scrollbar-darkshadow-color: transparent;  
  scrollbar-3dlight-color: transparent; 
  font-family: Calibri, arial,'sans serif'; 
  line-height: 1.6; 
  text-align: left; 
  vertical-align: middle; 
  font-size: 13px;

Przykładowy style na kolory tła, tekstu oraz paska przewijania. Jeśli popatrzeć na dedykowane style dla danej przeglądarki, np scrollbar to zaczynało się robić dość gęsto. Dodatkowo wstawki kondycyjne (conditional statement) aby kompletnie pominąć lub dodać oddzielny styl tylko dla danej przeglądarki.

I tak wcześniej było jeszcze gorzej, gdyż to właśnie te style odciążyły programistę od żmudnego przypisywania właściwości każdej sekcji kodu HTML zamkniętej w postaci znacznika. Oczywiści jeżeli potrzebujemy daną opcję (własność opisaną przez CSS ) stosujemy nadal ten trik w postaci np.

<td style="vertical-align:top">

Aby skorzystać z całego 'dobrodziejstwa' styli wstawiamy link w sekcji head z adresem względnym bądź bezwzględnym.

<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">

Oczywiście style można także umieszczać także bezpośrednio w kodzie pliku HTML stosując tag < style >.

Aby dobrze unaocznić sobie jak i gdzie stosować style, musimy po pierwsze mieć na uwadze, iż znaczniki zagnieżdżone (podznaczniki) przejmują daną własność od znacznika nadrzędnego (tego, w którym się znajdują ). Warunkiem koniecznym jest tu posiadanie opisywanego atrybutu, inaczej nie będzie żadnego efektu.
Dodatkowo każdy styl ma swoją moc: i tak najbardziej liczą się style do id, w atrybucie style, potem class.

Dalej należy wspomnieć, także o tym, że CSS dalej ewoluuje. Ostatnią wersją jest wersja trzecia, jednak jeszcze nie zaimplementowana we wszystkich przeglądarkach. Największe rozbieżności są pomiędzy IE a Mozill'ą tak jak w przeszłości między Netscape i IE (komentarz usunięty).

I to kończy, krótką historię stylów CSS. Wniosek jeden ciśnie się na usta: droga firmo M prosimy o nie robienie bałaganu w pisaniu arkuszy stylów i przyjęcie choć raz odgórnych standardów, prosimy się dalej nie kompromitować. I tym optymistycznym akcentem zapraszam do następnego artykuły jak możemy ułatwić sobie pracę ze stylami i nieco znormalizować ten proces

Cytaty

- Simplicity is the ultimate sophistication. - Leonardo da Vinci,
- Popularny człowiek wzbudza zawiść potężnych - Thufir Hawat o Leto Atrydzie (na Kaladanie),
- Szczęście następuje po smutku, a smutek po szczęściu; człowiek jest naprawdę wolny, gdy przestaje rozróżniać między smutkiem a szczęściem, między dobrem a złem - Aforyzmy buddyjskie.