Poll: Browser-Specific CSS Styles
The first time I remember seeing browser-specific CSS styles was when I went to a website and saw that the scrollbars were a different color than Windows' usual grey colors. I thought it was pretty cool -- not necessarily useful by definitely creative.
Fast forward to a year or two ago when I started to see Safari implementing its own CSS creations like CSS animations and rounded corner. I didn't like these proprietary styles initially because I felt that the browsers were getting too different and that it would lead to Firefox and IE creating their own brand of CSS as well.
Today I'm still wary of browser-specific styles but I have embraced their "added bonus" purpose. I enjoy adding rounded corners for elements in Firefox and Safari. I also pray that the CSS standard body gets with the program and makes these standard so we don't have 20 different rounded-corner directives.
I'd like to know how you feel about browser-specific CSS styles. Vote below and add your opinion in the comments below. This is a fun but important topic.
[poll id="6"]
Integrate them for browsers that support it, degrade nicely in browsers that don’t. But don’t introduce differen behavior in different browsers.
First off, love your site David… you always have useful posts on here – thanks! I know they have their place, but I try to avoid browser specific styles and conditional style sheets if at all possible. IMHO this helps with forward compatibility, and definitely with site maintenance.
Thanks!
Jim S.
Jacksonville, FL
I’m all progressive enhancement and hence using these styles. I like to reward the visitors using a good browser :)
Personally, I avoid using them all together. I prefer for browsers to render my pages as identical as possible, as even the smallest of details can tip off a designs balance.
I’m not a pro but I like to do some more experimental stuff and I love this kind of topics.
Imo your story isn’t complete. There are some nice drafts for CSS3 that includes things like rounded corners, RGBA/opacity, image background fixes and amazing selectors.
So any browser supporting those features is just trying to be progressive which is a very good thing. I dislike the different namings like -mozilla-opacity or whatever it is. But that’s not to bug me, it’s because it’s something “beta” like as long as W3C doesn’t finalize anything. Even CSS2 isn’t final. What I’m trying to say and what makes your story imcomplete is just that something like rounded corners isn’t completely browser specific css but will likely make it to a standard.
Different colored scrollbars is a different story. The side and bottom scrollbars ,to me, will always be a part of the browser and not a part of the website. And hands off my browser! Scrollbars for smaller divs, textarea’s etc are something different.
I love the border radius for both FF & Webkit, but I tend to use something called Snazzy Borders to have it working cross browser. Of course it’s not the same effect, but this is all I can do :-/
Also the CSS 3D cubes http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/
Oh I wish IE would just disappear and the world uses FF & Chrome only!
I use Firefox and do everything for it :). CSS file in other browsers accurate not much trouble. I would also recommend that visitors use Firefox.
Yeah, I have to say, rounded corners are a beautiful feature. Mostly, I add specific styles just to jazz up designs for browsers that support them. My designs degrade nicely without them, just in case, but they are nice to have in the mean time.
Why not? a 2px radius on an input. Add a tiny drop shadow for webkit. Some opacity here an there, etc.
After spending a few boring hours with nerdy IE6, me and the cool browsers hang out together and do some extreme, progressive stuff. We just hope jigsaw.w3.org/css-validator will never find out.
If you would have added the option: “only if they validate”, that would be my answer.
Personally, I think Microsoft will try and create its own CSS anyway for IE, you already have to add so many hacks for IE8 to display anything correctly its unbelievable.
We use one stylesheet to rule them all (actually this gives better performance for users surfing through some kind of proxy or gateway).
But since data url’s can bring a significant performance improvement (24 requests vs 1 request) we are considering a stylesheet for new browsers vs old browsers. Maybe autogenerated (encapsulate the data url’s automatically).
Would people please stop using these damned non-standards based crap in their code. Microsoft can’t stick to standard as it is without flipping encouraging them to change it even more! Microsoft feel that they can do as they like browser wise because loads of idiots feel that there is such a huge learning curve between it and Firefox, which it is not. FNC hasn’t lent itself to the cause by subtitling Firefox as a search engine. Mainstream is not standard, when people learn this it’ll make our lives easier as webdevs. The worst even is pages that only work in Internet Explorer, that really really really annoys me! I hope that people will cop on eventually, because unless people stick their fingers up at Microsoft, they won’t change a thing!
@Ben: so what are you saying: only follow the standards and if you’re web page (or web application) doesn’t look good or even doesn’t work because of it, just blame it on the user agent developers? Because they don’t follow standards?
I completely agree that a webpage should work on any browser (within reasonable limits). I just as much dislike a page that says: best viewed or designed for Firefox @ 1200×800 or something similar.
By the way the W3C doesn’t create standards, they make recommendations.
@Cohen No. What I am saying is that make your webpage work on all browsers, but don’t use non-standard tags like scroll bar colouring and that kind of thing. Another thing I’m saying is that Microsoft should actually make a browser that works to standards rather than inventing their own wheel (which has 6 sides :P)
@Ben +1 and :D for the 6-sided wheel.