przenośny css

W poprzednim poście zająłem się zagadnieniem przenośności. Dotyczy to również języka css, czyli popularnie mówiąc zgodności przeglądarek. W dawnych czasach (no, może nie tak dawnych), gdy królował Internet Explorer, tworzenie stron, które wyglądają tak samo na różnych przeglądarkach, było nie lada wyzwaniem. Do dziś można spotkać wiele przykładów jak sobie radzić z niekompatybilnością. Jednym z rozwiązań jest stosowanie różnych wersji programu w zależności od użytej przeglądarki. Albo wręcz zmuszanie użytkowników do stosowania tej jednej "właściwej". Ponieważ są to jednak rozwiązania niewygodne, czy to z punktu widzenia programisty (bo utrzymywanie różnych wersji programu jest kosztowne) czy też ograniczające swobodę użytkownika, to dużą popularność zyskały tzw. haków, które wykorzystując pewne błędy przeglądarki umożliwiały wprowadzanie wariantów w kodzie css. Poniżej przykład takiego haka.

* html .fieldpick{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
  z-index:-1;
}

Standard W3C

Problemy z niekompatybilnością przeglądarek częściowo skończyły się, gdy rynek wymusił stosowanie standardów. Przynajmniej tak się wszystkim wydawało. Opublikowany standard HTML4 jest powszechnie respektowany. Co z tego, gdy kolejna, nowa wersja jest jeszcze nie ukończona, a mimo to wszyscy chcą z niej korzystać. HTML5 będzie podlegać kodyfikacji jeszcze kilka lat, ale już wszystkie liczące się przeglądarki, a za nimi wiele twórców witryn stosuje nowe elementy języka. I znowu zaczyna się piekło niekompatybilności. Całe szczęście że wprowadzane jest w sposób bardziej cywilizowany. Można to przedstawić na przykładzie nowej własności dotyczącej zaokrąglonych ramek border-radius. Początkowo przeglądarki wprowadziły własną notację dodając własny przedrostek

-moz-border-radius: / dla Mozilli
-webkit-border-radius: / dla Safari i Chrome
-khtml-border-radius: / dla KHTML

Tym samym można w łatwy sposób dodać parametry dla poszczególnych przeglądarek, bowiem obce identyfikatory są całkowicie ignorowane, nawet jeżeli notacja oczekiwanych parametrów jest różna. To niestety jest koszt wprowadzania nowości zanim się ustabilizuje standard. Obecnie większość obsługuje standardowe znaczniki border-radius, natomiast w podobny sposób wprowadzane są nowe właściwości do języka css.

iPhone

Oprócz samego rozwoju języka i jego możliwości obecnie mamy do czynienia z bardzo szeroką paletą urządzeń stosowanych do przeglądania internetu. Te urządzenia unaoczniły że jest kilka parametrów, które winny być rozróżniane przy projektowaniu strony WWW. Jednym z nich jest rozmiar ekranu. Jeżeli strona jest zaprojektowana na wielkość 1024 piksele a oglądana na monitorze o szerokości 640 pikseli to pewnie nie będzie ładnie wyglądać. Natomiast smartfony posiadają rozdzielczość 480px i mniejszą, wtedy strona może się stać zupełnie nieczytelna. A przecież czasami wystarczy tylko kilka drobnych zmian w css. Tu z pomocą przychodzi tag @media. Poniżej przykład jak zmniejszyć rozmiar font, gdy ma być wyświetlany na ekranach niskiej rozdzielczości

@media screen and (max-width: 480px) {
  #main-nav a {
   font-size: 90%;
  }
}

Style domyślne

Tworząc kod, który ma być wyświetlany na różnych przeglądarkach należy uwzględniać domyślne wartości przyjęte dla poszczególnych własności. Dobrym zestawieniem jest ta strona. Aby uniknąć problemów należy zresetować , czy też ujednolicić te wartości. Można o tym przeczytać tutaj.