I want to ask if are there any complete html5 and css3 polyfill script ( in one file )
because I developing websites with the latest web features so I am very worry about old browsers compatibility
I searched alot on google but I didn't find what I want.
There is no polyfill for CSS3.
There might be a single JavaScript file that contains all of the HTML5 polyfills that can be written, but that tends to be bad practice.
It is best to use only the polyfills that your code uses.
If you are worried about real old browsers then it may make sense to only write in HTML4 and CSS2.1.
If you also want the newest then try Progressive Enhancement and, if you want to do extra work, write two versions of your website.
If you can limit your oldest browser to IE11 then you can use quite a few HTML5/CSS3 features.
Look on caniuse.com for what is supported in your oldest browser.
Related
Features of HTML5 are no doubt very compelling but is it a good time to start development in HTML5 ?
I just have started development in HTML5 and realized at the time even not all HTML5 input types are supported by all browsers. It means it is not sure about basic stuff like input forms.
Please share how you are managing these things ? (Using HTML5 code with browsers currently supporting HTML5)
HTML 5 is still under development so you've got to be careful. Certain features, such as the more basic ones like <header> and <footer>, are less likely to change before the final release. The doctype decleration is unlikely to change. I wouldn't rely on the multimedia support as supported formats vary widely accross browsers.
The momentum behind HTML5 is strong and it is indeed a good time to get started if you have not already.
At the lowest level, you would need to write feature detection in your pages to see if the particular browser supports the HTML5 feature that you want to use.
I suggest the following:
Use sites like caniuse.com to determine the current support for a particular feature across browsers.
Use templates like HTML5 Boilerplate, which give you a structure for the HTML5 page that you can use , with support for various shims that bring in support for HTML5 features in older browsers.
If you prefer doing the detection yourself, use a library like Modernizr.
As with all cross-browser development, you can never rely on any support in the browser. If you target older browsers, then do not rely on HTML5 features. I haven't had problems with using the HTML5 doctype in older browsers, but specific features can be troublesome — e.g. you can use <header> elements, but IE won't let you style them in any way as it disregards header styles as invalid.
As long as you need to support old enough browsers, it will never be a good time to start using HTML5. The only thing that decides whether it's okay to use HTML5 is which browsers you want to support.
HTML5 is much easier then previous ones, It has developed allot in input fields, though its still under development and not complete yet.
You can check here http://html5test.com/ which browser supports HTML5 how much?
Currently, Chrome is the best that supports the HTML5 more than any other web browser.
-Thanks.
Take a look at the table in this wikipedia article. There is a lot of variability amongst browsers as to which parts of HTML5 are currently supported. This website tests your web browser to see which features it supports, so install a bunch of different browsers on your computer and test them for yourself.
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
What is the best way to detect browser compatibility for HTML 5 syntax? And prompt the user if the browser is not compatible?
I understand the tutorial which shows how to test browser compatibility for HTML5. But I am curious to know if that is the only way? Do I need to inspect each and every element?
Have a look at Modernizr:
Taking advantage of the new capabilities of HTML5 and CSS3 can mean
sacrificing control over the experience in older browsers. Modernizr 2
is your starting point for making the best websites and applications
that work exactly right no matter what browser or device your visitors
use.
Thanks to the new Media Query tests and built-in YepNope.js
micro-library as Modernizr.load(), you can now combine feature
detection with media queries and conditional resource loading. That
gives you the power and flexibility to optimize for every
circumstance.
It has a lot of built in methods to test for browser features and provides a useful way of providing fallback code for when features you want to use are not supported.
More info: http://www.modernizr.com/
"HTML5 compatibility" is a very vague thing.
When people ask about HTML5 compatibility, they generally mean "what browsers support these new-ish browser features X, Y and Z which I want to use?"
There are a whole raft of features which have been added to browsers in the last couple of years, and which are now commonly referred to as "HTML5".
In fact, there aren't any browsers which support every new feature out there.
What you need to do is work out which features have wide enough support to make them worth using, which features you'd like to use but are happy to work around if you encounter a browser that doesn't support them, and which features you absolutely have to use to achieve what you want to do.
A fairly comprehensive list of new browser features, along with browser support charts for them all is available at http://caniuse.com/ (if you scroll to the bottom, you'll see in the overall compatibility table that the very best current browsers only support 89% of features they've tested. This will improve over time as new versions are released... but of course, also new features will be introduced too)
For determining at run-time whether the user's browser supports a given feature, you can use Modernizr. This is a Javascript-based tool which will give you a set of CSS classes and Javascript flags which tell you what features are supported. You can use this to trigger alternate behaviour in your site if the browser doesn't support a feature you want. (Modernizr also includes the HTML5Shim functionality, which allows IE to at least cope with HTML pages containing new HTML5 elements).
For more cross-browser compatibility, there are a whole range of hacks which have been written to allow older browsers (mainly IE to be fair) to support a range of newer features. You can see a fairly comprehensive list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Obviously, trying to run more than a few of these at once in IE will severely impare your site's performance, but it can be handy if you need to support one or two features. My favourite at the moment is CSS3Pie, which gives IE6/7/8 support for CSS rounded corners, shadows and gradients.
Hope that helps.
Here is a tutorial of detecting HTML5 compatibility & capabilities :
http://diveintohtml5.ep.io/detect.html
There are alternative HTML5 detectors using similar techniques, but I would suggest to use Modernizr.
To sum up the "score" of HTML5, you can design your own "marking scheme". Sum up weighted score gives you the total score.
The simplest method : in JS you create a new element, and set the attributes to be a colorpicker (HTML5) in JS, and return the type of the element (it is a picker only if the browser ic HTML5 compatible) :
var element = document.createElement("input");
element.setAttribute("type", "color");
return element.type !== "text";
do I need to inspect each and every element?
Nope. Only the parts you want to use that aren’t backwards-compatible.
See Five Things You Should Know About HTML5, especially points 1 and 4.
I would suggest you can try using <audio>Anything within Audio tag here</audio>.
Any text written inside the between <audio> and </audio> will be displayed in browsers that do not support the <audio> tag.
Since the audio tag is newly added in HTML5.
This works on IE 11 (and hopefully other browsers too).
// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
It's a take from Clement's answer and the link from Shivan (http://diveintohtml5.info/detect.html). Clement's answer didn't work in IE 11.
In my case I use jQuery UI for everything so don't need Modernizr (also it seemed slower). Reading the rather negative "How to use Modernizr" blog comments supports this assumption.
But now jQuery have split browser compatibility between v1 and v2 development streams, its necessary for people wanting to support non-HTML v5 browsers to load EITHER the v1 or v2 jQuery core script at the start. So this "one liner" HTML v5 detection is perfect. Here's how I load jQuery properly using the result:
// Use jQuery v2 for HTML v5 browsers else v1 to support old browsers
var jQueryScriptPath = (isHtml5Compatible)
? "/Scripts/jquery-2.0.3.js"
: "/Scripts/jquery-1.10.2.js";
document.writeln("<script src=\"" + jQueryScriptPath + "\" type=\"text/javascript\"><\/script>");
If you vote this answer up please also vote clement and Shivan's answers too :-)
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.
They are only supported in new browsers. I think everyone here knows that. But if majority of users are still on older browsers that don't support CSS3/HTML5, shouldn't that push developers to use older scripting languages (ie:HTML4/CSS2).
They are both draft specifications which are partially supported (to various degrees) in current browsers.
shouldn't that push developers to use older scripting languages (ie:HTML4/CSS2).
Leaving aside neither of those being scripting languages…
Using draft features can provide a better experience in some browsers, while the fallback is still acceptable.
JavaScript can sometimes be used to support browsers which don't have native support for a feature (although usually with a performance hit for those browsers).
Building around draft features provides practical experience with how those features work (and helps determine if there needs to be more work on the design before the feature goes into a final specification).
Building JS based around draft features gives common ground for different developers to aim for when building scripts to achieve a specific task. This increases the interoperability and ability to switch third party scripts.
No, we as developers need to push forward. Tools like Google Chrome Frame and Explorer Canvas will allow us to push the edge without too much worry about the browsers that can't keep up.
As #Rob states most of HTML5 is just HTML4 with defined error handling. Assuming you are not using the new parts of HTML5, there are no disadvantages and several benefits to using the HTML5 doctype now, including a better spec and a better validator.
A lot of CSS3 (rounded corners, drop shadows, RGBa, #font-face…) can be used as progressive enhancement on top of CSS2.1 rules. Conveniently this is also the CSS3 that is most implemented.
I think this question points to either a misunderstanding of HTML5 & CSS3, or a misunderstanding of underpinning concepts like progressive enhancement, the web trifle/layer cake, and the cascade.
For further explanation, please refer to: Do websites need to look exactly the same in every browser
What HTML5 can you reasonably expect to be able to use reliably cross-browser in the early months of 2010?
As the article above states, there is ExplorerCanvas until IE supports the <canvas/> tag.
There is also svgweb until IE supports SVG.
And Microsoft announced CSS3 support in IE9. As IE is pushed through Windows Update, I'm not afraid of using CSS3 and HTML5 right now.
shouldn't that push developers to use
older scripting languages
(ie:HTML4/CSS2)?
If that's your only question, then your answer is yes. "Most" developers are still using HTML 4.01 and mostly CSS2 for the reasons you stated: they're well supported on today's popular browsers. :D
See these:
should I switch to html5?
support of CSS3 among common browsers (not very good yet..)
I'd say, use the broadly supported options now but make sure that your designs degrade 'gracefully' with browsers that don't support these new features as they will just ignore them.
HTML5 is mostly backwards compatible with HTML4.01, and the same browsers will still be able to handle HTML4.01 elements. Like all properties in CSS, developers will be aware and careful of how the CSS3 properties they use will affect users who can't see them (typically IE users).