Dev'nsound

Après une petite initiation à jQuery, voici quelques ressources CSS bien commodes lorsque l’on fait de l’intégration (ou du développement, c’est au choix). On a toujours besoin d’optimiser son code, de savoir si le code que l’on produit est valide sur tous les navigateurs, ce qui pose problème dans le code actuel… Parmi quelques nombreux sites similaires, je vous propose quelques outils assez indispensables :

CSS Properties Index — Une véritable mine d’or pour en savoir plus sur les compatibilités entre les versions CSS (en sachant telle version de tel navigateur introduit telle version de CSS (1, 2, 2.1, 3…), vous saurez les compatibilités entre les navigateurs) ! Vous aurez en un clin d’œil (et en un paquet de temps à charger la page aussi) quelle propriété CSS va avec quelle version !

CSS Compressor (Avancé) — Un outil à utiliser sans modération, puisqu’il réduira et optimisera un minimum votre code css jusqu’à une lisibilité définie. Pour ma part je m’en suis servi de nombreuses fois pour supprimer des espaces près de de fermetures d’accolades ou pour uniformiser les /* commentaires */, par exemple. Depuis, j’ai acquis cette convention de programmation, et je ne m’en sers presque plus, mais il est bien utile et rend beaucoup de services !

Clean CSS — Un autre outil similaire à celui cité plus haut, qui permettra d’approfondir dans l’optimisation du code css. L’utiliser avec précaution tout de même, sans quoi vous ne sauriez pas ce qui à posé problème lors de l’opération… Regardez bien le descriptif généré !

Reset CSS — On ne le présente plus, le reset CSS d’Eric Meyer permet de régler un tas de problèmes d’affichage. Ce n’est pas forcément un « outil » proprement dit, mais, comme le dit Eric Meyer, une « remise à zero » (reset) du style css de la page par défaut. Généralement (ce n’est pas le cas de tout le monde évidemment), quand on fais de l’intégration, on annule tous l’affichage de son code HTML à la volée (par exemple) :

*{margin:0; padding:0;}

Le reset CSS permet de partir sur une bonne base, où d’emblée, tous les éléments, selon les navigateurs, s’afficheront (plus ou moins bien) à l’identique : ce n’est pas le cas natif des navigateurs (Internet Explorer 7 n’affiche pas de la même façon une balise <pre></pre> que sous Opéra ou Firefox, voir même Safari). Il suffit donc de lier la feuille de style à votre page html comme ceci :

<link rel="stylesheet" type="text/css" href="reset.css" />
 
ou
 
@import url(reset.css);

C’est un choix à faire quand on intègre, mais pour ma part je l’insère d’office dans mes intégrations CSS, par sureté de produire un projet plus ou moins bien débuté, et par rapidité ! On insère la feuille de style et on passe directement à la suite sans se soucier du reste !
Il faut noter que ce n’est pas un produit miracle ! Ça ne règlera pas tous les problèmes de compatibilités entre les navigateurs, mais ça apportera une grande aide et un gain de temps non négligeable (pour quelques kilos) !