Re: website: background color in css

[Michal Suchanek]

2009/11/17 Arne Babenhauserheide <arne_bab@web.de>:
> Am Montag, 16. November 2009 23:07:33 schrieb Michal Suchanek:
>> It's not all or none. You can use different text style and size,
>> alignment, spacing, borders, ... and colors.
>>
>> But whenever you touch an aspect of the site, be it colors, text
>> style, or anything else you must ensure that it works as intended with
>> various reasonable defaults. This is not limited to colors.
>
> The *reasonable* is the key: You can define everything, but you can also try 
> to
> make your site adjust to the user-style as much as possible without losing
> "identity".
>
> Take the example of margins: If you add a little margin for list elements, so
> they have a bit higher spacing, and you want to make it perfect, you have to
> explicitely set the margin for every single html element you use - including
> <em> and similar.

It depends on the level of perfection you want to achieve.

If you simply want to add more margin because the list elements seem
easier to read that way you can just add it and be done with it. If
you want to ensure that the margin for list elements is 2x the margin
of a normal paragraph then you have to set all margins.

Similarly, if you want to put a single warning sign somewhere in
yellow on red then you just add it. If you want your site to have some
particular text color you better ensure that you define a background
on which the text is visible.

There are no defaults defined, and any default that makes unstyled
pages usable is reasonable but it cannot work wit each and every
partial style that authors of broken sites might come up with.

>
> In a language written for being used that way, you'd likel yhave a margins
> element which includes all elements which have a margin by default (or rather
> all elements which can have a margin). Whenever you wanted to change one
> element, you'd then copy the whole margin element into your custom file and
> adjust the defaults where needed.
>
> The same goes for color elements: You'd have a color config file with all the
> defaults in it. That way when you'd set one color, you'd auomatically also
> define the defaults for every element on your page.
>
> But in css you define only what you want different from the default.

Yes, if you want to write a theme you usually start by coping a
working theme and only change the things you want to change.

You could omit something in the theme and it would possibly inherit
from the default or previous theme or have some parts visibly broken
depending on the theme engine in question.

There is nothing stopping you from doing the same with CSS except
perhaps there aren't many free CSS styles available for people to
customize.

This is in part because the CSS authors may be more possessive of
their creations as they think of the style as part of their perfected
web site and in part because you need a style tailored to your site.

>
>> And best of all, neither the colors nor the font will be visible in
>> most text-only browsers.
>
> :)
>
>> > That even goes for "when you use a picture you have to define all
>> > colors".
>>
>> And how do you make a picture without defining all colors?
>
> You define an image which goes well with most settings.

Yes, there there are small b&w pixel art icons for arrows or the like
which have every feature drawn with strong black line and white
outline (or the other way around) which stand out clearly on any
background. Most other images suffer on some backgrounds, though.

>
> No (static) image will ever go well with every color, but they are elements
> you can't get rid off by using a custom style sheet, because they are often
> site-content.

When the images are site content you should put them on a background
which goes well with the images.

After all, the person should be on the page only if they look for the
images and then they can't really choose what the site would look
like, the images will take most are either way.

>
> (and it gets even worse, because not all browsers and not all *monitors*
> interpret css colors exactly the same way - sites can look vastly different on
> a Mac and a GNU/Linux machine)
>
>> The ultimate here are SVG pictures that can be styled with CSS to
>> match your site style completely but few browsers support them well at
>> this time.
>
> That sounds great!
>
> I hope I'll see them become standard!

It is a W3C standard but there is a difference between a W3C standard
and a de-facto standard supported at least by a few major browsers.

>
>> > It's prefectionism which makes life harder for everyone who writes a
>> > website.
>>
>> Yes, as I said, making things correctly might seem too extreme to some.
>
> It depends on what the effects of doing it correctly are.
>
> HTML grew mostly organically with some cancer in it (IE), so as I said, the
> "correct" way can stifle quite a few options.
>
>> Unfortunately, most web authors want to set off their web site by
>> choosing their own color theme for it.
>
> IIRC most default Drupal pages do it by your standard. Example: http://1w6.org

Note that this site is also broken: it has button text set but does
not set button color.
Buttons are colored by the system colors automatically by many
browsers so this is bound to break.


>> How do you define readability so that it can be prescribed by a standard?
>>
>> The readability of a text does not depend on color contrast only, it
>> is affected by text size, monitor quality and settings, ambient light,
>> reader condition, etc.
>
> Setting a minimum size is already possible (at least in Konqueror) and sizes
> can easily be adjusted in steps.
>
> But color has nothing similar yet.
>
> I'm pretty sure that designers already have tables which show which colors
> really don't work together. So a viable strategy could be:
>
>        If a foreground color "disharmonizes" too strongly with
>        a background color *set by the other style* (user/system)
>        select the foreground color from the style which
>        defines the background color.
>
> "Disharmonizes" defined by "is in the table as really not working together 
> with
> the background".

Even detecting the situation when an element has colors which
originate from different styles would probably need non-trivial
support in the HTML rendering engine.


>
>> I can give you my color theme but there's bound to be more possible
>> color combinations that you did not test. Good luck with testing all
>> themes ever published.
>
> That's clear. Since I don't go for the all or nothing approach, the sites are
> bound to be imperfect.
>
>> *background: #2f4f4f
>> *foreground: #f5deb3
>
> Many thanks!
>
> I did some experimentation and brightened up the color. The site should be a
> bit nicer to read for people with dark green background now:
> - http://draketo.de/licht-lumo-light
>

I don't see much difference. I don't find the site particularly
pleasing or easy to read as most sites designed for different colors
don't with my background.

Thanks

Michal