@JackS11: I tech edited Andy’s book, and really enjoyed it! I can totally respect your stance on this. It is a brave, bold stance, and great if you can get away with it. Don’t you ever get clients complaining because it doesn’t look the same on their Windows XP machine? I still have to think about fallbacks carefully – a lot of the design work I do is for friends’ bands and such, and I always seem to get half the band moaning because it looks crappy on their Windows box.
It seems like every musician in the North of England uses bloody IE6/7/8 on Windows XP! So frustrating!
The main problem I find is with designs that make heavy use of opacity, RGBa colours and the like. they can look really bad when the transparency fails. Of course, IE6 doesn’t even support transparent PNGs properly! Aaargh! ;-)
Copy & paste the code below to embed this comment.
Rudolph Gottesheim
That’s where educating the client comes into play. And if the client doesn’t “get it”, I simply won’t work for them.
You should know how older browsers react when poked with CSS3 and you should, of course, test your sites in those browsers. But I don’t spend any more time trying to bend a project to pixel perfection.
Your sites just shouldn’t look broken in those older clients. Their users won’t know they’re missing something anyway.
The web has and will always be about the content. If the content is accessible by anyone on any machine, you’re in good shape.
Copy & paste the code below to embed this comment.
vargaso
For instance, the rounded corners do not work in Firefox versions before 4. Also, for gradients in IE, what are your feelings about using the Microsoft filter class in the CSS? Anyway, this is really useful, especially the CSSPie stuff, I hadn’t heard of that before. Thanks!
Thanks for sharing your opinion Rudolph – it is great to see you treading the bold path, and our jobs will become a whole lot easier when more designers/developers join you.
We are starting to try and educate our “kent web design”:http://www.eonic.co.uk customers that it is OK to have the site looking better in one browser than another. But sometimes it is a hard sell, we do a lot of work for larger ad agencies and testing in all browsers is now so entrenched in some big agencies it is like turning an supertanker.
Copy & paste the code below to embed this comment.
shong
I am like those who stand by “cross browser compatibility” and think, as designers, we have to put how users will experience our contents before how easy it is for us to make them. Reading some comments regarding this topic made me think whom really those CSS features are for. (Those are really helpful by the way) Then I think those features cover somewhat minor design decisions, which could be even more insignificant from the viewers’ point, except cases that hinders display of actual content-mostly texts- like the case of showing no background color behind white text.
And I think we as designers should listen to the customers whether they want their web to be for all browsers or not.
Copy & paste the code below to embed this comment.
sojinouh
Thank you for this article! I have been always stressed and overwhelmed by the fact that i should master javascript and even jQuery to create a beautiful website. Also constantly having to use photoshop and jpegs to add refined typography or animations seemed to be a hassle. It is great to hear that CSS3 is continuing to provide new features to make websites look cool in an easier and simpler way.
Effects like text shadows, rounded corners, box shadows, gradients, and opacity are basic effects that designers often use to create websites. Why use multiple tools when it can be simply done with css?
Even though there are kinks with CSS3 such as blurry shadows and some pixelations, it is definitely the right direction to make web designing more simple and easier to do and it only seems to be minor.
And in terms of Internet Explorer, I wouldn’t count IE as a problem to CSS3 since IE seems to be unsupportive of a lot of new features. It is frustrating to constantly see new features one after the other stating “IE not supported” or “might not work as well under IE”
Copy & paste the code below to embed this comment.
hchung
For an amateur graphic designer such as myself, it is great to know that all of this information is readily available on the web. Thank you for the great article. It is great to know that you no longer have to deal with creating your own images and effects through image-editing programs like Photoshop. Small touches like rounded corners and drop shadows definitely have a huge effect on the overall aesthetic of any website, and it is great to be able to use these tools so easily through CSS. Although such simple effects are featured in your article, I am excited at the possibilities of new designs and tools to create a more aesthetically pleasing website through simple and pain-free additions to the code.
It is interesting to see the comparisons between the browsers and how they display the same information. It seems as though Internet Explorer is rather far behind in terms of integrating web design. It seems that most web designers are using other browsers any way, and IE will eventually become obsolete as design is rapidly becoming the “next big thing.” Hopefully some day in the near future they will all be more designer-friendly and make the web a much more visually appealing place to be!
Copy & paste the code below to embed this comment.
evelynt
I really appreciated the light-hearted and easily understandable way you have written this article in order to make head-scratching CSS for a beginner like me less intimidating. It is also great that you have linked to all examples where the CSS3 is running live. It is eye-opening to see all these new innovations and possibilities that can be done with CSS, no matter how eye-blinding and blingtastic they may be! The abilities to perform these little tricks live completely expand the way how website design can be presented. Nice that you also included the images of how it would look in different browsers incapable of handling all the blingtasticness, and how exactly to go about tackling this problem. It is sort of amusing even how much digging around and research has to be done in order to make the IE version the same as the others. As a web design beginner who does not know how to use jQuery or javascript at all, this is a wonderful way for me to increase my ability to create more dynamic-looking and appealing websites live without having to go back to Photoshop for every little change such as a color decision. Look forward to using these little tips and tricks soon in my own web design projects.
Copy & paste the code below to embed this comment.
hallie
It’s very exciting to see all the new things that can be done with CSS3, and great articles like this one make the cross-browser nightmare less daunting.
I hope that we don’t all go overboard with CSS3 giddiness; as the new features become common knowledge, I’m envisioning a CSS3-pocalypse of body text set in display faces at low opacity, embossed and drop-shadowed on top of a red to green gradient backgrounded box with four different corner radiuses as well as inner and outer drop shadows. And the whole thing does a 360 on mouseover.
I would love to see a companion piece to this on the aesthetics and tasteful application of CSS3 bling (is that an oxymoron?).
Copy & paste the code below to embed this comment.
dbryant
Thanks for an insightful article! I am also glad that CSS is allowing for cross-compatability on browsers and opening doors for the way people view web pages. What is interesting to me is that CSS feels like it is always catching up to photoshop, like an outdated civilization trying to tap into all these great technologies that adobe has. It’s funny that we can celebrate the advent of a gradient on CSS when it’s been around for so long. But I don’t want to be a debbie-downer; I’m certainly glad that things are becoming more efficient for us through CSS3!
I certainly enjoyed your ‘bling’ aesthetics in your post and laugh a little that that can come from simple coding. I’m slightly curious as to how many designers will begin decking out sights in gradients and drop-shadows just because they can. But who can blame them when it just looks so nifty?
Why is it some people still insist in using old versions of IE such as IE 6 and 7? All they do is cause problems for us all when it comes to styling, no matter what CSS you use :(
IE should just drop or kill anything below IE9 because thats the only version that dont take a long time to get to work with good standards.
In fact, everyone thats still using something below IE9 should get a message saying it will self destruct in 24 hours if not updated to IE9 or even a better browser such as FF.
36 Reader Comments
Back to the ArticleChris Mills
@JackS11: I tech edited Andy’s book, and really enjoyed it! I can totally respect your stance on this. It is a brave, bold stance, and great if you can get away with it. Don’t you ever get clients complaining because it doesn’t look the same on their Windows XP machine? I still have to think about fallbacks carefully – a lot of the design work I do is for friends’ bands and such, and I always seem to get half the band moaning because it looks crappy on their Windows box.
It seems like every musician in the North of England uses bloody IE6/7/8 on Windows XP! So frustrating!
The main problem I find is with designs that make heavy use of opacity, RGBa colours and the like. they can look really bad when the transparency fails. Of course, IE6 doesn’t even support transparent PNGs properly! Aaargh! ;-)
alca
Great piece! Useful to see not only the variations but the renderings that go with them and doubly for the IE tips!
Rudolph Gottesheim
That’s where educating the client comes into play. And if the client doesn’t “get it”, I simply won’t work for them.
You should know how older browsers react when poked with CSS3 and you should, of course, test your sites in those browsers. But I don’t spend any more time trying to bend a project to pixel perfection.
Your sites just shouldn’t look broken in those older clients. Their users won’t know they’re missing something anyway.
The web has and will always be about the content. If the content is accessible by anyone on any machine, you’re in good shape.
Just my opinion.
vargaso
For instance, the rounded corners do not work in Firefox versions before 4. Also, for gradients in IE, what are your feelings about using the Microsoft filter class in the CSS? Anyway, this is really useful, especially the CSSPie stuff, I hadn’t heard of that before. Thanks!
Chris Mills
I was a bit naughty and forgot to include -moz-box-shadow for older versions of FF. Try it!
I don’t advocate using IE filters, as I think they are a relic of a bad old past, that we should cease propagating ;-)
Chris Mills
Thanks for sharing your opinion Rudolph – it is great to see you treading the bold path, and our jobs will become a whole lot easier when more designers/developers join you.
Trevor Spink
We are starting to try and educate our “kent web design”:http://www.eonic.co.uk customers that it is OK to have the site looking better in one browser than another. But sometimes it is a hard sell, we do a lot of work for larger ad agencies and testing in all browsers is now so entrenched in some big agencies it is like turning an supertanker.
Trevor Spink
Got me thinking and we have now published our policy on HTML5 and CSS3 for our customers…
“Browser Compatibility Policy”:http://www.eonic.co.uk/About-Us/News/3982-/Making-the-most-of-HTML5-and-CSS3
Thanks Chris
IamDAMO
I want to be part of this but my I have to stand by cross browser compatability…for now. Therefore more work…..not yet thanks.
shong
I am like those who stand by “cross browser compatibility” and think, as designers, we have to put how users will experience our contents before how easy it is for us to make them. Reading some comments regarding this topic made me think whom really those CSS features are for. (Those are really helpful by the way) Then I think those features cover somewhat minor design decisions, which could be even more insignificant from the viewers’ point, except cases that hinders display of actual content-mostly texts- like the case of showing no background color behind white text.
And I think we as designers should listen to the customers whether they want their web to be for all browsers or not.
sojinouh
Thank you for this article! I have been always stressed and overwhelmed by the fact that i should master javascript and even jQuery to create a beautiful website. Also constantly having to use photoshop and jpegs to add refined typography or animations seemed to be a hassle. It is great to hear that CSS3 is continuing to provide new features to make websites look cool in an easier and simpler way.
Effects like text shadows, rounded corners, box shadows, gradients, and opacity are basic effects that designers often use to create websites. Why use multiple tools when it can be simply done with css?
Even though there are kinks with CSS3 such as blurry shadows and some pixelations, it is definitely the right direction to make web designing more simple and easier to do and it only seems to be minor.
And in terms of Internet Explorer, I wouldn’t count IE as a problem to CSS3 since IE seems to be unsupportive of a lot of new features. It is frustrating to constantly see new features one after the other stating “IE not supported” or “might not work as well under IE”
hchung
For an amateur graphic designer such as myself, it is great to know that all of this information is readily available on the web. Thank you for the great article. It is great to know that you no longer have to deal with creating your own images and effects through image-editing programs like Photoshop. Small touches like rounded corners and drop shadows definitely have a huge effect on the overall aesthetic of any website, and it is great to be able to use these tools so easily through CSS. Although such simple effects are featured in your article, I am excited at the possibilities of new designs and tools to create a more aesthetically pleasing website through simple and pain-free additions to the code.
It is interesting to see the comparisons between the browsers and how they display the same information. It seems as though Internet Explorer is rather far behind in terms of integrating web design. It seems that most web designers are using other browsers any way, and IE will eventually become obsolete as design is rapidly becoming the “next big thing.” Hopefully some day in the near future they will all be more designer-friendly and make the web a much more visually appealing place to be!
evelynt
I really appreciated the light-hearted and easily understandable way you have written this article in order to make head-scratching CSS for a beginner like me less intimidating. It is also great that you have linked to all examples where the CSS3 is running live. It is eye-opening to see all these new innovations and possibilities that can be done with CSS, no matter how eye-blinding and blingtastic they may be! The abilities to perform these little tricks live completely expand the way how website design can be presented. Nice that you also included the images of how it would look in different browsers incapable of handling all the blingtasticness, and how exactly to go about tackling this problem. It is sort of amusing even how much digging around and research has to be done in order to make the IE version the same as the others. As a web design beginner who does not know how to use jQuery or javascript at all, this is a wonderful way for me to increase my ability to create more dynamic-looking and appealing websites live without having to go back to Photoshop for every little change such as a color decision. Look forward to using these little tips and tricks soon in my own web design projects.
hallie
It’s very exciting to see all the new things that can be done with CSS3, and great articles like this one make the cross-browser nightmare less daunting.
I hope that we don’t all go overboard with CSS3 giddiness; as the new features become common knowledge, I’m envisioning a CSS3-pocalypse of body text set in display faces at low opacity, embossed and drop-shadowed on top of a red to green gradient backgrounded box with four different corner radiuses as well as inner and outer drop shadows. And the whole thing does a 360 on mouseover.
I would love to see a companion piece to this on the aesthetics and tasteful application of CSS3 bling (is that an oxymoron?).
dbryant
Thanks for an insightful article! I am also glad that CSS is allowing for cross-compatability on browsers and opening doors for the way people view web pages. What is interesting to me is that CSS feels like it is always catching up to photoshop, like an outdated civilization trying to tap into all these great technologies that adobe has. It’s funny that we can celebrate the advent of a gradient on CSS when it’s been around for so long. But I don’t want to be a debbie-downer; I’m certainly glad that things are becoming more efficient for us through CSS3!
I certainly enjoyed your ‘bling’ aesthetics in your post and laugh a little that that can come from simple coding. I’m slightly curious as to how many designers will begin decking out sights in gradients and drop-shadows just because they can. But who can blame them when it just looks so nifty?
TME
Why is it some people still insist in using old versions of IE such as IE 6 and 7? All they do is cause problems for us all when it comes to styling, no matter what CSS you use :(
IE should just drop or kill anything below IE9 because thats the only version that dont take a long time to get to work with good standards.
In fact, everyone thats still using something below IE9 should get a message saying it will self destruct in 24 hours if not updated to IE9 or even a better browser such as FF.