Mixing XHTML (CSS2) and SVG CSS (not) allowed and what CSS3 says about that

Hello dear list members,

I have a, maybe stupid, question.

May I simply mix XHTML (CSS2) and SVG CSS in a single stylesheet referrenced
by XHTML pages and SVG graphics?

Example:
.background {
	background-color:#408; /* CSS for HTML */
	color:inherit;         /* CSS for HTML */
	fill:#408;             /* CSS for SVG  */
	stroke:none;           /* CSS for SVG  */
}
.ThreeD {
	filter:url(#BorderFilter); /* CSS for SVG */
}
.big {
	stroke-width:5;        /* CSS for SVG  */
	font-size:20;          /* CSS for both */
	font-family:"Alaska";  /* CSS for both */
}
.yellow, .yellow text {
	fill:#fe0;                /* CSS for SVG  */
	color:#fe0;               /* CSS for HTML */
	background-color:inherit; /* CSS for HTML */
}

Is this legal?

Here's something regarding the validity of such stylesheets:
From: http://www.w3.org/TR/SVG/styling.html#Scope 6.16
"To get the same styling across both the [X]HTML document and the SVG
document, link them both to the same style sheet."

From: http://www.w3.org/TR/REC-CSS2/conform.html#q1
"A valid CSS2 style sheet must be written according to the grammar of CSS2.
Furthermore, it must contain only at-rules, property names, and property
values defined in this specification. An illegal (invalid) at-rule, property
name, or property value is one that is not valid."

This sounds to me as if the SVG Recommendation suggests to use invalid style
sheets, at least at the moment, until CSS3 including styles for SVG is out.

Not too big a problem from a practical point of view, since
http://www.w3.org/TR/REC-CSS2/syndata.html#parsing-errors tells:
"Unknown properties. User agents must ignore a declaration with an unknown
property. For example, if the style sheet is:
H1 { color: red; rotation: 70minutes }
the user agent will treat this as if the style sheet had been
H1 { color: red }"
But from an aesthetic point of view... I do not like invalidity.


Another issue: <length>


http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
tells:
"The format of a length value (denoted by <length> in this specification) is
an optional sign character [...] immediately followed by a <number> [...]
***immediately followed*** by a unit identifier (e.g., px, deg, etc.). After
the '0' length, the unit identifier is optional."

From:
http://www.w3.org/TR/SVG/types.html#BasicDataTypes
"<length>:  A length is a distance measurement. The format of a <length> is
a <number> ***optionally followed immediately*** by a unit identifier. (Note
that the specification of a <number> is different for property values than
for XML attribute values.)
If the <length> is expressed as a value without a unit identifier (e.g.,
48), then the <length> represents a distance in the current user coordinate
system."

From:
http://www.w3.org/TR/SVG/coords.html#UnitIdentifiers
"When a coordinate or length value is a number without a unit identifier
(e.g., "25"), then the given coordinate or length is assumed to be in user
units (i.e., a value in the current user coordinate system).
[...]
One px unit is defined to be equal to one user unit."


Here's a summary on how these issues are currently addressed (or not
addressed) by CSS3.
From: http://www.w3.org/TR/css3-values/#lengths
"The format of a length value (denoted by <length>) is an optional sign
character ('+' or '-', with '+' being the default) immediately followed by a
<number>(with or without a decimal point) ***immediately followed*** by a
unit identifier (e.g., px, deg, etc.). After the '0' length, the unit
identifier is optional.
[...]
px : pixels, relative to the viewing device"
Sounds interesting. And totally disagrees with current SVG definition of
px - at least I think so.

I tried to find out if SVG 1.1 addresses these issues. I was unable to find
information on that in http://www.w3.org/TR/SVG11/, though
http://www.w3.org/TR/SVG2Reqs states that there might be open issues.


I'd like to discuss these issues and I think that this will also give good
and helpful feedback to those people who write these specifications.


So what I'd like to discuss is:

1. Lengths

Options
a) Change CSS specs to allow lengths without units, using px as default unit
(using current SVG definition of <length> for CSS3)
Possible issues: properties with <number> | <length> (are there such
properties?)

b) Change SVG specs to forbid lengths without units. Migration for current
documents from "20" to "20px" required.
This would be very ugly, because SVG lives from not using units, especially
at all those places where "user units" are the only possible units (e.g. for
transformations), or where lenghts are used very frequently, like in paths.

c) Leave CSS and SVG definition of <length> in their current inconsistent
state, but add a note to SVG that suggests to always use px in Stylesheets,
especially when they are also referrenced as CSS stylesheets from
non-SVG-languages.


2. Invalidating properties by simply using SVG?
a) Accellerate progress in CSS3-SVG.
b) Add an extensibility / modularity mechanism to CSS similar to that of
XHTML and (in future) SVG.
issues:
- Stylesheets currently have no level / profile information (we also might
call it "version").
- CSS itself contains no language to define properties for easily checking
the validity of stylesheets, compared to SGML/XML based languages that can
use DTDs or Schemata.


What are your comments?


Greeting

--
Christian Wolfgang Hujer
Geschäftsführender Gesellschafter
ITCQIS GmbH
Information Technology Consulting, Qualifying and Individual Solutions
Tel: +49 (0)89 - 27370437
Fax: +49 (0)89 - 27370439
E-Mail: Christian.Hujer@itcqis.com
WWW: http://www.itcqis.com/

Received on Wednesday, 30 January 2002 09:49:09 UTC