I'm building a responsive design with HTML5.
At first I used Modernizr and the CSS reset of HTML5 Boilerplate, but of course the html5 elements' classes and ids were not recognized by IE<9.
What I need most therefore is full support for html5 elements, and preferably a good display fallback for images with "max-width", without using CSS hacks.
Which of these options should I follow?
Include html5shiv and ie9.js with conditional comments
Include only ie9.js for all browsers
Forget about ie9.js
Thanks a lot!
html5shiv and ie9.js does completely different things. html5shiv resolves a bug in older versions of Internet Explorer where arbitrary elements (such as those introduced by HTML5, which the browsers predate) are not stylable by CSS. ie9.js attempts to fix certain rendering bugs in older versions of IE and add support for newer CSS3 features. The question of which one to include comes down to what you mean by:
full support for html5 elements
Do you need to use these elements and support older versions of IE? Then you'll need html5shiv. Do you need to use CSS3 properties and selectors? Then you'll want ie9.js. Including ie9.js solely to add support for max-width however is not a good idea.
And one more thing:
Include only ie9.js for all browsers
should never be an option - doing this will only adversely affect your page's performance on other browsers.
Modernizr includes the shiv code to add the new tags to IE<9. Make sure you add the link to it in the head section, before other javascript links/code.
Just start from the index.html and other files file provided in HTML5BoilerPlate and add your code in.
Related
Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?
use a doctype to make the page render in standards mode instead of quirksmode
Check out what properties in CSS you can use and what browser supports them
If you plan to use HTML5/CSS3 tech, then you should check the property and what browser is currently implementing these new tech
You can reset the CSS using a CSS reset to start off from scratch in your styles
If you need a stable ground to build on for your page, consider using a "base" style framework like Blueprint CSS's typography and forms CSS.
Use a toolkit like jQuery, Mootools, Dojo etc. This will speed up your JS development. But NEVER let JS do styling and style fixes. That's the work of CSS.
Ofcourse, never assume your design works at all. You must test on all available browsers, on the current version, 2 versions back, and on betas.
One important thing to remember is that different browsers respond differently to errors. So make sure your HTML and your CSS pass the W3C validator error free. That will go a long way in ensuring your site will look the same on different browsers.
Also, don't use quirks mode. Different browsers have different quirks!
If you are referring to some of the CSS3 styles, then I would suggest you look into CSS3 PIE.
Short answer is no but you can check which properties are not supported in IE with caniuse.com
http://selectivizr.com/ or http://css3pie.com/ will help you but they both won't work if js is disabled.
Read this if you're using html5 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
And what Joseph said.
You could always check the results with http://browsershots.org/ but it's just a screenshot so it won't give you an idea for example of how things behave when you click/hover on them etc.
The short and simple answer is yes, you can target the older versions of IE using a combination of Modernizr and HTML5 Boilerplate. Modernizr is now included in the HTML5Boilerplate package.
For more details of an HTML5Boilerplate approach to this:
HTML5 Boilerplate, IE7 & 8
I have read a lot about adding HTML5.js for IE7/8 support. Even though the documentation says that adding html5.js just causes IE7/8 to not ignore HTML5 tags and apply the styles.
I am really confused as to what it does, like does it have any impact on CSS3 styles working on IE OR it just causes CSS to be applied to HTML5 elements.
Could i please get to to see an easy example with/without HTML5.js on IE.
html5.js works by creating polyfills via JavaScript that specifically enforce certain rules of html5 elements in browsers that do not support them. but even after the js turns them "on", you are still going to have to target them via css to enforce styles. check out this fiddle in any browser that doesn't support html5, then uncomment out the script element and view it again. you'll see what i'm talking about http://jsfiddle.net/TR8z5/
If I recall correctly, without html5.js, older web browsers will just ignore tags it doesn't recognize, essentially showing nothing. With html5.js, older browsers will recognize html5 tags and will therefore be able to render and apply CSS.
Nope, I guess not.
CSS3 will not work on older browsers, no matter what you do.
I've been developing on the web for a while now and most of my cross browser compatibility consists of using IE css hacks, which is not standard by any means so I'm just curious how do you handle cross browser rendering issues when developing web applications? I've never worked for a larger company, so how you do think (of if you have some experience working for a large company) they handle these cross browser differences? I would love some professional feedback on this subject or perhaps some tips.
We start our projects by using a reset stylesheet (Eric Meyer's is good), which fixes most cross-browser display issues we've ran in to.
My personal strategy is to make everything look right in Firefox first, which usually also takes care of Webkit-based browsers, then go back in and fix IE issues using separate stylesheets linked inside of conditional comments.
For some CSS3 that IE<=8 doesn't support, we use CSS3 PIE.
Finally, if you haven't already, check out Modernizr and html5boilerplate (html5boilerplate implements Modernizr). html5boilerplate is a good starting point to help alleviate cross-browser issues.
My personal strategy is to start with a reset stylesheet (I use Eric Meyer's as well), to reset default styles by browsers.
To solve issues with particular versions of IE, I use conditional comments instead of CSS hacks, so that my styles for CSS are more likely to work in IE, if IE fixes CSS hacks.
Using a CSS framework such as Blueprint can provide basic styles that you can override with your own styles, and provides a basis for your styles so you don't have to duplicate some basic styles. It also provides good compatibility with IE's CSS quirks by using conditional comments as well.
It's usually best to test in a variety of standards-compliant browsers, and then apply CSS fixes to IE. Usually, to give pseudo-CSS3 styles to IE, you need to investigate IE's filter, a non-standard way of applying styles. Microsoft's MSDN documentation is fairly comprehensive on this note. Be wary—anti-aliasing may disappear when you use filter styles on an element.
If you need support with IE for new HTML5 tags, such as <section> and <header>, use an html5shim.
What are the features of HTML5 that can be reliably used today?
Microsoft has some cool HTML5 demos, but what part of it is classic EEE and what is them catching up?
Example of useful feature I found on SO: pushState.
Please give more thought than a page with comprehensive lists of tags and attributes of HTML5.
#Jan Zyka's http://slides.html5rocks.com answer is a great example. (Thank you!)
What are you actually using in production code today?
There is a site called When can I use... which lists a variety of HTML5, CSS3, and other modern web standards, and gives an indication of which browser versions support it.
Whether or not you can use a feature depends a lot on who your users are. If you're targeting cutting-edge web developers, then you can likely rely on them having much later versions of browsers than if you're targeting corporate accounting. So, you will need to decide which browser versions you must support, and do appropriate progressive enhancement or fallback to support older browsers while introducing newer features that they don't support.
Some HTML5, CSS3, and other features can be used in older browsers using "polyfills," which are implementations of missing features using JavaScript, Flash, proprietary features, and the like. For instance, you can use <canvas> elements in older versions of Internet Explorer by using ExplorerCanvas, which implements the HTML5 <canvas> element using JavaScript and Microsoft's proprietary VML. The "When can I use..." site lists polyfills for many features, so check the polyfills checkbox if you're willing to use polyfills.
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Canvas)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
http://caniuse.com/
https://developer.mozilla.org/en/HTML/HTML5 (what is implemented in Firefox)
List of HTML5 features that are implemented in IE8:
<meta charset="UTF-8">
the contenteditable attribute (making any HTML element editable)
the autocomplete attribute on form elements
the onhashchange event
drag and drop
data-* attributes
List of HTML5 features that are implemented in IE9 (additionally):
<canvas>
getElementsByClassName
<video> and <audio>
the new semantic elements(<section>, <article>, etc.)
inline SVG
Note: all of the above are implemented in the modern browsers.
Check out http://slides.html5rocks.com/. It's really nice and updated regularly.
But don't try it in IE8 otherwise you might be disappointed ;-)
This page on the Browserscope website lets you choose versions of the same or different browsers (both desktop & mobile) & see how they stack up in supporting HTML5 features.
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