I'm building a new website and I'm wondering what happens when an old broswer (IE7 for instance) requests a page and the doctype is HTML5? It's currently set as XHTML transitional but I'd like to add HTML5 videos. Should I switch to an HTML5 doctype?
Thanks.
The HTML5 doctype was chosen as it is the bare minimum required to trigger web standards rendering mode in browsers that support it. It'll work fine in older browsers, but they won't support any of the HTML5 features or tags.
You can change the doctype right now if you want, but you won't get any new features.
In regard to the tags in HTML5, you can make old version of IE recognize and allow styling of the new tags with an HTML5 Shim. The Modernizr script also includes a Shim.
For HTML features like video and audio you'll need to use a technique called pollyfilling. These pollyfill libraries automatically fill in missing functionality for browsers that don't have it.
There are pollyfills around for most of the HTML5 features and for some of CSS3 too.
The Modernizr wiki has a good list of common pollyfills.
Many of these use the feature testing of Modernizr to determine if they need to do anything.
What happens for video is that the library checks for HTML5 availability, and falls back to flash if it is not available. Most replace the HTML5 native chrome with their own look and feel so that it looks the same regardless of which underlying code (native or flash) is being used.
For video mediaelement.js uses this approach and I would recommend that as a starting point.
The issue you'll have with HTML5 videos being inaccessible in older versions of IE is going to be the same regardless of the doctype. The standard practice, at least until HTML5 has wider support by browsers, is to use libraries that will gracefully fall back to Flash (or whatever your preferred fallback is) if the user's browser does not support HTML5. I've personally had success using JWPlayer for exactly this task.
Related
I am new to the responsive design world.
I am using http://www.responsivegridsystem.com/ in my design. It tells to add following markups
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>
Since media queries are not working in IE8, as per this question IE7, IE8 support for css3 media query I am using the following markup too
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Do all these are needed? Whats the difference between html5shim, modernizr and the css3mediaqueiries?
Do i need to use modernizr? Because I am not doing anything with that in my js file like jQuery.
They serve three very separate purposes, all can be very important, but not all (if any) are always needed.
html5shiv aka html5shim
html5shiv is a script that allows you to properly use html5 elements in older browsers, Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x, at the time of this answer.
So, what does that actually mean? Its pretty simple. There are a number of new elements in html5 (like <section>, <aside>, <header>, and <footer> to name a couple), as well as the ability to create your own custom elements. That means that we can write more semantic (and clearer) code. All great things, but unfortunately, older browsers don't apply your css to elements that were not one of the ones that they shipped with support (<div>, <p>, <span>, the normies). Luckily #sjoerd-visscher dropped some knowledge and saved the day. He discovered that if you use document.createElement to create any new element, it sort of registers it as one of the supported elements, and the css works!
This meant that you could actually use html5 elements in production. It was a huge deal at the time, and luckily becoming less and less important as those older browsers are dying off.
It has since expanded to add some basic styles for browsers, in addition to registering the elements.
If you don't have to support Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), or Firefox 3.x., then you DO NOT need to use html5shiv.
css3-mediaqueries-js
css3-mediaqueries-js adds support for a css feature called media queries in browsers that don't support them. If you aren't sure what that means, check out sites like The Boston Globe, Mitsubishi Australia, or techcrunch, and then resize your browser.
Media Queries allow you to apply css conditionally, based on some attribute or combination of attributes of the browser (width, height, etc). They are incredibly powerful, and power a lot of modern web design.
Now, the question is whether or not you actually need something like css3-mediaqueries-js. It was once in vogue to do so, but it is becoming more and more common for people (myself included) to recommend mobile first design. This means that the base styles should be a mobile site, with media queries adding to the base design, instead of hiding/removing some things. As a result, browsers that don't support media queries (the ones that css3-mediaqueries-js is intended for) get served the "mobile" design, rather than polyfilling and then applying the media query during every resize. Older browsers generally mean older, slower, and smaller computers. Not only do they lack support for media queries, their javascript engine is hundreds (sometimes thousands) of times slower than modern engines that power current Chrome, Firefox, and IE. All that extra work on something that isn't nearly as powerful to being with can easily result in a degraded experience for the users of those older browsers.
Whether or not you should use it is ultimately up to you, but make sure to ask yourself what is best for the user, not necessarily the designer :]
Modernizr
Modernizr is a feature-detection library, that allows you to check for new web features in a simple way. By default, ((you can build a custom version here)[http://modernizr.com/download/], changing anything you want) it adds classes the <html> element on the page, making it super easy to modify designs based on its results.
.css-gradients .background {
background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
background: url(gradient.jpg);
}
(of course that is a super trivial example, and you can accomplish the same thing using a basic fallback without modernizr, but it is just meant to serve as an easy to follow example)
It doesn't actively add or remove anything itself, but in combination with something like yepnope, you can test for a feature, and conditionally add a polyfill for that feature.
Something like this
yepnope({
test : Modernizr.mediaqueries,
nope : ['css3-mediaqueries.js']
});
would check to see if mediaqueries is support in the browser, and if it isn't, it would load css-mediaqueries-js to polyfill support for it.
HTML5shiv is for emulating html5 element in ie8.
css3-mediaqueries-js and respond js do similar task(supporting media queries)
Modernizr is actually a browser feature tester which include bunch of css classes in ie and later applying manual style for ie.
Best Usage is to use-
selectivizr with html5shiv
I am having quite a horrible time. We have a massive site that has no <DOCTYPE> and when I run it with IE10 it goes into quirks mode and after some CSS changes looks ok. As soon as I add echo "<!DOCTYPE HTML>";
The complete site looks terrible and the CSS is not looking as it suppose to. It turns the browser mode to IE10 and docmode to standard. Is there a way to keep HTML 5 functionality but use IE5 Quirks mode or just Quirks mode so the CSS will look correct?
No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.
Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.
However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.
You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.
Simply add the following to the top of your CSS code:
* {box-sizing:border-box;}
This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.
This should sort out most (if not all) of the layout issues you've been having.
Hope that helps.
No, there isn't. The modern engine that includes the new features and the engine for emulating ancient, buggier browsers are separate entities and you can't mix and match parts of them.
As far as browsers other than IE are considered, you can add tags and attributes introduced in HTML5, without using any <!DOCTYPE>. The page will not conform to HTML5 then, but this is just a formality as such. Browsers do what they do, interpreting tags and attributes as they have been programmed to. There is no “HTML5 mode” in browsers that you would need to trigger with a <!DOCTYPE> or otherwise. Just try it. Throw in some HTML5 novelties like <input type=email> or <details>, and you will see that they work if the browser supports them in the first place, no matter whether there is a <!DOCTYPE> or not.
You would then have difficulties when using a markup validator, but that’s a different issue.
Quirks Mode is a real mess, with dozens of undocumented and poorly documented phenomena. If a page works in Quirks Mode and you then make browsers render it in Standards Mode, literally anything may happen, ranging from no effect to total disaster. So such a change is usually pointlessly risky. Keep using Quirks Mode for old pages developed to use it, and create new pages to work in Standards Mode (and possibly to be HTML5 conformant).
Quirks Mode affects styling and to some extent scripting. It marginally affects the interpretation of some old HTML attributes. But in most browsers, not the way new HTML5 features work.
However, IE is particularly quirky. On IE 10, the above seems to apply. On IE 11 Preview, deviations have been reported. And on IE 9, some of HTML5 novelties that it would otherwise support are not supported in Quirks Mode, such as the canvas element. So if you intend to add substantial use of new HTML5 features to an old page that now works in Quirks Mode, you may need to consider changing the page to Standards Mode first. Depending on the impact of Quirks features, this might be best done by rewriting the page, or it might be “only” a matter of redesigning the use of CSS to conform to CSS specifications.
[Answer corrected Oct 15, 2013.]
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.
After all the latest news and talk about HTML5, I would like to know whether I can use HTML5 to create a website as of now. I mean, some features are supported by few browsers, while few features are not yet supported. So is it possible to create a full-fledged website at the current state?
The question is not whether you can create a full-fledged website, but whether you need its functionality to be identical in all browsers. The answer to the former question is yes. The answer to the latter question is still no.
I built a site in 100% semantic HTML5, tested only in Firefox, Chrome and Safari. When I was done, I added these three scripts and loaded it up in IE6 and IE7 - looked pixel-perfect! ok, perfect is an exaggeration. It doesn't look exactly the same, but it looks fine e.g. no broken layout parts, everything is legible and functional.
HTML5 Shiv script - Add HTML5 element support
ExplorerCanvas - Add <canvas> support
IE PNG Fix (IE6 only) - Add transparent PNG support
YMMV but these will almost certainly get you at least 90% of the way.
As with all new technologies make sure your website degrades gracefully.
So don't use the new <canvas> tag as the main part of your website, but you can provide a little widget or something(which is not necessary or part of the main content) which uses it.
Or if you use the <video> tag make sure that you have a backup Flash way of viewing the video as well(especially since the codecs supported by <video> is completely fragmented at the moment!)
Make sure that people on older/IE browsers can still see what your site is about and ensure it looks decent to them. I have to do the same thing with the CSS3 features that I make use of in my work.
I would say check your stats first..how many users are still on internet explorer and how important are those users to you. In other words if 80% of your users use a browser that doesn't support HTML5 then I would say don't do it
You sure can. I could write all the things you can do with HTML5 now, however I'll just link to a great article posted at http://html5doctor.com.
http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/
Charlie yes it's possible, but like you said some features are supported by most modern browsers, although not all of the features are supported at the moment . Take a look here: http://html5demos.com/
My ASP.Net application only comes out properly if i am previewing it in Internet Explorer but its the ugliest thing ever if i view in Firefox,Chrome or Safari.
How can this be, and how can this be resolved.Helppppppppp
What DocType are you using? If you're using transitional then IE will be rendering in quirks mode. Force a DocType of strict.
Check out this link here for a good explaination of DocTypes and this link for an explaination of one major way the Doc Type affects layout: box models.
Have you compared the source of the pages in the different browsers? Are they the same, or are there major differences? If not, then you'll need to work on your CSS - and for that there are few better tools than Firefox and Firebug.
If the source of the pages is different, then you're falling foul of an ASP.NET feature that checks your user agent against a list of Browser Capabilities or the Browser Definition files - and in earlier versions of the framework, these were woefully out of date - what rendered as a <div> in IE would come out as a single cell <table> in Firefox.
Since ASP.NET 2.0, you've also been able to change the behaviour of controls with Control Adaptors - for example the CSS Control Adapters will output styled divs for most of the tabular controls (login, registration, repeaters, etc) - which again can be targeted to specific browsers.
I'd advise using FireFox as your development browser, while testing in IE and Chrome as well.
Besides being more standards based it has superior web tools within, like Firebug, yslow and
Web Developer.
Cross browser compatibility is, unfortunately, not trivial. It is a large topic with a lot of material devoted to it. As dove suggests, it's best to use a (relatively) standards compliant browser to do your development work, e.g. FF, Opera, Chrome or Safari and then tweak to make it work in IE 6/7/8 afterwards.
I would recommend against using any of Microsoft's built in theming etc. and stick to pure CSS based styling as much as possible. The ease of making your site cross browser compatible will, to a large extent, depend on your knowledge of HTML and CSS, but I recommend starting with a good CSS framework or at least a good CSS reset (which removes browser specific default styling and allows you start with a common base). Try having a look at Tripoli, which gives you a common cross browser CSS standard (a reset plus rebuild of default styles).
The usual way to tweak the CSS for IE is to use IE specific conditional comments to include an extra CSS file only for IE, e.g.:-
<link rel="stylesheet" href="http://tempuri.org/styles.css">
<!--[if IE]>
<link rel="stylesheet" href="http://tempuri.org/styles.ie.css">
<![endif]-->
You can also include different stylesheets for different versions of IE, see here.