CSS et validateur

[Dinostrate]

Bonjour,

Je viens de tester une page d'accueil sur le validateur Html4 et css....

Tout semble correct mais je ne comprends pas pourquoi le validateur css me donne un avertissement :

"Vous êtes encouragé à proposer une famille générique comme dernier choix..."

Pourtant, j'ai bien placé une famille générique... qu'est ce qu'il se passe ?

nb : j'utilise deux feuilles de styles externes, + une définition dans la page.

l'adresse de la page est ICI et en bas de page, les liens sur les validateurs....

Dino

[Monique]

Bonjour,

Tu as oublié le sans- devant serif

h1, h2, h3, h4, h5, h6 {
 font-family: Georgia, "Bookman Old Style", Bookman, "New Century Schoolbook",
 "Bookman Antiqua", Palatino, "Utopia", "New York", "Times New Roman", Times, serif;
}

[Denis]

Et bien théoriquement, que tu utilises serif ou sans-serif, tu ne devrais pas avoir d'erreur parce que les deux sont génériques. En autant que tu spécifies les polices à deux mots ou séparés par un tiret entre guillemets, tout devrait être correct. Exemple, 'sans-serif' et non sans-serif. Je crois que ton erreur est ailleurs. En regardant les deux fichiers CSS, voici ce que l'on remarque tout de suite :

/* GRANITE */

.Gauche {font-family:Georgia, Garamond, Arial;}
.Book {font-family: Batang, Book Antiqua, Palatino Linotype, Bookman Old Style;}
.Book2 {font-family: Batang, Book Antiqua, Palatino Linotype, Bookman Old Style;}


/* GLOBAL */

* {font-family:Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;}
.td-bas {font-family:Verdana, Century Gothic, Georgia, Arial;}

Ton avertissement provient très certainement du fait que ces règles n'ont pas de famille générique associées...

À moins que ce ne soit du à un problème curieux, causé par ton sélecteur * dans la feuille de style globale. On a le droit d'utiliser un tel truc ? J'ai jamais vu ça avant aujourd'hui.

[LaurentDenis]

L'avertissement est effectivement dû à l'absence de famille générique pour les règles signalées par Denis.

Le sélecteur * est correctement employé; Mais je ne vois pas bien son utilité puisque la même déclaration est faite pour le sélecteur body. Même si les familles étaient différentes pour * et pour body, celles du body l'emporteraient puisque c'est un sélecteur plus spécifique.

[Dinostrate]

Bonjour,

OK merci pour vos réponses, mais je vous dois un complément d'explication :

Dans un premier jet, je n'avais pas utilisé le sélecteur * ... C'est vrai qu'en fait, il était inutile, j'avais défini dans body...

Je l'ai placé pour essayer de corriger, donc, c'est sur que ça ne vient pas du sélecteur.

Je pensais que cette utilisation du sélecteur me permettrait de corriger le tout... mais apparamment, comme vous me l'indiquez, il faut une correction famille par famille (pour chaque règle). Donc, je fais le ménage ce soir dès que j'ai un moment...

Dino

[Denis]

Une petite recherche sur le sélectuer * m'a donné ceci :

The wildcard selector is used to apply a match to any element. It can be used for a global rule or, more commonly, in contextual or child selection rules.

Mais au départ, si c'est un sélecteur contextuel, il ne serait pas pris en charge par MSIE non?

[LaurentDenis]

Heu... Je ne vois pas où serait le problème. En tout cas, je n'en ai jamais rencontré de ce type ?

Au fait, il s'agit du sélecteur universel ("universal selector") et non "wildcard selector" comme l'appelle http://www.htmlref.com/reference/appb/selectors.htm

Je reprends la specification CSS2 :

Le sélecteur universel, noté "*", est vérifié pour le nom de n'importe quel type d'élément. Il agit sur chacun des éléments de l'arbre du document.

Si le sélecteur universel n'est pas le seul composant d'un sélecteur simple, on peut l'omettre. Par exemple :

*[LANG=fr] et [LANG=fr] sont équivalents.

*.warning et .warning sont équivalents.

*#myid et #myid sont équivalents.

http://www.yoyodesign.org/doc/w3c/css2/sel...versal-selector

De la même manière, pour reprendre l'exemple donné par la page que tu cites, les deux formulations suivantes sont équivalentes :

div * span {background - color: yellow;}
div span {background - color: yellow;}

Modifié 5 Mai 2004 par LaurentDenis

[Dinostrate]

Parfait, ça roule impeccable...

Donc : conclusion=comme vous le suggeriez d'ailleurs, il faut associer une police générique au final chaque fois qu'on redéfinit une famille dans une règle

Je pensais que ça suffirait avec le sélecteur universel mais finalement, c'est plus logique d'avoir a définir une police générique en dernier ressort à chaque coup pour bien différencier le choix entre les grandes catégories (le serif et le sans serif par exemple)

Dino

[Denis]

Très intéressant comme thread... c'est super d'en retirer tous un apprentissage supplémentaire ! Le sélecteur universel, les familles génériques à définir systématiquement... pas mal pour une question qui en apparence, semblait toute simple à priori.

[Bobe]

De la même manière, pour reprendre l'exemple donné par la page que tu cites, les deux formulations suivantes sont équivalentes :

div * span {background - color: yellow;}
div span {background - color: yellow;}

Non, elles ne sont pas équivalentes. Avec la première, les span enfants du div ne seront pas concernés par la règle.

[Denis]

Bobe, pourquoi ne seraient-ils pas pareils ? Logiquement, si le * compte pour tout, il devrait aussi compter pour ce qui n'existe pas.

[LaurentDenis]

Si, les deux syntaxes sont strictement équivalentes. Pour le vérifier, exécutez le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<title>Test</title>
<style>
body {
color: green;
}
.test1 * span {
color: red;
}
.test2 span {
color: blue;
}
</style>
</head>
<body>

    <div class="test1">
        <p>
            Ceci est un texte en vert <span>avec un span rouge</span>
        </p>
    </div>

    <div class="test2">
        <p>
            Ceci est un texte en  vert <span>avec un span bleu</span>
        </p>
    </div>

</body>
</html>

Attention à ne pas confondre deux syntaxes de sélecteurs CSS, celle des "descendants" et celle des "enfants".

Voir http://www.yoyodesign.org/doc/w3c/css2/conform.html#doctree

- les sélecteurs descendant (syntaxe div p span)

Descendant

On appelle un élément A un descendant d'un élément B si A est soit (1) un enfant de B, soit (2) un enfant d'un autre élément C qui est lui-même un descendant de B ;

- les sélecteurs d'enfant (syntaxe div>p>span)

Enfant

On appelle un élément A l'enfant de l'élément B, si et seulement si B est le parent de A ;

Un exemple :

<div>
    <p>
        <span>blabla</span>
    </p>
</div>

Le <span> est un descendant du <p>, mais aussi du <div>.

Le <span> est un enfant du <p>, mais pas du <div>.

On peut atteindre le <span> avec:

- div p span

- div * span

- div span

Ou avec :

- div>p>span

-div>*>span

Mais pas avec :

- div>span

Modifié 6 Mai 2004 par LaurentDenis

[Monique]

Bonjour,

Dit ainsi, cela a l'air tellement simple

[LaurentDenis]

Les spécifications ne sont pas des documents si compliquées que ça. En fait, leurs rédacteurs les ont voulu les plus simples possible

Modifié 6 Mai 2004 par LaurentDenis

[Denis]

Mais quand même, avouons qu'avec les yeux collés, avant le premier café du matin, c'est assez costaud comme explication !

[Bobe]

Désolé d'insister mais

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
    <title>Test</title>
    
    <style type="text/css" media="screen">
    body { background-color: white; }
    span { background-color: red; }
    div * span { background-color: green; }
    </style>

</head>
<body>

<div>
    <span>ceci est un test</span>
    <p> Voici un <span>autre test</span> </p>
</div>

</body>
</html>

Le premier span, descendant et enfant du div, a un fond rouge tandis que l'autre, descendant mais pas enfant du div, a un fond vert.

Le sélecteur universel correspond à "n'importe quel élément", non pas à "n'importe quel élément ou aucun élément".

[LaurentDenis]

L'exemple que tu donnes est faussé car tu y fais intervenir une donnée différente: la spécificité des sélecteurs.

le sélecteur

div * span { background-color: green; }

étant plus spécifique que le sélecteur

span { background-color: red; }

il l'emporte évidemment.

[edit]

Pourquoi est-il plus spécifique ? Se rapporter à :

http://www.yoyodesign.org/doc/w3c/css2/cas...tml#specificity

Selon CSS2, la spécificité calculée des deux sélecteurs sont grossièrement :

- 2 pour div * span { background-color: green; } qui a deux éléments HTML

- 1 pour span { background-color: red; } qui n'en a qu'un.

En effet, 4e point de calcul de la liste selon la spécification :

La spécificité d'un sélecteur est déterminée comme suit :

- compter 1 si le sélecteur est un attribut 'style' plutôt qu'un sélecteur, sinon 0 (= a)...

- compter le nombre d'attributs ID (= a) dans le sélecteur ;

- compter le nombre des autres attributs et pseudo-classes dans le sélecteur (= ;

- compter le nombre des noms d'élément dans le sélecteur (= c) ;

- ignorer les pseudo-elements.

[/edit]

Ce qui est intéressant, d'ailleurs. C'est un usage du sélecteur universel auquel on ne pense pas souvent : renforcer la spécificité d'un sélecteur de descendant...

Modifié 6 Mai 2004 par LaurentDenis

[Bobe]

Arf

Je me fais si mal comprendre que ça ?

Alors le même exemple sans les petits raffinements :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
    <title>Test</title>
    
    <style type="text/css" media="screen">
     div * span { background-color: green; }
    </style>

</head>
<body>

<div>
    <span>ceci est un test</span>
    <p> Voici un <span>autre test</span> </p>
</div>

</body>
</html>

Cet exemple démontre bien que :

div span { ... }

et

div * span { ... }

ne sont pas équivalents.

Le premier touchera tous les span descendants d'un div alors que le second touchera tous les span descendant d'un div mais non enfant de ce div.

Modifié 6 Mai 2004 par Bobe

[LaurentDenis]

Re Arf !

Et tout l'intérêt de ce genre d'apparent coupage de chevaux en quatre est de mettre en lumière les points qu'on ne lit pas assez dans les spécifications.

En effet:

- il est en fait impossible d'éliminer le facteur "calcul de spécificité", ni de mon premier exemple, ni de celui que tu viens de donner ! Calculez la spécificité des sélecteurs pour me dire si je me trompe...

- il aurait fallu commencer par lire plus attentivement :

Si le sélecteur universel n'est pas le seul composant d'un sélecteur simple, on peut l'omettre

http://www.yoyodesign.org/doc/w3c/css2/sel...simple-selector

Et surtout relire ce à quoi renvoyait "sélecteur simple" :

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d'attribut, un sélecteur d'ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n'importe quel ordre. Le sélecteur simple a une correspondance si tous ses composants sont vérifiés.

http://www.yoyodesign.org/doc/w3c/css2/sel...simple-selector

Nous ne sommes pas dans un cas de figure "sélecteur simple", tout simplement.

[Bobe]

Oui.

Nous aurions d'ailleurs pu nous éviter des incompréhensions, je lis à la fin du chapitre 5.5 (les sélecteurs descendants):

Avec ce sélecteur :

DIV * P

on touche les éléments P qui sont les petits-enfants, ou les descendants plus lointains, d'un élément DIV. Noter les blancs facultatifs de chaque côté du "*".

[Dinostrate]

Et tout l'intérêt de ce genre d'apparent coupage de chevaux en quatre est de mettre en lumière les points qu'on ne lit pas assez dans les spécifications.

Cette discussion montre également qu'une bonne comprehension des normes n'est pas si évidente lorsqu'on désire la meilleure optimisation qui soit.

Un apprentissage pas à pas s'impose, sans oublier de commencer par le général pour aboutir enfin au particulier... démarche fondamentale en toute matière informatique.

malheureusement, l'apprentissage est souvent acquis au coup par coup, au fur et à mesure des besoins et des questions que l'on se pose....

[Denis]

Je ne vois pas en quoi tout cela est malheureux... au contraire, une chance qu'il soit possible de très bien faire sans pour autant tout maîtriser... l'important, c'est de toujours tenter de repousser les limites de ses connaissances, petit à petit. S'il fallait tout maîtriser CSS pour coder selon nos besoins (et ce malgré les limitations parfois très frustrantes des navigateurs moins performants <del>comme MSIE</del> au niveau du support CSS), il n'y a que très peu de gens qui s'y mettraient !

[jd_]

malheureusement, l'apprentissage est souvent acquis au coup par coup, au fur et à mesure des besoins et des questions que l'on se pose....

C'est aussi une bonne raison de la demande et du succès des livres et cours papier

Les spécifications c'est indispensable, les tutoriaux c'est génial, mais un bon vieux cours encré, structuré, ça a toujours de la valeur

*pro-livre*

[LaurentDenis]

Malheureusement, l'apprentissage est souvent acquis au coup par coup, au fur et à mesure des besoins et des questions que l'on se pose....

L'outil est jeune : le Web a moins de quinze ans. C'est équivalent à zéro à l'échelle humaine.

Et sa première crise d'adolescence, celle du développement sauvage hors-normes, de la guerre des navigateurs, etc... se termine à peine.

Les outils dont nous parlons (XHTML, CSS) sont immatures, manquent de retour d'expérience, et sont encore en pleine élaboration (comparez CSS2 et ce que sera peut-être CSS3).

Bref, nous parlons d'outils efficaces, concrets, rentables, ceux d'aujourd'hui déja, et plus encore de demain... mais dont il faut assumer l'aspect "pionnier". Nous sommes loin de pouvoir regarder en arrière et de pouvoir prétendre avoir une vue synthétique du sujet.

C'était mon quart d'heure philosophique ;-)

[Denis]

Effectivement, on a toujours tendance à oublier que bien peu de choses ont été faites dans le domaine jusqu'à présent. Ça me fait toujours un peu marrer quand on parle d'adolsecence du Web parce que si on est passé à travers l'enfance en à peine 10 ans, l'espérance de vie du médum risque d'être assez limitée.

Il ne suffit que de se mettre à divaguer sur les possibilités inatteignables du médium pour se rendre compte qu'il n'y a rien de fait encore.