Rendre votre CSS compatible sur tous les navigateurs

Temps de lecture : 2 minutes

Prefixr est un outil, en version alpha, qui vas vous aider dans le développement de vos designs. En effet, le site vous propose de prendre n’importe quel code CSS et de vous en ressortir un code CSS compatible sur tous les navigateurs.

Voici un exemple d’utilisation :

Vous avez écrit :

.example {
  border: 10px solid #000000;
  width: 500px;
  height: 500px;
  -moz-border-radius: 10px 200px 200px 10px;
}

Malheureusement -moz-border-radius ne fonctionne pas sur tous les navigateurs… On vas donc passer le code dans Prefixr pour le rendre compatible.

Et on vas obtenir le code suivant :

.example {
	border: 10px solid #000000;
	width: 500px;
	height: 500px;
	-webkit-border-radius: 10px 200px 200px 10px;
	-moz-border-radius: 10px 200px 200px 10px;
	-o-border-radius: 10px 200px 200px 10px;
	-ms-border-radius: 10px 200px 200px 10px;
	-khtml-border-radius: 10px 200px 200px 10px;
	border-radius: 10px 200px 200px 10px;
}

Bien que ceci soit déjà pas mal, cela implique de faire des aller retours entre votre éditeur et votre navigateur pour tester et modifier votre CSS. C’est pourquoi les développeur ont mis en place une api accessible depuis les éditeurs de texte évolués afin d’utiliser le service sans aller sur le site.

Pour cela il faudra créer une nouvelle commande dans votre éditeur qui exécutera :

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" 

Il faudra installer curl si vous ne l’avez pas.

En conclusion Prefixr est un outil très intéressant et offrant un gain de temps considérable. Cependant il vas nécessiter des mise à jours régulières pour s’adapter au mieux à toutes les règles du CSS3.

Précédent

Les extensions WordPress

Suivant

Menu contextuel en JavaScript

  1. Arthur Maroulier

    Merci qui ?

  2. merci Arthur 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Fièrement propulsé par WordPress & Thème par Anders Norén