[Résolu] font dans * ou body ?

Bonjour à tous,
Dans plusieurs templates que j'ai téléchargé, je vois deux méthodes pour la déclaration des propriétés font :
- soit dans l'élément générique *,
- soit dans le body.
Quelle serait selon vous la meilleur méthode ?
Merci pour votre aide.
Modifié par krakkos (28 Jan 2009 - 15:27)

La propriétés font-quelquechose sont héritées, il est donc parfaitement inutile (et potentiellement gênant) de les appliquer à tous les éléments de la page.

D'ailleurs, le plus souvent l'utilisation du sélecteur * est plus un signe d'incompétence qu'autre chose. Sauf dans des cas très particuliers (par exemple un sélecteur qui donnerait #unbloc > * {...}), on ne l'utilisera tout simplement pas.

Salut Florent V,

euh.. tu dis

a écrit :

D'ailleurs, le plus souvent l'utilisation du sélecteur * est plus un signe d'incompétence qu'autre chose. Sauf dans des cas très particuliers (par exemple un sélecteur qui donnerait #unbloc > * {...}), on ne l'utilisera tout simplement pas.

On m'a toujours conseillé de commencer mon fichier css par un

* {
   margin:0px;
   padding:0px;
}

Qui a pour effet de virer les parges de tous les éléemtn, de manière a éviter les problèmes de marge due à l'interpétation différente des marges par les navigateurs.. On m'aurait menti ? tu aurais 2-3 infos là dessus ?
Modifié par Mikerob (28 Jan 2009 - 00:16)

Mikerob a écrit :
On m'aurait menti ?

Les personnes qui t'ont conseillé cela ont quelques lacunes en intégration web, ou bien c'était il y a quelques années alors que le sujet était peut-être moins maitrisé et que ce genre d'erreur était plus courante.

À lire:
http://forum.alsacreations.com/faq/faq-66-Le-point-sur-la-technique-du-Reset-CSS.html

Le * {margin: 0; padding: 0;} est une facilité de code peu élégante et qui peut poser des problèmes par la suite. Utiliser un * {border: none;} est pire encore (bousille les styles des formulaires, par exemple).

On peut éviter ces excès et tout de même utiliser un Reset CSS en utilisant celui d'Eric Meyer (il y a une version corrigée qui date de 2008 sur son blog), ou encore le Reset CSS de Yahoo! UI. Je ne le conseille généralement pas, car on a vite fait d'appliquer ces règles très complètes pour tout «remettre à zéro», sans toujours les comprendre ou les garder à l'esprit quand on écrit l'essentiel de la feuille de styles par la suite. Mais là c'est une affaire de méthode, pas de bien/pas bien.

Pour ma part je travaille avec une feuille de styles de base qui ne remet pas les styles «à zéro», mais qui corrige quelques différences entre les styles des navigateurs (elles sont peu nombreuses: une ou deux propriétés sur six ou sept éléments HTML à tout casser, du moins pour les différences significatives). J'y ai ajouté quelques règles que j'utilise dans la plupart des projets sur lesquels je travaille (comme par exemple un input, select, button {vertical-align: middle;}). Il faudra que je la publie sur Alsacréations ou ailleurs à l'occasion.

Dit autrement:

Mikerob a écrit :
Qui a pour effet de virer les parges de tous les éléemtn, de manière a éviter les problèmes de marge due à l'interpétation différente des marges par les navigateurs.

Cela s'appelle jeter le bébé avec l'eau du bain. Les marges et espacements des styles par défaut des navigateurs sont utiles, ils servent à rendre le contenu lisible, la sémantique des principaux éléments reconnaissable visuellement, etc. On peut bien sûr tout faire soi-même après les avoir remises à zéro, mais d'expérience on en oublie toujours un peu, et on se retrouve avec des contenus amorphes dans les situations qu'on n'avait pas prévu.

Alors que les différences entre les navigateurs sur ce plan sont minimes:
- le retrait sur BODY (8px, margin ou padding suivant les navigateurs);
- le retrait de gauche des listes UL et OL (40px, margin-left ou padding-left suivant les navigateurs);
- ???
(Bon il y en sans doute quelques autres, mais rien de bien méchant.)

Florent V. a écrit :
D'ailleurs, le plus souvent l'utilisation du sélecteur * est plus un signe d'incompétence qu'autre chose.

Je trouve que tu y vas un peu fort

Bien maitrisé, le Reset CSS avec le sélecteur * et pour moi autant (si ce n'est plus) efficace qu'un Reset "configuré" manuellement. J'ai eu beau réfléchir, me renseigner et tester, je ne comprends toujours pas la réticence de certains développeurs à dire du bien de cette technique...

Voici le Reset que j'utilise, et que je continuerais d'utiliser tant qu'on ne m'aura pas concrètement (démonstrations et explications à l'appui) exposé ses inconvénients :

* {
border:0;
margin:0;
padding:0;
list-style:none;
font-size:100%;
/*outline:none;*/ }

input, textarea, select {
border:1px solid #333;
vertical-align:middle; }

Après avoir lu les articles de Cygnus d'Eric Meyer, j'ai quand même tendence à être d'accord avec Florent V.

Je pense que l'on peut effectuer un reset pour des projets simple (un site vitrine composé de quelques pages fixes par exemple), dans se cas les impacts du reset sont métrisée assez aisément, et il n'y a pas besoin de devoir penser à tout.

Par contre pour des projet plus ambitieux (p. ex. avec intéraction des visiteurs ou une partie CMS qui permet au utilisateur de faire un peu tout et n'importe quoi) j'ai l'impression que le Reset impose plus de contraintes que de tenir compte des différences entres les navigateurs. Eh bon s'il faut absolument être un maître des CSS toute version confondue pour utiliser un Reset dans tous les cas, je suis pas sur que le jeux en vaille la chandelle

En tout cas merci pour ces précieuses informations

Mikerob a écrit :
Par contre pour des projet plus ambitieux (p. ex. avec intéraction des visiteurs ou une partie CMS qui permet au utilisateur de faire un peu tout et n'importe quoi) j'ai l'impression que le Reset impose plus de contraintes que de tenir compte des différences entres les navigateurs.

Je ne pense pas que donner le contrôle total (ou presque) à un utilisateur soit une bonne chose. En mettant en place un outil adapté à ses besoins qui lui laissera, par exemple, la possibilité de choisir parmi une liste de styles ou de modèles de pages prédéfinis, où est le problème avec le Reset * ?

Vos réponses sont très intéressantes.
Pour ma part, "on" m'avait toujours conseillé d'avoir cela :

*{
margin:0;
padding:0;
font-size:1em;
}
body{
font-size:100%; /* Pour compatibilité IE*/
}

Je viens de lire l'article sur le reset.
Je comprends mieux vos avis.
Un paramètre qui maintenant me semble plus important, c'est que si je n'utilise pas de reset, il me faut connaître toutes les margin et padding par défaut de tous les éléments susceptibles d'intervenir dans ma mise en page.

Florent V a écrit :
Alors que les différences entre les navigateurs sur ce plan sont minimes:
- le retrait sur BODY (8px, margin ou padding suivant les navigateurs);
- le retrait de gauche des listes UL et OL (40px, margin-left ou padding-left suivant les navigateurs);
- ???
(Bon il y en sans doute quelques autres, mais rien de bien méchant.)

Où trouver une liste précise de ces margin et padding par défaut ?


Pour le font, il me semble qu'il peut-être effectivement, malgré tout, intéressant de le mettre dans * ou body (?), si mon site utilise la même police partout, à 90% ?

*{
font-family: verdana;
font-size:1em;
}

ou

body {
font-family: verdana;
font-size:1em;
}

Modifié par krakkos (28 Jan 2009 - 14:29)

Comme te l'avait dit Florent, pour les font, qui sont hérité, il est plus naturel de les mettre dans le body.

Pour le rendu par défaut des éléments HTML : http://www.alsacreations.com/static/rendu/
Modifié par Felipe (01 Feb 2009 - 11:45)

Merci à tous pour cette discussion très constructive pour moi.
Merci pour le liens des paramètres par défaut.

BeliG a écrit :
Voici le Reset que j'utilise, et que je continuerais d'utiliser tant qu'on ne m'aura pas concrètement (démonstrations et explications à l'appui) exposé ses inconvénients

Empêche toute utilisation des styles par défaut des navigateurs pour les INPUT de type texte et les TEXTAREA.

Après c'est une question d'approche. Je considère que les styles par défaut des navigateurs sont mes alliés, pas des gêneurs à supprimer radicalement. Je préfère me reposer dessus et corriger les problèmes classiques (peu nombreux), plutôt que prendre le risque même faible d'anéantir (sans les rétablir, par oubli ou parce que c'est impossible) certains styles par défaut utiles.

BeliG a écrit :
Je ne pense pas que donner le contrôle total (ou presque) à un utilisateur soit une bonne chose. En mettant en place un outil adapté à ses besoins qui lui laissera, par exemple, la possibilité de choisir parmi une liste de styles ou de modèles de pages prédéfinis, où est le problème avec le Reset * ?

Pourquoi pas. Mais qui peut se targuer d'avoir ce niveau de contrôle, de contrôler également les intervenants ultérieurs sur un projet (on ne fait pas toujours la maintenance et l'évolution soi-même...), etc.?

krakkos a écrit :
si je n'utilise pas de reset, il me faut connaître toutes les margin et padding par défaut de tous les éléments susceptibles d'intervenir dans ma mise en page

Ah bon? Pourquoi donc?
(Bla bla, lâcher-prise, tout ça. )

krakkos a écrit :
Pour le font, il me semble qu'il peut-être effectivement, malgré tout, intéressant de le mettre dans * ou body (?), si mon site utilise la même police partout

Utiliser une propriété héritée (font-size, color, font-family...) avec le sélecteur * est à mon sens une bêtise. Sauf si on utilise la même couleur de texte, la même fonte partout...

Florent V a écrit :
Utiliser une propriété héritée (font-size, color, font-family...) avec le sélecteur * est à mon sens une bêtise

Mais utiliser juste le font-family et font-size:1em dans le body (ou *) n'est pas une bêtise, si la font-family est la même dans tout le site ?

krakkos a écrit :
il me faut connaître toutes les margin et padding par défaut de tous les éléments susceptibles d'intervenir dans ma mise en page

Je disais cela pour pouvoir contrôler au plus précis et anticiper la mise en place des éléments de ma mise en page. Il me semble important de savoir que l'élément p à une marge haute de X pixels pour anticiper la bonne position de son contenu dans une boîte <div>, dans ma mise en page.
Modifié par krakkos (28 Jan 2009 - 17:37)

krakkos a écrit :
Mais utiliser juste le font-family et font-size:1em dans le body (ou *) n'est pas une bêtise, si la font-family est la même dans tout le site ?

L'utiliser pour BODY: parfait.
L'utiliser pour *: à quoi ça sert, à part poser un problème potentiel?
Donc: pour les propriétés héritées que l'on veut appliquer à tout le site, les appliquer à l'élément BODY.

krakkos a écrit :
Il me semble important de savoir que l'élément p à une marge haute de X pixels pour anticiper la bonne position de son contenu dans une boîte <div>

Eh bien définis globalement les marges des paragraphes, et voilà. Pour ma part j'utilise un p {margin: 1em 0;}, qui correspond aux styles par défaut de la plupart des navigateurs (sauf IE qui apparemment aurait des marges par défaut en pixels pour les paragraphes).

Quant à anticiper la position exacte du paragraphe dans un DIV, cela dépendra aussi de la fusion des marges (ou de l'absence de celle-ci). Ou encore, dans Internet Explorer 6-7), de si la marge supérieure du premier paragraphe se volatilise mystérieusement ou pas (IE a tendance à faire ça).

La grosse arnaque du Reset CSS, c'est que c'est vendu comme un moyen efficace d'éviter les différences entre les navigateurs. En dehors de deux ou trois points très bien identifiés (retrait du BODY, retrait de gauche des listes, bordure des images dans les liens), les différences de rendu entre les navigateurs sont liés à des phénomènes tout à fait différents et sur lesquels un Reset CSS n'a aucun impact. La vraie solution aux différences de rendu se décline ainsi:

1. expérience (connaissance des problèmes courants et des bugs et comportements non-standard de tel ou tel navigateur -- pour l'essentiel IE 6-7);
2. dégradation gracieuse lorsqu'utile ou nécessaire;
3. lâcher-prise (on ne peut pas corriger toutes les différences ni même toutes les prévoir).

krakkos a écrit :
Où trouver une liste précise de ces margin et padding par défaut ?

En plus de l'outil déjà cité de Julien Royer, tu peux regarder dans C:\Program Files\Firefox\res\*.css (*.css = html.css, forms.css) pour Firefox.

Tu peux modifier l'affichage du code source dans viewsource.css par exemple (et tu peux aussi tout casser en cas de fausse manip )

Firebug permet aussi d'afficher les instructions par défaut au milieu des instructions du site: onglet HTML, tout à droite Options "Show User Agent CSS". Inutilisable au quotidien parce qu'il y a trop d'infos affichées mais c'est instructif

EDIT: document INFORMATIF du W3C: http://www.w3.org/TR/CSS21/sample.html (et les développeurs de navigateurs font ce qu'ils veulent ensuite)
Modifié par Felipe (01 Feb 2009 - 11:50)