Question about CSS validation

[Vlatko Juric-Kokic]

I'm fiddling with some pages and went to see whether the CSS will
validate.

Unfortunately, not.

The validator gives warning "you have no background-color with your
color" for several elements. But I specifically put in
"background-color: transparent", which is allowed/required according
to CSS 2.1:

"background-color
This property sets the background color of an element, either a
<color> value or the keyword 'transparent', to make the underlying
colors shine through."

So why the warning?

I also used the extended file upload interface and told the validator
to use CSS 2.1 but got the same warning.

vlatko

 

[Andy Dingley]

The validator gives warning "you have no background-color with your
color" for several elements. But I specifically put in
"background-color: transparent", which is allowed/required according
to CSS 2.1:

Note that this is only a warning, not an error. Your CSS is still
valid, even if you omit background-color altogether. The risk is that
if you're setting just one colour of the colour combination, then in
some arrangements of HTML and CSS it's possible you could place this
new foreground colour over a background of the same colour (set by a
different CSS rule) and so would have your text disappear. Obviously a
background colour of "transparent" does nothing to avoid this problem.

It's only a warning - you can (and often should) ignore it. In many
cases you're mixing colour settings such as varying background colours
on the rows of a table and text colours for different columns or
particular highlights. CSS checking will give you a warning (it can't
_prove_ that the text will always be visible) but you, at a higher
level as the page designer, still know that it's safe.

 

[Alan J. Flavell]

(except that "transparent" isn't really a "color", and coding it
doesn't really solve the potential problem which this warning is
telling you about.)

It's only a warning - you can (and often should) ignore it.

I agree, but it's still advisable to be aware of why the warning is
there.

In many cases you're mixing colour settings such as varying
background colours on the rows of a table and text colours for
different columns or particular highlights. CSS checking will give
you a warning (it can't _prove_ that the text will always be
visible) but you, at a higher level as the page designer, still know
that it's safe.

No argument with that part, but you're not mentioning the "cascading"
part of cascading stylesheets. If the author's settings are getting
cascaded with a user stylesheet, then you could end up with the
author's specified text against the user's specified background, with
no guarantee that they would contrast - they might even be the same,
causing text to disappear.

In a more general situation there might be a third stylesheet, imposed
by the corporate web server to get the corporate web style applied to
stylesheets. Individual authors in general won't know what new
corporate style the manglement are going to produce out of their hat
tomorrow, so the fact that it appears to work today is no guarantee
that it'll work tomorrow. It's more robust if you /can/ be explicit:
specify either explicit colours for text /and/ for background, or for
neither, at every specificity which you use. But it isn't always
feasible, and even where it's feasible, it might not be practicable.
So it's a value judgment, rather than an absolute rule.

cheers

 

[Neredbojias]

I'm fiddling with some pages and went to see whether the CSS will
validate.

Unfortunately, not.

The validator gives warning "you have no background-color with your
color" for several elements. But I specifically put in
"background-color: transparent", which is allowed/required according
to CSS 2.1:

"background-color
This property sets the background color of an element, either a
<color> value or the keyword 'transparent', to make the underlying
colors shine through."

So why the warning?

Ah ha, I just got done digging into that somewhat and have discovered some
interesting tidbits. First of all, the new validator does not consider
"transparent" a color. Many of my previously unwarninged pages were now
being warned. This pissed me off. However, in trying to fix things up, I
discovered that "inherit" can be used, although maybe not always in the
same way, to accomplish the desired goal. I didn't previously realize (or
such was not the case previously) that "inherit" will allow you to "carry
forward" a random background _in phase_ with the original regardless of
where the secondary container lies. This solves a lot of problems.

In short, after about 2 hours, I had all of my 20 or so affected pages back
to warningless status. It _can_ be done, but you might have to change the
html a little, etc.

 

[Vlatko Juric-Kokic]

Ah ha, I just got done digging into that somewhat and have discovered some
interesting tidbits. First of all, the new validator does not consider
"transparent" a color. Many of my previously unwarninged pages were now
being warned. This pissed me off.

Me too.

Furthermore, background-color: transparent is among the valid pieces
of CSS listed for my style sheet. How about that for inconsistency?

OTOH, it's true that CSS 3 lists only <color> as the value for
"background-color". If I haven't missed something, it's not exactly
the best idea.

Still, I specifically told the validator to use 2.1...

However, in trying to fix things up, I
discovered that "inherit" can be used, although maybe not always in the
same way, to accomplish the desired goal.

Unfortunately, not in this case. It's a CSS layout with the background
colour and images in the body, while the warned parts are text DIVs
with transparent background, going over the images. Should I use
"inherit" for background-color, all the DIVs would ultimately use the
background-color from body and obscure parts of the background
image(s).

I didn't previously realize (or
such was not the case previously) that "inherit" will allow you to "carry
forward" a random background _in phase_ with the original regardless of
where the secondary container lies. This solves a lot of problems.

I'm not certain I follow you here. What do you mean with "in phase"?
"Inherit" carries over a value from the parent element. Multiple
levels of "inherit" would only carry over the value from the original
parent element, right?

In short, after about 2 hours, I had all of my 20 or so affected pages back
to warningless status. It _can_ be done, but you might have to change the
html a little, etc.

Ah, well. I'm _really_ loath to fiddle with the design and stuff
again, cause I'm pretty much happy with it. The "background-color:
transparent" works in six browsers (Opera, Firefox, Mozilla, Explorer,
Safari, Explorer Mac). Given that it will be a while till they really
support CSS 3, I think I'm safe for the moment. And when they change,
it will be a high time to change the design, anyway.

Thanks.

vlatko

 

[dorayme]

Furthermore, background-color: transparent is among the valid pieces
of CSS listed for my style sheet. How about that for inconsistency?

Perhaps you had not read Dingley and Flavell before saying this?
It is valid but it is not inconsistent with it being a really or
slightly questionable idea when combined with a specification for
text colouring.

 

[Gufus]

Hi Neredbojias,

Thursday June 08 2006, Neredbojias writes to All:

Ah ha, I just got done digging into that somewhat and have
discovered some interesting tidbits. First of all, the new
validator does not consider "transparent" a color. Many of

New validator...

I guess now I have to check a bunch of my code. Egads!

-+- SoupGate-Win32 v1.05
+ Origin: Calgary Organization CDN Fidonet-Internet Gateway
(1:134/77.10)

--
K Klement

Enhance your marketing at http://www.gypsy-designs.com
mailto:[email protected]
Gypsy Designs Fax: (403) 242-3221

.... Here comes the orator, with his flood of words and his drop of reason.

 

[Vlatko Juric-Kokic]

Perhaps you had not read Dingley and Flavell before saying this?

No, I don't think I have. Could you point me to the text(s)?

It is valid but it is not inconsistent with it being a really or
slightly questionable idea when combined with a specification for
text colouring.

Okay, yes, I can see that, if you mean what I think you mean. Still,
if I defined a basic background colour in body (and used transparent
background for everything above it), I don't think that somebody's
settings would override that and still use my value for "color", thus
rendering the page unreadable. If I _hadn't_ specified an underlying
background, that would be another matter.

I don't think that a validator's task is to examine questionable
design ideas. If something is valid, it's valid. Also, if a validator
cannot see whether there's a basic underlying colour, it cannot say
whether "transparent" on a div (or a class or an id) is questionable
or not.


vlatko

 

[dorayme]

No, I don't think I have. Could you point me to the text(s)?

Try http://tinyurl.com/r8ekp. It is part of the thread on a
question called "Question about CSS validation" and it was
originally asked by a person called "Vlatko Juric-Kokic" on a
newsgroup called "alt.html"

Okay, yes, I can see that, if you mean what I think you mean. Still,
if I defined a basic background colour in body (and used transparent
background for everything above it), I don't think that somebody's
settings would override that and still use my value for "color", thus
rendering the page unreadable. If I _hadn't_ specified an underlying
background, that would be another matter.

I don't think that a validator's task is to examine questionable
design ideas. If something is valid, it's valid. Also, if a validator
cannot see whether there's a basic underlying colour, it cannot say
whether "transparent" on a div (or a class or an id) is questionable
or not.

Read the posts you missed. And what is this about the task of a
Validator? If a Validator was walking along and your kid fell
into a river and you could not swim and it started to dive into
the water to save the poor child, would you try to stop it: "Hoy!
That is the job for a life-saver not a CSS Validator". I don't
think so! You would simply be grateful and accept its help. Why?
Because you would understand the importance of what it is doing
in its "off duty" way. In the case of the transparent business
you don't understand the significance because you have not homed
into the secret heart of it all: Dingley Bingley and Lovely
Flavell.

Pill time now, got to rush.

 

[Neredbojias]

To further the education of mankind, Vlatko Juric-Kokic

Unfortunately, not in this case. It's a CSS layout with the background
colour and images in the body, while the warned parts are text DIVs
with transparent background, going over the images. Should I use
"inherit" for background-color, all the DIVs would ultimately use the
background-color from body and obscure parts of the background
image(s).

Have you tried it? I did just that and it worked (with proper setup.)
Check:

http://www.neredbojias.com/beta/_lr/lra01.html

....for an example. The head of Royo is an image, not a background. The
backgrounds of the numbered page links are inherited (to the body which
contains a random jpeg background image.) The links cover the image
transparently, and the page has no warnings.

 

[Vlatko Juric-Kokic]

Try http://tinyurl.com/r8ekp. It is part of the thread on a
question called "Question about CSS validation" and it was
originally asked by a person called "Vlatko Juric-Kokic" on a
newsgroup called "alt.html"

Aargh! Dem server! Dropped both posts!

Read the posts you missed.

Yes, I did now. And note what Flavell said: "you, at a higher level as
the page designer, still know that it's safe." That's what I'm talking
about.

With all the caution about the possibility of various snafus with
other people's style sheets...

Pill time now, got to rush.

vlatko

 

[Vlatko Juric-Kokic]

Have you tried it?

Yes, I did, just before I replied.

In any case, you can see and try for yourself, if you feel like it:

http://www.niribanimeso.org/test/revan/bones3.html

The text is in DIVs with transparent background. When I used
"inherit", they obscured parts of the images. And I don't want that
cause then I might have used colours for the background throughout.

vlatko

PS. nice to know abut your Royo site. Seeing that it has "beta" in the
URLs, will it be permanent?

 

[Vlatko Juric-Kokic]

And note what Flavell said: "you, at a higher level as
the page designer, still know that it's safe."

Sorry! Misquote. That's what Andy Dingley said.

vlatko

 

[Neredbojias]

Yes, I did, just before I replied.

In any case, you can see and try for yourself, if you feel like it:

http://www.niribanimeso.org/test/revan/bones3.html

The text is in DIVs with transparent background. When I used
"inherit", they obscured parts of the images. And I don't want that
cause then I might have used colours for the background throughout.

vlatko

Yes...

On your div.header, try "background:inherit;". Notice I do not say to try
"background-color:inherit".

PS. nice to know abut your Royo site. Seeing that it has "beta" in the
URLs, will it be permanent?

"Beta" is just the name of one of the site folders, which I named after
Greek letters. It's permanent, discounting updates.