Rendre votre CSS compatible sur tous les navigateurs

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.

Peity

Peity est un petit plugin JQuery ( 2ko ) qui permet de réaliser des graphiques sous forme de fromages, de lignes, ou de simplement barres .

Après avoir inclus votre fichier javascript dans votre page après JQuery, vous pouvez générer vos graphiques.

Pour un graphique en barre :

  • Dans votre code HTML : 5,3,9,6,5,9,7,3,5,2 Dans le span vous avez toutes les valeurs de votre graphique
  • Dans votre code Javascript : $(« .bar »).peity(« bar »);

Voici le type de graphique obtenu :

A savoir que pour chaque type de graphique des options comme width, height ou radius permettent d’ajuster la taille des graphiques à vos attentes.

Si vous êtes un habitué à JQuery cette syntaxe ne vous choquera pas sinon reportez-vous à la page suivante pour voir les sélecteurs possibles en JQuery : Liste des selecteurs