Bric à brac d’outils CSS
Le petit ménage que j’ai fait cette semaine dans mes bookmarks m’a permis de retrouver un petit nombre d’outils CSS fort utiles dont j’avais oublié l’existence pour la plupart (trop de bookmarks tue le bookmark !). Petite présentation rapide des quelques trouvailles que j’avais donc, bien cachées ! Elles sont, vous le verrez, dans des domaines très variés (css3, mise en page de newsletters, taille de polices, optimisation de code…)
Fractal, outil CSS pour vos newsletters
Fractal est un outil que j’aime beaucoup. Il permet de vérifier la compatibilité CSS de vos newsletters en HTML sur pas moins de 24 clients e-mails. En quelques coups d’œils vous pouvez ainsi voir quel client de messagerie supporte ou ne supporte pas quelle propriété CSS.
Color Scheme Designer
Color Scheme Designer est un outil très complet dédié aux designers. Il permet en effet de donner quelques (le mot est peut être faible) pistes pour définir la palette de couleurs pour l’identité visuelle d’un produit par exemple. Simplement, à travers le choix d’une couleur, Color Sheme Designer va vous proposer des nuances de cette couleur ou plus globalement une palette comprenant des couleurs complémentaires. C’est un outil que j’affectionne beaucoup car ils ont pensé à tout, jusqu’au texte à la « lorem lipsum » en blanc, noir et gris au survol des couleurs pour avoir un aperçu pour sites internet. Et pour les personnes qui malgré tout ne sont pas inspirées, il est possible de générer un choix random de palettes de couleurs, tout cela bien entendu exportable en HTML/Format Photoshop …
CSS Formateur et Optimiseur
CSS Clean est un outil permettant d’optimiser les feuilles de styles CSS en fusionnant les propriétés identiques qui sont parfois répétées et compresse le code.
CSS Prism
L’outil principal qui se dégage du site Css-Prism est, pour moi, le bookmark qui vous permet d’avoir toutes les palettes de couleurs, classées par feuilles de style, des sites que vous visitez. Vous pouvez bien entendu visualiser pour quel élément chaque couleur est appliquée… Cet outil n’est pas sans me rappeler un peu what font is dont je vous avais déjà parlé dans l’article « Utilisation et optimisation de votre @font-face », qui lui se centrait sur les polices des sites visités.
Convertiseur em/pixel
Cela peut paraitre inutile pour les plus accro d’entre vous qui ont, par habitude, la plupart des nombres pour les équivalents em/ pixels en tête, mais ce petit outil reste très utile pour les moins « geek ». En effet cette petite application, pour une valeur en pixel donnée (par exemple 12px) vous donne l’équivalent en em (je sais que ça va vous travailler toute la nuit si je ne vous donne pas la réponse, ici c’est 0.750em).
Galerie de patterns CSS3
Css3 patterns nous propose une galerie de patterns pour CSS3. Choisissez votre imprimé et en un clic vous avez le code pour ce rendu disponible. Il doit sûrement exister un très grand nombre de sites permettant d’éditer des grilles CSS pour le design, mais c’est un système que je n’utilise pas du tout car je le trouve assez réducteur donc je n’ai aucune bonne adresse à vous donner sur ce sujet !