28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis sur une refonte de page.

Dans le fichier Css, le précédent codeur a déclaré un line-height:1.6em dans le body. Je connais l'usage de cette propriété, mais je voudrai comprendre l'interêt de l'appliquer dans l'ensemble du document via le body.

Est-ce pour régler d'éventuels problème de gestion des hauteurs de ligne de contenu entre les différents navigateurs ?

Merci à qui voudra/pourra m'éclairer.
Bonne journée !
La question me paraît bizarre, déclarer une propriété qui sera majoritairement utilisée est justement l'intérêt de la cascade des styles, c'est exactement comme déclarer une famille de polices pour l'ensemble du document.
Oui, je n'ai pas d'interrogation sur la notion d'héritage, mais sur pourquoi le faire pour cette propriété.

Déclarer *{margin:0; padding:0;} est clair dans mon esprit, on vire massivement les marges internes et externes pour le document, et ensuite localement si besoin on les réajuste. Ca c'est l'aspect technique de cette déclaration. Mais la raison de cette déclaration se trouve dans les différences d'interprétations des marges selon les navigateurs et selon les éléments html et aussi que par défaut les marges ne sont pas à 0.

Donc, on pose tout à 0 et ensuite on traite au cas par cas.

Là je comprends comment mais aussi pourquoi on fait cette déclaration globale.

Avec le line-height déclaré dans le body, je comprends ce que cela va produire, mais pas à cause de quoi ou pour corriger quoi. Ou bien peut-être ne sais-je simplement pas qu'il y a, à l'instar des marges, des différences d'interprétation entre navigateurs sur les hauteurs de lignes, et qu'en procédant ainsi on règle le problème de la même façon que pour les marges.

Est-ce le cas ?
Philos a écrit :
Déclarer *{margin:0; padding:0;} est clair dans mon esprit, on vire massivement les marges internes et externes pour le document, et ensuite localement si besoin on les réajuste.


Ce qui est, sur le fond, une erreur dans la plupart des cas (puisqu'on se prive du filet de sécurité offert par les styles par défaut des UA, et qu'on doit donc restyler tous les éléments concernés, chose que l'on ne fait évidemment jamais). Sans compter que c'est totalement inutile, les éléments styles différemment étant en nombre très limité et bien identifiés. Laissez donc les navigateurs faire leur travail Smiley ravi

Philos a écrit :

Avec le line-height déclaré dans le body, je comprends ce que cela va produire, mais pas à cause de quoi ou pour corriger quoi


Aucun rapport avec une quelconque correction de différences entre navigateurs. Il s'agit simplement d'appliquer une valeur de line-height légèrement plus importante que celle par défaut communément implémentée (1.6 au lieu de 1.4em).
Modifié par Laurent Denis (08 May 2007 - 15:19)
Merci Monsieur Laurent (j'insiste sur le Monsieur, tant la somme de connaissances que tu réunis m'impressionne toujours au travers de mes lecture sur ce forum Smiley smile ).

Donc, il s'agit d'un choix de rendu visuel plus que technique ou de compatibilité dans ce cas.

Hors sujet maintenant, mais en réaction à ce que tu as écrit, pourrais-tu me conseiller un ou des articles à lire pour détailler ce que tu écris ici ? Cela m'intéresse beaucoup mais j'avoue ne pas tout clairement saisir, filet de sécurité, UA...
Laurent Denis a écrit :
Ce qui est, sur le fond, une erreur dans la plupart des cas (puisqu'on se prive du filet de sécurité offert par les styles par défaut des UA, et qu'on doit donc restyler tous les éléments concernés, chose que l'on ne fait évidemment jamais). Sans compter que c'est totalement inutile, les éléments styles différemment étant en nombre très limité et bien identifiés. Laissez donc les navigateurs faire leur travail
Philos a écrit :
il s'agit d'un choix de rendu visuel plus que technique ou de compatibilité dans ce cas.
Ah oui biensûr, c'est d'ailleurs pour ça que je comparais cette méthode à celle des familles de polices appliquées directement au body. Smiley cligne
Felipe a écrit :
Bonjour,

pour info un tuto récent est consacré aux em: Typographie web : gérer la taille du texte avec les « em »


Tiens, au passage, si on pouvait corriger l'erreur Le retrait de gauche des listes (éléments ul et ol) : que les navigateurs créent ce retrait par défaut avec un margin-left ou un padding-left, ce sera généralement un retrait d'une largeur de 2.5em. : le retrait est fixe, de 40px et sans rapport avec les em, comme celui de dl et de blockquote (cf la res/html.css de FF par exemple).

Plus généralement, aucun espace latéral UA n'est géré relativement à la taille de caractères utilisateurs. Et aucun ne devrait l'être dans une CSS auteur.
Modifié par Laurent Denis (08 May 2007 - 18:44)
Laurent Denis a écrit :
Tiens, au passage, si on pouvait corriger l'erreur Le retrait de gauche des listes (éléments ul et ol) : que les navigateurs créent ce retrait par défaut avec un margin-left ou un padding-left, ce sera généralement un retrait d'une largeur de 2.5em. : le retrait est fixe, de 40px et sans rapport avec les em, comme celui de dl et de blockquote (cf la res/html.css de FF par exemple).

Argh. Ça m'apprendra à ne pas vérifier mes sources. C'est corrigé.

Laurent Denis a écrit :
Plus généralement, aucun espace latéral UA n'est géré relativement à la taille de caractères utilisateurs.

C'est presque vrai. J'ai croisé une petite exception à l'instant :
fieldset {
  padding: 0.35em 0.625em 0.75em;
}

dans le fichier res/forms.css de Firefox. Mais bon, c'est pas un exemple méchant. Smiley cligne

Laurent Denis a écrit :
Et aucun ne devrait l'être dans une CSS auteur.

Tout à fait.
Florent V. a écrit :

C'est presque vrai. J'ai croisé une petite exception à l'instant :


Mouarf. Il n'y a que Mozilla pour faire ce genre de sottise d'ingénieurs Smiley lol

Dans un autre domaine, tiens, une perle récente et merveilleuse d'un développeur par ailleurs célèbre et respectable, méritant un grand vieux TC: http://bugzilla.wikimedia.org/show_bug.cgi?id=9756#c1 Smiley ravi
Modifié par Laurent Denis (08 May 2007 - 20:46)