Les feuilles de styles

[Monique]

Bonjour,

Les feuilles de style doivent imanquablement faire partie de la structure d'un site web.

Dans cet article, je vous en présente les principes essentiels pour vous aider à comprendre et à exploiter au mieux les nombreux exemples publiés sur le Web.

Bonne lecture.

[Cariboo]

Excellent article Monique...

Je cherche, mais je ne me souviens pas avoir lu quelque chose d'aussi clair précis, et concis sur le sujet...

Te connaissant, je suppose que tu prévois une suite pour dans quelque temps ?

[Monique]

Merci cariboo

Je dois avouer que si j'avais disposé de cette approche lors de mes débuts, j'aurais évité bien des erreurs, des tâtonnements décourageants.

Et depuis que je hante divers forums, j'ai pu me rendre compte que la plupart des débutants étaient dans la même situation.

Oui, une suite est en projet...

[Raphael]

Bravo Monique, c'est très bien expliqué

[smile]

oui c'est bien et peut etre très utile

mais sur la recursivité, un cours ca serait pas mal

http://www.webmaster-hub.com/index.php?sho...st=0entry7197

[Guest PierreThierry]

C'est une intro courte et concise, c'est pas mal. Mais j'ai une grosse critique à faire, un truc que même les experts de CSS omettent régulièrement : la cibles d'une feuille de style. En effet, il n'y a aucune raison que la page soit rendue de la même façon à l'écran, imprimée, sur un PDA ou quand on navigue en console. Mais l'immense majorité des designers, même ceux utilisant intensivement les CSS, n'est même pas au courant de le possibilité de faire une différence entre ces envirronnements. Je pense que le problème vient de ce que peu de gens lisent directement les recommandations du W3C, et que les auteurs de bouquins ou de sites sur les CSS ne prennent pas le temps de décrire cette possibilité (et c'est là que tu interviens en sauveuse, Monique ).

Tous ces envirronnements ont leur propre identifiant au sein des CSS, et il serait bon de prêcher leur utilisation. D'autant plus que certains forcent à penser ses pages Web de façon plus globale, comme le rendu vocal (aural) ou en mode texte (tty).

Dans ton exemple, il faudrait juste rajouter un attribut media et une at-rule, respectiement à la balise link et aux textes dans l'en-tête du document :

<link rel="stylesheet" type="text/css" href="exemple.css" media="screen">

<style type="text/css">
<!--
_AT_media screen .rouge {
  background-color: White;
  color: Red;
}
-->
</style>

:!: http://www.w3.org/TR/REC-CSS2/media.html :!:

On remarque du coup qu'appeler un style «rouge» montre qu'on envisage que la possibilité de l'écran couleur... Ce serait encore mieux si tu l'appelais selon un nom qui a un sens sémantique :

<style type="text/css">
<!--
_AT_media screen .avertissement {
  background-color: White;
  color: Red;
  font-size: larger;
}
_AT_media aural .avertissement {
  volume: loud;
  pause-after: 2s;
  cue-before: url('/sounds/alert.ogg');
  elevation: above
-->
</style>

[Monique]

Merci Pierre

Effectivement, on pense trop souvent écran en oubliant les autres environnements et j'ai péché dans le même sens (mais si c'est le cas même des experts... ).

Je vais mettre à profit tes remarques et tes explications pour compléter l'article.

[Docbones]

Bien, fondamentalement, tout ce qui est dans le post de Monique est exact mais un tant soi peu incomplet. L'article a le mérite d'une clarté exemplaire sur le fonctionnement de base des styles cependant il faut mettre l'accent sur la notion de CSS. Cascading Style Sheet : Feuille de style en cascade.

Comment t'est-ce que ça veut dire ?

Dans les pages webs sont le plus souvent encapsulés des tableaux, moyen le plus pratique pour effectuer une mise en page digne de ce nom. Les colonnes, cellules ou éléments dans les celulles (par ex. une balise <a href=...>) peuvent posséder un attribut "class", qui va aller chercher le style correspondant dans votre fichier .css.

Exemple pour la partie html :

<a href="toto.com" class="toto">Hey Toto !!</a>

Et dans le fichier css :

.toto

{

font-family: Arial Black sans-serif;

font-size: x-small;

color: #FFFC00;

font-weight: bold;

}

Il faut voir un tableau ( et la probable succession de sous-tableaux ) comme une structure arborescente. A un tableau appartient des rangées. A une rangée appartient des cellules. A une cellule appartient à peu près ce qu'on veut...

L'intérêt du CSS est justement le terme Cascading. L'attribut (sa classe) se propage à tous les éléments "enfants", jusqu'à ce qu'un style soit redéfini pour tel élément enfant/petit-fils/arrière-petit-fils...

[Monique]

Bonjour Docbones,

et bienvenue sur le Hub

Tu as raison, dans l'utilisation des feuilles de style, les notions de cascade et d'héritage sont essentielles.

Tellement essentielles qu'elles méritent un chapitre à part... qui est prévu, mais le temps disponible n'est pas extensible

Par contre, je ne te suis plus quand tu parles des tableaux comme éléments de mise en page le plus pratiques

Une superbe présentation, sur un mode humoristique mais très pédagogique :

En quoi la mise en page par tableaux est-elle stupide

[Beatnykk]

oui dailleurs c'est mignon, dès la première page il y a un bug d'affichage css (le texte "sections principales" se superpose avec Denis) chez moi, sous ie et en 1600x1200 en très grand police. tiens et en 800x600 avec grande taille de texte aussi.

ah la la, mais quand les gens se mettront-ils VRAIMENT au pourcentage ??? ; parler d'accessibilité okay, mais avant d'ouvrir la porte à la cigale, isolons nos fenêtres de sorte que personne ne se les gèle...

[Docbones]

Mes hommages Monique et salut tlm

Ma pratique quotidienne de développeur (orienté Microsoft .NET) me fait dire que le fait de réaliser un subtil mélange entre tableaux et css constitue une façon de se simplifier la vie.

Point trop de tableaux, point trop de spécifique css

Ceci dit si l'on a une vue très exacte de ce que l'on veut faire le protocole css le permet, mais souvent il est plus simple de mélanger tableaux et css, ce que je m'efforce de faire et ça marche pas mal, surtout, et j'en reviens à .NET, dans ce contexte ou les pages web .NET contiennent des composants (user controls) qui en gros sont des pièces de puzzle qui font ce qu'ont leur demande de faire (quelle que soit cette chose, accès base de données, affichage des documents dans un répertoire, afficher la météo - et c'est pas un gag - merci les services web, bref n'importe quoi...).

Toutes ces pièces sont généralement assemblées à l'intérieur de tableau(x), car cela suffit généralement à concevoir une mise en page simple sans recourir à des frames (technique certes simple pour une facilité de mise à jour du site mais pas supportée par tous les navigateurs et de plus un peu buggée - bouton 'précédent' souvent dans les choux, impression des pages plutôt hasardeuse).

Bon, donc tout ça pour confirmer qu'il faut utiliser le meilleur de chaque technologie en fonction de ce qu'on veut faire

[Docbones]

Et, (oops je me suis emporté) ce raisonnement s'applique même si on bosse pas en .NET.

si, si

[Monique]

Bonjour,

Pour moi, tout webmaster devrait toujours avoir sous les yeux la phrase de Tim Berners-Lee

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

L'information ou les services proposés sur un site doivent toujours être accessibles

- sans obstacles matériels (plate-forme, navigateur, connexion...)

- sans obstacles humains (handicap visuel, moteur...)

Le moyen le plus simple d'y parvenir est de se baser sur le travail de spécialistes (les membres du W3C) : les spécifications.

Parmi ces spécifications, celles préconisant le mode strict sont préférables puisqu'elles impliquent la séparation du contenu de la mise en forme, l'utilisation des feuilles de style.

Le contenu du site peut alors être présenté et organisé de manière logique et naturelle en utilisant les balises adéquates respectant la sémantique.

Parmi ces balises, il y a la fameuse table, destinée à contenir des données tabulaires...

C'est ma façon de voir les choses

[Guest yamo]

Très bon travail. J'ai bien aimé l'article, moi qui n'avait jamais utilisé le CSS, je pense que j'ai fait une grosse faute lol

[Hadrien]

Bonne idée le media=""

J'ai eu l'occasion de voir des sites utilisant beaucoup CSS sur des ordinateurs de poche, et parfois du fait de la petite taille ça devenait peu utilisable (le menu de mon site par exemple ). Il est cependant parfois possible de faire des designs qui s'adaptent bien à n'importe dimensions de la fenêtre. Donc soit on pense à faire une CSS qui s'adapte partout, soit on en fait plusieurs.

Bon sinon moi je vote pour l'utilisation d'un titre pour la feuille de style. Ça permet de faire apparaitre l'icône pour changer de style (ou mettre à nu) dans Firefox. Exemple :

<link rel="stylesheet" title="Style Formidable" href="cool-style.css" media="screen" />

[Xethorn]

Le media c'est bien, mais pour imprimer avec la feuille de style approprié, il faut déterminer deux fois le même title="" pour deux effets totalement différents.

Je prend pour exemple une feuille de style nommée : "default", le title destiné à la page d'impression (print) sera : "default" et celle destiné à l'affichage (screen) sera également "default". Une seule lettre qui change et vous aurez un soucis d'affichage à un niveau (soit à l'impression soit à l'affichage).

Donc pensez à coordonner vos attributs title.

[ppb7]

Salut à tous,

réponse tardive (je ne me suis jusqu'à présent qu,intéressé de loin aux CSS) et dûe surtout à un article paru dans un magazine anglais vantant la facilité avec laquelle il est possible de créer des pages visuellement époustouflantes (leurs termes) avec Dreamweaver, des balises <div> et... des attributs CSS "filter". "Tiens", me dis-je, "et si je changeais la valeur de cet attribut?" En pré-visualisant sur Mozilla, que dalle! Bizarre, qu'est-ce que cela veut dire? C'est là que j'ai voulu en savoir plus sur les CSS, que je suis tombé sur ton article, Monique, qui est très clair et m'a beaucoup appris. Et, surtout, j'ai suivi les liens en fin de page qui ont été extrêmement utiles puisque c'est sur SELFHTML que j'ai appris que les attributs CSS "filter" (et il y en a une dizaine) ne sont interprétés que par Internet Explorer, et pas par les autres navigateurs. Conclusion: voilà des attributs à éviter à tout prix!

Au fait, tu qualifies Topstyle d'excellent éditeur, mais qu'a-t-il de si bien que ça? (je suis paresseux et je n'ai pas vraiment le temps de trouver par moi-même)

Philippe

[Monique]

Bonjour Philippe,

Je suis heureuse d'apprendre que le contenu de mon article t'a remis sur les bonnes voies

Ta mésaventure justifie un de mes combats : l'information trompeuse d'articles ou tutoriels faisant allusion à des balises propriétaires sans, au moins, les signaler comme telles.

TopStyle est simple d'emploi, il évite de tout taper à la main (donc de faire des fautes de frappe), la liste des propriétés disponibles peut être triée selon différents critères, on a une prévisualisation de l'effet obtenu...

[ppb7]

Bonjour à toi Monique,

puisque tu dis qu'il faut combattre

l'information trompeuse d'articles ou tutoriels faisant allusion à des balises propriétaires

qu'en est-il de:

Initiation au positionnement CSS: positionnement absolu et fixe?

Bien sûr, il y est stipulé que, pour la position fixe, IE ne comprend pas la syntaxe html>body (moi non plus d'ailleurs); mais alors pourquoi en parler puisque la majorité des navigateurs dans le monde sont des versions d'IE? De plus, le hack suggéré n'est que ce qu'il est; un hack, c'est-à-dire quelque chose qui contourne (en prenant plus de temps et d'espace) un problème par un chemin détourné (je ne cherche pas ici à minimiser l'effort fourni). bref, ne vaudrait-il mieux pas laisser tomber tout ce qui ne fait pas l'unanimité?

[LaurentDenis]

La syntaxe des sélecteurs d'enfants du type html>body n'a rien à voir avec les syntaxes "propriétaires". C'est une syntaxe de sélecteur CSS2... normale, valide, W3cisée, politiquement correcte, propre sur elle, blanche (W...), anglo-saxonne (...AS...) et protestante (...P)

Il se trouve que le support partiel de CSS2 dans IE fait qu'il n'implémente pas ce type de sélecteur, et qu'il ignore donc les propriétés qui lui sont associés.

C'est donc un moyen tout à fait correct de réserver une propriété telle que position:fixed aux navigateurs qui la supportent, en ayant spécifié auparavant une autre propriété (position:absolute) à IE, le tout avec une syntaxe CSS sans détournements.

Pour différencier les types de "hack", voir mon commentaire dans http://www.cybercodeur.net/weblog/commenta...?idmessage=1065

Modifié 8 Septembre 2004 par LaurentDenis

[Monique]

Bien sûr, il y est stipulé que, pour la position fixe, IE ne comprend pas la syntaxe html>body (moi non plus d'ailleurs); mais alors pourquoi en parler puisque la majorité des navigateurs dans le monde sont des versions d'IE?

Bonjour Philippe,

Tu soulèves le problème de ce qu'on appelle les "standards de fait" qui ont tendance à s'imposer selon la loi du plus grand nombre... ce qui est le cas des formats propriétaires créés par Microsoft.

Le navigateur de Microsoft, non seulement utilise des éléments (balises) propriétaires, mais aussi ne sait pas interpréter des éléments et propriétés faisant partie des spécifications du W3C (ou, plus grave, les interprète à sa manière).

Dans l'article auquel tu fais allusion, Laurent détaille l'utilisation d'un standard du W3C et expose les problèmes posés par leur mauvaise interprétation par le navigateur le plus couramment utilisé actuellement. Le lecteur peut donc faire son choix en toute connaissance de cause.

[LaurentDenis]

Bonjour Philippe,

Tu soulèves le problème de ce qu'on appelle les "standards de fait" qui ont tendance à s'imposer selon la loi du plus grand nombre... ce qui est le cas des formats propriétaires créés par Microsoft.

Le navigateur de Microsoft, non seulement utilise des éléments (balises) propriétaires, mais aussi ne sait pas interpréter des éléments et propriétés faisant partie des spécifications du W3C (ou, plus grave, les interprète à sa manière).

Dans l'article auquel tu fais allusion, Laurent détaille l'utilisation d'un standard du W3C et expose les problèmes posés par leur mauvaise interprétation par le navigateur le plus couramment utilisé actuellement. Le lecteur peut donc faire son choix en toute connaissance de cause.

Non Monique, cela n'a rien à voir avec un "standard de fait", et tu ouvres la porte à n'importe-quel abus en disant cela.

Le fait qu'un navigateur ne sache pas interpréter une propriété CSS basique ne fait pas de son comportement un "standard de fait" !

Ou alors, acceptons la logique réciproque inséparable de celle-ci, et considérons que:

- <marquee> est un standard de fait,

- le prologue xml, de facto, doit basculer un navigateur en mode Quirks

- application/xhtml+xml n'est pas un type mime valide, et avec lui tout XHTML

- les <link rel="... sont tout aussi invalides puisque non supportés par IE,

- etc.

Il n'y a pas de "standards de fait". Il y a des standards (tout court) déterminés au sein d'un organisme collectif dont Microsoft fait partie (le W3C).

[Monique]

Oui... en fait je me suis très mal exprimée

Et j'ai oublié que l'expression "standards de fait" correspond à une définition précise (Définitions : qu'est-ce qu'une norme ? un standard ?).

J'ai fait un très mauvais raccourci : la plupart des technologies Microsoft sont majoritairement utilisées (au point que certains n'en connaissent pas d'autres) et considérées par beucoup comme de véritables standards à prendre en compte.

Les articles qui exposent l'utilisation de balises ou attributs propriétaires, sans préciser cette particularité, ne font que renforcer cette croyance.

C'est là contre que je m'insurge.

En complément, une discussion sur les "standards de fait" : Forums Les Echos

les produits Microsoft ne sont ni des standards, ni des standards de fait: l'appellation 'standard de fait' recouvre des logiciels ou des formats qui ont été agrées par des groupes de discussion ou consortium représentatifs de l'industrie du logiciel, sans pour autant qu'ils soient des groupes d'homologation (comme les comites de normalisation ISO, AFNOR, ANSI etc...).

... un intervenant y parle aussi de "monopole de fait"

[ppb7]

Salut à tous,

depuis 20 ans que j'habite en Angleterre (dont 5 au cours desquels le virus du web s'est peu à peu emparé de moi), j'ai pu remarquer maints exemples de différences d'attitudes entre nous et les Anglais. Je reproduis ici texto une remarque faite à la suite d'une de mes contributions sur le site d'un des mags auxquels je souscris:

if you stick to standards you limit yourself hugely.

Plus loin la même personne indique d'ailleurs que c'est un choix entre suivre les standards (qui limitent grandement) ou enfreindre les règles mais, çà, ce n'est pas grave puisqu'il suffit de tester pour s'assurer que tout marche comme souhaité. Oui, mais seulement voilà... Quelque chose que je n'ai pas encore posté là-bas est comme suit: le code CSS

filter:alpha(opacity): 60; -moz -opacity: 0.6;

permet d'appliquer une opacité qui n'est que de 60% avec IE et les navigateurs Mozilla, mais j'ai vérifié que cela n'a aucun effet avec Opera (et sûrement pas avec d'autres navigateurs)

Pour conclure, un Anglais m'a déjà répondu qu'vec le bout de code CSS reproduit ci-dessus, 95% des navigateurs sont couverts. Alors où est le problème?

[LaurentDenis]

J'avoue ne pas trop saisir le sens de ta question

L'idée selon laquelle les Standards limiteraient la créativité... n'est pas neuve, et oublie toujours que le Web est (de plus en plus) un assemblage totalement hétéroclite de technologies, de medias, de systèmes d'exploitation, d'application de rendu et d'utilisateurs aux besoins variés. Disons rapidement que sans un minimum de cohérence et de normes, diffuser largement un site deviendrait un casse-tête au coût prohibitif. Bref, les normes sont indispensables à l'interopérabilité au sein du système.

D'autre part, un standard n'est rien d'autre qu'une technologie. Ce qui limite éventuellement la créativité, ce sont les défauts éventuels de la technologie, ainsi que son niveau d'implémentation, mais pas son caractère normalisé.

Enfin, les Standards Web étant conçus de manière cohérente, ils créent en se "rejoignant" d'autant plus de possibilités à explorer, et stimulent la créativité. Voir par exemple les possibilités offertes par la modularité XHTML (X-Voice est un bon exemple).

Dernière chose : ton exemple des propriétés d'opacité permet de rappeler que les Standards ne sont pas des normes figées: -moz -opacity devient valide en CCS2.1 (extensions CSS préfixées) Evidemment, il faut aussi que la technologie propriétaire suive : l'équivalent microsoft filter:alpha(opacity) devra juste changer de syntaxe pour devenir valide