Archive for the ‘CSS’ Category

Truc CSS #13 – Alleger ses commentaires dans les CSS

26 septembre 2007

Il est bien entendu recommandé de commenter son code CSS qui est loin d’être simple à lire, surtout après quelques semaines. Par contre, il y a plusieurs facons de commenter son code. L’usage de base utilise 3 lignes :

/*——————-*/
/*– Commentaire –*/
/*——————-*/

Ces 3 lignes de code contiennent autant d’information que la ligne suivante:

/*Commentaire*/

Tout aussi lisible et compréhensible, rassembler les commentaires permet de réduire la taille des fichier CSS.

Publicités

Les grilles sont chouettes

1 juin 2007

Si vous êtes un neophyte en mise en page CSS, je vous propose d’aller jeter un oeil sur les templates de grilles proposés par intensivstation. Ils ont en effet remis à jour leurs templates à l’usage des designers web. Le plus difficile maintenant: choisir celui qui vous conviendra le mieux.

70 Expert Ideas For Better CSS Coding

15 mai 2007

Un nouvel article compilation nous est proposé par smashingmagazine.com sur 70 trucs d’experts qui peuvent améliorer nos performances en codage CSS. Une version pdf est même promise d’ici peu …

Mon avis sur le sujet:

  • Pour le reset des CSS, j’utilise personnellement les CSS de yahoo, reset.css et font.css.
  • Pour charger vos pages web plus rapidement, evitez les @import
  • Mettez des commentaires dans vos CSS, ils commencent par /* et se terminent par */

Truc CSS #12 – pour deboguer vos DIV

23 avril 2007

Un petit truc à utiliser lors de vos développement, ajouter à votre CSS globale:

div { border: 1px solid red; }

Ainsi, tous les div seront encadrés, ce qui aide grandement à corriger les problemes de mise en page.

Truc CSS #11 – utiliser plusieurs classes

20 avril 2007

On peut appliquer plus d’un classe sur un element. Ainsi, si on veut appliquer 2 classes sur une balise paragraphe, il suffira de l’indiquer de la manière suivante:

<p class= »classe1 classe2″>

Cela semble evident mais beaucoup de personnes l’ignorent …

Truc CSS #10 – affichez vos couleurs

30 mars 2007

CCS permet de définir les couleurs de différentes manières.

  1. La plus classique consiste à specifier les 3 valeurs, rouge, vert et bleu en hexadecimal et précedé d’un #. Exemple: « #000000 »
  2. Deuxième notation, donner les valeurs rouge, vert et bleu en decimal. Exemple: « RGB(0,0,0) »
  3. Troisième notation, donner le nom de la couleur souhaitée. Exemple: « black »

On peut également utiliser des raccourcis d’écriture quand les valeurs hexadecimales sont identiques, ainsi la notation « #0BC » est équivalente à la notation « #00BBCC ».

Truc CSS #9 – réaliser de bô tableaux

27 mars 2007

J’avoue, je ne me suis pas foulé pour le titre mais le contenu en vaux la peine, jugez plutôt:

Si le même principe que le faaaameux Zen Garden, je vous propose aujourd’hui d’aller piquer du code sur le site CSS Table Gallery qui nous propose une gallerie de styles CSS divers et variés de mise en page ce qui releve toujours une gageure, j’ai nommé les tableaux. Je vous ai mis l’adresse sur un style qui me plait, ca vous dit quelque chose 😉

Trier et filtrer ses tableaux HTML

27 mars 2007

Pour eviter de longues et infructueuses recherches sur le web, je vous recommande une librairie Javascript simple et efficace présentée sur javascripttoolbox pour integrer dans les tableaux HTML des fonctionnalités de tri et de filtrage. La librairie Yahoo (YUI) ne propose en effet pas encore de solution satisfaisante avec son composant TableData qui viens juste de sortir en version beta.

La rapidité est impressionnante, même avec de long tableaux. De plus, cette librairie javascript combinée avec une CSS gère efficacement les couleurs alternées sur les lignes.

Truc CSS #8 – standardisez vos formulaires

26 mars 2007

Il n’y a rien de plus difficile à mettre en page qu’un formulaire. Les objectifs sont en effet multiples et souvent contradictoires: attractif, fonctionnel, utilisable, robuste … (rangez dans l’ordre de priorité de votre projet). Pour vous aidez dans cette quête, le succès passe par le bon usage d’HTML bien formé, des CSS et du Javascript qui doit rester d’un usage optionnel sur vos formulaires.

Un excellent exemple d’implémentation de ces principes nous est présenté sur Uni-Form, savant mélange d’HTML bien formé, de CSS et de Javascript. Vous pouvez même en telecharger le code.

Truc CSS #8 – cherchez l’inspiration

14 mars 2007

Quoi de mieux pour trouver l’inspiration CSS que de se balader sur d’autres sites ? Au lieu de partir au hasard, prenez un bon point de départ comme CSS mania ou CSS Zen garden par exemple. Deux sites aux approches différentes qui valent le détour.