HTML5 & CSS3

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

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:

.box-one input[type="text"] {
     background:#DFC7ED;
     border:1px solid red;
     [if ! Webkit] outline:none;
}

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:

textarea.styler {
     [if lte IE 9] border: 1px groove green;
}

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

komentarzy 5

  • Awatar
    Michał Kortas

    3 czerwca 2012 10:51

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

    Odpowiedz
    • Awatar
      Mr.Mr

      3 czerwca 2012 10:59

      Dla mnie conditional-css to była zmiana jakościowa porównywalna do tego co się stało kiedy wprowadzono CSS’a w ogóle :)

      Odpowiedz
  • Awatar
    Greg

    12 sierpnia 2012 09:47

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

    Odpowiedz
    • Awatar
      Mr.Mr

      12 sierpnia 2012 13:39

      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.

      Odpowiedz

Zostaw odpowiedź