I was wondering whether there is a way to make html5 code visible in Internet Explorer 7 or less.
For example
<div id="container">
<header id="header">
something
</header>
</div>
In Internet Explorer 7 the header is not shown at all.
I found a workaround here, a IE HTML5 enabling script, which creates the html5 elements with javascript. But what happens is that the <header> tag looks not at all as it does in other browsers.
So my question is, is it too early to use HTML5 yet or how can I make it cross-browser working?
This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:
http://www.modernizr.com/
There are 2 important things to consider before using HTML5;
Target audience (with their browser choice)
HTML5 Useful features on your site.
If you are sure that a lot of your users are on IE8 and below, you should avoid using HTML5 almost entirely.
So when you say "is it too early to use HTML5 yet", the answer is it depends on your user base.
IE has good support for HTML5 only from version 9 and above..
There is no way by which you can make HTML5 advanced features to work on IE7/8...The html5.js you referred to just makes your CSS to "not ignore" any HTML5 elements and apply styling..It does not do anything further than that..
For all major browser support and score, you can check out html5test.com
Apart from that, you may also check out a very nicely explained tutorial on HTML5 called as DesignMobileWeb available on
http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
Please do remember that if you are going to have a basic site, using HTML5 should be avoided.
You should consider HTML5 only if you plan to use Local Storage, Offline Access and HTML5 Forms for mobile devices, etc
IE < 9 doesn't recognize the HTML5 elements and will not generate them. So I use this bit of JS to do the generation:
var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');
for (var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
I use this conditional comment to check whether I need to run the script
<!--[if lt IE 9]>
<script src="js/html5_createElement_for_IE.js"></script>
<![endif]-->
Of course, you will need to style the tags for IE < 9, but you would need to anyway.
Start with this: http://html5boilerplate.com/. It should solve most of your problems. It works great.
IE versions < 9 will not render elements that they don't recognize, so the new HTML5 elements, header, etc are off the list. Other browsers render unrecognized elements, but without styling.
The way around this is to "show" the new elements to IE by squirting them into the DOM directly using JavaScript. You only have to do this once on each page view.
The two standard ways to do this are:
The Google Shiv: http://code.google.com/p/html5shiv/
Modernizr: http://modernizr.com/
Modernizr also does a whole bunch of other things to do with feature detection.
Try using chromeframe - http://code.google.com/chrome/chromeframe/
By itself though you cannot use most of the cool new features of HTML5 with IE7. It just isn't implemented in the browser plain and simple.
I check whether or not the requesting client supports the application/xhtml+xml mime type (it is part of the accepts header sent the request).
If it does not, then I send the client a version of the page using div nodes in place of most html5 semantic nodes.
This is very old... Damn... But I guess this could help someone, though
I used this meta
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
And fixed everything without using any more scripts...
Found it here:
http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/
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
We're implementing CSS scrollbars on our website, and they're working fine with all browsers apart the older versions of IE (like IE8).
We cannot get IE to process the same CSS/JS rules in order to obtain the same output.
As we've noticed that some websites have managed to make explorer display the custom bars instead of the standards, I would like to know if someone has a pice of code to share that make the CSS bars appear exactly the same way independently from the browser that the client is using.
Thanks in advance!
There's no such magical piece of code to make website look the same on all browsers. Each problem is css/js is to be treated specially, especially on IE.
If you want to apply css rules to only internet explorer, you could make use of IE Conditional Comments
I used this one for custom scroll bars and it supports all major browsers, might be you have used these one..!! anyways here is link
http://www.hesido.com/web.php?page=customscrollbar
Write custom css for IE8 using conditioanal comments
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
.ie8 .bar {
your code...
}
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.
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.
Addressing all the browsers back to IE6 is quite challenging. Every browser supports different features of the specifications. Is there a guide on a safe subset of CSS which can be used across browsers (IE6,IE7,FF1,FF2,Safari,Opera)? That way I wouldn't have to test my style sheets in 6 different browsers after every small modification - and adjust to their irritating quirks.
Here is a valuable reference.
http://www.quirksmode.org/css/contents.html
Also, for IE and select other browsers - conditional comments.
http://msdn.microsoft.com/en-us/library/ms537512.aspx
I use them this way. I override any IE specifics.
<link rel="stylesheet" type="text/css" href="theme.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="theme-ie6.css" />
<![endif]-->
In my experience while some CSS attributes might be supported by all browsers they don't always behave the same. Even some of the most basic attributes, like margin/padding/float, can cause things to look different between IE and everything else.
Usually the overall site template is the most complex. The way I do things is once I get that template written, and the simple classes to be used by the actual content, test a few sample pages in all the browsers. Usually you won't throw any major wrenches in the system once you're just working on content (although I'll always do a paranoid check here and there).
Both links from Daniel and jleedev are valuable resources. Your best bet in many cases is to use a reset stylesheet (just one example) that will minimize the rendering differences between browsers.
Dean Edward's IE7 is a JavaScript include that will add many standard CSS functionality into IE6/7 (such as <abbr> and support for pseudo selectors).
I recommend developing for Firefox/Opera/W3 spec, then using conditional comments for IE6/7.
I have found a book called Pro CSS and HTML Design Patterns, which contains pre-tested snippets of reusable CSS. This is very close to what I actually needed.