Prefixr, rendez compatible votre CSS sur tous les navigateurs !

La compatibilité du CSS sur tous les navigateurs est un élément clé dans la conception d’un site web. Depuis l’arrivée de CSS3 et de ses nouvelles propriétés, il faut en général entrer trois fois une même propriété afin que chaque navigateur puisse l’interpréter, et l’appliquer. C’est un travail lourd, et très répétitif. Prefixr vous allègera grandement ce travail, puisqu’il localisera les propriétés CSS3 et les rendra compatible à chaque navigateur.

Prefixr, rendez compatible votre CSS sur tous les navigateurs ! - Logo de Prefixr

Comment ça marche ?

Dans votre feuille de style, vous n’aurez désormais plus qu’à taper une seule propriété :

[sourcecode language="css"]
body {
border-radius: 5px;
}
[/sourcecode]

Copiez/collez ce code dans l’éditeur de Prefixr et cliquez sur le bouton Prefixize. Voici le résultat :

[sourcecode language="css"]
body {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
[/sourcecode]

Pour rappel, voici en détail les différentes balises :

  • -webkit- : Google Chrome
  • -moz- : Mozilla Firefox
  • -o- : Opéra
  • -ms- : Internet Explorer
  • -khtml- : Konqueror

Le code obtenu est donc compatible avec ces cinq navigateurs.

Intégrer Prefixr sur vos logiciels favoris

Grâce à l’API de Prefixr, vous allez pouvoir intégrer ce service à vos différents outils de développement. Vous ne serez donc plus obligé de passer par l’interface.

Intégration dans Notepad++ (Windows)

Utilisateurs de Windows, j’ai pensé à vous ! J’ai trouvé une solution afin d’intégrer Prefixr à Notepad++. Ce n’est peut être pas la méthode la plus élégante, mais ça fonctionne ! ;)

Installation de cURL

Il vous faudra d’abord installer cURL, téléchargeable à cette adresse. Ayant eu quelques difficultés à faire fonctionner l’exécutable, j’ai pris la librairie libcurl. Dézippez le fichier, et copiez le contenu du dossier bin dans C:\Windows\System32. Si vous êtes sur Windows 64bits, il faut copier le contenu dans C:\Windows\SysWOW64 (merci @kokmok pour l’info).

Avant de continuer, vérifions que la commande cURL fonctionne. Démarrez une fenêtre de commande, et entrez curl http://www.google.com/.

Si vous obtenez du contenu web, vous pouvez passer à l’étape suivante !

Intégration du script dans Notepad++

Démarrez Notepad++, onglet Compléments, vous devriez trouver NppExec. Ce plugin est installé par défaut, cependant, si vous ne le trouvez pas, mettez à jours Notepad++ ou téléchargez-le dans le Plugin Manager.

Cliquez sur l’option Exécutez (F6), et entrez le code suivant :

[sourcecode language="plain"]
NPE_CONSOLE v+
curl -sSd "css=$(CURRENT_WORD)" "http://prefixr.com/api/index.php"
sel_settext $(OUTPUT)
[/sourcecode]

Prefixr, rendez compatible votre CSS sur tous les navigateurs ! - Intégration de Notepad++

Sauvegardez ce script, donnez lui un nom explicite puis fermez cette fenêtre.

Il vous suffira désormais de sélectionner votre CSS, d’appuyer sur F6, de choisir le script que vous avez sauvegardé, et de l’exécuter ! Cela devrait directement vous remplacer le code de votre CSS en ajoutant les bonnes options.

Intégration dans TextMate (Mac)

L’intégration de Prefixr dans TextMate est très simple. Naviguez dans l’onglet Bundles / Bundle Editor / Show Bundle Editor. Ajoutez une nouvelle commande grâce à l’icône « + » en bas à gauche de la fenêtre, puis tapez dans l’éditeur le code suivant :

[sourcecode language="plain"]
curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"
[/sourcecode]

N’oubliez pas de sélectionner un raccourcis, puis fermez le Bundle Editor. Lorsque vous souhaiterez utiliser Prefixr, il vous suffira de sélectionner le CSS à rendre compatible et utiliser le raccourcis afin de le remplacer par le CSS compatible.

Prefixr, rendez compatible votre CSS sur tous les navigateurs ! - Intégration de TextMate

Intégration dans Coda (Mac)

Enfin, si vous développez sous Coda, un lecteur de Net.tutsplus a réalisé un plugin permettant d’intégrer Prefixr. Vous pouvez le récupérer à cette adresse puis l’installer.

Son utilisation est simple, sélectionnez le CSS à rendre compatible, appuyez sur Control+Option+P, et votre CSS sera remplacé par celui Prefixr.

Intégration du script dans Komodo Edit/IDE (Edit)

Suite à la demande de @kokmok, j’ai également trouvé une solution pour intégrer l’API de Prefixr à Komodo Edit/IDE. Il vous faudra tout de même installer la librairie CURL si vous êtes sur Windows. Suivez la procédure détaillée dans l’intégration à Notepad++.

Une fois CURL installé, commencez par créer un fichier CSS et entrez le code suivant :

[sourcecode language="css"]
body {
border-radius: 5px;
}
[/sourcecode]

Sélectionnez le code puis allez dans le menu Tools puis Run Command (ou CTRL + R). Dans le champ Run, entrez le code suivant :

[sourcecode language="plain"]
curl -sSd css="%s" http://prefixr.com/api/index.php
[/sourcecode]

Appuyez sur le bouton More afin d’afficher toutes les options et cochez les cases suivantes :

  • Pass selection as input
  • Insert output
  • Add to Toolbox
  • Save advanced options as defaults

Cliquez enfin sur Run. Cela devrait remplacer le code CSS par celui renvoyé de l’API de Prefixr.

En bonus, je vous propose de personnaliser ce script. Dans la Toolbox, une commande s’est ajoutée (nom : curl -sSd …). Clic-droit sur la commande puis Properties, vous pouvez changez le nom ainsi que l’icône dans l’onglet Command, et même lui affecter un raccourcis clavier dans l’onglet Key Binding.

Conclusion

Prefixr vient donc faciliter grandement la compatibilité des nouvelles propriétés CSS3 sur tous les navigateurs. L’API n’intègre pas encore toutes les fonctionnalités du site (compression du code et choix des propriétés à inclure), mais le service vous fera tout de même gagner un temps précieux !

Si vous rencontrez des problèmes lors de l’installation des différents plugins, n’hésitez pas à laisser un commentaire à la suite de cet article, où à me contacter directement sur Twitter.

Edit : Suite à la remarque de R. Goetter en commentaire de cet article, il existe un outil qui existe déjà depuis on bon bout de temps (et qui est français d’ailleurs) : http://prefixmycss.com/.

Que pensez-vous de ce service ? Utilisez-vous d’autres services afin de rendre compatible votre code CSS sur tous les navigateurs ? N’hésitez pas à donner vos impressions !

22 commentaires pour “Prefixr, rendez compatible votre CSS sur tous les navigateurs !”

  1. Lukpapanne dit :

    merci!! En + c clair et précis! ;-)

  2. Thomas dit :

    Salut,

    C’est clair que c’est pratique.

    Mais quelque chose m’échappe: le propriétés CSS3 comme border-radius par exemple, sont désormais comprises par l’ensemble des — desktop — navigateurs non ?

    A+,

  3. Raphael dit :

    @Thomas : oui c’est reconnu par les navigateurs actuels en effet, par exemple Firefox 4.
    Mais si tu veux que cela fonctionne aussi sur FF3.6, il faut l’écrire avec le préfixe -moz-

    Sinon, concernant cet outil, je trouve ça bien dommage d’avoir copié un outil qui existe déjà depuis on bon bout de temps (et qui est français d’ailleurs) : http://prefixmycss.com/

  4. Florent Suc dit :

    Merci pour le lien Raphael !

    Peut-on intégrer ce service à des outil de développement ?

  5. Yohann Poiron dit :

    Florent si tu n’y vois pas d’inconvénients je vais l’ajouter en fin d’article !

  6. Florent Suc dit :

    Pas de soucis !

  7. Florent Suc dit :

    En effet, les nouvelles version des navigateurs intègrent mieux ces propriétés.

    Cependant, il ne faut pas oublier que de nombreuses personnes restent dans des versions inférieures, et que c’est également nécessaire pour les navigateurs mobiles. ;-)

  8. Thomas dit :

    Autre point, il serait intéressant de savoir si les global proxies comme Google PSS font ce genre d’optimisation de compatibilité !

    Mais j’en doute car cela va un peu à l’encontre du shrinking proposé…

  9. Pisang dit :

    Tant que les propriété du style -moz ne sont pas reconnu par les normes W3C c’est des balises à bannir donc pas de grand intérêt

  10. Raphael dit :

    @Pisang : attention à bien se renseigner avant de dire ce genre de choses :)
    En fait, les préfixes tels que -moz- sont non seulement reconnus par le W3C, mais c’est même le W3C qui les a inventés et qui demande à les utiliser :
    http://www.w3.org/TR/CSS2/syndata.html#vendor-keywords

  11. Yohann Poiron dit :

    Raphaël a été plus rapide que moi… il est clair que les préfixes -moz- sont recommandés…

  12. Pisang dit :

    Oops en voyer trop tôt. Je voulais ajouter qu’il est préférable d’utiliser un script de type Modernizr afin de rendre compatible les propriétés CSS3 avec les anciens navigateurs

  13. Benoit dit :

    Je peux me tromper, mais je ne crois pas que Modernizr rende compatible quoi que ce soit. Il ne s’agit que de détecter le support de certaines propriétés selon le navigateur de l’utilisateur. Donc ça ne dispense pas d’utiliser ces préfixes dans les navigateurs correspondant.

  14. Arnaud dit :

    Merci! je vais tester ça de suite, ça va être très pratique :)!

  15. Yokitap@creation site dit :

    hou là, un grand merci pour cette belle explication ! Je m’arrachais les cheveux avec ces fichues comptabilités ! Je vais essayer ça !

  16. Yohann Poiron dit :

    N’hésite pas à revenir pour nous dire ce que tu en penses !

  17. Antoine dit :

    Salut, juste pour compléter cet article, il existe un plugin pour Prefixr.com sous Macrabbit Espresso (Mac) développé par OneCrayon
    https://github.com/onecrayon/Prefixr.sugar

    Pour l’utiliser, il faut également installer en amont ShellActions
    https://github.com/onecrayon/ShellActions-sugar

  18. Bilou dit :

    Bonjour à tous!

    Je débute en html et css donc j’aimerais savoir si cette méthode est à appliquer à tous le code css3?

    Merci pour vos réponses

+ Trackbacks ...

  1. [...] Prefixr, rendez compatible votre CSS sur tous les navigateurs … La compatibilité du CSS sur tous les navigateurs est un élément clé dans la conception d'un site web. Depuis l'arrivée de CSS3 et de ses nouvelles. Source: http://www.blog-nouvelles-technologies.fr [...]

  2. [...] Lire l’article 5 août 2011 Short URL compatibilitecsscss3prefixr [...]

  3. [...] Prefixr, rendez compatible votre CSS sur tous les navigateurs ! | Le blog des nouvelles technologies… Prefixr, rendez compatible votre CSS sur tous les navigateurs ! La compatibilité du CSS sur tous les navigateurs est un élément clé dans la conception d’un site web. Depuis l’arrivée de CSS3 et de ses nouvelles propriétés, il faut en général entrer trois fois une même propriété afin que chaque navigateur puisse l’interpréter , et l’appliquer. C’est un travail lourd, et très répétitif. Prefixr vous allègera grandement ce travail, puisqu’il localisera les propriétés CSS3 et les rendra compatible à chaque navigateur . [...]

  4. [...] Prefixr, rendez compatible votre CSS sur tous les navigateurs ! Prefixr, rendez compatible votre CSS sur tous les navigateurs ! La compatibilité du CSS sur tous les navigateurs est un élément clé dans la conception d’un site web. Depuis l’arrivée de CSS3 et de ses nouvelles propriétés, il faut en général entrer trois fois une même propriété afin que chaque navigateur puisse l’interpréter , et l’appliquer. 10 Useful Tools For Cross-Browser Compatibility Check Something that makes a website great is when it is compatible in multiple browsers regardless of version. Technically this is referred to as cross-browser compatibility . Multi-browser means a website will work in several web browsers like Safari, Chrome, Firefox, Internet Explorer. While cross-browser means a website works in any browser, and any version of the browser, being used. [...]

Laissez un commentaire

Commentaires en lien dofollow à partir de 2e commentaire, profitez-en !

XHTML: Vous pouvez utiliser ces balises et attributs: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>