Les feuilles de styles Pourquoi ? Comment ?
#1
Posté 24 novembre 2003 - 21:14
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.
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
#2
Posté 24 novembre 2003 - 21:23
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 ?
Directeur SEO International chez Twenga
Pnambique : chatterbots et agents virtuels -
AB Traductions - Traducteurs - Interprètes - Traductions assermentées
#3
Posté 24 novembre 2003 - 21:36
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...
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
#4
Posté 25 novembre 2003 - 00:27
#5
Posté 25 novembre 2003 - 01:02
mais sur la recursivité, un cours ca serait pas mal
http://www.webmaster-hub.com/index.php?sho...st=0entry7197
Graphiste, développeur freelance Mayocrea Conception de sites web
#6 Invité_PierreThierry_*
Posté 26 novembre 2003 - 01:01
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).
<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>
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
Posté 26 novembre 2003 - 01:29
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.
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
#8
Posté 03 février 2004 - 22:26
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...
#9
Posté 04 février 2004 - 00:22
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
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
#10
Posté 04 février 2004 - 15:30
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
Posté 04 février 2004 - 21:52
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
#13
Posté 04 février 2004 - 23:06
Pour moi, tout webmaster devrait toujours avoir sous les yeux la phrase de Tim Berners-Lee
Citation
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
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
#15
Posté 25 juin 2004 - 15:08
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
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" />
#16
Posté 25 juin 2004 - 15:47
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.
#17
Posté 07 septembre 2004 - 12:40
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
Lancaster (GB)
#18
Posté 07 septembre 2004 - 13:43
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...
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
#19
Posté 08 septembre 2004 - 11:58
puisque tu dis qu'il faut combattre
Citation
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é?
Lancaster (GB)
#20
Posté 08 septembre 2004 - 13:00
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.




Haut














