Clean-css : gratuit, simple et performant

Clean-css : gratuit, simple et performant

Présentation rapide d'un outil plutôt utile pour tous les webdesigner et de façon plus générale, à tous ceux qui créent des feuilles de style.
Bien que nos réseaux actuels soient de plus en plus performants et même si nous disposons d'une bande passante de plus en plus élevée, n'en oublions pas pour autant d'optimiser nos sites... Après avoir passé toutes vos images en revue et optimisé leur poids au bit près, après avoir optimisé vos Javascript et vérifié que vos pages php ou html n'excèdent pas les 200ko, vous pouvez encore gagner du poids... si si !

CleanCSS vous permet de formater et d'optimiser vos css selon de nombreux critères... Et croyez-moi, vous pourrez gagner pas mal de poids, surtout si vous êtes de ceux qui - a è r e n t - les css, histoire d'y voir un peu plus clair dans des pages atteignant facilement plusieurs milliers de lignes...

Comment ça marche ?

1. Vous uploadez votre feuille de style
2. Vous procédez aux réglages :)
Une première liste à choix multiples vous permet de choisir la méthode de compression souhaitée : "le plus compact / très compact / normal / peu compact / sur mesure". Les feignants pourront s'arrêter là.
Pour ceux qui veulent un peu plus de précision, afin d'affiner votre choix, d'autres options sont proposées :

Tri des selecteurs ; fusion des propriétés(les classes ou id ayant les mêmes propriétés css sont mises ensemble) ; compression de la propriété "font-weight" (un chiffre remplacera la chaine de caractères : ex : "font-weight:bold" > "font-weght:300") etc etc...

Clean css est un outil gratuit, simple d'utilisation, traduit en Français pour les paresseux, et d'une redoutable efficacité (on vous donne même le pourcentage de compression après formatage de vos css).

Le lien : http://www.cleancss.com/

Web developer's field guide : encore une liste utile!

Web developer's field guide : encore une liste utile!

Ola ola mes chers lecteurs (très nombreux si j'en juge du nombre de commentaires postés depuis le commencement de ce blog ! ...)
Je viens aujourd'hui pour vous livrer une adresse utile.
Dans la même lignée que le site Splitdaddiz où l'on peut trouver une liste de sites chers à l'auteur, je voudrais faire partager une autre liste d'adresses à faire pâlir tout bon webmaster/webdesigner et autre web-trucmuche' qui se respecte...

Au sommaire : créativité, techniques et langages de développement web, couleurs, typo, css ... et j'en passe...
Il m'est très difficile de quantifier le nombre de liens présentés ici mais croyez-moi, c'est assez phénoménal...
C'est vrai que niveau design, on a vu mieux, mais ça a au moins le mérite d'être clair et après tout, c'est ça l'important.

Comme je suis un brin toqué, là aussi, j'ai pris le temps de faire une "copie générale d'écran"... et hop !
Ah oui j'oubliais l'adresse...et un lien en rapport où vous pourrez trouver une autre grosse liste très utile...

CSS : des valeurs par défaut selon vos navigateurs

CSS : des valeurs par défaut selon vos navigateurs

Qui ne s'est jamais arraché les cheveux en voulant résoudre un souci de mise en page foireuse entre un rendu web sur Internet Explorer et un rendu sur Firefox?
Malheureusement pour les webmaster, webdesigner et tous ceux qui s'adonnent aux joies de la conception Web, une même portion de code XHTML couplé à ses CSS n'aura pas le même rendu sur tous les navigateurs...
Cependant, comment expliquer qu'avant même de toucher une ligne de css, le rendu est déjà différent entre Firefox et...IE(par exemple).

C'est en cherchant un peu sur le net pour me documenter à ce sujet que je suis tombé sur un article très intéressant sur l'excellent site Alsacreations.

Comme vous ne le savez peut-être pas, chaque navigateur possède des valeurs attribuées par défaut pour tout élément constitutif des CSS.
Ainsi, pour un élément de type "body", Internet explorer attribuera par défaut un margin:15px 10px; tandis que Firefox attribuera un margin:8px;.
Bien entendu, ces valeurs ne s'appliquent que si vous même n'en inscrivez pas dans votre feuille de style...

Ah ah ! On comprend mieux pourquoi il est parfois si difficile d'arriver à un résultat nikel sur différents browser...
Un autre exemple : L'élément "p" aura par défaut, chez IE6 un margin:19px 0; et chez Firefox un margin:16px 0;

Maintenant je vous vois déjà arriver avec vos gros sabots et penser : "Hum hum... si j'ai accès à ces valeurs, ça m'aiderait pas mal pour corriger les différences de mise en page sur mes maquettes...oui oui oui... "

Malheureusement, il n'est pas toujours facile d'obtenir ces chiffres... Cela dépend des navigateurs. Sur Firefox par exemple, pas de souci. Tout est accessible dans les fichiers "html.css", et "forms.css" à l'adresse :
"..\Program Files\Mozilla\Firefox\res".
En revanche, pour d'autres (je ne citerai pas de noms mais suivez mon regard...) les fichiers ne sont pas accessibles...

Mais là je dis merci à un certain Julien Royer, (membre actif du forum d'Alsacreations) qui a trouvé une solution permettant de récupérer ces valeurs pour la majorité des browser.
Ainsi, vous pouvez récupérer des copies d'écran des valeurs par défaut d'IE6, IE7,Firefox etc...Vous pouvez également tester cet outil sur votre propre navigateur. (Je vous indique le lien en fin d'article)

Avant de clore ce post je voudrais revenir sur une chose importante citée dans l'article d'alsacreations (dont je suis entrain de vous faire un résumé) :

Puisque les valeurs attribuées aux éléments des css sont différentes en fonction des navigateurs, une solution consiste à tout remettre à zéro au début de votre feuille de style en indiquant :

* . {margin:0;padding:0}

Cette déclaration très utilisée n'en est pas pour autant efficace. En effet, si vous jetez un oeil aux valeurs par défaut des propriétés css, vous vous apercevrez surement que, selon les browser, les différences ne sont pas si étendues que cela. En tous cas, la solution consistant à faire un "reset" est trop excessive et requiert qu'on ré-attribue manuellement les marges à tous les éléments qui en ont besoin. Un oubli est donc vite arrivé (notamment dans le cas des formulaires) et peut donc engendrer une différence de mise en page entre IE et Firefox par exemple. Ainsi, en utilisant une "solution" qui était censée corriger les bugs, vous en avez créé d'autres... Bref, mieux vaut éviter les solutions trop "brutales" :)

Pour plus d'informations je vous donne le lien vers l'excellent article d'alsacreations traitant du sujet: ici.