Vestiges d'un CSS Guru
Une collection permanente d'astuces CSS pour faciliter la création et la maintenance de vos CSS.
Si il vous arrive d'appliquer un dégradé CSS3 du style -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%), sachez que c'est un background-image. Du coup, faites attention en utilisant la notation raccourcie background à ne pas définir 2 background-image.
Un label sert à décrire l’input (ou textarea) auquel il est associé. Une technique très courante est de rendre cliquable ce label pour ainsi appliquer un focus sur l’input correspondant. Il faut pour cela que l’attribut “for” du <label> et l’attribut “id” de l’input correspondent. Mais il existe un raccourci pour les input radio et checkbox notamment : mettre l’input dans le label. Exemple : <label>Oui <input type=”checkbox”></label> <label>Non <input type=”checkbox”></label>
Pour que votre texte soit aligné verticalement, et ce, quel que soit le nombre de lignes que votre texte va occuper, il faut appliquer comme CSS : display:table-cell; vertical-align:middle; avec hauteur et largeur définies.
Un position absolute sort un élément du flux. Du coup, il ne peut décaler les éléments qui le suivent si il venait à grandir en hauteur. Du coup, il vaut mieux utiliser un position absolute sur les éléments à hauteur fixe, comme le header par exemple.
En mode "normal", si on applique à un élément un width 400px, padding 20px et border 2px, alors sa largeur totale est de 444px. En quirks mode, elle est de 400px. Les select, quelle que soit le mode de rendu, fonctionne comme un quirks mode : tu définis un width, tu rajoutes du padding, et la largeur totale ne change pas.
C'est facile : un display none fait disparaître l'élément auquel il s'applique, comme s'il n'avait jamais existé, comme s'il était absent du code HTML. Par contre, un visibility hidden est différente : il rend l'élément invisible mais l'élément occupe encore de l'espace. Du coup, on a un espace vide à l'endroit où il devrait être.
Les images de fond, même aujourd'hui, peuvent mettre un certain temps à s'afficher. Du coup, votre élément peut s'avérer illisible pendant plusieurs secondes (par exemple un texte en blanc qui attend son image de fond rouge). Pour éviter ce désagrément, appliquez un background-color rouge qui lui, s'affichera instantanément, et qui sera masquée par l'image par la suite. Bien sûr, évitez cette technique si votre image de fond est un PNG transparent car on verra encore la couleur de fond.
Si vous avez un formulaire (de recherche par exemple), évitez de styler directement la balise <form> en faisant form{ padding: 20px;} mais utilisez plutôt une <div> "form" qui englobe ce <form> et stylez cette <div>. Pourquoi ? Un développeur peut être amené à déplacer la balise <form> pour inclure tous les éléments dont il a besoin. Du coup, si le code HTML change, votre design va en prendre un coup. J'ai déjà vu un <form> qui s'ouvrait juste après le <body> et qui englobait tout le site...
Imaginez un header suivi d'une div "main", où aucun des deux n'a de margin. Dans votre "main" vous avez une liste de div "post" où chacun à un margin-top de 20px. Résultat : le "main" est espacé du header de 20px. Le margin-top du "post" dans le "main" dépasse du "main" et décale le "main" (et donc les posts) du header.
C'est avant tout pour les titres h1, h2... h6. Ces balises de titre ont une valeur sémantique importante, ainsi qu'en SEO. Du coup, il faut éviter de styler directement les balises en faisant h1{ font-size: 32px;} et h2{ font-size: 24px;} mais plutôt .title{ font-size: 32px;} et .subtitle{ font-size: 24px;}. Comme ça, vous pourrez modifier la valeur sémantique des balises h1 et h2 sans en changer le style et sans avoir à retoucher la CSS.
La propriété vertical-align sert à aligner les images au sein d'un texte ainsi que le texte au sein des cellules d'un tableau. Pour les images, cet alignement peut avoir un rendu bien différent selon qu'il soit en sub, top, text-top, baseline, middle, bottom, text-bottom... Du coup, si vous avez à "annuler" un vertical-align, appliquez la valeur par défaut "baseline".
Si vous voulez positionner un élément très précisément (i.e. au pixel près) et que cet élément à des bordures, alors faites attention à prendre en compte les bordures dans votre calcul, parce que justement, le point de départ ne les inclut pas. Elles vont donc "dépasser".
Pour changer les puces d'une liste, il y a 2 possibilités : utiliser la propriété list-style-image ou bien masquer ce dernier et utiliser un simple background. La seconde méthode est beaucoup mieux car beaucoup plus flexible pour positionner l'image de fond et ajuster l'espace avec le texte.
C’est normal en même temps : en text-align right, le point de départ du texte est la bordure droite de l’élément. Un text-indent négatif déplace vers la gauche, alors que pour le cacher, il faudrait le déplacer vers la droite. Il faut alors utiliser un text-indent positif.
Si vous attribuez une largeur fixe à un input submit de 200px par exemple et que vous ajoutez un padding-left de 20px, la largeur totale ne bougera pas mais le texte se décalera de 20px vers la droite.
Les marges de 2 éléments adjacents se confondent : si un <p> a un margin-bottom de 10px et le <p> suivant a un margin-top de 20px, les deux <p> seront séparés de 20px et non de 30px. Le navigateur prend uniquement la valeur maximale.
Normal : un <li> n'est plus élément de type "élément de liste" dès lors qu'on lui applique "display: block". Il devient alors un simple bloc, comme une <div> ou un <p>.