extended browser support for conditional comments.

[Xdega]

I really like the idea of conditional comments for more than just ie. With several popular browsers on the market including many mobile devices, I think this would be great for setting specific CSS specially tuned for each browser WITHOUT the need of work arounds via scripting. What do you guys think?

[Xdega]

Just to clarify, what I am talking about is a simple conditional i n the html markup without half a page of javascript. Example:

Code: Select all

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

but instead of "IE 6" have the following:
webkit ver#
moz ver#
o ver#
and maybe even a conditional for mobile devices? all without the use of scripting. As we all should know, it is possible to turn off client side scripting thus defeating the purpose. I think that a html element for compatibility in this ever more connected age would be very useful.

[zcorpan]

Would be better to have browsers behave the same so that you don't need to do different things for different browsers.

[JAB Creations]

Would be better to have browsers behave the same so that you don't need to do different things for different browsers.

So in other words if you wish to do fancy stuff that's cutting edge and requires different code across browsers you're going to need that huge chunk of JavaScript code.

[Xdega]

All browsers can (and should) have their own "special features". Greatly helps evolve the web when browsers bring innovative ideas to the table.

Using multiple CSS and conditionals, you could create a page that will use a generic layout in unknown browsers, "filters" in IE, "transitions" in webkit browsers and an entirely different style sheet for mobile devices. Then say later down the road IE wants to support transitions, then you could simply edit the IE.CSS to use "transitions" (known to have much better performance), WITHOUT having to resort to JS hacks. The beauty of this is that it allows you to tweak CSS styles for individual browsers if you will.

This could make the experience unique based on the browser the user chooses and in very few lines of clean markup.

This shouldn't require Client or even Server Side scripting to accomplish. A web browser should know its name, and thus should be able to look for markup addressed to it (while ignoring markup addressed to a different browser).

[zcorpan]

You can just put all vendor extensions to CSS in the same style sheet. Unknown declarations are ignored.

you could create a page that will use a generic layout in unknown browsers, "filters" in IE, "transitions" in webkit browsers

That sounds like discriminating againt non-IE and non-WebKit users. I wouldn't recommend it.

[Xdega]

Not so much discrimination, more so catering for different ways of rendering the markup. I also think that it is much better to have separate CSS tailored for optimal compatibility. Let's not also forget that conditional comments could also be used to give the end user content specific to their browser.

Ex: if IE, then download file A. If Webkit, then download B. Also, don't get too hung up on the browser names. It us purely for the purpose of illustrating the concept.

[zcorpan]

Why is the User-Agent request header not good enough for the purpose of giving different styles/content to different browsers?

[Xdega]

I think this article nails the bullsseye: http://www.conditional-css.com/advanced

One particular issue he addresses is that the user agent us sometimes changed by the user for whatever reason.

Great article that compliments my idea.

[Xdega]

One thing to also note is that the author of the above article rightly clarifies that the rendering engine should be the target of the conditional.

[zcorpan]

Is there a reason to believe that the user wouldn't also change the "user agent" for conditional comments?

That article says

It should be noted that if all browsers were to correctly implement the CSS specifications released by the W3C there would be no need for Conditional-CSS.

I think this is what we should aim for instead of spending time on specifying and implementing various ways to work around bugs (which will themselves probably have bugs too and can't be used in currently used browsers anyway).

[JAB Creations]

Z, in IE conditional comments aren't subjective to the user agent so I'm guessing that's why Xdega would like them in place of using JavaScript to determine compatibility.

If anything I like what Opera already has, the window.opera object. I think a reasonable feature would to have non-user agent dependent DOM object properties with the engine name (e.g. Gecko, KHTML, Presto, Trident, WebKit) and then the version however I have to criticize WebKit's build numbers so I would prefer the Safari browser version number and even that is subjective since Chrome shares the WebKit engine. Right here and right now the JavaScript object detection is the only truly reliable means to determine the browser engine and version reliably even if someone is spoofing their user agent.

[Xdega]

That article says

It should be noted that if all browsers were to correctly implement the CSS specifications released by the W3C there would be no need for Conditional-CSS.

I think this is what we should aim for instead of spending time on specifying and implementing various ways to work around bugs (which will themselves probably have bugs too and can't be used in currently used browsers anyway).

I completely agree with that, but as the article goes on to say:

However, CSS bugs are a fact of life for web-developers and are often extremely frustrating. Conditional-CSS offers us a simple solution to overcome these problems.

And sadly, the guy is right on the money.

If we could simply ask for 100% compliance of one single item (conditional comments) we could thus give the developer the power to solve many rendering issues as they see fit without hacks and workarounds.

[Xdega]

Also, another thing to note is the ability to run scripts for browsers that may not be able to support new elements without being told how.
Much like the small conditional comment I utilize on one of my websites to assist with rendering new elements in IE 8

Code: Select all

<!--[if lte IE 8]>
         <script>
         // HTML 5 entities for IE.
         document.createElement("article");
         document.createElement("footer");
         document.createElement("header");
         document.createElement("section");
         document.createElement("nav");
         document.createElement("aside");
         </script>
<![endif]-->