Petits trucs CSS à utiliser les plus souvent possible
Par mauriz le mardi, juillet 27 2004, 14:43 - Webstandards - Lien permanent
L'utilisabilité ne tient parfois qu'à quelques petits trucs tout bêtes. Je connais quelques petits trucs qui permettent d'améliorer la convivialité mais j'oublie parfois de les utiliser: c'est l'occasion de les rassembler dans un billet (et une feuille de style) pour s'en souvenir dans le futur.
Les liens
Occupons nous d'abord des liens en affichant la langue du document pointé:
a[hreflang]:after{
content: "\0000a0[" attr(hreflang) "]";
}
Raccourcis clavier
De la même manière, les raccourcis clavier peuvent être affichés:
a[accesskey]:after{
content: "\0000a0[alt+" attr(accesskey) "]";
}
Acronymes et abréviations
On peut ensuite améliorer l'affichage des acronymes et abréviations en changeant le curseur pour indiquer que la définition est disponible dans l'attribut title
acronym, abbr{
border-bottom: 1px dotted;
cursor : help;
}
Éléments de formulaire
On peut également appliquer cette méthode aux label pour indiquer que le clic sur celui-ci donnera le focus à l'élement de formulaire lié:
label{
cursor: pointer;
cursor: hand; /* pour IE */
}
Une autre façon d'améliorer un formulaire est de surligner le champ qui possède le focus de cette manière:
input[type=text]:focus, textarea:focus{
border: 2px solid;
}
Vous les désirez, vous pouvez télécharger la feuille de style complète. Si vous aussi avez des petits trucs, n'hésitez pas à partager!
Commentaires
Pour ca :
label{
cursor: pointer;
cursor: hand; /* pour IE */
}
pointer marche sous IE, pourquoi distingue tu 2 cas ? A moins que ca ne soit du qu'a une propriété label sur IE ?
La valeur hand s'applique à IE5.x entre autres. Plus d'infos chez ppk www.quirksmode.org/css/cu...
1/ Pour un formulaire, on peut positionner le curseur directement dans le premier champ (façon google).
<BODY onLoad="document.getElementById('nom').focus()">
'nom' étant l'id du premier champ
Source: www.fredcavazza.net/tutor...
2/ J'utilise également la mise en forme de l'attribut kbd
kbd { /*Personalisation de la balise keyboard: <kbd>*/
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
background: #faf6f6;
color: #000;
border-color: #edd #baa #baa #eed;
}
Abondament utilisé sur l'aide de Firefox ( texturizer.net/mozilla/fr... )
3/ A propos des abréviations tu utilises l'attribut en fonction de sa sémantique ou tu fais comme beaucoup de sites (comme openweb) qui préfère abbr car reconnu par IE ? Personnelement je trouve que c'est un non sens. Si l'attribut acronym a été créé c'est pour l'utiliser à bon essient.
Aussi, j'ai deux styles pour l'abbr. Une par défaut et l'autre pour les mots à lire lettre par lettre (speak: spell-out;). J'viens même de voir qu'on pouvait choisir la voix (homme, femme, enfant) via voice-family ainsi que le volume. Utile pour les navigateurs qui lisent le contenu évidemment ;-)
4/ En ce qui concerne la langue cible du lien, je me posais la question s'il valait mieux considérer tous les liens en fr (et donc inutile de spécifier au lecteur le fr) et utiliser cette astuce pour tous les autres liens étrangers. Ou alors, il vaut mieux toujours spécifier au lecteur. Ainsi il est certain de la langue cible du lien.
Au fait, j'ai une petite question dont je n'ai jamais trouvé de réponse. Sur mon formulaire ( bugalood.free.fr/recherch... ) dans le champ prix je propose plusieurs tranches. La taille du select est de 6 car 6 tranches. Dans IE il ne m'affiche pas l'ascensseur alors que dans Firefox 0.8 oui. C'est dommage car l'ascensseur est inutile dans ce cas ci.
katsoura AT yahoo DOT fr
Tiens, je remarque que l'histoire des labels ne marche pas dans safari :/
Merci, je vais mettre ce billet en bookmark pour m'y mettre un jour ou j'aurais le courage.
J'ai également ma petite feuille de style basique (assez informelle en réalité) dans laquelle je n'omet pas d'utiliser :
a:focus{
}
éventuellement
body{
quotes: '\0000ab\0000a0' '\0000a0\0000bb' '\00201c\0000a0' '\0000a0\00201d';
}
Sans oublier la police "Bitstream Vera Sans" (pour Linux) dans la liste lorsque j'utilise une liste de police sans empattements (font-style: verdana, "Bitstream Vera Sans", etc.)
J'ajoute que je mets systématiquement un title="..." sur l'appel de la CSS dans le Xhtml, même s'il n'y a aucune CSS alternative (je trouve cela bien pratique pour désactiver la feuille dans Firefox ou Opera).
Je ne connaissais pas du tout l'astuce du quotes, je vais essayer de l'appliquer dorénavant (sans oublier que je dois réviser la typo française).
Le souci avec les guillemets pour "quote" c'est qu'ils ne s'affichent pas sur... rhaa non, je te laisse complèter la phrase, c'est tellement évident :-)
Remarque à propos de
input[type=text]:focus, textarea:focus{
border: 2px solid;
}
C'est insuffisant. Ca implique que la taille des bords est par défaut de 2 pixels ce qui n'est pas garanti car ce n'est pas indiqué dans la norme (X)HTML.
Il faut donc soit avoir un bord de 2 pixels par défaut ou toujours s'assurer que margin+border+padding+height est constant avant et après le focus.
Voilà, c'était juste un complément que je pense important :)
Oui c'est vrai, sinon il risque d'y avoir des décalages indésirables lors du focus. Bonne remarque :)
La liste commence à être fort complète ;)
A propos des abréviations, il est bien agréable de retrouver leur signification à l'impression, avec un petit ajout du même type dans la CSS print:
abbr[title]:before, acronym[title]:before {
content : attr(title) " (";
}
abbr[title]:after, acronym[title]:after {
content : ") ";
}
Je raffine un peu en intervertissant via la CSS le sigle et sa signification pour obtenir bla bla bla (BBB). Voir blog-and-blues.com/2004/m...
Au passage, katsoura, aucun lecteur d'écran n'implémente actuellement les CSS aural... qui restent toutes théoriques ;) Et le choix fait pour OpenWeb repose sur... la sémantique : la différence de sens entre <abbr> et <acronym> relève de la présentation orale bien plus que de la structure... D'où le côté superflu de leur redondance en (X)HTML.
Sinon, deux autres petites astuces :
h3[id]:hover:after {
content:" #" attr(id);
}
Pour afficher au survol l'id des sous-titres d'articles et faciliter les liens directs vers ceux-ci.
pre {
overflow: auto;
}
Pour gérer agréablement les exemples de code trop long qui cassent la mise en page.
Et une petite politesse sous forme de feuille de style alternative pour faciliter la vie à ceux qui voudraient connaître vos en-têtes : voir lgd.name/
Oups, j'oubliais : l'affichage via CSS des racourcis claviers est très séduisant, mais pose comme un léger problème d'accessibilité puisque les utilisateurs sans support CSS seront privés de l'info ;) Il ne dispense donc pas d'une liste récapitulative des accesskeys sur une page spécifique. Et le mieux reste de mentionner les accesskeys dans leur contexte, "en dur".
Laurent: Oui, l'affichage des raccourcis ne dispense pas la création d'une véritable page décrivant la politique d'accessibilité.
Sinon j'ai rassemblé ces astuces sur une page wiki:
wiki.svay.com/wiki/TrucsE...
A noter: mozilla.org tente deja de faire ce genre de choses dans gecko. Par exemple ya un bug sur comment rendre les guillemets corrects selon la langue, un autre sur les hreflang aussi je crois...
Bonjour ;)
Euh, je me trompe ou IE reconnait pas :focus ? Enfin c'est pas grave, firefox le fait :D
Sinon, juste pour compléter la chose :
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid #000;
}
Oui, si on le met pas aux champs de password c'est troublant :D
plop quelques années après,
On peut aussi mettre un del:hover { text-decoration: none; } pour que les gens puissent lire le texte barré sans trop se fatiguer les yeux. =)
C'est bien joli tous ces styles, mais IE n'a rien à f... de la langue pour le lien ou de l'acronyme... même la dernière version :-(
Ce n'est pas parce qu'un navigateur se croît plus malin et au-dessus des standards qu'il faut lui donner raison! Bref si tu préoccupe d'ie c'est que tu n'as rien compris au (x)html (partager de l'information de manière universelle). Trop longtemps cet état de fait a perduré. On a donné raison à ie résultat le web a évolué mais les sites n'ont pas bougé.
Les utilisateurs doivent se discipliner et utiliser autre chose qu'ie. En général, ils arrivent à installer des logiciels crackés alors firefox ça ne va pas les tuer... Appelons les choses par leur nom : ie est un outil de mise à jour pour windowsupdate c'est tout.
J'ai personnellement trop testé avec IE et pas assez avec les autres, et je m'aperçois que cette attitude ne fait que conforter les utilisateurs d'IE dans leurs choix ! J'ai donc inversé la vapeur et maintenant je teste avec des navigateurs plus respectueux des normes, à commencer par Firefox (qui au passage a le bon gout de rendre les pages identiques sur plate-formes différentes, au polices de caractères près bien entendu).
Avant de se lancer dans une n-ième bataille de la guerre des navigateurs 2e époque, il faut se souvenir que l'accès au contenu de la page Web n'est pas en cause ici, et qu'il ne s'agit que fournir à l'utilisateur une expérience plus riche, essentiellement en mettant mieux en valeur ce contenu et en faisant apparaître des métadonnées telles que le langue cible des liens.
L'utilisateur d'un navigateur texte n'aura pas accès à la présentation graphique du site. C'est parfaitement normal et cela ne choque personne. De même, l'utilisateur d'un navigateur qui prend de l'âge et qui n'a qu'une implémentation limitée des CSS aura une expérience limitée.
Il ne viendrait à l'esprit de personne de refuser de faire des présentations graphiques parce qu'elles ne sont pas prises en compte par Lynx : il serait tout aussi absurde de faire d'IE la référence à ne pas dépasser en matière de compatibilité CSS ;)
Quant au choix des utilisateurs d'IE... C'est le leur : respectons-le.
Il est a noter que la pluspart des éléments CSS de présenté ici sont conforme à CSS2 et pas CSS1. Donc a part Opéra et ce qui est basé sur le moteur Geko, tous les autres navigateurs ne veront pas certain styles.
bonjour (çà aussi c'est du standard)
alors ie vous fait encore des misères et bride votre créativité!? hô le méchant!
arrétez tout et retourner au macramé de votre enfance...