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.
- Wchodzimy na http://www.conditional-css.com/
- Po prawej stronie widzimy „Compiler”
- Wybieramy interesującą nas platformę (PHP będzie pewnie najczęstszym wyborem)
- Wprowadzamy nazwę/nazwy plików naszych stylów
- Klikamy wielki guzik z napisem GO!
- Pobrany plik umieszczamy w tym samym katalogu gdzie znajdują się pliki css.
- 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:
1 2 3 4 5 | .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:
1 2 3 | 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!
Wspomaganie CSS’a przez PHP daje sporo nowych możliwości. Tak, masz rację, łatwiej zapanować nad różnorodnością przeglądarek.
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 :)
Wcześniej nie używałem, ale teram mnie tym zainteresowałeś :-)
Szkoda tylko, że nie współgra to z SASSem :(
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.