A | A | A

WYKORZYSTANIE CSS

Obsługa CSS przez przeglądarki

CSS 1 jest w pełni obsługiwany przez przeglądarki oparte na silniku Gecko (np. Firefox), KHTML (min. Safari, Konqueror) oraz Presto (Opera). Silniki te są także bliskie pełnej obsługi CSS 2.1. Internet Explorer do wersji 5.5 posiadał niecałkowitą i pełną błędów obsługę CSS1 oraz nielicznych elementów nowszych wersji. IE 6 renderując w trybie standardów obsługuje poprawnie prawie całość CSS1, jednak obsługa CSS 2.1 nadal pozostawia wiele do życzenia.

Ograniczenia CSS

Podczas pracy z czystym CSS można napotkać kilka problemów:

  • Niekonsekwentne wspieranie CSS przez przeglądarki – różne przeglądarki mogą renderować layout strony zbudowanej w oparciu o CSS w inny sposób na skutek błędów oprogramowania a także braku wspierania pewnych atrybutów CSS. Aby zniwelować lub zlikwidować te różnice często muszą być stosowane tzw. hack'i a osiągnięcie perfekcyjnego wyświetlania witryny co do piksela we wszystkich najpopularniejszych przeglądarkach może być niewykonalne.
  • Kontrola położenia elementów w pionie – podczas gdy określenie horyzontalnego położenia elementu jest zadaniem prostym to osiągnięcie specyficznego położenia wertykalnego nie jest łatwe do osiągnięcia, często nieintuicyjne lub wręcz niemożliwe. Wydawać by się mogło proste zadania, takie jak pionowe wycentrowanie elementu w oknie przeglądarki wymagają użycia skomplikowanych reguł, wykorzystania skryptu JavaScript lub skorzystania z prostych, ale prawie nieakceptowanych przez najpopularniejsze przeglądarki atrybutów.
  • Brak wyrażeń matematycznych – obecnie nie ma możliwości skorzystania z działań matematycznych w regułach CSS do określania szerokości lub marginesów. Funkcja ta mogłaby być bardzo przydatna do obliczania szerokości kolumn w zależności o rozmiaru innych (np. width: 25% - 1em + 10px;).
  • Brak możliwości nadania jednemu elementowi więcej niż jednego tła – bardzo graficzne projekty mogą wymagać nadania elementowi więcej niż jednego tła podczas gdy CSS pozwala na umieszczenie tylko jednego tła dla każdego elementu. Dlatego programiści muszą wybierać między porzuceniem tego efektu wizualnego lub dodawanie zbędnych semantycznie elementów XHTML.
  • Brak kontroli nad kształtami elementów – w obecnej postaci CSS oferuje tylko kształty prostokątne. Zaokrąglone brzegi wymagają nie semantycznego kodu.
  • Brak zmiennych – CSS nie zawiera elementu zmiennej. Kiedy dana wartość powtarzana jest w arkuszu wielokrotnie wygodniej byłoby zamienić ją na zmienną, która w razie potrzeby zmiany wartości powoduje jej zmianę we wszystkich miejscach gdzie została użyta. Może zaoszczędzić to dużo manualnej pracy, szczególnie przy arkuszach styli zawierających kilkadziesiąt tysięcy deklaracji.

Zalety styli CSS

Przy efektywnym użyciu arkuszu styli, z wykorzystaniem dziedziczenia oraz kaskadowości można łatwo dokonywać zmian wszystkich elementów znajdujących się nie tylko na pojedynczej stronie, ale także w całym serwisie. Dzięki połączeniu CSS z Systemem Zarządzania Treścią można osiągnąć dużą elastyczność projektu. Użytkownik podczas wprowadzania treści strony poprzez CMS może wybrać odpowiednią dla danego tekstu formę prezentacji. System nadając odpowiednim elementom klasy i id może zmienić całkowicie sposób wyświetlania treści praktycznie nie modyfikując składni XHTML.

Model kaskadowy

Nazwa "kaskadowe arkusze stylów" wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:

  1. Domyślny arkusz przeglądarki WWW (niezależny od autora strony)
  2. Domyślny arkusz użytkownika przeglądarki (jak wyżej)
  3. Zewnętrzne arkusze stylów
  4. Definicje stylów w nagłówku dokumentu
  5. Definicje stylów w atrybucie style elementu

Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł nie muszą z resztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki "wirtualny" styl.


Skocz do góry strony ↑