Webmaster Hub: Les feuilles de styles - Webmaster Hub

Aller au contenu

  • 3 Pages +
  • 1
  • 2
  • 3
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Les feuilles de styles Pourquoi ? Comment ? Noter : -----

#1 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 24 novembre 2003 - 21:14

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.
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

#2 L'utilisateur est hors-ligne   Cariboo 

  • Motoriste amateur
  • Groupe : Direction
  • Messages : 3 290
  • Inscrit(e) : 26-août 03
  • Genre:Homme
  • Localisation:London N7
  • Société:Twenga

Posté 24 novembre 2003 - 21:23

Excellent article Monique... :flower:

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

#3 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 24 novembre 2003 - 21:36

Merci cariboo :blush:

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...
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

#4 L'utilisateur est hors-ligne   Raphael 

  • Groupe : Membre
  • Messages : 565
  • Inscrit(e) : 16-octobre 03
  • Localisation:Strasbourg
  • Société:Alsacréations

Posté 25 novembre 2003 - 00:27

Bravo Monique, c'est très bien expliqué :up:
Alsacréations.com (communauté) - Alsacréations.fr (agence web alsacienne)
le livre sur XHTML/CSS
0

#5 L'utilisateur est hors-ligne   smile 

  • Groupe : Hubmaster
  • Messages : 1 149
  • Inscrit(e) : 07-octobre 03
  • Genre:Homme
  • Localisation:marseille
  • Société:Mayocrea

Posté 25 novembre 2003 - 01:02

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
Smile
Graphiste, développeur freelance Mayocrea Conception de sites web
0

#6 Invité_PierreThierry_*

  • Groupe : Invité

  Posté 26 novembre 2003 - 01:01

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

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


#7 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 26 novembre 2003 - 01:29

Merci Pierre :blush:

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

Je vais mettre à profit tes remarques et tes explications pour compléter l'article.
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

#8 L'utilisateur est hors-ligne   Docbones 

  • Groupe : Membre
  • Messages : 4
  • Inscrit(e) : 03-février 04
  • Société:Airsoft

Posté 03 février 2004 - 22:26

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

#9 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 04 février 2004 - 00:22

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
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

#10 L'utilisateur est hors-ligne   Beatnykk 

  • Groupe : Membres
  • Messages : 501
  • Inscrit(e) : 18-septembre 03
  • Localisation:paris
  • Société:labyrinthe

Posté 04 février 2004 - 15:30

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...
--------------------------------
>Nicolas, Infographiste et Webmaster de Meilleur Écran
--------------------------------

#11 L'utilisateur est hors-ligne   Docbones 

  • Groupe : Membre
  • Messages : 4
  • Inscrit(e) : 03-février 04
  • Société:Airsoft

Posté 04 février 2004 - 21:52

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 :)
0

#12 L'utilisateur est hors-ligne   Docbones 

  • Groupe : Membre
  • Messages : 4
  • Inscrit(e) : 03-février 04
  • Société:Airsoft

Posté 04 février 2004 - 21:55

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

si, si
0

#13 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 04 février 2004 - 23:06

Bonjour,

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

Citation

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 ;)
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

#14 Invité_yamo_*

  • Groupe : Invité

Posté 12 juin 2004 - 18:49

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

#15 L'utilisateur est hors-ligne   Hadrien 

  • Groupe : Membre
  • Messages : 54
  • Inscrit(e) : 08-juin 04

Posté 25 juin 2004 - 15:08

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 :whistling:). 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" />
0

#16 L'utilisateur est hors-ligne   Xethorn 

  • Groupe : Hubmaster
  • Messages : 310
  • Inscrit(e) : 29-avril 04
  • Genre:Homme

Posté 25 juin 2004 - 15:47

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

#17 L'utilisateur est hors-ligne   ppb7 

  • Groupe : Membre
  • Messages : 10
  • Inscrit(e) : 09-janvier 04
  • Genre:Homme
  • Localisation:Lancaster (GB)

Posté 07 septembre 2004 - 12:40

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) :blush:


Philippe
Philippe
Lancaster (GB)
0

#18 L'utilisateur est hors-ligne   Monique 

  • Le Web à tous
  • Groupe : Hubmaster
  • Messages : 3 952
  • Inscrit(e) : 19-août 03
  • Genre:Femme
  • Localisation:rue Georges Mabile, Havré
  • Société:Webatou

Posté 07 septembre 2004 - 13:43

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...
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
0

#19 L'utilisateur est hors-ligne   ppb7 

  • Groupe : Membre
  • Messages : 10
  • Inscrit(e) : 09-janvier 04
  • Genre:Homme
  • Localisation:Lancaster (GB)

Posté 08 septembre 2004 - 11:58

Bonjour à toi Monique,

puisque tu dis qu'il faut combattre

Citation

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é?
Philippe
Lancaster (GB)
0

#20 L'utilisateur est hors-ligne   LaurentDenis 

  • Groupe : Membres
  • Messages : 1 243
  • Inscrit(e) : 26-mars 04

Posté 08 septembre 2004 - 13:00

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

Ce message a été modifié par LaurentDenis - 08 septembre 2004 - 13:02.


Partager ce sujet :


  • 3 Pages +
  • 1
  • 2
  • 3
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)