Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)

CSS

Artykuł jest omówieniem CSS na potrzeby prezentacji firmowej w I 2011. Zakładam że czytelnik jest informatykiem średnio obeznanym z HTMLem. Stawiam na zwięzłość, więc nie znajdziesz tu bardziej rozbudowanych przykładów rozdmuchujących książki do słusznych rozmiarów.
Ostatnia modyfikacja: 24 styczeń 2011.

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to deklaratywny język służący do opisu formy prezentacji stron WWW.

Po co?

Początkowo (lata 1990-1993) HTML był autentycznie strukturalnym językiem znaczników. Pod wpływem rosnących wymagań internautów i wobec możliwości oferowanych przez systemy okienkowe i nowsze przeglądarki, specyfikacje HTML 3.2 i 4.0 objęły swym zakresem dodatkowo aspekty prezentacyjne takie jak zmiana koloru i wielkości tekstu (element <font>), regulowanie odległości tekstu od ramek tabeli, migotanie tekstu itp.

Mieszanie struktury dokumentu z jego prezentacją ma poważne wady:

  • niewygodna pielęgnacja (np. rozważ zmianę schematu kolorystycznego wszystkich stron witryny na okoliczność nadchodzących świąt),
  • chciałoby się tą samą treść prezentować w różny sposób na różnych nośnikach (ekran, drukarka, a zwłaszcza urządzenia mobilne o bardzo różnych charakterystykach, np. monochromatyczny czytnik książek Amazon Kindle),
  • mała dostępność dla osób niepełnosprawnych,
  • wyszukiwarka taka jak Google jest w pewnym sensie najbardziej aktywnym niewidomym użytkownikiem Internetu, posiadającym miliony przyjaciół, którzy korzystają z jej wskazówek dotyczących przeglądania sieci czy robienia zakupów.

Lekarstwem na taki stan rzeczy jest oddzielenie warstwy strukturalnej, informacyjnej i semantycznej od warstwy prezentacyjnej. Za tą drugą odpowiedzialny jest język CSS, a pierwszą na powrót staje się HTML.

Już w 1996 r. W3C zalecało korzystanie z CSS w takim samym stopniu jak z HTML, choć nowe trendy przyjmowały się wolno do czego oprócz inercji poznawczej webmasterów przyczynili się również twórcy przeglądarek. Nowsze przeglądarki (w tym MSIE 8) implementują już CSS 2.1, większość nowszych przeglądarek jest zaawansowana w obsłudze CSS 3.

Zalety używania CSS:

  • oferuje znacznie większe możliwości formatowania tekstu niż HTML miał kiedykolwiek,
  • pozwala zapisać wszystkie reguły określające wygląd dokumentu w jednym pliku tekstowym dołączanym później do dokumentów HTML aby w ten sposób w jednym miejscu określić wygląd wszystkich stron witryny,
  • na ogół wyraźnie redukuje ilość kodu HTML co pozytywnie wpływa na koszty utrzymania serwerów, obciążenie łącza i szybkość renderowania stron w przeglądarkach,
  • pozwala rozdzielić kompetencje osób zajmujących się utrzymywaniem zawartości informacyjnej serwisu od osób odpowiedzialnych za wygląd.

Związek CSS z HTML

Reprezentacja graficzna elementu

Model pojemnika elementu

Model pojemnika elementu

Każdy element HTML na stronie WWW otrzymuje swoją reprezentację graficzną w postaci pojemnika (ang. box). Pojemnik podczas procesu renderowania zajmuje swoje miejsce, określone przez przepływ dokumentu (ang. document flow), i ma wpływ na położenie innych, otaczających go elementów. Zwykle pojemniki są tak rozmieszczone, by nie zachodziły na siebie nawzajem i zajmują tak mało miejsca, jak to tylko możliwe. Wewnętrzna część każdego pojemnika elementu, która zawiera jego treść, nazywana jest obszarem zawartości elementu (ang. content area). Może on być opcjonalnie otoczony dopełnieniem (ang. padding, wpycha do środka to co znajduje się wewnątrz elementu), obramowaniem (ang. border – może mieć swoją szerokość, styl i kolor) oraz przezroczystymi i tworzącymi pustą przestrzeń wokół elementu marginesami (ang. margins, odpychają wszystko co znajduje się wokół elementu).

Określone dla pojemnika tło sięga do zewnętrznej krawędzi obramowania. Domyślnym kolorem obramowania jest kolor pierwszego planu elementu. Możliwe jest ustawienie ujemnej wartości marginesów, ale nie dopełnienia, obramowania, wysokości ani szerokości.

Istnieją różnice w sposobie podejścia do rozmieszczania elementów wzdłuż osi pionowej i poziomej. Domyślna wysokość elementu jest określona przez jego zawartość. Wiele reguł w specyfikacji CSS związanych z wysokością elementów jest nadzwyczaj złożonych, ponieważ muszą one określać sposób obliczania wysokości w każdym możliwym przypadku.

Koncepcja układu strony CSS oryginalnie opierała się na idei, że układy powinny mieć charakter płynny, a szerokości poszczególnych elementów powinny zmieniać się wraz ze zmniejszaniem i zwiększaniem rozmiarów okna przeglądaki, zaś wysokości elementów powinny być dostosowane do ich zawartości.

Uwaga: Własności width i height określają nie całkowitą szerokość i wysokość pola elementu, lecz jedynie obszaru zawartości elementu.

Element blokowy (ang. block-level element) generuje pojemnik, który wypełnia w poziomie obszar zawartości elementu rodzica i nie może po bokach posiadać żadnych innych elementów. Innymi słowy, generuje on złamanie wiersza przed pojemnikiem elementu oraz po nim. Przykłady takich elementów to p, ul, table, h1 oraz div.

Element wewnętrzny (ang. inline-level element) generuje pojemnik wewnątrz wiersza tekstu i nie wpływa na łamanie przebiegu tego wiersza inaczej niż zwykły tekst. W HTMLu element wewnętrzny nie może zawierać elementów blokowych (może zawierać inne elementy wewnętrzne). Przykłady: a, img, strong, em, span.

Element blokowy może zawierać zarówno elementy blokowe jak i wewnętrzne.

Dołączanie arkuszy stylu do dokumentu

Mogą istnieć trzy rodzaje arkuszy definiujące wygląd strony w przeglądarce:

  • Arkusz wbudowany – dzięki niemu nawet w najprostszym dokumencie czystego HTMLa mamy do czynienia z formatowaniem nagłówków, jakimś wyborem czcionki itp.,
  • Arkusz użytkownika – (ang. reader style sheet) to jest arkusz preferencji internauty; na ogół można go modyfikować z poziomu formatek dostępnych w przeglądarce, ale często w systemie plików można znaleźć tekstowy plik tego arkusza i go sobie zmodyfikować, np. dla Firefoksa pod Ubuntu może to być plik ~/.mozilla/firefox/tw4xsrh6.default/chrome/userContent-example.css któremu należy z nazwy usunąć „-example” i przeedytować zawartość,
  • Arkusze autora witryny – to są arkusze stworzone przez autora konkretnej witryny i aktualnie oglądanej strony WWW; można je umieszczać w witrynie na trzy sposoby:
    • Arkusz zewnętrzny (ang. external style sheet)
      Dozwolone wartości atrybutu media
      Wartość Opis
      all wszystkie media
      print podgląd wydruku i wydruk dokumentu
      screen ekran komputera, np. monitor
      projection rzutnik do prezentacji slajdów
      aural syntezatory mowy i czytniki ekranu
      braille urządzenia Braille’a
      embossed urządzenie drukujące Braille’a
      handheld urządzenie trzymane w dłoni (PDA, telefon komórkowy itp.)
      tty środowisko o stałej szerokości czcionki, np. dalekopis
      tv ekran telewizora

      Jest to plik tekstowy, przyjęło się że o rozszerzeniu *.css. Dowolną liczbę takich arkuszy można dołączyć do strony HTML w elemencie head:

        <link rel="stylesheet" type="text/css" href="styles/visual-sheet.css"
                 title="Domyślny" media="screen,projection" />
      

      Wartość „stylesheet” atrybutu rel oznacza że jest to arkusz preferowany, w odróżnieniu od alternatywnego arkusza stylu który będzie wykorzystany zamiast preferowanego tylko wtedy gdy zostanie wybrany przez użytkownika z menu (Firefox, Opera) lub z poziomu JavaScriptu (MSIE):

        <link rel="alternate stylesheet" type="text/css"
                 href="styles/bigtext.css" title="Wielki Tekst"/>
      

      Można grupować arkusze stylu poprzez nadanie im tej samej wartości atrybutu title.

      Brak atrybutu title w preferowanym arkuszu oznacza że chcemy aby ten arkusz był zawsze wykorzystywany do wyświetlania dokumentu – jest to tzw. arkusz trwały (ang. persistent).

      Większość typów mediów nie jest obecnie obsługiwana przez żadną przeglądarkę. Najczęściej obsługiwane są trzy pierwsze wymienione w tabeli obok, Opera obsługuje tryb projection.

      Dołączanie arkuszy zewnętrznych jest zalecanym sposobem użycia CSS – wtedy zalety użycia CSS uwidaczniają się najpełniej.

    • Arkusz osadzony lub arkusz dokumentu (ang. embedded style sheet/document style sheet)

      Taki arkusz umieszczony wewnątrz znacznika <head> ma postać:

        <style type="text/css">
          ...
        </style>
      

      Arkusz osadzony stosuje się, gdy projektant utworzył zewnętrzny arkusz stylów do kontrolowania całej witryny, ale potrzebuje jeszcze kilku dodatkowych reguł wyłącznie dla jednej strony. Ewentualnie, gdy arkusz jest rozwiązaniem tymczasowym na czas projektowania witryny.

    • Styl wewnętrzny (ang. inline style)

      W przypadku gdy trzeba po prostu przypisać kilka stylów pojedynczemu elementowi, można ustalić styl wewnętrzny za pomocą atrybutu style języka HTML:

        <p style="color: gray; font-size: 10pt;">...</p>
      

      Zaleca się umiar w użyciu stylów wewnętrznych, a ich nadużywanie niweluje zyski z używania kaskadowych arkuszy stylów w ogóle. Funkcję stylów wewnętrznych J.Zeldman określił jako „farbę wykończeniową wyrównującą cyfrowe wgniecenia”.

Składnia języka CSS

Na początku arkusza (i tylko tam) mogą się znajdować dyrektywy @import która służy do załączenia zewnętrznego arkusza stylów:

  @import url(sciezka/plik.css) all

Jeśli URL jest względny, to względem lokalizacji arkusza nadrzędnego, a nie dokumentu HTML.

Komentarze są takie same jak w C i mogą być wielowierszowe ale nie wolno ich zagnieżdżać:

  /* komentarz */

Białe znaki są ignorowane.

Każdy arkusz to przede wszystkim lista reguł. Reguła składa się z dwóch części – selektora (ang. selector) oraz bloku deklaracji (ang. declaration block). Z kolei każdy blok deklaracji składa się z jednej lub większej liczby deklaracji. Deklaracja z kolei jest kombinacją właściwości oraz wartości.

Reguła CSS

Reguła CSS

Selektor definiuje zbiór elementów dokumentu, do których reguła ma być zastosowana (na rysunku są to wszystkie elementy <h1>), natomiast deklaracje określają sposób formatowania.

Wartość jest zwykle pojedynczym słowem lub rozdzieloną spacjami listą kilku słów. Jeśli w deklaracji zostanie użyta niepoprawna właściwość bądź niepoprawna wartość, cała deklaracja jest ignorowana.

Możemy grupować reguły z przeznaczeniem dla różnych mediów:

  @media projection, screen {
    p { color: black; }
  }

Selektory

Czasami chcemy objąć selektorem taki zbiór elementów, że jedynym sposobem na ich określenie jest ręczne wskazanie o które nam chodzi. W tym celu niestety musimy zmodyfikować dokument HTML i jawnie zakwalifikować wybrane elementy do określonej klasy z pominięciem hierarchii dokumentu, używając atrybutu class="nazwa-klasy", albo nawet oznakować wybrany element unikalnym w skali całego dokumentu identyfikatorem za pomocą atrybutu id, tj. id="identyfikator".

Trzeba tu zaznaczyć, że wielkość liter w nazwach klas i identyfikatorów ma znaczenie (poza tym wielkość liter w CSS nie ma znaczenia). Jeden element może być jednocześnie zakwalifikowany do wielu klas (wtedy w wartości atrybutu class rozdzielamy nazwy klas spacjami), ale z drugiej strony jeden element może mieć tylko jedno id (w dodatku unikalne w całym dokumencie). Wiedza na temat odpowiedniego zastosowania atrybutów id w celu oznaczania punktów orientacyjnych i właściwego używania selektorów potomków w celu wskazywania ich zawartości stanowi jedną z bardziej przydatnych umiejętności. Atrybutom id oraz class staraj się nadawać wartości wyjaśniające funkcje wykonywane przez elementy, nie odwołuj się do formatowania.

p wszystkie elementy p (selektor elementu)
h1, h2, h4 selektory można grupować rozdzielając przecinkiem (suma zbiorów)
* dopasowuje każdy element (selektor uniwersalny)
.klasa wszystkie elementy z atrybutem class o wartości „klasa”
p.klasa wszystkie elementy p należące do klasy o podanej nazwie
.klasa1.klasa2 każdy element, który należy jednocześnie do klas o nazwach „klasa1” i „klasa2”
#my-id element z atrybutem id o wartości „my-id”
Selektory atrybutów
img[title] elementy img posiadające atrybut title (z dowolną wartością)
a[href][title] elementy a posiadające jednocześnie atrybuty href oraz title
a[href="http://www.w3.org"] elementy a posiadające atrybut href o dokładnie podanej wartości
a[class~="warning"] elementy a które w wartości atrybutu class zawierają słowo „warning” (nie mylić z podciągiem, słowa są rozdzielone spacjami)
img[src|="rysunek"] elementy img, których atrybut src jest równy dokładnie „rysunek” lub zaczyna się od „rysunek-” (particular attribute selector)
Wykorzystywanie struktury dokumentów
h1 em każdy element em będący potomkiem dowolnego elementu h1 (selektor kontekstowy)
h1 > strong każdy element strong będący dzieckiem dowolnego elementu h1
h1 + p każdy element p występujący bezpośrednio po elemencie h1 (relacja brata)
Selektory pseudoklas
a:visited odwiedzone łącza
p:first-child każdy element p będący pierwszym dzieckiem swojego ojca
*:lang(fr) elementy w języku francuskim
Selektory pseudoelementów
p:first-letter pierwsza litera zawartości elementu p
p:first-line pierwszy wiersz zawartości elementu p
h2:before tekst wstawiany przed każdym elementem h2
h2:after tekst wstawiany za każdym elementem h2

Zadaniem pseudoklas jest symulacja klas dodawanych do kodu XHTML w chwili wystąpienia określonych warunków (np. najechanie kursorem myszki lub kliknięcie).

Selektory pseudoklas
Nazwa Opis
Statyczne
a:link nieodwiedzone łącze
a:visited odwiedzone łącze
Dynamiczne
:focus element może przyjmować dane z klawiatury
:hover nad elementem umieszczony jest wskaźnik myszy
:active aktywowany, np. wciśnięty przycisk myszy nad łączem

Weźmy pod uwagę poniższy przykład:

  a:visited {color: red;}
  a:hover {color:green;}
  a:active {color:blue;}
  a:link {color:black;}
  a:focus {color:orange;}

Prawie zawsze będzie kolor czarny, bo :link przebija wszystkie pozostałe reguły z racji tego że został umieszczony najniżej. Kolejność najlepsza dla reguł dynamicznych to: link, visited, hover, focus i active (najbardziej znaczący stan dla użytkownika w dowolnym momencie obejmuje pierwszeństwo, gdy chodzi o formatowanie).

Zadaniem pseudoelementów jest wstawianie do dokumentu fikcyjnych elementów w celu osiągnięcia pewnych efektów.

Poniższe reguły spowodują otoczenie każdego nagłówka h2 odpowiednio sformatowanymi parami nawiasów kwadratowych:

  h2:before { content: "[["; color: silver; }
  h2:after { content: "]]"; color: silver; }

Kaskada

Uśmiechnij się

Szkic roboczy CSS 2.1 definiuje m.in. standardowy rozmiar wzorcowego piksela:

Zaleca się, by za wzorcowy piksel uznano kąt widzenia jednego piksela na urządzeniu o gęstości pikseli wynoszącej 96 ppi oraz w odległości na wyciągnięcie ramienia od czytającego. Przy nominalnej długości ramienia wynoszącej 28 cali kąt widzenia wynosi zatem 0,0213 stopnia.

Jak zauważył J.Zeldman, powinniśmy się cieszyć że mowa tu jedynie o długości ramienia, i zasugerował że W3C mogłoby się zająć np. określeniem standardowego rozmiaru użytkownika.

Przy ustalaniu jakie wartości powinny być stosowane do elementu, przeglądarka musi wziąć pod uwagę dziedziczenie, specyficzność deklaracji, jak również pochodzenie deklaracji. Ten proces nazywamy kaskadą. Dzięki zrozumieniu kaskadowości można pisać bardzo oszczędny i łatwy do edycji kod CSS.

Możliwe jest, że ten sam element drzewa DOM zostanie wybrany za pomocą dwóch lub większej liczby reguł opartych na różnych selektorach, ale aplikujących różne wartości dla tych samych własności. O tym która deklaracja zwycięży w przypadku konkretnego elementu DOM, decyduje wyższa specyficzność deklaracji (ang. specifity). W przypadku deklaracji zawartej w regule CSS jest ona taka sama jak specyficzność selektora reguły. Wartość specyficzności wyrażana jest w postaci wektora, np. 0,0,0,0, gdzie waga pozycji maleje od lewej do prawej, a na kolejnych pozycjach znajdują się kolejno:

  1. 1 dla deklaracji użytych w stylu wewnętrznym (ang. inline), 0 dla pozostałych deklaracji,
  2. liczba atrybutów id selektora (0 dla deklaracji stylu wewnętrznego),
  3. liczba atrybutów class, wyborów atrybutu i pseudoklas selektora (0 dla deklaracji stylu wewnętrznego),
  4. liczba elementów oraz pseudoelementów selektora (0 dla deklaracji stylu wewnętrznego).

Selektor uniwersalny (*) ma specyficzność 0,0,0,0 a selektory kontekstowe zawierające elementy takie jak + czy >, nie mają wpływu na specyficzność. Tak więc specyficzność 1,0,0 będzie wyższa od każdej specyficzności zaczynającej się od 0.

Słowo !important umieszczone tuż przed średnikiem kończącym deklarację oznacza że ta deklaracja ma wygrać niezależnie od specyficzności innych deklaracji nieoznaczonych w ten sposób:

  h1 { font-style: italic; color: gray !important; }

Dziedziczenie jest mechanizmem, dzięki któremu niektóre wartości właściwości przekazywane są z elementu do jego potomków. Powodem dla którego nie wszystkie właściwości wykazują się tą cechą jest najczęściej zdrowy rozsądek; np. nie ma sensu dziedziczyć własności border i innych własności związanych z pojemnikami. Odziedziczone wartości nie mają żadnej specyficzności, nawet zerowej. Każda specyficzność, nawet zerowa, wygrywa z brakiem specyficzności. Innymi słowy, dziedzienie własności przez potomki w drzewie DOM jest słabe. Każda reguła odnosząca się do któregoś z potomków ma dla tego potomka pierwszeństwo. Aby to odwrócić, można w deklaracji użyć wartości inherit, która oznacza „to samo co rodzic”.

W razie tej samej specyficzności, wygrywa reguła wymieniona później w arkuszu.

Kiedy przeglądarka ładuje stronę, sprawdza każdy znacznik pod kątem tego czy nie ma pasującej do niego reguły. Gdy jest wiele, algorytm wyznaczania wygrywającej deklaracji CSS formatującej element DOM jest następujący:

  • Utwórz listę łącząc ze sobą dotyczące elementu reguły wymienione kolejno w następujących arkuszach stylu: wbudowany, użytkownika, autora. Dla tego ostatniego łącz arkusze w kolejności: zewnętrzne, osadzone, wewnętrzne. Deklaracje zawarte w importowanych arkuszach występują przed wszystkimi deklaracjami w arkuszu importującym.
  • Deklaracje z wyższą wagą (!important) wygrywają.
  • Jeśli nie ma zwycięzcy, wygrywa większa specyficzność.
  • Jeśli nadal nie ma zwycięzcy, decyduje kolejność – niższa reguła na liście wygrywa.

Wartości i jednostki

Każda własność CSS definiuje zbiór swoich dopuszczalnych wartości i ich rodzaje. Mogą nimi być:

  • Liczby: całkowite i zmiennoprzecinkowe (do rozdzielania części ułamkowej od całkowitej służy kropka).
  • Procenty, np. 10% (używane np. do ustawiania rozmiaru kontenerów tak, aby się dobrze skalowały wraz ze zmianą wymiarów okna przeglądarki).
  • Słowa kluczowe (Uwaga: często zdarza się że dla wartości wyrażonych słowami kluczowymi specyfikacja nie precyzuje dokładnie co one oznaczają i pojawiają się tu różnice między przeglądarkami)
  • Kolory
    • CSS2.1 definiuje 17 podstawowych wartości barw: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.
    • Wszystkie przeglądarki obsługują od dłuższego czasu paletę 140 słów kluczowych z tabeli X11.
    • Kolory systemowe, np. ButtonFace czy ButtonText – umożliwiają twórcom systemów WWW dopasowanie stylów elementów takich jak przyciski do bieżących kolorów systemowych zdefiniowanych w preferencjach systemu operacyjnego.
    • #RRGGBB (Uwaga: bardzo często występującym błędem jest nieumieszczenie znaku # na początku wartości szesnastkowej).
    • #RGB, np. #F27 oznacza to samo co #FF2277.
    • rgb(255, 165, 0).
    • rgb(100%, 65%, 0%).
  • Jednostki długości:
    • Bezwzględne (rzadko stosowane, jeśli już to np. w arkuszach do drukowania): in, cm, mm, pt (1 cal to 72 punkty), pc (1 pica to 12 punktów).
    • Względne (zalecane):
      • em: 1em jest wielkością rozmiaru danej czcionki; wartość 0.1em jest zwykle najmniejszą wartością wyrażoną w em lub też różnicą, którą przeglądarki są w stanie rozpoznać,
      • ex: wysokość małej litery ‚x’ w użytej czcionce, często w praktyce 0.5em, przez co miara jest mało użyteczna,
      • px: dyskusyjne w przypadku np. drukarki.
  • URL, np. url(images/picture.jpg) (Uwaga: spacja przed nawiasem otwierającym jest błędem, który unieważnia regułę).

W HTMLu zakłada się, że wartości liczbowe pozbawione jednostek są wartościami px, ale w CSS brak jednostki zwykle oznacza błąd (niektóre przeglądarki zakładają px niezgodnie ze standardem). Jest jeden wyjątek: gdy podajesz wartość 0 jednostka nie ma znaczenia.

Własności zbiorcze pozwalają zdefiniować kilka własności naraz – rozdzielamy wtedy wartości spacjami. I tak np. dla własności takich jak margin, padding, border-width itp.:

  • margin: 10px 5px 3px 1px; – definiuje wszystkie cztery marginesy elementu (począwszy od górnego, zgodnie z ruchem wskazówek zegara),
  • margin: 10px 5px 3px – wartość lewego marginesu ustawiana jest na tą samą co prawego (5px),
  • margin: 10px 5px – pierwsza wartość dotyczy marginesu górnego i dolnego, druga prawego i lewego,
  • margin: 10px – wszystkie marginesy ustawiane są na tą samą wartość.

Inne z kolei takie jak border, background czy font (np. bold italic small-caps .75em verdana, arial, sans-serif) nie definiują ściśle kolejności wartości w ciągu i pozwalają na pewną dowolność, w szczególności niektóre wartości są opcjonalne.

Uwaga: Gdy korzystasz z własności zbiorczej, stosowane są wszystkie związane z nią własności, w tym również wartości domyślne dla własności nie zdefiniowanych w sposób jawny. W przykładzie:

  background: url('../shadow.png') repeat-y top right;

niejawnie znajdzie się deklaracja background-attach: scroll. Jest to bardzo istotne, bo jeśli wcześniej w tym samym wyrażeniu dla własności background-attach wybrałeś wartość fix, to skrót to może przesłonić. Jest to dość trudny do wykrycia problem.

Pozycjonowanie pojemników

Opanowanie pozycjonowania wymaga czasu; znacznie ważniejsze niż same własności i ich wartości są możliwości, które przed nami otwierają. Dzięki podejmowanym przez wiele lat wysiłkom licznych twórców dostępne są dobrze udokumentowane, odporne na błędy techniki implementowania wielu powszechnie stosowanych wzorców projektowych.

Kiedy do elementu zastosuje się własność float: left, powoduje to wyniesienie elementu tak daleko w lewo i do góry, jak to tylko możliwe. Element zostaje częściowo usunięty z przepływu dokumentu. Własność ta nadana obrazkowi pozwala otoczyć ten obrazek tekstem.

Kontekstem pozycjonowania nazywamy element względem którego ustawiamy prostokąt posługując się własnościami top, right, bottom i left. Pozycjonowanie kontekstowe polega na przesuwaniu danego elementu względem innego.

Własność position pozwala zdefiniować punkt odniesienia, względem którego element ma być pozycjonowany na stronie:

  • static (wartość domyślna): własności top, right, bottom i left nie mają znaczenia,
  • relative: można przesuwać element względem domyślnego położenia za pomocą własności top, right, bottom i left; miejsce zajmowane przez akapit gdyby był pozycjonowany statycznie, nie zostaje zwolnione.
  • absolute: całkowicie wytrąca element z normalnego układu dokumentu i ustawia względem pierwszego przodka z ustawionym position: relative/absolute/fixed lub body, jeśli nie ma takiego
  • fixed: jak absolute, ale w odniesieniu do okna przeglądarki – nie przesuwa się w miarę przewijania strony.

Własność z-index mają elementy z pozycjami absolute i fixed, a im wyższa jest wartość, tym bardziej na wierzchu znajduje się element.

Choć istnieją pewne kontrowersje związane z tym, czy korzystanie z dryfowania do tworzenia układu strony nie stanowi w jakimś sensie pogwałcenia specyfikacji CSS (dryfowanie nie zostało opracowane dokładnie do tego), to właśnie ta metoda tworzenia układu strony jest powszechnie uznawana za najlepszą ze wszystkich, które wykorzystują technologię CSS, i bez wątpienia jest też najczęściej stosowanym sposobem.

CSS 2.1 oferuje gotowe już niemal do użytku własności układu tabelarycznego obsługiwane nawet przez MSIE 8.0, który zasadniczo odtwarza model tabel języka HTML w języku CSS – dowolny element może wykazywać cechy tabeli, komórki tabeli, wiersza tabeli czy innych jej części składowych – np. display: table-cell. CSS 3 zawiera moduł układu siatkowego (ang. Grid Layout Module), który nadal znajduje się w fazie tworzenia.

CSS3

Obecnie rozwijane są dwie specyfikacje CSS. Wersja 2.1 opisuje i standaryzuje obecne możliwości nowoczesnych przeglądarek w zakresie CSS, z kolei CSS 3 stanowi gniazdo innowacji.

CSS 3 jest podzielony na dość niezależne moduły. Ich listę, status i czas ostatniej modyfikacji możesz znaleźć na stronie CSS3 Module Status.

W CSS3 kolory oprócz RGB można również definiować w standardzie HSL (Hue, Saturation, Lightness), np. hsl(0%,100%,50%), a także RGBA i HSLA (A oznacza kanał alpha).

Nowe selektory

CSS 3 udostępnia bardziej wyrafinowane selektory pozwalające wskazać elementy na podstawie cech charakterystycznych, nie wymagając założeń na temat specyficznej i sztywnej struktury dokumentu i ograniczając potrzebę modyfikowania kodu HTML w celu dodania atrybutów id lub class (tym bardziej, że często nie mamy dostępu do kodu HTML bo jest on np. generowany automatycznie przez jakiś system CMS). Wszystkie dostępne obecnie popularne przeglądarki z wyjątkiem MSIE <= 8 radzą sobie z obsługą większości lub wszystkich selektorów CSS 3.

Selektory atrybutów
img[title^="Rysunek"] elementy img, które mają atrybut title o wartości zaczynającej się od prefiksu „Rysunek”
img[title$="XYZ"] elementy img, które mają atrybut title o wartości kończącej się sufiksem „XYZ”
a[href*="tiger.com.pl"] elementy a, które mają atrybut href zawierający podciąg „tiger.com.pl”
Selektory pseudoklas
p:last-child każdy akapit, który jest ostatnim dzieckiem swojego ojca
p:first-of-type pierwszy akapit ojca (pierwsze dziecko nie musi być akapitem)
p:last-of-type jw., ale ostatni akapit
p:nth-child(odd) wszystkie nieparzyste akapity ojca – przydaje się do osiągnięcia efektu przeplatania (ang. zebra striping) w tabelach, czyli kolorowania nieparzystych wierszy tabeli
p:nth-child(2n+1) jw., n iteruje od 0
p:nth-last-child(3) trzeci od końca akapit ojca
p:empty wszystkie akapity nie posiadające dzieci
p:only-child każdy akapit który jedynym dzieckiem ojca
h1:target element będący celem aktualnego URLa przeglądarki, np. dla URLa http://westciv.com/#resources będzie to element z atrybutem id o wartości „resources”
input:enabled aktywne elementy input
input:disabled nieaktywne elementy input
input:checked zaznaczone pole wyboru
p:not(selector) każdy akapit który nie pasuje do wskazanego selektora
Wykorzystywanie struktury dokumentów
h1 ~ p każdy element h1 występujący po elemencie h1, ale z tym samym ojcem (relacja rodzeństwa)

Nowe własności

Efekty w rodzaju zaokrąglonych narożników, półprzezroczystości czy cieni stanowią filary „estetyki Web 2.0”.

  • opacity – (wartości 0.0 – 1.0) pozwala zdefiniować przezroczystość elementu, ale jest dziedziczona przez wszystkie elementy potomne (w tym tekst) i nie da się jej w żaden sposób przesłonić, więc często lepiej zdefiniować tło o półprzezroczystym kolorze (w notacji RGBA),
  • text-shadow – cień dla tekstu (a nawet kilka cieni tworząc efekt rytu lub wytłoczenia), np.
      text-shadow: 1px 1px white, -1px -1px #333;
  • box-shadow – cień dla pudełka elementu (na zewnątrz obramowania ale wewnątrz marginesu, więc nie oddziałuje na układ strony):
      box-shadow: 10px 10px 5px #888;
  • background-image – stara własność, ale teraz dodatkowo pozwala jako tło zdefiniować gradient (liniowy lub radialny):
      -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
  • border-image – obrazek w obramowaniu elementu,
  • column-count, column-width, column-gap, column-rule – pozwalają kontrolować przepływ tekstu w kolumnach (jak w gazecie):
          #content {
            column-count: 3;
            column-rule: 10px solid #bbb;
            column-gap: 2em;
          }
        
  • border-radius – zaokrąglone narożniki pudełka elementu:
      border-radius: 15px;

Przejścia pozwalają na płynną zmianę wartości własności, takiej jak pozycja, rozmiar czy kolor elementu co daje efekty wygaszania, powiększania, przewijania lub kadrowania. Parametry przejścia to:

  • własności do zmiany (własność transition-property),
  • czas trwania (transition-duration),
  • funkcja taktująca (transition-timing-function, np. wartość ease-in powoduje że animacja zaczyna się powoli a potem przyspiesza),
  • opóźnienie (transition-delay).

W poniższym przykładzie gdy użytkownik umieści wskaźnik myszy nad łączem, kolor jego tła płynnie przejdzie z bieli w czerwień (a następnie zmieni się z powrotem w biel, gdy wskaźnik myszy zostanie usunięty znad łącza), co potrwa mniej więcej sekundę:

  a:hover {
    background-color: red;
  }

  a {
    background-color: white;
    -webkit-transition: background-color;
    -webkit-transition-duration: 1s;
  }

Przekształcenia pozwalają na skalowanie i obracanie elementów HTML przy jednoczesnym zachowaniu możliwości zaznaczania tekstu, klikania łączy itp. Patrz demo (najedz mysza nad kostke, sprobuj zaznaczyc tekst na kostce – póki co tylko w przeglądarkach opartych na WebKitcie).

Rozszerzenia specyficzne dla dostawców

Od poczatku istnienia mechanizmu CSS błędna i niekompletna obsługa pewnych możliwości powodowała znacznie więcej kłopotów niż całkowity jej brak. Rozszerzenia specyficzne dla dostawców (ang. vendor-specific extensions) to zestandaryzowany i powszechnie obsługiwany sposób dostosowywania serwisów do wymagań określonych przeglądarek. Są to przedrostki dodawane do nazw własności i selektorów. Jeśli masz pewność, że funkcja jest należycie obsługiwana przez pewną rodzinę przeglądarek, możesz użyć odpowiedniego przedrostka.

W powszechnym użyciu są prefiksy:

  • -webkit- dla przeglądarek opartych na silniku WebKit, a więc Safari i Chrome (np. -webkit-box-shadow),
  • -moz- dla Firefoksa (np. -moz-border-radius),
  • -o- dla Opery(np. -o-text-overflow).

Zdarza się, że przeglądarka obsługuje jakąś właściwość tylko z prefiksem a właściwość bez prefiksu będzie obsługiwała dopiero wtedy gdy standard ją ostatecznie zatwierdzi. W takich przypadkach trzeba tworzyć reguły postaci:

  p {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
  }

Zapytania mediów

CSS3 pozwala dopasowywać arkusze do mediów w oparciu o cechy charakterystyczne takie jak szerokość okna, głębia koloru czy orientacja lub rozdzielczość ekranu. Służą do tego tzw. Zapytania mediów (ang. media queries).

Dostępne cechy mediów:

  • width/height – szerokość/wysokość obszaru ekranu (okna),
  • device-width/device-height – szerokość/wysokość całego ekranu,
  • resolution – gęstość pikseli ekranu urządzenia (dpi),
  • color – liczba bitów na kolor (0 dla urządzeń monochromatycznych),
  • monochrome – liczba bitów skali szarości dla urządzeń monochromatycznych (0 dla ekranów kolorowych),
  • orientation (landscape/portrait).

Zapytania mediów CSS 3 mogą zawierać operatory logiczne and, not i or, a także przedrostki min- i max-. Przykładowe zapytanie może mieć postać:

  (max-width: 600px) and (max-height: 800px)

np. w arkuszu CSS:

  @media print and (color) {
    ...
  }

w HTMLu:

  <link rel="stylesheet" media="all and (min-width: 800px)" />

Przeglądarki starszego typu nie obsługujące CSS 3 poprzestaną na pierwszym słowie ignorując pozostałe.

Czcionki zewnętrzne

Wcześniej do umieszczania nagłówków pisanych nietypową czcionką wykorzystywano nowatorskie rozwiązania takie jak sIFR (korzysta z JavaScript, Flash i CSS) oraz Cufón (JavaScript).

Webmaster który chce na swojej stronie skorzystać z czcionki nieobecnej na komputerach internautów aby „wydostać projektowane strony z typograficznego getta”, może wykorzystać w CSS3 mechanizm osadzania czcionek w dokumencie pozwalający ładować je jak inne zasoby zewnętrzne (obrazki, skrypty itp.):

  @font-face {
    font-family: Blackout;
    src: url('blackout.ttf') format('truetype');
    src: url(blackout.eot);
  }

W przypadku MSIE można korzystać tylko z czcionek EOT, które da się przekonwertować z TrueType Microsoftowym programem Web Embedding Font Tool (trzeba podać URLe witryn z których czcionka ma być dostępna). Pozostałe przeglądarki zamiast plików EOT akceptują dowolne czcionki TrueType i OpenType (czyli czcionki używane w systemach operacyjnych, bez żadnego przetwarzania).

Ponieważ pliki czcionek są dość duże, powstaje pytanie jak ma się renderować strona do czasu ściągnięcia takiego pliku. Przeglądarki mogą stosować jedno z dwóch rozwiązań: nie renderować tekstu dopóki nie zostanie ściągnięta jego czcionka lub renderować czcionką domyślną i zastępować czcionkę gdy stanie się dostępna. Oba rozwiązania mają wady, co stawia technikę osadzania czcionek pod znakiem zapytania. Patrz The Elements of Typographic Style… jako przykład strony wykorzystującej zewnętrzne czcionki.

Firma Typekit nakłania producentów którzy zgadzają się licencjonować swoje czcionki za pomocą witryny firmy. Projektanci serwisów WWW płacą miesięczną/roczną opłatę za załatwienie wszelkich formalności związanych z licencjami i udostępnienie czcionek na serwerach Typekit. Firma udostępnia także rozwiązanie technologiczne gwarantujące, że w przeglądarkach obsługujących standardy sieciowe (Safari, Firefox, Opera) czcionki będą wyświetlane przy użyciu reguły @font-face, a w pozostałych przeglądarkach (czyli w MSIE) także będą wyglądały prawidłowo.

Uwaga: Warto ograniczyć się do wykorzystania na jednej stronie dwóch, co najwyżej trzech czcionek by uniknąć rozpraszania czytelników.

Resety i platformy

Jak już wcześniej wspomniano, przeglądarki najpierw stosują domyślny arkusz stylów (inny dla każdej przeglądarki), następnie dodają wszelkie preferencje określone przez użytkownika (takie jak domyślne rozmiary czcionek użytkownika). Dopiero w dalszej kolejności przeglądarka korzysta z arkuszy CSS zdefiniowanych dla strony. Resety CSS to arkusze których zadaniem jest usunięcie ustawień domyślnych arkuszy, aby zapewnić wspólną, niezależną od przeglądarki bazę dla później stosowanych arkuszy autora.

Krytycy techniki stosowania resetów argumentują, że możliwości powszechnie wykorzystywane w słynnych plikach resetów CSS, takie jak ustawienie własności margin i padding każdego elementu na wartość 0 lub używanie selektora uniwersalnego (*), które zdarza się w niektórych resetach, może spowodować znaczne obniżenie wydajności działania przeglądarki.

Najczęściej stosowane resety:

Platformom (szkieletom, ang. frameworks) CSS przyświeca dużo bardziej ambitny cel zapewnienia nadających się do wielokrotnego wykorzystania podstawowych stylów CSS dla potrzeb typografii, tworzenia układów stron i innych możliwości związanych z projektowaniem.

Zalety:

  • bardzo popularna i wysoce wydajna metoda prototypowania,
  • ponowne użycie tego samego kodu w różnych projektach,
  • krótszy czas tworzenia serwisu,
  • uwzględnianie różnic między przeglądarkami.

Wady:

  • platforma składa się zwykle z wielu plików CSS, przez co mogą pogarszać działanie serwisów WWW,
  • stosowanie platform może prowadzić do sztampowego tworzenia kodu znaczników storon i równie mało oryginalnego ich projektowania,
  • zwykle wymuszają zastosowanie specyficznego kodu znaczników w celu uzyskania kreślonych efektów układu, zamiast prawdziwie odseparować kod od prezentacji; pojawia się też w nich tendencja do korzystania z niesemantycznych wartości własności class i id, takich jak grid_18 czy container_12 jako części kodu znaczników.

Znane platformy (często oferują graficzne narzędzia do budowania siatek):

Platformy CSS powstały w oparciu o ideę, że kod znaczników powinien być budowany wokół pozycji, jaką element zajmuje na stronie, nie zaś wokół jego zawartości. Z tego powodu niesemantyczny, głęboko zagnieżdżony kod tworzony przez te platformy nawiązuje do dawnych, złych czasów, w których królowały układy wykorzystujące tabele. W konsekwencji wielu doświadczonych i rozważnych twórców serwisów WWW darzy platform niezbyt gorącymi uczuciami, zwłaszcza gdy sprawa dotyczy siatek.

CSS a JavaScript

Selectors API pozwala używać selektorów CSS3 w JavaScripcie do wyszukiwania wierzchołków drzewa DOM oraz testowania czy dany wierzchołek pasuje do selektora:

    // pierwsze wystąpienie którejkolwiek reguły
    var elemList = querySelector('rule', 'rule2', ...);

    // wszystkie wystąpienia którejkolwiek reguły
    var elemList2 = querySelectorALl('rule', 'rule2', ...);

Aby uzyskać tą funkcjonalność również w przeglądarkach które nie implementują selektorów CSS3, można skorzystać z biblioteki JS o nazwie Sizzle.

Atrybut style obiektu elementu HTML zawiera jedynie formatowania śródliniowe elementu (ang. inline), nie zaś te, które pochodzą z jakichkolwiek zewnętrznych czy osadzonych arkuszy stylów. Jeśli zatem pobierzemy wartość tej właściwości, otrzymamy tylko właściwości CSS ustawione za pomocą kodu śródliniowego CSS lub określone bezpośrednio dla style przy użyciu modelu DOM. Jeśli chcesz sprawdzić wszystkie właściwości formatowania elementu (w tym określone przez arkusze stylów), skorzystaj z funkcji window.getComputedStyle – zwrócony wynik ma ten sam format, co własność style elementu. Nie można za jego pomocą ustawić stylów elementu, a jedynie odczytać.

Bibliografia

CSS, 4.0 out of 5 based on 1 rating
Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>