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ę.
).
