As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Ok, I need a little help. For quite some time now I've been using CSS2, it works with most browsers and it's pretty easy to modify. But all of a sudden I'm hearing about CSS3 and that it works with only certain browsers, so.... What are the benefits of using CSS3 when most of your viewers won't be able to see it in action?
At the moment, some parts of CSS3 work on some browsers. At some point in the future, however, a lot of CSS3 will work on a lot of browsers.
For now, you should only use the features of CSS3 that the browsers you're targeting support. Browsers should merrily ignore unknown properties though, so you can use those for non-essential eyecandy even if only some browsers support them.
When can I use... and the CSS3 module status should be of help.
CSS3 hasn't become the standard yet... i believe it works in FF but not in <IE7, which is sadly where the majority of browsers are. while CSS3 has some awesome features, it will still be a while until the internet catches up enough to make it worth using. i think you will save yourself a lot of headaches and cross-browser manipulation staying w/standard CSS...
In fact, quite a lot of CSS3 properties are supported by Firefox 3.5 and later versions of Webkit; though often using proprietary names. One such example is for corner radius, where to reliably render one must use 3 different property names:
.rounded-corners
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
It's still a good idea to add in a few CSS3 properties in a progressive enhancement approach, using it to give an extra few touches to beautify a site's design to those with browsers supporting some CSS3 properties (Firefox and Safari have about 25-30% market share).
In my opinion a site does not have to look the same whichever browser you use; the most important thing is that the site is usable and accessible across all browsers, whether they be the latest version of Firefox or Mosaic 1.0.
Don't hold back just because most browsers can't render CSS3 yet. There are numerous ways to use CSS3 only properties but still have fall backs to make the UX for users using older browsers not lack because of it.
Here's a great article on the subject from SmashingMagazine.
http://coding.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/
If we all wait to begin developing interfaces with CSS3 when it works in all browsers, we'll never make it there. Web developers need to raise the bar together so that browsers can catch up.
I approach CSS3 as progressive enhancement.
If you want drop shadows or rounded corners in a design I'll use CSS3. Yes it will work fine in modern browsers, but will not work in IE. But it will also allow me to use clean efficient html markup. Remember the old days nesting DIV's with images for rounded corners or drop shadows, what a mess and a pain.
These elements I treat as nice to have.
That being said there are a collection of JS libraries available which easily provide work arounds for Internet Explorer and some of the most applied CSS3 options. As an example check out CSS pie:
http://css3pie.com/
Another approach as well is the excellent modernizr which feature sniffs, and adds CSS classes to the HTML tag, thus allowing you to code for each feature set.
http://www.modernizr.com/
Also to note, is the slightly annoying browser prefixes which #Donald Harvey mentions in his answer. Again there are a variety of tools to help with this. CSS3 please being a prime example:
http://css3please.com/
I think the bottom line is, as long as implementing CSS3 doesn't break the functional experience, then why hold back. It's seems quite logical to me that if people want to surf the internet with browsers that are 5-10 years old, they are going to have a degraded experience, and that shouldn't be at the expense of those who are keeping upto date with modern browsers.
i am working on Dashboard widgets and webkit supports quite a lot of css3 and it is extremely useful in achieving results.
I do not have to worry in this environment about cross browser compatibility so it is admittedly easy, i.e. i do not need to think about the issues, just code. The sooner it gets into the wild and IE the better.
CSS3 has numerous sweet things which you couldn't be possible only with CSS2
Advantage 1: Cool and neat CSS without burdening the server with hell lot of images for instance like rounded borders or for image shadows etc...
Advantage 2 : Sweet Animations possible without need of Gifs
Advantage 3: Gradients Background Stripe Images will be obsolete with CSS3.It could be easily achieved with the help of online Gradient generators.So our Server will be loving the CSS3 for sure
Advantage 4: Basic Box Model which is a huge relief rather to positioning the HTML layouts using div and span
Advantage 5 : Cool Text effects is possible
Advantage 6: Lot of cool attribute selectors to reduce the usage of jQuery selectors.
DisAdvantage:
Even though it have lot of cool features packed in mind of web developer and rich user Interface. Webkit browsers like Safari & Chrome and to certain extent mozilla browsers support most of the CSS3 features. Its going to take literally lot of time for 100 percent compilation across browsers.
Simply put, CSS3 will be visible by all but some versions of IE. Changes targeting IE for cross browser compatibility are not that time consuming. IE 8 supports some CSS3. IE 9 adds onto that. IE 10, probably going to be released a few months into 2012, looks like it will add even more in terms of animations, transitions, and other fun CSS3 additions. So, CSS3 is worth it for your sites to be cutting edge today and current tomorrow. Just my opinion.
Related
I have a problem that I want you to help me, I am currently making a website, I am building that website on HTML5 and CSS3 technology, every feature I'd like to use I check it first in "CAN I USE", the technology I use most is box-shadow, and I already made some great things with it but, I have a doubt about the percentage of browser that don't support that technology, the percentage of browser that do not support box-shadow is around 17.12%, and if you see the conclusions (show options => other options => show conclusions) they say that that feature isn't ready yet because they are "Waiting for Opera Mini 5.0-6.0 to expire", I personally think that the best that we can do in order to make people update their browsers is not support older browser, but ...
am I right thinking like this?
will I have bad consecuences if I don't support older browsers?
is worth to work twice just to support older browsers?
should I still working with box-shadow?
As always....
Progressive Enhancement.
Build your site so it works well for everybody regardless of their browser settings and capabilities. Then add features that enhance the experience but don't cause the site to break for those who cannot take advantage of that feature.
Some CSS3 elements(shadow, rounded corners,...) will not work in older browsers. That's a fact, but you can still use them as the mentioned browsers simply ignore this attribute.
Best way would be that the design of the website doesn't rely on the shadow and other effects, but only to enhance it.
Also take into account the market share of the browsers that don't use these elements. Opera's got a tiny share on the desktop market, and a little bigger on mobile devices, but in no case is a major player. Pre 8 Internet Explorer will give you the most headaches...
I completely agree with John Conde,
Do you want to make a website to teach a lesson to people who still use old browsers?
Or are you seeking more visitors?
Start with a simple design that everybody could use, and then improve it for modern browsers while keeping old browsers in mind.
I'm going to develop a theme for a WordPress blog but I'm not sure if I should do it using XHTML/CSS2 or if I already can do it using HTML5/CSS3.
Usually, I use 960.gs framework but it isn't available with HTML5/CSS3. I've heard that the 52framework works fine as well and I'm thinking about adopt it for my project, but I'm really insecure about HTML5's early adoption (?).
Someone, please, can help me to decide which technology adopt on my project.
Thanks a lot.
HTML5 and CSS3 are "ready to use" - you need to learn a little about the concept of "Polyfilling", but you can make the user experience very similar in all browsers, even if you lose a few transition effects and rounded corners along the way.
My website has been HTML5 since 2009 and I tested it across many, many browsers.
So the bottom line is, HTML5 is designed to be highly backwards compatible with HTML4.01 and there are lots of techniques for making content available to older browsers that don't support the more funky elements in HTML5.
The 960 grid system will work with HTML5 and CSS3 because it's just a list of classes. CSS3 doesn't really give you any grid layout features yet that are widely adopted enough to be helpful.
I would use CSS3 and HTML5 as much as you can but don't forget about progressive enhancement. Don't blindly ignore a browser because it doesn't support CSS3. You should use HTML5 and CSS3 appropriately and not because it's cool.
What audience are you designing it for? Do you need to be bleeding edge?
I would say use XHTML/CSS2 as that will be supported for years unless you need the functionality in the others.
Being an early adopter can be quite painful, so only do that if you have good reasons to.
Html5 and css3 for sure!
The only thing you might want to ask yourself is wether or not you want to use the new elements (article, aside, nav etc.) Because if you do, you need to depend on Javascript in order for IE to render your page correctly.
Every new page should be written with the new doctype imo:
<!DOCTYPE html>
If you want a starting template that works well in all major browsers you might want to check this out: http://html5boilerplate.com/
Whole-heartedly agree with Bravax.
It's all really based on who your audience is. If you want your site to be on the bleeding edge, regardless of audience, go for it.
I have heard great things about 52framework! I am about to implement it into a full-on 100+ page site redesign. The good thing about it, is that it plays nice with IE (even 6!).
It is entirely related to the markets you are aiming at. You will be able to have more interactive content and easier to maintain styles with CSS3. This said, many of the html5 and css3 elements are not yet standardized. Even among the modern, cutting-edge, browsers there can be major differences.
If you are making a theme for experimental purposes or to play around with, I would go with the newer technologies.
If you are making this for consumption on a wide sale, and potential sale, you really should avoid technologies not supported by older browers, IE 7 and 8 especially.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Should i be using HTML5 and CSS3?
How do you decide if you need to use html5 and css3? and what will be the pros and cons in choosing that approach.
Pros and cons I can think of:
Pros:
cleaner codes
support for #font-face
shadows and rounded corner
animations
Cons:
not all browsers supports
Can you help me decide? How do you decide if you're in my situation?
Thanks!
It won't be time to switch to "HTML5 and CSS3" for a very long time indeed.
It is time to look carefully at the features added by HTML 5 and CSS 3 and decide, on a case by case basis based on:
Browser support
Consequences of using them in browsers that don't support them
Benefits gained
Fallback options available
… which specific features it is worth using today.
A well designed site should always degrade gracefully and both HTML and CSS support this. The goal should not be to make your look fantastic in older browsers - only to make your site USEABLE in older browsers. A well designed site should be useable with CSS turned off.
I think a clear YES can come only after the target browsers are compatible. However, if my target browser supports the specific features of HTML5 and my development is limited to these supported features, HTML5 can be used.
Some people still use browsers once used by the ancient egyptians, like IE6, and they will not be able to view your pages (and specifically new styles/tags).
If you have a public website, accessable to virtually anybody, I suggest waiting for at least a couple of years before the big convert.
If, on the other hand, you have a controllable group of users, like the intranet site I'm working on, you can easily enforce the use of more modern browsers that support this, like Google Chrome, Apple Safari, Mozilla Firefox, of Internet Explorer 9 (just released).
I believe it is entirely down to who you are targeting. If you are targeting developers, Stack Overflow for example, then I think you can use the new technologies. If you really need to display a message to upgrade then I am sure developers would understand.
You should not use it for general sites for something such as a shop which has a very wide audience. This is because a lot of them would be using IE 6 - 8. The fact that no one on XP (my whole office + pretty much everyone else I know) can upgrade to IE9 which supports some features is frustrating too.
So I don't think there will be a definitive day where everyone can use it. It is just a case of looking at the market share of browsers and your target audience and deciding if it is worth giving 99% of people a better experience and ignoring the other 1%. Although I am sure those figures are completely off, it is probably a lot worse.
In conclusion, it depends on your audience and if you are willing to not support a varying number of users.
Are there any good notes and guidelines that one should think about when developing sites that must support Internet Explorer 6?
I'm not looking for explanations of the abundance of bugs that we have all learned by now. I need some general informations on, e.g., elements that one should prefer for certain tasks, things that simply does not work in IE6, CSS tips, etc.
here are the biggies i can think of right now:
No Alpha Transparent PNG Support
No Hover States except for the <a > tag
CSS floats behaving unexpectedly.
Can't use max/min width/height.
The Box-model conflict (padding is not added to the width of elements).
sometimes doubles margins.
IE6 doesn't support position: fixed.
...and i'm starting to get depressed so i'll stop here.
I'm fortunate in that I don't have to support IE6 any more. However it is a recent memory, so you have my sympathies.
Go to Quirksmode.org. This is an excellent resource for finding out what features various browsers support. (seeing all the red in the IE6 column will depress you though!)
If you plan to do any scripting at all, use jQuery rather than trying to work with plain Javascript: jQuery makes considerable efforts to be cross-browser compatible, even in IE6. It isn't 100%, but it makes a pretty good go at it, and give you features that would otherwise be completely impossible in IE6.
The following tools will make your life easier:
Dean Edwards' ie7.js - a JS library aimed at making IE6 more compatible with standards (he's also written "ie8.js" and "ie9.js" which extend the original ie7.js to add more features missing in various versions of IE)
Modernizr - a JS/CSS library aimed at helping you work around incompatibilities in old browsers.
IEPNGHack - allows you to use PNG graphics with transparency in IE6.
Whatever:Hover - allows you to use the :hover CSS style with any element type (IE6 normally only allows :hover for <a> tags).
CSS3Pie - a library aimed at giving IE6/7/8 some modern CSS3 features, including border radius.
There's probably more, but that should give you a start.
One thing to make clear to your employer though is that as long as they insist on using or supporting IE6, you will be unable to produce a modern feature-rich web site. There are limits to how good you'll be able to make it, even with all those hacks. Plus it'll be slow: IE6 is painfully slow at the best of times, and all those hacks will only make it slower.
Best of luck.
While simply saying "Don't Support IE6!" might sound real nice and easy to those who do not have to deal with reality, it remains a fact that many web developers/designers simply have no control whatsoever over that decision.
With that said, obviously the ideal would be "don't support ie6".
If you must support it, how much you have to support it depends on why you must; Is it because your web app is for a company which has many IE6 installations that it knows it won't be upgrading any time soon at all, or is it just for a client who wants to maintain 'support' for every possible user out there? Or is it something in between?
Generally speaking, I aim for "functional, non-totally-ugly, but certainly not pixel-perfect" appearance on IE6. I use IETester to check all versions of IE (differences abound between IE7 and IE8, for instance), so I include IE6 too, and just worry about making things look mostly functional for them.
For my clients, that has been sufficient. A couple have asked about IE6 support, and I have been able to show them that 1) the set of general users on the Internet who still use it is relatively small and 2) those users probably see so many glitches everywhere on the web anyway, they probably do not notice them anymore. I know that #2 probably sounds extremely dismissive, but I have plenty of anecdotal evidence that backs it up.
The basic idea comes down to; how much time will you really spend tweaking a site to make it perfect for an old, long-since-unsupported browser which use keeps going down more each day, when you could just make it acceptably functional, and then devote the rest of your time to more modern browsers.
But again, the extent to which you can take that route depends on how important IE6 support is to those who employ you, and why it is that important to them.
but anyway, IETester is a definite recommendation for testing it:
http://www.my-debugbar.com/wiki/IETester/HomePage
Poor you having to support IE6, we've all been there I guess...
Unfortunately I cannot point you to some general guidelines, besides the KISS principle (keep it simple stupid). Just stick to CSS 2.1 and don't use any fancy new technologies such as HTML5. Also don't even think of using any kind of special CSS selectors like blabla > blabla.
Let me point you to some sites which might help you in your endeavor:
CSS contents and browser compability (good overview of what to do and not to do with CSS)
ie6fixer (you actually WANT to use opacity, transparent png's? this tool will help you)
universal-ie6-css (good starting point for your custom css)
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs (fixing the shortcomings the manual way)
For testing I recommend setting up a small virtual machine (I'd suggest using windows xp) with IE6 running. Testing tools like IETester may use the engine of the particular browser, but I have had differences between a full blown IE6 and the IETester tools - oh also there is instant virtualization with Spoon.net browser sandboxes (they had to remove IE, because MS said so...).
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?
Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?
When talking about HTML5 or CSS3, you should head over to:
When can I use...
As can be seen, we are still far far away from using that.
Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:
Progressive Enhancement and Graceful Degradation
Here are some resources also:
Gallery of HTML5 Sites (You can learn and get the idea from them)
Create modern Web sites using HTML5 and CSS3
Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8.
The best way to test them is to install them on your computer.
You want to use html tags and css compatible with mobile browsers.
For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.
You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.
For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html
Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.
A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.
I was going to make this a comment, but then I got carried away..
w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.
Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.
As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.
The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.
Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.