Travaux pratiques
TROISIÈME PARTIE
194
En général, elles mettent en place des éléments de décoration relevant de l’habillage
plutôt que du contenu éditorial (texte ou image apparaissant lors du passage du pointeur de la souris, puce devant un élément de liste, etc.). CSS doit se limiter à créer des
effets visuels non pertinents pour la navigation et la compréhension du contenu du
document, faute de quoi les navigateurs n’activant pas les feuilles de styles et autres
lecteurs d’écran pour handicapés produiraient des résultats difficiles à comprendre.
La mise en place d’un cadre arrondi respecte ces conditions : l’absence de cet
habillage graphique ne gênera pas la consultation du document. Il suffit alors de
demander un chapeau arrondi avant le contenu (:before) et un pied arrondi à sa
suite (:after). Voilà qui simplifie considérablement le code :
VARIANTE La propriété -moz-border-radius
Cette propriété ne relève pas de la norme CSS et seuls l’interprètent les navigateurs
fondés sur Gecko, le moteur de rendu de Mozilla. En somme, c’est une astuce propriétaire introduite par un navigateur.
Le W3C l’étudie et le brouillon de CSS 3 la mentionne. Tout porte donc à croire que
des propriétés semblables simplifieront à l’avenir la tâche des designers web… quand
elles seront enfin intégrées dans la norme, programmées dans les navigateurs, et présentes dans les navigateurs les plus répandus en pratique.
Sans nous attarder sur cette propriété avant-gardiste (seule technique simple n’utilisant aucune image pour arrondir les coins), illustrons son utilisation :
HTML

Texte de contenu

CSS
.cadre {
width: 300px;
-moz-border-radius: 15px;
background-color: #ddd;
}
HTML

Lorem ipsum dolor sit amet, …

CSS
p#cadre:before {
content:url(haut.png);
}
p#cadre:after {
content:url(bas.png);
}