There is a very low chance this would ever happen, and as far as I know nobody is talking about it seriously. I think it might make for an interesting discussion and poll though:
Do you wish there was conditional comments for all browsers?
IE already has them, and we certainly use them. What if we could also do stuff like this?
<!--[if Fx 3.6]>
<link rel="stylesheet" href="firefox-v3.6.css">
<![endif]-->
<!--[if iOS]>
<link rel="stylesheet" href="iphone.css">
<![endif]-->
On one hand, a totally un-scale-able slap in the face to web standards that takes us back 10 years.
On the other, a straightforward solution to fixing real world problems.
Poll is in the sidebar. RSS readers will need to jump over to vote.
I don’t think it’s a good idea to have this…
but i can be nice to have capabilities like : if you support this => do that and that if not do this
You mean like Modernizr? http://www.modernizr.com
I think he meant “without having to use JavaScript” :)
…and Modernizr is feature detection not browser-specific.
@Chris Yeah, but it’s much better to test for features than to test for browsers, surely.
That’s part of the debate going on here =)
Usually feature detection is better, but there are cases when browser detection is the only way. For example webkit supports percentages for dimensions, but you don’t want to use them in layout because they round fractional pixels wrong causing a few pixels gap at the right side of the page depending on the column count. Feature detection wouldn’t discriminate between webkit’s buggy version and mozilla’s near-perfect implementation.
In CSS, however, there is a way to do browser detection using vendor prefixes. I recently did this while disabling some large box shadows in webkit because of the lag they cause. Without the inset box shadow, the background looked too light, so I added:
Hack for Webkit: Filter for Chrome and Safari April 21, 2010
Filed under: Browsers, CSS (including hacks) — Estelle Weyl @ 7:39 pm
To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following @media block:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.thing-with-box-shadow {
background: /* darker color */;
}
}
There are similar hacks for mozilla*, and of course conditional comments/star hack/underscore hack for IE. There isn’t anything good for opera (there is one that works for now, but it relies on something that opera has implemented without a vendor prefix that is yet to be implemented in any other engine). I didn’t come up with these, I found them here and have been using them for prototyping.
*The way to target mozilla only is:
@-moz-document url-prefix() {
/* mozilla-only styles here */
}
Now what would be nice is media queries for browser and feature detection in both css and html.
@adrusi:
This is very useful tip~
@media screen and (-webkit-min-device-pixel-ratio:0) .selector{ } }
and
@-moz-document url-prefix() { .selector { } }
Thank you very much!
it’s not exactly javascript free, but you might want to check out the css browser selector. it has the advantage of being extremely lightweight, and doesn’t require multiple css files.
http://rafael.adm.br/css_browser_selector/
not a good idea. webdevelopment should not be fixing browser incompatibilities. the focus should be on developing new exiting services.
that’s true, but conditional comments can still be very useful.
Wouldn’t it be better if all browser would stick to the standards?
I agree. I really can’t be that hard for them to just use the same standards when developing the browsers.
I, for one, am continually puzzled by the “standards above all else” mindset. Standards are, and always will be, a trailing indicator. They are a distillation of past knowledge and not a reflector of current thinking.
Imagine the worst case scenario where no browser supported any kind of standard. We would have to create web pages from scratch for every single different browser. Our job would maybe be 20 times harder? Not to mention people doing it right would be few and far between.
Who suffers? People who make websites, people who pay the people to make websites, and the people who use those websites.
@kevdog, you’re absolutely right. Standards are a trailing indicator. But if browsers don’t support the standards, these, then, are trailing behind the state of the industry. I would prefer to see more progressive enhancements implemented by future-seeking browsers with great forward mindsets, but first, we must build up to the foundation, the standards, before moving into the realm of creativity. Going a step further, if all browsers began making their own rules, how would we code for this? Do we disregard browsers A & B because C has more features that we like? Do we code for C and hope that A&B catch up? Or do we find a middle ground and code for all browsers so that everything is uniform and platform agnostic? I would opt of the last option, and is that not just getting back to “standard” features, coding for features that are offered “standard” with every browser?
I agree browsers should support standards, but that doesn’t mean that they can’t add extra features, as long as they don’t conflict with the standards. progressive enhancement?
Of course it would be ideal if all browsers supported most or all standards in a consistent manner, but when will that ever happen?
same question
I would love this. I struggled with Chrome like crazy a few weeks ago and would have killed for it. Chrome renders differently on different platforms, even within the same version. Then it renders differently between versions too! I seriously spend more time debugging css problems in chrome these days than I do in IE, and that’s messed up.
I think this is one of the worst ideas I’ve heard in a long time. You pointed out that IE has them and we certainly use them, but why? Because IE made such a mess in web standards and the box model, that we need to make everything harder with special cases for them.
I believe if every browser has their own conditional statement we’ll be encouraging IE6 error to be repeated again.
Browsers should work trying to make our lives easier. Developers should not work extra so that each browser can make whatever they want!
That is my opinion, at least.
Greetings, fellow CSS tricksters.
PHP can do that…
Actually, PHP thinks it can, but it can’t reliably.
See Chris’ article on why Browser Detection is bad.
Should be “on one hand” not “one one hand”
I think it’s a difficult subject, yes it would be great to easily be able to target specific browsers, but at the same time it would make people lazier, and the code could be even harder to update.
For example, if you have a different stylesheet for different browsers, when you add something new you would need to update each file.
Also, a lot of browser incompatibilities can be fixed if you use good, valid code. I don’t know how many times I’ve had something not work in any IE version, to be fixed by adding a simple float left or right.
I believe that unless your coding a very complicated layout you shouldn’t need any conditional comments.
I totally agree that implementing web standards in all browsers is the best way to have a consistent and reliable foundation for our web projects.
However, you cannot deny that at no point in the future we will have a situation in which all browsers render everything the same way.
So although a lot of people would use those features to do the wrong things, I would like to use them to get rid of browser bugs (yeah, I know you don’t believe it, but even Safari, Chrome and FF do things the non standard way or implement standards different ways).
On this thing I’m with “not features kill web standards, people do” ;)
Those who would abuse these things are also using CSS-Hacks and other “dark side” stuff!
Cheers Sascha
Only IE is so bad that it needs such a thing. Other browsers have vendor extensions for this purpose. If it’s a bug, it will be fixed. This is a bad idea all around.
Although I don’t think conditional comments are necessary, and would rather see browsers follow web standards, a better way would for a standard to be implemented, like using media queries – something like this:
I actually take a different stance on this, instead of using it for compatibility fixes, why couldn’t we use it to give different things to other browsers, for example (I could have a website which recommends different browsers) (If Firefox, recommend everything else except firefox).
Why not keep it in one CSS file by adding a browserspecific class or id to the HTML tag in stead of seperate files.
F.I.:
In your CSS you could style IE6 with:
.ie6 .div.yourclass {
style: attr;
}
I understand all the opposition, and in principle I agree with it.
I don’t care how cack-handed the interpretation of the standards is from what my understanding is, what I want is the same interpretation so that one nice CSS list does the job.
But we don’t have that. Until we do, the capability to hack different sheets conditionally is one of the few tools we have to control the design against the stupidity of the browser designers. Yes, it’s ugly. Yes, it’s not completely future proof. Yes, I can think of a load of better ways to do it (browser-detection conditionals in the style-sheet say so you can have only one sheet and load the relevant bits and only update one sheet) but this is a workable solution.
IMHO I believe, that there should be no such thing as conditional tags, because I think there will be a time when we will be using the same code for diferent platforms, and the page style will adapt to different media. Wouldn’t it be nice if you could craft your code in a way that it could adapt to a old mobile phone, a desktop or to a printed book? Conditional tags are specific to browser brands instead of medias, so I think the effort should go towards eliminating the need for using them.
Probably not a good idea… developing around inconsistencies is so much fun ;).
Besides, I found that I seldom, if ever, used conditional comments for anything other than IE6 – and that guy hardly catches my attention these times. I found that, more and more, an IE7 quick fix here and there is all I ever use them for, ’cause sometimes one doesn’t care all that much for 5 or 6% of visitors who will get something that looks good enough and works well enough anyway. As to that IE8 class on my html tag, it hasn’t been used in a long time.
Firefox 3.6, IE8 are way good enough – even IE7 is good enough at most things. Give me png transparency, pseudo elements, attribute selectors and the world is mine: IE7 does that (more or less – well *enough*).
«IE already has them, and we certainly use them», you say. Me thinks you’re being a sophist… With Firefox / Webkit, we’re doing things we didn’t even think were possible just 2 or 3 years ago. We don’t actually “need” those features. We just can’t resist using as many of them as possible – I’m the first to do it: no offense meant. Conditional comments help make our jobs so much more fun by letting us be awesome without worrying too much about those who don’t get it. Relying too much on them is being unprofessional.
If Firefox 2 or Safari 1 were still around, we’d probably have some use for browser / version specific conditional comments – that is, if we wanted to be worshipped by just about everybody on the planet. Fortunately, these browsers are no more. Firefox 3.6 is still around, though, but just two hours ago it was the next best thing in the world. Now that Firefox 4 is almost here, we already want to be able to target it specifically? Seriously?
For the higher end paraphernalia, even faced with real world, real issues, isn’t browser-prefixed, modernizr/yepnopified progressively enhanced stuff the way to go?
Now, about that iOs conditional comment: it sure could come in handy, but media queries are pretty handy, too. As is modernizr/yepnope. Having to use them doesn’t feel like a burden, rather like an opportunity to build something great.
And if we’re complaining about javascript: now come on, who disables javascript these days, especially on their iPhone (is it even doable?)?! We’re probably talking about a hundredth of a percent of your visitors: to hell with them, these guys know what they’re doing. If you really want to target iOs… well, I know I’m being lame but: there could be an app for that.
I don’t think this is a good idea. Use the standards and don’t get lazy! I see lot’s of people using conditional styles to fix bad markup, instead of looking for real problem.
We need them imo, not just because we can ‘fix’ stuff that the browser broke.
Its also a better way to target the specific browsers/users.
If I would have a blog about Browser updates I might wanna target a Firefox 3 user and inform him, that a newer version is available.
The IE user might already have the version 9 and don’t want to switch Firefox. Instead of nagging the IE user I just target the audience I want.
Obviously, this would be great and useful. If someone doesn’t like it, he doesn’t need to use it. It’s all up to the Developer and what he wants to achieve.
It is always a good idea if there are lots of options to choose from right..
And now I’m curious, is it possible to use the very same technique to, for example, detect Webkit on MacOS/iOS?
i think the browsers have to make the update without user interference, this will force everyone to use the latest browser.
also we need to boycott some browsers because a new browser born every year.
sorry my english hehehe.
thank you
Where I work, we have easily accessible ie conditionals via CSS (#ie #content) and I see developers abuse it all of the time rather than figuring out what their issue is. They’ll just slap a conditional and call it a day. This could very well make us lazier coders. But then again, you do have those certain situations that you cant around and it would be good for those.
I worry that using vendor prefixes in CSS has a lot of potential to get out of hand as we start to moving into newer browsers. I think adding something like this could further exasperate that.
Though it might be terribly useful for coding for things like mobile devices.
I guess I’m undecided.
I mainly use the conditional for loading in IE stylesheets (and the shiv), but this is typically because IE blows when it comes to layout.
However, with the popular use of vendor-prefixes, I think this would be a good addition to keeping your main stylesheet clean of hacks. Your main CSS file could have all the normal CSS syntax, like “border-radius: 8px”, while your fx.css would have “-moz-border-radius: 8px”.
Then, when Mozilla supports the real CSS3 properties, you could just remove the conditional and delete the file, rather than looking for all the vendor prefixes in your main CSS file. This would be good for maintainability, would prevent different browsers from loading CSS rules that don’t apply to them (Chrome still sees the -moz rules), and make it easier to validate your CSS.
At first glance, this may seem like a good idea to some, yet a big problem I see is you would have multiple stylesheets, one for each browser?, which seems like a horrible idea when thinking about maintaining them.
I get really good cross-browser support with just 2 stylesheets, a main style sheet file and a IE style sheet file in conditional comments.
My main one works for all modern browsers and I use my IE conditional one to target all IE browsers and then use specific IE 6, IE 7, IE 8 css hacks in that file to target each version of IE if I need to.
mmh I defenitely don’t like the idea.
Much much better if browsers follow the Standards.
This is a bad idea; mostly because it’s a hack on top of a hack. The conditional “comment” inclusion made by Microsoft, honestly, allows web developers to fix the absolutely glaring incompatibilities with Microsoft browsers, and I use theirs because I have no choice, but any designer/developer worth their weight in salt should be able to develop a design which works on the “good” browsers without any issue.
I have never cursed Safari, FireFox, Chrome, or even Opera under my breath ever; on the other hand, I have wished the IE6 and IE7 teams to have explosive diarrhea on multiple occasions.
Adding this type of “conditional” stylesheets creates more problems than it solves. If I do “If FF3.6.4”, what happens when FireFox 4 comes out?
I think it’s bothersome enough to worry about our old crappy IE not following standards; having them for all other browsers would just skyrocket the problem.
Most browsers have big enough development teams, I can’t grasp why they have to spoil standards in order to impress everybody. I mean, they can make your great feature, yes, but that does not mean they have to complicate everybody else’s life for the sake of that feature.
Software development is not THAT hard to do; maybe on security related code but not on the following standards part of the process.
All browsers should have some sort of feature that doesnt let them run if they are not the latest online version available! That way we would stop worrying about what IE, what FF or Chrome people are running.
Loving all of the idealistic comments like, “We shouldn’t have to!”, “Just follow web standards and you’ll be fine!”, “Why don’t the browsers developers just make sure they all work the same!?”.
Grow up and please realize that this is not the case. This is the real world, and it requires real world solutions.
Nobody is saying to create whole stylesheets for different browsers – this would be for minor things like:
“Oh, that menu is shift a little bit to the left in FF3.6, let’s fix that.”
We need another option added to the poll called ‘If clients are willing to pay for it’.
Standards make developing websites more affordable.
(this is the worst form usability experience I’ve ever had – is it that hard to validate without kicking me off the page and making me lose all my form values??)
So anyway, conditionals for all browsers, while tempting, is the wrong path. I think this would only promote laziness in both web developers and browser developers and would be a kick in the face to web standards.
poll gave too little choices, so didn’t vote.
I would vote yes though, but not for all browsers. Only for the conditional tags if IE and if mobile, because otherwise we’ll end up making a different stylesheet for each and every browser and that is going to be a huge pain in the b.tt!
I think it can fix browser related problems without overload the requests to the server, like we do with IE versions prior to 9 it would be great to do this with other browsers.
As application development becomes more complex, I believe emphasis should be placed on usability and user-centric design, along with good code, forms, calls to action, etc.
There is so much to juggle in the web design/development sphere that fixing breaking features in different browsers just adds to the frustration on all sides. IE is a special case, and until MS decides to have a browser that actually plays well with others, I believe all other browsers need to become standardized or as close to that as possible. Sure there will be small differences here or there, but pressure should be on a uniform standard that increases the usability and effective of applications in my opinion. And of course, it would make my work more enjoyable. ;)
I think its a bad idea. If the people who are making the browsers would just do things the right way and keep up with todays standards, We wouldnt need any conditional comments!
It’s an bad idea for all browsers. But it would be great for iOS and Android. You say that you run on iOS or Android? Well here, take my iOS/Android css. (So not that browser specifically, more platform specific)
A wise developer once told me, if you’re good and know what you are doing – you should never have to use conditionals for anything other than IE6, and even that can be questionable.
Well, theres no point on making that today. First because, of course, the web standards are there for something. Second because you can easily write a javascript to do that for you and still pretty fast.
Actually still not a bad idea, and theres some javascript implementations of the exact same thing such as yepnope.js or Modernizr, even with more granularity (detects if browser has dropshadow, geolocation etc.)
Well, theres no point on making that today. First because, of course, the web standards are there for something. Second because you can easily write a javascript to do that for you and still pretty fast.
Actually still not a bad idea, and theres some javascript implementations of the exact same thing such as yepnope.js or Modernizr, even with more granularity (detects if browser has dropshadow, geolocation etc.)… and even cellphones has javascript nowadays.
I’d sooner see a broswer CSS media query such as <link rel=”stylesheet” href=”gecko.css” media=”only screen and (browser:gecko)”> which makes things seem a lot less hackish thatconditional comments, but also allows us to inline these conditional style rules into an already-downloaded stylesheet if we wish (much as you can currently do for print-only style rules with the css @media rules).
My $0,02..
I opt for standards: work-arounds like browser targeting should ideally only be needed for compatibility with earlier versions, independent of the vendor.
There is no need for conditional tags for other browsers. When I develop, I make it work in Firefox. For any odd things in IE, I use conditional commenting, for Safari / Chrome, it just works..
Perfect world: conditional comments are the devil!
In the real world: I’m for condcomms in all browsers. I’m always sort of surprised they don’t already have it. They all have goofy little browser-specific CSS-isms, or is that another discussion?
Also, more conditional comments means more work for developers and the arcane knowledge they accrue. Whoo-hoo!
I would love to have one CSS for all browsers. Conditional comments to add browser specific CSS files are headache for web developers.
I’d say yes to targeting specific major browser releases, not 3.6. I spent a ton of time this week hacking jQuery tabs to get them right in IE7, 8, and 9.
On another note, I originally liked the fact that Chrome automatically updates instead of forcing their users to download an update like Internet Explorer does. However, I’m noticing that some of these updates are breaking web apps and unless I want to use an extremely beta version of the browser for testing I don’t have enough time to catch these errors before users do.
I say keep it server side. Id’ve voted but no sidebar content on the mobile version of this site?
If we had this, every browser would do what they want instead of what they should and that would mean multiplying our work by as much as the many browser brands AND versions there are out there.
The audience needs to know they have to update their browsers, the browser vendors (makers) need to adhere to standards as best as they can (and strive to get better and better with each new version) and is up to us to push the limits and test things and scream in a mad fit when things are not working as they should (or the more productive route of developing ways around their mistakes).
I would rather all browsers just become standards compliant…
I voted ‘No’ in the poll, but if you really need similar functionality, CSS Browser Selector is an interesting option.
I don’t think it’s a good idea but not only for the reasons already mentioned. What I fear most is the “bad” designer making it the “easy” way with things like :
– Browser X : show website
– Other browsers : show a page saying “download browser X if you want to see this website”
…which would turn a seemingly good idea in an accessibility nightmare. Remember all the websites “optimised for…” back in the “browser war” days…
On the other hand, what we could all use is more consistency in the “computed styles” (ie brower defaults). This would render css resets obsolete and make css styling much less frustrating. I think this should be the basics of the web standards…
And of course, more consistency in the way those standards are handled would be fine too. I dream of a day where browser stand for what they offer in terms of features and not in terms of how much they’re a pain in the ass to work with…
We all agree that browser sniffing is bad and not straight forward, it makes websites more difficult to maintain. Features testing à la Modernizr is what we need.
As far as CSS is concerned, I guess conditionnal comments could be useful to target specific browsers, I wish we could do this with @media queries ( -moz-VERSION, -webkit-VERSION, -o-VERSION, -ms-VERSION, etc. )
For now if I really need to detect a browser, I simply use https://github.com/garetjax/phpbrowscap
I don’t use these tags. They really annoy me and make code look messy in my opinion. I have never actually needed to use them myself. Most the time coding in a correct and clean manner, things “line up” across browsers.
If things don’t go to plan I prefer to use CSS hacks rather than these conditional tags for including a whole new spreadsheet
Although I can see a need if you want to have a whole separate stylesheet for a mobile website (say iPhones)
The sad truth is. Until there is but one browser rendering engine, browser specific hack are a necessity. Like it or not if you want to design web sites you have to use them.
You can’t force all the browsers to become compliant with web standards (IE is a good example of this), and you can’t force people to use a specific browser.
In a fantasy world where everything would works perfectly. We wouldn’t have to worry about this. Unfortunately, we have to code for the real world. Where everything doesn’t work perfectly, and using browser specific hacks is the only option.
Instead of debating if we should or shouldn’t be using them. We should be coming up with better ways to use them.
It’s dangerous for you to bring this up.
There have been instances when I wished there were conditional tags for a specific version of Safari or Firefox, however I always seem to find some sort of work-around. It’d obviously make browser testing go a little smoother, however it might cause people to overlook problems that should be fixed in their code to begin with.
I’m absolutely, totally, 100% against them. I see no reason to take a step back when jQuery/JavaScript has made it so easy to determain that and more so easily.
I would welcome this in theory but then I think things would get out of hand. If there were conditional statements for all browsers none of them would need to worry about standards compliance because you could target them directly. They would all just go off doing their own thing. This would lead, eventually to browsers doing things so differently that the work we have to do would be ridiculous to get a site to render the same across browsers. In the short term this would be great but in the long term i think it would be counter productive. Stick with the standards thats my view.
It would be good to have conditional comments, but It would be better if all browsers work same in a standard way.
Even in IE case, we have to use conditional statements due to lack of compatibility of IE, what if it could work same as others do.
It would be super useful for things like iOS stylesheets and easy browser detection, but not vital. The main reason IE has the pleasure of conditional comments is because it doesn’t play nice with standards.
Well, I like the way conditional comments are used in HTML5 Boilerplate by Paul Irish and Co. But I think it’s necessary to test for features like Modernizr does and not for a special browser-version.
Excuse me,may I kwow the code plugin in this blog?
Hey is this site is done 100% in css? :)
Yes, I want them.
No, I don’t want people to know about them.
I want them implemented, and no one using them (because they don’t know they exists) until it can solve some REALLY ugly problem.
Then few selected people, like Chris Coyier, would be granted that piece of information by browser manufacturers and they would release it only in case of emergency.
Sounds like a great idea to me :)
i prefer to add body or html classes for the browser, then style using those.
[IF WORLD IS PERFECT ]
My vote = No
[IF BROWSERS ALL SUCK LIKE IE]
My vote = Yes
My conditions. In this case I’m a pretty solid Maybe.
Sure, why not? Worst case scenario no one uses it. Thumbs up for free solution possibilities!
(sorry for the 2x post)
@adruzi maybe those extra non-standard features becomes more and more useful and much needed, taking us back to step 1 again.
I really strongly dislike conditional comments – I don’t want that gunk in my markup.
If anything, I’d prefer it if every browser added it’s name/version number/os as the value of an agent=”” attribute on the html element.
Well, I would certainly like it better than using js, especially the iOS one.
I would rather keep CSS hacks in the CSS:
http://alastairc.ac/2006/05/conditional-comments-in-css/
However, that’s just as unlikely to happen!
This seems like it could turn nightmarish. If we could just target everything with a conditional comment, we would get lazy about understanding the sources of our compatibility issues and finding legitimate fixes.
If I were to ever use such a feature, I would only use it for differentiating between desktop and mobile devices, etc.
The reason being that while media queries are nice, in general all the resources are still downloaded even if they aren’t used on a mobile, where total bandwidth is precious and additional HTTP requests are expensive.
So if I could reliably use separate mobile.css and standard.css files with conditional comments, I would find that acceptable.
Although I do use IE specific conditional comments for an occasional HTML5 shiv, depending on the needs of the project.