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.

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 ?

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...

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

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=0&#entry7197

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 :yoot:).

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 :


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 :

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.

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...

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

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...

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

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

si, si

Bonjour,

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


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

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

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" />

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.

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! :down:
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

Bonjour Philippe,

Je suis heureuse d'apprendre que le contenu de mon article t'a remis sur les bonnes voies B)
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...

Bonjour à toi Monique,

puisque tu dis qu'il faut combattre 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é?

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

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).

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
... un intervenant y parle aussi de "monopole de fait"

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:

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
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?

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

J'oubliais un lien vers un excellent document du W3C sur ce genre de questions: http://www.yoyodesign.org/doc/w3c/web-quality/

Pardon, ma question n'était que réthorique et je ne cherchais pas à ce qu'on y réponde. Plus j'essaie d'apprendre à créer des pages web, plus je m'aperçois qu' il est difficile parfois de de trouver de l'aide constructive. Ces quelques échanges avec vous tous sur ce forum ont été très utiles et ta dernière remarque, LaurentDenis, sur CSS2.1 ainsi que le lien vers le site de yoyodesign est excellent. Merci beaucoup pour tout!
C'EST ANSI QUE SE CONCLUE LE VOTE DU JURY DES FRANCAIS D'ALBION

Bonjour Monique et les autres,

Je te remercie beaucoup Monique de présenter une façon très claire de travailler avec les CSS. Cela m'aide énormément en tant que débutant ignorant.

Jusqu'à aujourd'hui, j'utilise un site «libre» en php et avec CSS, qui m' été donné par un coopérateur d'ouvaton.coop (http://ppzx.net). Tout est beau.

Heureusement, j'ai les 2 points suivants qui me fatiguent :
1 - Je travaille (sans trop de résultats positifs) pour que mes enfant, qui utilisent Netscape 4.7, puissent venir sur mon site, qui les concerne en priorité (photos).

2 - je trouve particulièrement épuisant l'argument du «la majorité des gens utilisent IE». Donc, il faut les satisfaire. Au Moyen-Âge, tous croyait que la terre était un disque plat. Fallait-il continuer de satisfaire ces ignorants qui refusaient toute innovation ? Bien sûr que non ! IE devant les standards du Web me fait penser à ces ignorants...

De plus, ces exceptions me causent beaucoup de maux de tête... Ah ah ah ! Heureusement... Comme cela, je continue à découvrir des sites et des gens super, comme je le réalise ici avec vous, en ce moment.

Amitiés à tous et bonne année 2005, pandrkano

Grâce à Igor , j'ai résolu le problème d'accès à mon site par Netscape 4.7. Cela peut être utile à d'autres.


Amitiés, pandrekano

pandrekano, bien qu'effectivement tu aie trouvé la source de ton problème, tu pourras dire à tes enfants que Netscape 4.7 est plus qu'obsolète, vu son âge, et qu'il est temps de prendre un navigateur moderne (Firefox, Opera à la rigueur ou dans le pire des cas Netscape 7.2)

Car si tu as réussi à résoudre ce problème, il est certain qu'assurer une compabilité aussi descendante que celle avec Netscape 4.7 t'en apportera d'autres...
À la vitesse à laquel évolue le Web, utiliser un navigateur de 1999 n'est plus sérieux

Et pourtant IE 6 n'est pas beaucoup plus vieux que 1999

Et tout un lot qui plus est !

Pour arriver à satisfaire aux limites de Netcape 4, tu devras automatiquement massacrer ton code qui autrement, aurait pu être beaucoup plus performant. On ne peut demander à un navigateur de supporter des technologies qui n'existaient pas encore au moment de sa propre conception.


Loupilo, essaie 1998. Pire, début '98, le premier trimestre si ma mémoire est bonne. ^_^


Hum... octobre 2001 !

Wé voilà, 2001, on est en 2005, moi j'appelle ça un ancêtre ! C'est quand même du foutage de gueule.

Netscape 4.7 ne date pas de fin 1999 ?
AÏe, les vacances, ça ne me réussit pas

[Edit: Mais si, Netscape date de fin 1999 et pas de début 98 : ww*.trucsweb.com/Logiciels/trucs.asp?no=98&type=24 !]

IE est de 2001, oui, mais lui, n'en parlons pas, je n'ai mentionné que des navigateurs modernes

ElMoustiko, oui, c'est du foutage de gueule, mais l'expansion de Firefox amène une lutte, et que serait la vie sans lutte ?

Toutes mes excuses, mon erreur. Je m'incline bien bas. Même que dans mes propres notes, je le plaçais en 1999. C'est à moi que les vacances ne réussissent pas.

http://www.cybercodeur.net/weblog/presenta...ateurs/028.html


lol, ah bien sûr, c'est vrai !

Mais ça arrive parfois dans ce domaine, et à moi aussi...
Tiens, par exemple, je ne me souviens plus de l'âge du squelette de Lucy, ni de la date des peintures de la grotte de Lascaux...
Tu vois, les mêmes problèmes... Plus c'est vieux plus c'est dur de s'en souvenir !
D'ailleurs j'ai failli oublier qu'IE datait de 2001....

Surtout quand tu n'as plus à le supporter depuis des années. Mais tout le monde n'a pas ma chance. ^_^

Qui ? Nous ? Jamais voyons !

Bonjour,

Euh... ceci n'est pas un troll
c'est juste une information

Signalé par Tristan : il n'y aura pas de nouvelle version de IE avant la sortie de la nouvelle version de Windows en 2006...


Nous n'avons donc pas fini de nous prendre la tête, mais cela laisse du temps à Firefox et à Opera de continuer leur progression galopante

Euh... c'est moi qui en ai manqué beaucoup plus que je ne le croyais dans les derniers mois, ou on savait déjà depuis près de deux années qu'il n'y aurait pas d'IE 7, et aucune nouvelle mouture du navigateur de Microsoft avant Longhorn ? Il me semble qu'il n'y a là absolument rien de nouveau.

Je confirme
Mais 2006 n'est pas si loin enfin si quand même, mais c'est plus près que 2001 n'est loin dans le passé

(/me très philosophe)

Disons qu'il y a eu beaucoup de rumeurs, de contre-rumeurs, de contre-contre-rumeurs...
Cette fois, c'est le chef de la "Windows platform division" qui le dit

C'est incroyable tout de même le pouvoir de Microsoft... même quand on ne s'occupe pas d'eux, ils parviennent à nous faire faire du mauvais sang quand même...

Et dire que nous n'avons pas la moindre idée de ce qu'ils nous réservent... ah, les joies de l'espionnage industriel ; si seulement....

Bonjour les amis,

Vous avez tous raison pour l'insignifiance de Netscape 4.7.

Là, mes enfants (7 et 8 ans) utilisent un vieux «powercomputing», clone de Mac, qui fonctionne avec un système mac OS 9.1. Ils habitent à Rimouski et moi à Québec. 6h de route aller-retour. Ils savent juste utiliser ce qu'ils ont sous la main : Netscape 4.7.

Avec des CCS et des liens «<style type="text/css" media="screen" title="default">@import url(css/menug.css);
_AT_import url(css/intro.css);</style>» tout va très bien, car ils ont accès au site brut. Comme ce qui est important c'est de regarder leurs photos, cela ne change pas non plus les photos et ils sont contents comme cela...

De plus, cela ne dérange pas non plus les gens avisés qui utilisent la famille Mozilla. Eux ont droit à l'intégralité de la mise en page (avec les mêmes photos !).

C'est pour cela que je remercie Monique qui m'a mis sur la bonne voie avec les _AT_import. elle a fait très plaisir à mes enfants et à moi-même.

Comme je l'ai déjà écris, je me moque bien de la majorité de ceux qui utilisent IE. C'est tout au plus une question de société pour ceux qui aiment les «best sellers». Une très grosse majorité, surtout une foule, a environ 7 ans d'âge mental, comme l'exploite tous les publicitaires.

Aussi j'apprécie beaucoup la qualité de vos interventions et de vos croyances.
Amitiés, pierreandre

Tu leur enverras un gros bisou de ma part
J'apprécie leur grande sagesse... ils peuvent voir leurs photos et ils sont heureux, c'est bien là l'essentiel !

Bonjour Monique,

Merci pour les bisous (pour les enfants ah ah ah!). Je leur transmettrai au printemps prochain.

Et merci pour tes compétences, ton attention, ta tolérance... Ouah ! Ça suffit comme ça pour aujourd'hui.

Et bonne année, Madame!!!

Amitiés, pierreandre

Bonjour!
Je suis en train de crée un site web. Et mon problème, c'est que je ne sais pas où mettre le CSS Je suis en train d'apprendre vraiment le CSS, avec toute les petites subtiliter!
C'est vraiment dure! Surtout quand on n'a que 13ans
Si vous pouviez m'aider, sa serais super! Merci d'avance