Każdy kto ma do czynienia z kodowaniem CSS wie, jaki to ból korzystać z tych właściwości CSS3, które w różnych przeglądarkach wymagają różnych „prefixów producenckich” (-moz-, -webkit- etc.). Nie dość tego — na przestrzeni kilku wersji danej przeglądarki potrafiła się całkowicie zmieniać implementacja formatu danej właściwości (jak było np. z linear-gradientem w Webkicie).

Wiąże się to oczywiście z faktem, że póki co wspomniane właściwości CSS nie są jeszcze częścią oficjalnej, ostatecznej specyfikacji, dlatego póki co producenci przeglądarek w taki sposób sobie je „testują”. Ale jeśli ktoś chce z tych możliwości korzystać już dzisiaj, stoi przed nim spore wyzwanie związane z napisaniem kodu kompatybilnego ze wszystkimi aplikacjami. Można oczywiście pomagać sobie „ręcznie” — korzystając chociażby z http://caniuse.com/ .

Na szczęście pojawiła się niedawno webowa aplikacja http://prefixr.com – w której można wkleić fragment kodu sformatowanego tylko wg. oficjalnej propozycji specyfikacji, np:

body
{
  border-radius:5px;
}

A ona wypluje nam kod z wszystkimi wariantami dla popularnych przeglądarek

body {
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Fajne? Pewnie, że fajne. Ale „fajność” idzie znacznie dalej. Twórcy tej jakże użytecznej aplikacji udostępniają także API oraz przykłady wykorzystania go w różnych edytorach programistycznych. Niestety widać wyraźnie, że preferują Maca — co znaczy, że nie ma np. na liście mojego ulubionego edytora, Komodo Edit. Na szczęście, można wykorzystać ich wskazówki i zrobić to samemu w bardzo prosty sposób.

Otwieramy Toolboxa, klikamy PPM i wybieramy "Add" » "New Command..."

W polu "Command" wklejamy:

curl -sSd css="%S" http://prefixr.com/api/index.php

Jeśli chcemy mieć przypisany skrót klawiszowy (a chcemy), przechodzimy do zakładki "Key Binding" i wpisujemy wybrany skrót. Ja wybrałem Ctrl+L, R.

Czas na test. Wpisujemy jakąś prostą deklarację w oknie edytora, zaznaczamy…

Wciskamy Ctrl+L, a potem R… i voila!

Acha, żeby to zadziałało, w systemie musi być zainstalowany cURL (chociażby stąd: http://curl.haxx.se/ ), a adres jego pliku wykonywalny musi być w zmiennej systemowej PATH (jak mniemam — ja przypadkiem już miałem zainstalowanego cURLa z inną aplikacją, więc u mnie działało „na dotyk”).

I ostatnia sprawa: Prefixr nie radzi sobie niestety z co bardziej specyficznymi deklaracjami. Nie rozwinie nam niestety np:

border-bottom-left-radius: 5px;

Ale po pierwsze, da się samemu ekstrapolować już potrzebne prefixy z rozwinięcia podstawowej wersji deklaracji, a po drugie — mam nadzieję, że będą konsekwentnie usprawniać aplikację.