Conditional CSS – odpowiedź na problemy przy tworzeniu arkusza stylów


2 czerwca 2012 / Mr.Mr


Kompatybilność zastosowanych przy tworzeniu strony internetowej stylów z różnymi typami przeglądarek to jeden z większych problemów każdego twórcy stron www. Niezadowolenie klientów i kiepski wygląd naszej strony który tylko w jednej z przeglądarek odbiega od założenia spędzają sen z powiek webmasterów. Sposobów na obejście takich problemów jest wiele, ale żaden z nich nie jest doskonały. Na szczęście powstał Conditional CSS, czyli PHP zaprzęgnięty do obsługi naszych stylów.

Zwykle aby rozwiązać cross-browserowe problemy stosuje się podmianę arkusza stylów przy pomocy javascript. Jest to popularna metoda, która w dużej mierze się sprawdza aczkolwiek może być czasochłonna na etapie tworzenia wielu różnych wersji tego samego, czyli naszego CSS‚a.

Doświadczeni webmasterzy podczas tworzenia swojego pliku CSS mogą po prostu z góry unikać rozwiązań, które w różnych przeglądarkach działają niepoprawnie (w sensie – nie w ten sam sposób) albo zastosować tzw. CSS Reset, który pozwala na usunięcie standardowych stylów stosowanych przez przeglądarki. Z moich doświadczeń wynika, że wszystkie te trzy rzeczy stosuje się zwykle łącznie po to aby uporać się z licznymi różnicami w wyświetlaniu.

CSS Reset, to bardzo przydatne narzędzie i stosowania go nie będę nikomu odradzał, ale ograniczanie się w tworzeniu stylów i/lub podmiana arkusza CSS javascriptem to akurat rzeczy, które możemy sobie darować.

Conditional-CSS to narzędzie, które używa PHP do tego aby ułatwić nam życie. Podstawowym założeniem jest rozpoznanie czy dana właściwość i jej wartość powinny być wysłane do przeglądarki użytkownika. Dzięki umieszczeniu w naszym kodzie odpowiednich warunków będziemy w stanie dostosować w przypadku jakich przeglądarek chcemy aby konkretna właściwość i jej wartość znalazły zastosowanie.

Już po tym krótkim wstępie widać, jak wielkim ułatwieniem może być dla nas Conditional-CSS. Sama instalacja jest banalnie prosta.

  1. Wchodzimy na http://www.conditional-css.com/
  2. Po prawej stronie widzimy „Compiler”
  3. Wybieramy interesującą nas platformę (PHP będzie pewnie najczęstszym wyborem)
  4. Wprowadzamy nazwę/nazwy plików naszych stylów
  5. Klikamy wielki guzik z napisem GO!
  6. Pobrany plik umieszczamy w tym samym katalogu gdzie znajdują się pliki css.
  7. Załączamy plik c-css.php do dokumentu

W samym arkuszu stylów zamieszczamy warunki dzięki, którym możemy swobodnie dobierać typy przeglądarek. Schemat jest prosty a przykład poniżej:

Dzięki rozmaitym kombinacjom jakie dostarcza nam Conditional-CSS będziemy w stanie namierzać przeglądarki według ich typu jak i wersji. Przykładowo poniższy zapis oznacza przeglądarki IE w wersji niższej niż 9:

Zachęcam do odwiedzenia strony: www.conditional-css.com i zapoznaniu się z możliwościami tego narzędzia. Na prawdę warto!



5 odpowiedzi na “Conditional CSS – odpowiedź na problemy przy tworzeniu arkusza stylów”

  1. Wspomaganie CSS’a przez PHP daje sporo nowych możliwości. Tak, masz rację, łatwiej zapanować nad różnorodnością przeglądarek.

  2. Greg pisze:

    Szkoda tylko, że nie współgra to z SASSem :(

    • Mr.Mr pisze:

      Też często mam takie problemy :( ale przyznam, że jeśli miałbym wybierać to w pewnych okolicznościach (np, krótki czas realizacji i wymóg dużej kompatybilności strony) to wybrał bym conditional-css zamiast SASS.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *