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 :-)
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
This may not be a question related to programming but I am still asking this since I am banging my head a lot on this issue.
I am finding a lot of HTML5 & CSS3 features useful for my website designing. But as usual (like all developers) I am confused whether to use it or not since older browsers dont support it. (Like css transitions, 3D tranforms, and so on)
I know that I can add fallbacks with Modernizr
(or)
Can give alternate stylesheets (If lt IE9.)
(or)
Can avoid using css3 and html5
(or)
Use plain javascript/jquery to do all the effects
(or)
Use html5shiv or similar for adding specific html5 command support.
What my problem is...
I am so fed up of adding so many fallbacks as a developer to every transition/every element which is not supported. So, I thought of few things but not able to choose what to do..
1) Should I totally avoid users still having old browsers and just support latest browsers?
2) Since I am anyway going to make a mobile site with JQuery Mobile separately, should I use the mobile site as a fallback for people with old browsers?
3) Should I continue adding fallbacks and alternate stylesheets?
4) Or, is there any better option?
I am banging my head so badly due to these incompatibility issues. Please give me a suggestion which is developer as well as user friendly. Thank you.
Sùmmary: it depends on your audience. There's no definitive answer to your concerns.
If your target is people who tend to own latest technologies, you can support browsers from 2 years onwards. In the other hand, if your target is people who love staying in old operating systems or you're talking about a large corporation/government, maybe you'll need to provide fallbacks or just skip using edge technologies in order to ensure a proper user experience across all target user devices and browsers.
OP said in some comment:
But I am not sure whether I have to completely scrap support to people
with old browsers and alternatively offer them with a mobile based
website for pc
If your target has latest tech, why you want to provide a mobile site for PC? You need to decide: if you think that you shouldn't support too old browsers and systems, you shouldn't try to maintain 2 sites when a great percentage of visitors will go to the "edge version". Otherwise, make your main site compatible with older browsers.
BTW, as I said before, there's no definitive answer to your concerns, because it's all about taking a decision and the time will tell you if it was right. Use analytics, check what are the most used Web browsers in your site and provide fallbacks when you detect that there's a high percentage of visitors using old browsers...
According to me,you should restrict clients using old browsers and mention in a disclaimer that your webapp will require versions of browsers with uniform support for all HTML5 and css3 features.You can check support for these elements using http://caniuse.com/. This will avoid alot of inconvenience for you as a developer and unnecessary stacking to styles and jsfiles to your webapp making it sluggish.Even i faced the similar problem and i know how irritating it is to handle cross-browser issues.Cheers :)
There are a some elements (HTML5) that are not supported or partially supported in some browsers.
I'm interested in what is happening when document.createElement() is used - an element is created and then if there is no support, it becomes text, which is not rendered?
Just out of a curiosity is there a way to see what elements are supported, something like a list of them, by using JavaScript and not by compatibility sheets?
1) the site gives detail about what is supported by your current browser.
http://html5test.com/
2) give full detail for every browser, what is supported and what is not
http://www.findmebyip.com/litmus
You could take a look at these pages:
http://html5accessibility.com/
http://wufoo.com/html5/
They list up what elements are supported and not. What happens if the element is not supported depends on the browser.
You should take a look at http://modernizr.com/ . Which is a js-project that helps older browser to render and display html-elements.
I used css 3, html 5 in a web page and I want to use Modernizr to show some html5 attributes and some css 3 such as border-radius on old browsers,
Does Modernizr help in this and how run it.
Modernizr will only help you detect certain features, so you'll have to add the JS fixes yourself.
In case you want to go for a pre-packaged solution this might be of help: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
In your case this might be the way to go: http://css3pie.com/
Modernizr doesn’t add missing functionality to older browsers other than the HTML5 Shiv so that you can use and style the new semantic elements from HTML5. The other answers already show some polyfill options, however, I recommend you reconsider adding purely-visual effects like border-radius to older browsers that way. Polyfills slow the older browsers down (sometimes very significantly) and make the overall experience much worse for those users.
You can use modernizr to detect what's available, e.g. rounded corners. If it's not, you can degrade gracefully via the modernizr API, or even use a plug-in to smoke and mirrors the feature.
<script type="text/javascript">
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',
callback: function () {
$('article').corner();
$('figure').corner();
}
});
</script>
Code snippet taken from http://blogs.msdn.com/b/jennifer/archive/2011/08/04/html5-part-4-using-html5-while-retaining-support-for-older-browsers.aspx
Modernizr does not help with CSS3. (You could use Selectivizr for this, but it has some cross-domain issues you'll want to read about.)
Modernizr does have IEPP for HTML5 shim support and it comes with YepNope.js as Modernizr.load, which is a great polyfills loader mechanism so you can load your own support for older browsers. That will help you drop in support for attributes like pattern and placeholder without overloading browsers that have native support for it.
Modernizr internally uses the same JS code that you would use otherwise..
e.g. If you want to check for "input" placeholder support, using Native way, you would use;
function support_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
While the Modernizr way to check would be like
function support_input_modern() {
if (Modernizr.input.placeholder)
return true;
else
return false;
}
But the above code has the same internal working as the native way...
So ideally, I would prefer native way for simpler and lesser amount of checking...
Only for very complex things, should we go for Modernizr
Where do I place this script in my HTML for it to work? And what changes do I have to make to it?
<script type="text/javascript">
var browser=navigator.appName;
if(browser="Microsoft Internet Explorer")
{
document.getElementById("html").innerHTML="\
<body><p>Your browser is IE.</p></body>";
}
</script>
Could I make a slightly alternate suggestion, skipping the spoofable UA string, and using a Microsoft-implemented (and standards-compliant) strategy:
<!--[if ie]>
<script type="text/javascript">
document.getElementyId("html").innerHTML = "<body><p>Your browser is IE.</p></body>";
</script>
<![endif]-->
To use this put it in the head of the document. I don't think it can be placed inside script tags (since it's based on html comment syntax, not JavaScript).
This uses conditional comments (Quirksmode.org link).
If at all possible, I would suggest avoiding direct browser detection.
Almost every case where someone wants to detect a specific browser (usually IE), it is because there is a particular feature that they want to use which isn't available in that browser, or has bugs.
But browser detection fails as a strategy here for a number of reasons:
You don't know whether a future version of that browser may correct the problem, in which case your code to fix the issue may itself cause problems.
If another browser also has a problem with that feature, you would have to detect that browser as well. Taken to the logical extreme, since no two browsers have exactly the same set of features, you end up having to detect every possible combination of browser, version and operating system.
Browser detection is virtually impossible to guarantee to be accurate. Most browser detection scripts are based on hacks that trigger quirks that only affect a particular browser, and most are pretty un-reliable.
Even just IE detecting isn't good enough. There is a big difference between IE6, IE7 and IE8. And IE9 is just around the corner, which will be massively different again.
So what should you do instead of browser detection?
Detect the feature. There are a number of ways of doing this, but the best solution I know of is a script called Modernizr. Place this script in your site, and your page will be given a bunch of CSS classes and Javascript properties which you can use to determine whether a given feature is available or not.For example, if you want to use gradients on your site, most browsers can use CSS for this, but IE and older versions of other browsers cannot. For these browsers you easily can use a background image instead. Modernizr will give you a CSS class of either cssgradients or no-cssgradients, and you can style these two classes accordingly.
Add the missing features to the browser. This is more tricky, but for certain features it can be done, particularly for IE. A good example is CSS3Pie which is a hack that allows IE to use the CSS border-radius feature (and one or two other features too) which is available in all other browsers. There are whole range of other little scripts like this which can improve the functionality of IE.
Use a library like JQuery which does all this work for you. With JQuery, you can be much more confident that most of your Javascript code is going to work across all browsers.
If you must use browser detection to tell if the user is running IE (and I accept that there are some occasions when it is necessary), then use conditional comments, as per #David Thomas's answer. But do so sparingly, after considering any other ways around it.
if(browser=="Microsoft Internet Explorer")
== for comparison, = for assignment
Place it in the head tags.
I am looking at the custom attributes feature of html 5 here at this link
http://ejohn.org/blog/html-5-data-attributes/
This look like the perfect thing for when I am using jquery/javascript.
My question, Is HTML 5 supported by all the main browsers?
example
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
Various portions of HTML5 are supported by the different browsers, for various definitions of 'supported'.
Several parts work right now, reliably. The data-* attributes you ask about in your question work just fine in every browser, even IE6; however, nobody yet supports the fun "dataset" method to access them. As long as you're fine with just grabbing them by the full attr name, you're golden. I use them to store state all the time in my webapps, as they're the officially blessed method for doing so.
Wikipedia has a good summary of the various support levels across browsers: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
Parts of HTML 5 are supported by Safari, Firefox and Opera, but they are not necessarily incorporating the same parts.
It seems that Firefox is the most ahead, from my experience, but it will be years before the majority of browsers users use will support it.
So, until then we will need to continue trying to use it when we can, in browsers that support the new features, and having workarounds for users that haven't updated yet, or continue to use IE.
Use some services like
http://caniuse.com/
For example for your question - http://caniuse.com/dataset
As you can see all modern browsers support it
Also you can use something like http://modernizr.com/ in your code (it's already included in http://html5boilerplate.com/)
PS: just notified that this question is too old, but it was linked to some other question i checked before
No.
The Wikipedia page "Comparison of layout engines (HTML 5)" does a good job of listing which engines have implemented which parts of HTML5.
There is currently a lot of red boxes on those tables, and that is based on the latest development version, not the version most users will be using.
Full support of HTML 5 is a way off BUT...
Creating custom attributes is nothing new and is likely to work in all the main browsers - but test to be sure that it will work in your case.
We can use HTML 5 now, just not all of it. A lot of HTML 5 is about formalising the way that HTML is currently used and ensuring backwards compatibility - so if a feature works in browsers now, use it.
Almost no web technology is completely supported by any browser; no bugs, quirks or issues.
HTML5 is designed for backwards compatibility, and it will hardly break your site (take <input type=url> for instance - non-supporting browsers show an ordinary text box, Opera lets you select an URL from history/bookmarks). I'd go by the approach: develop, try in the browsers you need to support - if it works, awesome. If not, don't use it. Just like with other specs.
HTML5 isn't even close to being completely supported on any browser yet, and some browsers (notably the IE's) have no intention of supporting it at this time.
no, not yet. wait at least until gecko and webkit support it.
ps: you could use html 5 with data attributes anyway, if you need it for javascript purposes. or choose some other unused attributes (title, abbr, ...others?)
As of August 25, HTML 5 is still a working draft.
http://dev.w3.org/html5/spec/Overview.html