Does HTML5 support backward compatibility in mobile?
If the browser is not support HTML5 while run a html5 page in mobile browser, whether it will throw error when audio/video is not support or we able to customize the error/alternate code. Also design wise it supports rest of tags?
Thanks in advance,
Sri
As far as I am aware, unknown tags will be ignored.
I suggest you use a script such as modernizr to detect the support of the functionality you are looking to use. You can then code progressively, as you intended.
As my opinion..
I would suggest you to use JavaScript Hack.
As old browser would simply ignore new Tags used in HTML5 and style associated with it.
Use
document.createElement('HTML5tag');
where HTML5tag is the element/tag you want to use.
1. this will create an element and the style associated with that element will work properly.(even for old browser).
2. this should be used for every new html5 tag used by you in the head section before any style definition.
Related
I want to lay out a website with html5 semantic markup. I'm wondering; if I use html5 and style the sections like I do with html4, will it still render properly? I don't want to use really up-to-date html5 stuff like canvas, I just want to future proof this site.
You can do this by using HTML5 Boilerplate.
It comes with Modernizr (which includes html5shiv), and a lot more as well.
html5boilerplate.com
You can definitely do this with the use of a shim - this will allow you to use all the HTML5 semantic tags and will convert them for older browsers. Check out html5shim here: http://code.google.com/p/html5shim/
and just include it in your code how they show:
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
Any HTML5 specific tags (such as <nav> or <header>) will be ignored by the browser. The raw tags won't appear on the page (you won't get the word <nav> appearing or etc), but they simply won't do anything. Note that any styles applied to them also won't work - I found this out the hard way. If you want to style a nav bar, then don't style the <nav> tag; style the <div> or similar tag inside it.
As for HTML5 'utilities' such as <video> or similar, you're better off using a Javascript library that detects the browsers capabilities and uses the appropriate code. Jplayer, for example, allows you to embed video and audio that uses HTML5 if available, and Flash if not, while still using the same HTML interface.
If you want a really show-off feature like a Canvas-powered system, then it's best not to use this for the main area of your site, and just add a little note saying "Please upgrade to a modern browser to view this properly" if you can detect it's not working (which is possible by using var check=document.createElement('canvas') then checking whether the value is undefined.
If you visit a site that uses Flash, and you don't have Flash installed on your browser, a message will be shown to you to install Flash. A similar procedure happens when Silverlight is involved instead of Flash.
What happens if a browser does not support HTML 5? Will I have to install something to get HTML 5 support in that case? Is that even possible?
Browsers will ignore elements it doesn't support and it won't apply css styles to those elements either. You won't get any explicit message that the browser doesn't support HTML5. You can, as the page author, provide your own message if the browser doesn't depending on the circumstance. You can, for example, provide a message that will display to the user inside a video or audio tag.
Well what happened earlier, wenn browsers supported HTML3 and you used HTML4? Nothing really, and that's what's going to happen for HTML5.
Flash and Silverlight are handled using browser plugins, so the browser can warn you if the plugin is not installed. HTML5 is not a plugin, so what you could do is to use JavaScript and check for the browser version.
Users won't get a message if their browser doesn't support certain html5.
What you could do is check what html5 or css3 you need, and look at http://caniuse.com/ wich browsers are compatible with those functions and then use a script to give older browser users a notification to update to a newer browser.
but what happen if a browser does not support HTML 5 ?
Exactly the same as what you described:
If you see when a site uses flash technology ,and you have not flash
component installed on you browser, a message will be shown to you to
install flash(same as silverlight)
This feature detection has absolutely nothing to do with HTML5. It's the implementation of the <object> tag that allows you to specify an url to download the component from if the browser hasn't installed it. It is a browser dependent implementation though.
#Ali Foroughi I didn't notice a clear cut work around if you have HTML 5 elements in a website and how to get older browsers namely IE 8 and older to display the new HTML5 elements. Other answers are true that the HTML5 element won't display correctly or at all but what can be done about this.
There a couple things you can do to either "teach" older browsers to handle HTML5 correctly either by CSS, JavaScript, or an HTML5Shiv. These methods are explained here.
Of course these can't be implemented by the end user but by the websites designer/developer.
Was searching for the answer as to a work around in case someone has an older browser and HTML5 elements are used. I figured if there are work around's for certain CSS styling by using some sort of webkit in the CSS file surely there is for HTML5.
I want to create a webPage using HTML 5 which will use all the attractive features of HTML5 i.e. audio, video, autofocus, placeholder, required, email, url, number etc. and the webPage should also have support for the browsers which dont support HTML5 like IE or some versions of other popular browsers such as Chrome, Firefox, opera etc.
How do I start working on that, as You might guess that this is just for the experimental purpose and I am supposed to it asap... so please suggest me any help, site or blog or tutorial or example.. I have seen hhtml5Doctor.com and diveintohtml5.ep.io ... the sites are of great help...
Use progressive enhancement. The diveintohtml5 already tells you how: http://diveintohtml5.ep.io/detect.html
html5boilerplate is a good start, it includes modernizr/html5shiv for barebones support of the new elements.
Other things may need javascript/flash fallbacks.
You can make use of the fact that browsers will ignore tag that they don't understand. So, for example, you can have an audio tag and inside that put an object tag for a flash audio player. The HTML5 browser will understand the audio tag and do the right thing, and ignore the child content. An older browser will see the audio tag and throw it away beacuse it doesn't understand it, but will render the child contents of the tag instead (the flash player).
swfobject and Modernizer are really nice tools... u must give them a try... I would personally recommend swfObject due to very good support.
I have been looking into HTML5 and CSS3 and have been liking it quite a lot.
Got around the modernizr API, but am stuck at one point, and that leads to further confusions:
How will I write a code that caters to the situation of non-compatibility between browsers ?
This leads to the following confusions:
if I write the doctype as <!DOCTYPE HTML> and my page is accessed in IE6, then ho IE6 will handle the page?
If I try to include <video> tag and the page is again accessed by IE6/IE7IE8 (which don't support this tag), Then how am I supposed to be rolling back to flash for them? Should I use some JS to show/hide the content appropriately?
I would love to hear some thoughts of you guys.
If needed, please mark this post as a community wiki.
Thanks!
To answer your question directly,
You have to realize that the new <!DOCTYPE HTML> doctype is only used to trigger standard compliant mode in browsers. Traditionally, this (known as doctype switching) is the only thing the doctype is used for from the browser's perspective. So in short, nothing will happen change with respect to IE6 if you are using a doctype that already trigger standard mode.
You can use a script like Modernizr to do feature detection. This will allow you to use Flash as a fallback only in cases when its needed, as well as serve up the correct type of movie to browsers that support them. Even if you do not use the script, you can still look at its source to learn how this is done.
Alternatively, the <video> and <audio> tag specifically allow for fallback content to be embedded within them. This will means that you can simply wrap your Flash content with <video> tags, and if the browser does not support them it will simply use the fallback content.
Three things you need:
1. Check the list of supported features.
2. Detect HTML5 features
3. Use Graceful Degradation
I want to use HTML5 because it supports in Iphone also and I really liked its capabilities but what can I do if it is not fully compatible with all browsers? Specially IE family. So is there a way by adding some js script e.t.c. so that HTML5 and its js api work normally in IE also as it works on other browsers like chrome, firefox and opera e.t.c.? So that I can use it without thinking of browser compatibility issues. There are also many game engines in html5 but what if this is not supported major IE browsers. Or can some one tell that how much advantage can I take of html5 without thinking of compatibility issues?
Thanks in advance
You can use http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/ and you're good to go.
For some other cool features, like video in old IE, you need to use workarounds like Flash for video and Javascript libs for canvas.
Simply put, if the markup is valid in HTML 4, change the Doctype and it will work as HTML 5.
If you want to use the new elements like <article> or <footer>, you will need to include a small javascript snippet in order to register those new types.
document.createElement("article");
document.createElement("footer");
This will make these new elements usable and stylable like an ordinary <div> element
Polyfills let you use new HTML5 apis on older browsers. The Modernizr project keeps a list of good ones: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills