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
Related
We have some contractors working on a mobile project and they kept insisting that we had to use the HTML5 doctype to use any HTML5 features, like the doctype was a great big boolean switch. I had to keep telling them that doctype really didn't matter that much. You could use HTML5 input types and touch events on an application/xhtml+xml page with a XHTML 1.1 Strict doctype, and the browser could care less. Likewise, you could use the <center> tag with the HTML5 doctype and the text will be centered.
Obviously there are caveats about lower versions of IE going into quirks mode, but that's not an issue in our scope. I personally didn't care what doctype they used but was bothered by their complete lack of understanding on this. At least, until I saw the jQuery Mobile page setup documentation:
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
Are there any features of HTML5 that require the new doctype? This documentation is just wrong, right?
Browsers do not do anything magic with the <!DOCTYPE html> beyond putting the page into standards mode, and so it is equivalent to any other doctype that does the same thing.
However, it is a testable object in JavaScript, so it is conceivable that a piece of JS could do something stupid like switch its behaviour depending on the presence or not of a given doctype. Without going through the code line by line it's impossible to know whether the statement in the jQuery Mobile page setup documentation is specifically true, or just general advice that if followed will result in the desired outcome.
As far as the common Web browsers running on desktops and laptops are concerned: The browser doesn't care very much about the doctype - it will use new features even if your doctype says they aren't allowed. The doctype is really for the validator; your page won't validate unless the features you're using are allowed by the doctype you're using.
I can't actually speak for mobile devices, since I have next to no experience with them, but it seems like they would work similarly, since they're using the same browser rendering engines and attempting to access the same Internet.
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 am looking more heavily HTML 5 now, but I keep coming back to one issue and that's the practicality of using it without shooting myself in the foot.
Most of the site I work on are for SMEs that target customer bases that typically use IE7 or 8 and a surprising number don't enable JavaScript- something stupid like 10 - 15%.
This means I cannot rely on visitors having up to date browsers and I can't rely on the JavaScript fixes (such as modernizr) to compensate. I've seen some very powerful arguments for how HTML5 can really speed up Dev time and makes things so much easier, but how do you maintain graceful degradation when implementing?
the extent of HTML5 implementation you're looking at is the key to a solution. let me illustrate this with the following:
take for instance now the HTML5's video attribute - it is a fairly common practice to put in place a flash fallback for incompatible legacy browsers so that regardless of the situation, everyone gets to view the video.
question here is: "so what do I use as the markup? HTML 4.01, XHTML 1.0 or HTML5?". the answer, naturally, would be to use the HTML5 markup because the video tag is in fact a HTML5 one. in part, the answer is not wrong, but it is also not completely correct; at this point of time when browser support for HTML5 is not full and the markup has yet to hit the recommended stage it will be unwise to mark it up at HTML5 because legacy browsers will just give you a blank look. Instead, if there is to be any graceful degradation of sorts, then your HTML document should be marked up as XHTML 1.0 or HTML 4.01 and then included with the desired tag, which in this case for an example is the video tag. Legacy browsers will render our DIVs and CSS styles correctly but will not recognize the video tag and will instead go to the Flash fall back video.
so i suppose that once you have a more targeted idea of the extent you'd like to use HTML5 within the constraints of legacy browsers and the lack of JavaScript support, you should be more than able to figure a way out
also, though HTML5's support an compatibility is not yet fully realized, it doesn't mean we should avoid it like a plague. give it a shot and fall back on some common methods like the example illustrated with the video tag (read diveintohtml5. it's a fantastic resource!).
just my two cents' worth. hope it's helpful some how.
(heres an example of a site that I designed and co-developed with an agency - http://www.blueprint.sg. it's marked up in XHTML 1.0 but uses the tag for a full screen background video. falls back to a backgroun image for browsers unable to recognize the tag. PS: apologies in advance for the not so good design and the annoying playing of the video which is currently set at "autoplay" so it'll play and load at the same time.)
If your users use IE7 - 8 and often have disabled JavaScript, then HTML5 isn't for you right now, for these customers anyway.
Horses for courses as they say and in your case it would seem that the safe bet is to stay with HTML 4.01.
Users with JavaScript disabled can create many frustrating circumstance for any web developer. But really pretty much the only thing you can do is alert the user of the limitations, I generally use the NoScript html tag.
Dear all
how can i set the DOCTYPE element in HTML to be dynamic depending on the browser being used?
Why do you want to do this? It's best if you solve the root problem. HTML is meant to be served as static data which means that if you add caching at some point then the whole "content negotiation" trick will fail. Also note that browser user agent sniffing is hard to do 100% correct and you'll need to keep updating your logic as time goes by (and new browsers and versions are released).
Guess you had some troubles on page display, so you decide to change to doctype potentially to quirks mode or html4 standard? If this is the case, I'd still recommend you spend your time on tweak styles better than changing the whole page doctype.
You don't. You just use <!doctype html>. Doctypes are only used to determine whether to use standards mode; changing them is just a waste of resources.
It's not possible using only client side code.
If you don't have server side language at your disposal, build several "versions" of each page, each with different doctype then redirect using JavaScript to proper page according to browser. If you choose this path let me know and I can come with sample code.
Best solution is to use <!doctype html> it is a standards doctype and is now supported in all browsers since HTML5 is backwards-compatible
Plus with more and more HTML5 support being added by the browsers, it's time to prepare for the change.
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.