Créer et modifier les feuilles de style d'un site SPIP
(→Les appels aux feuilles de style appropriées : mise en forme) |
(→Quel est l’intérêt de travailler avec une feuille de style plutôt qu’en indiquant les données de style dans le fil du html ? : mise en forme) |
||
| Ligne 21 : | Ligne 21 : | ||
| − | == Quel est l’intérêt de travailler avec une feuille de style | + | == Quel est l’intérêt de travailler avec une feuille de style ? == |
| + | Les avantages sont nombreux, par rapport à l'indication des données de style dans le fil du html. | ||
| + | L’usage de feuilles de styles est une des bases de la conformité aux standards W3C et aux normes d’accessibilité. Il s’agit de découpler le contenu du site (ses textes, images, fichiers audio...) de ses caractéristiques de présentation. | ||
| − | + | Voici les principaux avantages que l’on en retire : | |
| − | * | + | * gain de temps dans les opérations de design Web. Dans l’exemple qui suit, une modification à apporter au "pavé auteur" dans les différents squelettes peut être apportée en une fois dans la feuille de style externe habillage.css. Dans le cas de feuilles de style internes ou d’absence de feuille de style, il faudrait apporter la modification autant de fois qu’il y a de squelettes, |
* autre gain : au niveau de la vitesse de chargement de la page par le navigateur de l’internaute : la feuille de style n’est chargée qu’une fois par le navigateur, qui l’applique ensuite à toutes les pages visitées, | * autre gain : au niveau de la vitesse de chargement de la page par le navigateur de l’internaute : la feuille de style n’est chargée qu’une fois par le navigateur, qui l’applique ensuite à toutes les pages visitées, | ||
| − | * une même page Web peut avoir des feuilles de style différentes pour la lecture Web, l’impression papier, la lecture sur support mobile, etc. C’est l’attribut "media" de la balise link qui précise quelle feuille de style doit être utilisée en fonction du média de sortie. | + | * une même page Web peut avoir des feuilles de style différentes pour la lecture Web, l’impression papier, la lecture sur support mobile, etc. C’est l’attribut "media" de la balise link qui précise quelle feuille de style doit être utilisée en fonction du média de sortie. |
| − | + | ||
| − | + | On peut par exemple construire une feuille vocale.css qui pourra être interprétée par les logiciels de synthèse vocale. Elle sera appelée depuis la page html par l’instruction suivante figurant dans le head : | |
| + | http://www.generationcyb.net/IMG/png/110906.png | ||
| + | A la place de aural, on peut avoir print (pour impression), braille (pour lecteur au toucher), all (pour tous medias), tv (pour un affichage sur écran tv), handheld (pour ordinateurs de poche), etc. Reste bien sûr à élaborer le contenu de ces feuilles de style par médias. | ||
== Comment créer une feuille de style ? == | == Comment créer une feuille de style ? == | ||
