Blog - Britoweb - Tag - propriétés css

Démonstration des effets des différentes valeurs de la propriété CSS display

Victor Brito — Thu, 08 Jul 2010 18:33:00 +0200

Un peu perdu entre les différentes valeurs possibles de la propriété CSS display ? Le site Sickdesigner met à votre disposition une démonstration très claire à ce sujet, intitulée Understanding the display property demo.

Contenu masqué lisible des lecteurs d'écran : ne pas refouler en haut

Victor Brito — Thu, 05 Mar 2009 21:46:00 +0100

Lorsque du contenu doit être masqué pour les internautes pouvant utiliser leurs yeux et une souris, mais deumeurer néanmoins lisible des lecteurs d'écran, par souci d'accessibilité, la technique qui vient à l'esprit consiste à appliquer un positionnement absolu au contenu en question et à le décaler le plus souvent vers le haut.

Or, WebAIM démontre, dans un billet paru aujourd'hui, qu'un contenu masqué par un positionnement absolu qui le refoule en haut de la page n'est pas sans inconvénient. En effet, WebAIM signale que, si le contenu masqué en question comporte un élément susceptible de recevoir le focus lors d'une navigation au clavier, le navigateur tentera de défiler vers le haut pour atteindre l'élément en question lorsque la navigation au clavier l'atteint, ce qui peut confondre les utilisateurs qui naviguent au clavier et n'utilisent pas de lecteurs d'écran.

Aussi WebAIM préconise-t-il de positionner en absolu l'élément à masquer, certes, mais en le décalant uniquement vers la gauche. Autrement dit, les propriétés CSS à utiliser doivent se limiter à celles-ci :

#my-hidden-content {
  position: absolute;
  left: -10000px;
}

Selon le contexte de la feuille de style, vous pouvez ajouter la propriété top, mais en lui appliquant sa valeur par défaut (à savoir, auto).

Internet Explorer 8 aura des propriétés CSS propriétaires nommées conformément au standard CSS

Victor Brito — Tue, 09 Sep 2008 19:29:00 +0200

La spécification CSS 2.1 prévoit, dans la syntaxe des CSS, la possibilité pour les navigateurs d'ajouter des extensions aux propriétés faisant partie des CSS. Ces extensions se reconnaissent à la syntaxe suivante : -identifiant du propriétaire de l'extension-nom significatif du rôle de l'extension. C'est ainsi qu'il existe des propriétés propriétaires comme -moz-border-radius, -khtml-border-radius ou -webkit-border-radius, des propriétés propriétaires propres aux navigateurs utilisant, respectivement, comme moteur de rendu Gecko (Firefox, Camino…), KHTML (Konqueror) et Webkit (Safari) qui permettent, dans ces exemples, d'obtenir des bordures à angle arrondi (en attendant la future propriété CSS 3 border-radius).

Internet Explorer n'est pas en reste ; mais, jusqu'à présent, le navigateur de Microsoft ne suivait pas la syntaxe standard, nommant ses propriétés propriétaires comme s'il s'agissait de propriétés incluses dans la spécification CSS. Sous Internet Explorer 8, en revanche, les propriétés propres à Microsoft suivent la syntaxe préconisée par le W3C : désormais, on n'utilisera plus filter, mais -ms-filter. Le blog de MSDN recense les propriétés propriétaires concernées par ce changement.

Ce changement n'est valable que si Internet Explorer 8 n'est pas en mode de compatibilité pour le rendu. Toutefois, par souci de rétro-compatibilité, les anciennes appellations des propriétés en question seront tolérées et continueront à fonctionner.