I’m sure that the CSS Validator has complained on you about a background-color or a color that are half set.
I toke it into account and tends to forget it by the time until recently. The new (1.4.5) Audacious comes with a nice black GTK theme and I decided to use it all the time to embrace the dark theme mood.
And then the whole web collapse, because a lot (and the famous ones) aren’t respecting that basic rule: always set the background and the color, not only one of them. I can do a little recap of which applications aren’t usable anymore (without selecting the text to effectively see it):
- Google: Groups, Finance, Docs, News, login page, Code, GTalk in GMail, Calendar, ... way to many;
- Facebook is more or less affected, but still;
- Yahoo! Mail, Finance (very few), Del.icio.us, Flickr;
- Wordpress.com;
- Microsoft;
- Canonical;
- AOL;
- … and this weblog.
Usually the reset.css from YUI, Eric Meyer or others don’t contain a color reset which can prevent from that kind of massive failure. Blueprint does it right as long as you are using typography.css at the same time.
And there is also some issues (with a dark theme) in native apps like Pidgin which displays the extended away contacts in black despite the fact the background is already black. The Firefox status bar is also sadly black on black. A funny thing is that the Opera's behaviour is quite different regarding the GTK theme so it also breaks but not the same way.
Whatever we do, how many times things are repeated it’s hard to not forget that we aren’t using the same tools, configuration; that we don’t have all the same abilities to see and read (small text or weak contrasts). The best you can do is to try (for a while) to use an uncommon configuration: white on black, big fonts, text-only browser, no CSS, no JavaScript and so forth. I know that I’m not doing that enough either. Thank you to be a little more aware of that now and so forth. I know that I’m not doing that enough either. Thank you to be a little more aware of that now.
So, I ended up fixing it with Stylish assuming we "all" are considering that a default background is black and a default foreground color is white. And I warmly encourage you to put, for test purposes only, the following rules in Stylish to have a white on black rule or choose some fantasy colors like pink and purple if you prefer.
html, input,
button, textarea,
select, option {
background:#000;
color:#fff }
Now what to do? Should I have a white on black enabled website in order to be nice to people that prefer that kind of strong contrast? I assume they are using a kind of mechanism that Opera is providing, which simply overrides all existing rules but is that because the web is broken and it’s the only way to achieve that or because it’s the more convenient way to get an usable content?
Je suis certain que vous avez déjà, au moins une fois, ignoré un message de l’outil de validation CSS du W3C vous demandant de bien spécifier la couleur du texte en même temps que la couleur de fond, d’être sûr qu’il y a un contraste suffisant et de ne pas se reposer sur une couleur uniquement pour représenter une information. Il me semble y avoir prêté attention, puis ai tendu à assumer que si ça fonctionnait pour moi, ça fonctionnerait pour les autres, jusqu’à récemment.
Différents bloggeurs ont vanté la beauté des thèmes de bureaux sombres: antracite ou noir et appréciant celui livré avec Audacious (le XMMS nouveau), je suis passé du côté sombre de la force. Quelle ne fût pas ma surprise quand j’ai réalisé combien de sites internets que j’utilisant couramment, régulièrement ou plus sporadiquement devenait simplement inutilisables (à commencer par ce blog).
L’erreur de base étant de considérer que la couleur de fond est blanche et celle du texte est noire. Ce qui n’est pas toujours vrai.
Un simple conseil que je pourrais vous donner en ce dimanche est de se mettre dans la peau d’un utilisateur ayant une autre configuration, ce qui se fait très simple avec Stylish (une extension pour Firefox permettant, à la façon de GreaseMonkey, d’ajouter des règles CSS à une ou plusieurs pages).
html, input,
button, textarea,
select, option {
background:#000;
color:#fff }
Je ne peux répondre aux questions que je me pose à savoir si avoir un site prenant en compte la configuration de l’utilisateur un maximum est faisable à 100%. Qu’il le fasse pour les éléments de formulaire est important cependant même si ça fait partie du fantasme des designers de contrôler tous ces boutons (laids). Le seul truc que j’ai réalisé étant que de faire les choses à moitié est pire que de ne rien faire.
