Hi all,
I followed the discussion on conditions in CSS in the thread (see 2) and
were surprised that it ended suddenly.
In my opinion there is a need for conditions for a number of reasons.
But I would not check for individual features but for standards and
browsers.
Syntax sample inspired by Zack Weinberg (see 5)
@if ( css-support <= 3){
....
}
@elsif (css-support = 3){
....
}
@else{
}
The reason to check for standards is twofold. The first argument was
provided by Bert Bos (see 3). The intention of a standard should be to
be implemented completely. And after years it looks like as the browser
vendors are competing to reach a higher level of standard conformance.
The second reason is that checking for individual feature support might
be ambiguous, meaning could change over time or an existing feature
could be more detailed. It could cause a nightmare of backwards
compatibility, as we might have any number of arguments for @if
conditions and we need to support them for all times.
Reason for if conditions
1) Faster adaption of standards
Adaption of new CSS feature is extremely slow for a number of reasons.
Browsers do only partially support CSS feature of a specific version and
some users use modern browsers and others use very old or even browsers,
which do not conform to standards.
As a consequence a lot of web sites go for the features supported by
most of their expected visitors.
If-conditions can help us to apply modern CSS rules for modern browsers
and old CSS rules for old browsers. There is no limit any more to
provide CSS rules offered by the newest CSS version. Today 5 % of your
visitors will see them, may be 15 % next year and 80 % in 3 years.
2) Motivation to implement standards
There is currently little motivation to implement CSS standards
completely as nobody is using the newest version of standards. If
conditions allows websites to provide CSS in multiple versions including
the newest one. Suddenly the web is a lot more impressive, if you use a
modern browser which implements the complete CSS standard.
3) Conflicting standard versions
The W3 states in their CSS design principles (4) that they want to be
forward and backward compatible. It is a great idea. I believe that
about 100 % of all software companies will tell you the same thing, when
they are selling their products.
I believe that this cannot work. Either you are always guaranty
compatibility then you cannot innovate or need to build weird constructs
to add new features you didn't preview at the beginning. In that case
the quality of your product degrade and you loose your users. The
completely opposite approach allows you to break compatibility all the
time. In that case you will loose your users as well.
If-conditions though breaking backward compatibility, can help us to be
more flexible in the future. If CSS 5 has conflicting changes with CSS
4, you can have different rules for each of those versions.
Sample (assuming that red was blue and blue was red but only in CSS 4 )
@if ( css-support = 4){
color: blue;
}else{
color: red;
}
4) Being able to fix browser problems
The ideal is to develop a website using specific versions of standards.
The reality is that the world is not perfect and browser have bugs.
As websites are build to be used by users and not to follow idealistic
standards, developers use browser hacks to adapt CSS to browsers. Those
browser hacks are introduced in nearly all web pages and we don't know
how those web pages will be displayed in the future. Basically we fill
the web with CSS garbage. Providing a mean to add browser specific rules
with if conditions, give you standardized way to do it.
@if (browser.name = 'IE' and browser.version = 5){
css-rules
}
Best Regards / Viele Grüße
Sebastian Hennebrueder
Imagine all browser supports HTML 5 and CSS 3 11.11.2011
http://www.laliluna.de/articles/2010/07/15/imagine-3-11.html
Reference
1) Original proposal
http://lists.w3.org/Archives/Public/www-style/2004Dec/0084.html
2) New discussion on conditions
http://lists.w3.org/Archives/Public/www-style/2009Dec/0130.html#replies
3)
http://lists.w3.org/Archives/Public/www-style/2009Dec/0161.html
4) CSS design principles
http://www.w3.org/TR/CSS21/intro.html#design-principles
5) Symantic for if conditions
http://lists.w3.org/Archives/Public/www-style/2009Dec/0135.html