A la différence des méthodes employées dans les années 90, les CSS permettent une stricte séparation du contenu HTML et des informations de mise en page. Le gain réalisé est considérable :
gestion simplifiée et économique de la présentation d’un site à l’aide d’une seule feuille de style pour toutes les pages, aisément modifiable ;
allègement des coûts de développement et de maintenance : il n’est plus nécessaire de mettre en place un système (hasardeux) de discrimination des navigateurs pour servir aux différents navigateurs un document adapté aux technologies propriétaires qui balkanisent le Web ;
allègement du code-source des pages Web, et donc économie de bande passante : une feuille de style n’est chargée qu’une fois par un navigateur, qui l’applique sans délai si nécessaire aux pages visitées par la suite ;
possibilité de doter une page de feuilles de style spécifiques selon les medias (navigateurs graphiques, lecteurs d’écran…). Les feuilles de style print permettent une impression immédiate d’une page depuis le navigateur, et dispensent d’avoir à créer une version imprimable du document
HTML ;
possibilité de doter une page de présentations alternatives au choix de l’utilisateur ;
création de layout flexibles, qui s’adaptent aux différentes résolutions d’écran ;
meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.
article de Tristan Nitot et Laurent Denis de http://openweb.eu.org/css/
Occupons nous d’abord des liens en affichant la langue du document pointé:
a[hreflang]:after{
content: "\0000a0[" attr(hreflang) "]";
}
De la même manière, les raccourcis clavier peuvent être affichés:
a[accesskey]:after{
content: "\0000a0[alt+" attr(accesskey) "]";
}
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;
}
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;
}
<div style="-moz-border-radius:15px;border:2px solid black;padding:20px;">
truc
</div>
