Notes sur CSS

Présentation…

Cette page réceptionne des remarques et des notes qui viennent à la volée en codant des feuilles de style CSS. Ces notes sont des autres points de vues sur les spécifications CSS, et permettent de comprendre et de percevoir de manière directe, des propriétés indirects.

Commentaires

Vous êtes bienvenues pour poser une question ou faire commentaire .

Largeur 100% versus largeur par défaut

Ne pas spécifier de largeur, n’est pas équivalent à spécifier explicitement une largeur de 100%. Une largeur de 100% ne tient pas compte de la marge et du « padding ». Ne pas donner de « width » explicite est le seul moyen d’obtenir une largeur totale de 100%. Cette différence ne s’applique pas à Internet Explorer, qui compte les marges, les bordures, et les paddings dans la largeur et la hauteur d’une boite.

La réciproque n’est pas vrai : la hauteur par défaut ne fonctionne absolument pas comme la largeur par défaut, et en règle générale, l’axe horizontal en CSS, ne fonctionne pas de la même manière que l’axe vertical.

Ne pas mélanger spécification de marge et largeur

Pour ne pas rencontrer de problèmes dues aux non-conformités d’Internet Explorer antérieur à la version 7, il ne faut jamais donner à la fois une largeur et une marge pour une boite, mais seulement l’une ou l’autre. Si une boite a une marge, alors sa largeur devrait être laissée à la la largeur par défaut ( la boite prendra toute la largeur ). Si une boite a une largeur autre que par défaut, alors elle ne devrait pas avoir de marge. Dans ce dernier cas, si l’on désire une marge, il sera préférable d’imbriquer une boite dans le première, et de donner une marge à la boite intérieure. Ainsi la boite extérieure donne la largeur, et la boite intérieur donne la marge, la boite intérieure gardant la largeur par défaut, c’est-à-dire tout la largeur de son conteneur ( à condition qu’elle ne soit ni « float: xxx; » ni « position: absolute; » ).

Là où vous lisez « marge », vous pouvez également lire « padding ». De même, là où vous lisez largeur, vous pouvez aussi lire « hauteur ».

Sélecteur d’adjacence et Internet Explorer

Internet Explorer ( au moins les anciennes versions ) ne reconnaît pas le sélecteur d’adjacence. La seule solution est d’anticiper les séquences pouvant apparaître, et de créer des classes distinctes. Par exemple un élément « P » aura une classe pour le cas ou il suit un élément « H4 », et une autre classe pour l’autre cas. Bien sûre il convient d’appliquer la bonne classe manuellement dans le source HTML, ce qui demande plus de travail qu’avec les sélecteurs d’adjacence ( mais c’est la seule solution qui fonctionne avec les anciennes version d’Internet Explorer ).

Ordre d’inclusion

Quand vous définissez un style pour l’élément « A » et l’élément « H4 », vous n’obtenez pas le même résultat, selon que vous incluez « A » dans « H4 » ou « H4 » dans « A ». Dans cet exemple, il est évidement préférable d’inclure « A » dans « H4 », et non l’inverse. Faites-y attention si vous voulez que vos styles CSS aient l’effet souhaité une fois appliqués à un code HTML.

L’astuce des classes multiples pour pour un élément

Un élément peut avoir plusieurs classes. Un élément « P » pourra donc être écrit ainsi : « <P class="class1 class2"> ». Il ne faut pas se priver de cette possibilité qui ouvre souvent bien des portes. Ayez toujours cette astuce à l’esprit : elle vous permettra des combinaisons salutaires, et vous évitera surtout de multiplier les classes. Ainsi, avec deux classes, C1 et C2, vous pouvez vous épargnez d’avoir à gérer 4 classes différentes. Faites correspondre une classe à un élément sémantique, et aussi une classe à une facette ou aspect de cet élément qui pourra éventuellement être partagée avec d’autres éléments.

« Float » fonctionne comme une valeur de « display »

Si un élément fait usage de la propriété « float », alors la propriété « display » est ignorée. « Display » et « float » sont mutuellement exclusifs, car « float » implique que la propriété « display » ait la valeur « block ». « Float » doit donc pour être compris, être perçu comme une valeur de la propriété « display » (même si les deux propriétés sont séparées dans la syntaxe), car elle impose la valeur « block » à « display ». « Float » est comme une valeur de « display » qui préciserait et complèterait la sémantique de « block ».

Tout se passe comme si on avait en fait les valeurs suivantes possibles pour la propriété « display » ( les 1° et 2° valeurs étant théoriques ) :

  • « display: block; »
  • « display: block-float-right; »
  • « display: block-float-left; »

En résumé, et pour éviter les mauvaises surprises, les propriétés « float » et « display » devraient toujours êtres pensées toutes les deux ensembles.

La référence de CSS « 2 » n’est pas claire sur la question de savoir si élément avec « float » à none a implicitement un attribut « display » à « block » ou non. À priori, le bon sens serait tenté de dire non.

Positions logiques relatives

En CSS, il y a trois dimensions. La position dans le flux, la position horizontal, et la position verticale. Notons les « F », « H » et « V ». Pour chacune de ces dimensions, un élément pourra être avant ou après un autre ( quand il arrive que deux éléments aient la même position, « H x V » initiale — car on ignore ici les « absolute » et « relative » — c’est qu’ils ne sont pas dans le même flux, et donc pas dans le même espace ). Réduisons les valeurs possibles à deux états pour chaque attribut « F », « H », « V ». Cela nous donne huit positions logiques relatives différentes pour un élément, par rapport à un autre élément.

Les fondements du design devraient se faire avec ces positions logiques relatives à l’esprit. Les valeurs exacts pour les coordonnées et les positions dans les flux, étant alors des manières d’affiner les présentations. Mais le comportement des présentations restent dirigé par ces positions relatives logiques. Notez que les position « absolute » font sortir un élément de son flux, et que le flux du code ne correspond pas toujours au flux CSS. Cette règle des positions relatives logiques s’applique aussi avec les « float ».

Les « floats » flottent également au dessus

Quelle soit « float: right; » ou « float: left; », une boite flottante a une affinité encore plus grande à remonter vers le haut qu’à aller vers la droite ou vers la gauche. Les floats sont aussi, et même avant tout, des « float: top; » ( cette désignation étant théorique ).

Une boite « float: left; », si elle en a la possibilité, préférera monter quitte à ce que cela la place moins à gauche qu’une position plus basse. Elle sera encore plus fortement attirée vers le haut que vers la gauche. La réciproque est vrai aussi avec une boite « float: right; » ( elle sera encore plus attirée par le haut que par la droite ).

Les « floats » plutôt comme éléments de haut niveau

Comme la propriété « clear » ignore royalement la hiérarchie des flux, si une boite quelconque, contient entre autres des éléments floats, et qu’une autre de ces boites est « clear », alors la boite « clear » descendra en dessous, non seulement des boites floats de son parent, mais pourra même aller jusqu’à descendre en dessous de toutes les boites du document se trouvant avant elle. Elle dégringolera ainsi toute la hiérarchie des boites, tant qu’elle ne rencontrera pas un parent « float ».

C’est un comportement abusif à mon avis, qui restreint quelque part l’usage des floats aux éléments placés le plus haut possible dans la hiérarchie du document.

En résumé, employé de préférence des « float » le plus haut possible dans la hiérarchie du document, ou alors dans une hiérarchie dont la boite mère est une boite « float ». On en déduira par récurrence qu’un document employant des floats, verra son architecture fortement dirigée par les floats. Quand on utilise des floats, on ne le fait jamais à moitié.

Internet Explorer ( les anciennes versions ) préserve la hiérarchie visuelle

En CSS conforme, si une boite a une largeur donnée, et que l’une de ses boites filles en déborde, alors elle déborde tout simplement sans être redimensionnée ( si on ne tient pas compte de la propriété « overflow » ). Avec Internet Explorer, la boite mère est automatiquement élargie ( mais elle n’est bien sûre pas réduite dans le cas contraire ). Internet Explorer a une stratégie qui semble dire : « si une boite est hiérarchiquement contenue dans une autre, alors elle devra également y être contenu visuellement ». La logique d’Internet Explorer n’est pas si mauvaise qu’on le prétend souvent.

Comment organiser ses grands sources CSS ?

Quand la taille d’une feuille CSS prend de l’ampleur, elle peut devenir difficile à gérer, et la recherche d’un élément, afin d’y opérer une mise à jour de ses propriétés, peut s’avérer fastidieuse.

La question se pose de savoir quelle est la meilleur stratégie d’ordonnancement des éléments à employer. Le mieux est probablement de baser l’ordonnancement chacun des sélecteur dans son entier, et de les ordonné en donnant le poids le plus fort à la composante la plus à droite dans le sélecteur. Par exemple, de ces deux sélecteurs d’inclusion, « .class1 .truc » et « .class1 .machin », c’est « .class1 .machin » qui devrait apparaître en premier dans le code source CSS, puis « .class1 .truc » qui devrait apparaître ensuite. Entre ces deux autres sélecteurs, « .class1 .bidule » et « .class1 », c’est « .class1 » qui devrait apparaître en premier.

En procédant ainsi, vous classer vos déclarations CSS d’une manière qui rend moins fastidieuse la tâche de les retrouver dans votre grande feuille de style. Et ensuite, cette règle de classement faisant que les éléments les plus spécialisés se trouvent après les éléments les moins spécialisés, cela vous évite des mauvaises surprises ( comme celle d’avoir une déclaration qui écrase les spécifications d’une autre déclaration, d’une manière contre-intuitive ).

Un argument « font-family » pour sauver les meubles

Personne bien sûre n’ignore l’existence de la propriété « font-family », et son usage est des plus répandus dans les feuilles de styles en activité sur le web. Mais tout aussi répandu est l’absence du second argument de cette propriété. « Font-family » prend en premier argument le nom de la police, ce que tout le monde connais. Mais se contenter d’indiquer un nom de police s’avère souvent insuffisant. Qu’en est-il en effet si le système sur lequel est visualisée la page, n’a pas à sa disposition la police spécifiée ? Dans ce cas il s’en remet à la police par défaut le plus souvent. Vous pouvez pourtant sauver les meubles et la présentation, en cas d’absence de la police désirée. Il suffit pour cela d’indiquer la catégorie à laquelle appartient la dite-police.

Au lieu d’indiquer « font-family: "Times New Roman"; », vous indiquerez de préférence « font-family: "Times New Roman", serif; ». La police Times New Roman est une police avec serif, qui est un terme désignant une police avec empattements ( que l’on reconnais par exemple au petites pattes horizontales aux pieds du « A » majuscule ). Cette indication permet au navigateur d’utiliser une police serif de substitution dans le cas où il n’est pas équipé de la police Times New Roman. Cette absence est fort peu probable, et Times New Roman est ici prise en exemple pour votre compréhension.

À l’inverse une police comme Tahoma est sans empattements, et si on souhaite l’utiliser, on indiquera alors « font-family: "Tahoma", sans-serif; », et le système utilisera une police sans-serif de substitution s’il n’a pas de police Tahoma à sa disposition.

Il est de notoriété public que Times New Roman et Tahoma sont respectivement des polices serif et sans-serif. Mais cela ne peut pas être déterminé pour une police inconnue. Imaginez que votre présentation fasse usage de la police « XYZ », et que cette police n’existe pas et soit inconnue de votre système. Si la catégorie à laquelle la police appartient est renseignée, alors une police de substitution de cette même catégorie sera employée, ce qui sauvera une bonne part de votre présentation.

Il existe d’autres catégories de police que serif et sans-serif. Vous pourrez indiquer l’une ou l’autre de ces catégories :

  • Cursive : pour les polices de types manuscrite, ou pour les polices de caractères Arabes.
  • Fantasy : pour les polices fantaisie, du type de celles que l’on trouve dans les bulles de bande dessinée par exemple.
  • Monospace : les polices à espacement fixe, le plus souvent employé pour les codes sources dans un langage de programmation quelconque, ou pour les exemple d’affichage de console et de ligne de commande sur terminaux.
  • Serif : les polices avec empattements, qui sont celles le plus souvent utilisé en imprimerie, mais aussi ( bien que moins souvent ) sur les présentations électroniques.
  • Sans-Serif : les polices sans empattement, qui sont le plus souvent utilisé dans les titres, tant en imprimerie que pour les présentations électronique, ou pour les corps de textes des présentation électroniques.

En indiquant la catégorie de la police, veillez à bien vous assurez de la catégorie de la police. Ne faites pas l’erreur de dire que Bookman Old Style est une police cursive, par exemple.

Différences de couleurs et contrastes de luminosité

Un texte ou un motif n’est clairement perceptible que lorsque les contraste que le constituent sont suffisants. Il est aisé de déterminer des seuils de contraste acceptable pour presque tout le monde, et d’autres en deçà desquels le commun rencontre des difficultés à lire. A cet instant il faut souligner les différences individuels dans la perception des contrastes et surtout noter que certaines personnes perçoivent moins bien les différences de contrastes de d’autres. Donc, et bien qu’un contraste léger et subtile puisse avoir un indéniable intérêt esthétique, il ne faudra pas en abuser, sous peine d’être illisible par un nombre plus ou moins important d’internautes.

La couleur est constitué de rouge, vert et bleu ( pour la synthèse additive ) variant en intensité. Pris dans l’ensemble, et indépendamment de l’intensité respective de ses différentes constituantes, une couleur a également une intensité globale. Il est possible de créer deux couleurs différentes qui auront la même intensité lumineuse. Ors il se trouve que certaines personnes ne perçoivent que difficilement certaines nuances de couleurs, et il en existent même ne les percevant pas du tout. Pour ces personnes, deux couleurs différentes de même intensité, seront une seule et même chose.

Il faudra donc s’assurer en premier lieu, de la différence de luminosité générale de la couleur, puis en second lieu également de la différence de couleur. La différence de couleur, car elle participe au contraste, et au confort de lecture.

La couleur, contrairement à l’ouï, est source d’importante différences de perception d’un individu à l’autre. Il serait possible de dire que la perception des couleurs n’est pas si universelle qu’elle le semble, ou encore que les différences de perceptions des couleurs entre deux personnes, ne sont pas choses rares. La raison est suffisante pour donner à cette question une place importante dans les choix de conception et de design d’une page web.

La question étant posée, il convient maintenant de la mesurer pour l’évaluer. Il existe deux formules distinctes et précise permettant de mesurer la différence de couleur et le contraste de luminosité. Note: le calcul de la différence de couleur est également nommé « calcul de la différence de tonalité ».

  • Formule de calcul du contraste de luminosité : « ((rouge × 299) + (vert × 587) + (bleu × 114)) / 1000 »
  • Formule de calcul de la différence de couleur : « (max (rouge1, rouge2) min (rouge1, rouge2)) + (max (vert1, vert2) min (vert1, vert2)) + (max (bleu1, bleu2) min (bleu1, bleu2)) »

On remarque l’expression d’un fait dans la formule du calcul du contraste de luminosité : le poids du vert est nettement plus important que celui des autres couleurs. La capacité à distinguer les nuances de vert ayant eu un impact important dans la vie de nos ancêtres, nous en avons hérité une grande sensibilité au vert. A contrario, le bleu étant peu significatif ( il est la couleur du ciel, et non pas la couleur de l’environnement ancestral ). Le rouge a un poids intermédiaire, que l’on pourra qualifier d’important. La cause de l’importance du rouge pourra aisément être deviné. Retenez donc que l’ajout de vert fait plus augmenter la luminosité que l’ajout d’une des deux autres composantes.

Le calcul de la différence de tonalité, plus complexe, ne sera pas discuté. Les fonction « min » et « max » y désignent respectivement la plus petite et la plus grande, de deux valeurs. Par exemple « min (1,2) = 1 » « max (1,2) = 2 ». « Rouge1 », « vert1 » et « bleu1 » désigne les composante de l’une des deux couleurs en présence, et réciproquement.

Un contraste entre deux couleur est considéré acceptable si les deux conditions suivantes sont présentes en même temps :

  • Le résultat du contraste de luminosité est au moins égal à 125.
  • Le résultat de la différence de couleur est au moins égal à 500 ( certains considèrent cependant qu’une valeur de 400 est suffisante et acceptable ).

Des questions ?

Vous avez des questions ? N’hésitez pas à poser une question ou faire commentaire  sur la page de contact du site.