I have some web apps and I have converted the UI to HTML5. With XHTML Transitional, there were a lot of errors when validating. When I converted the pages to HTML5, most of the errors were reduced and I managed to make the web apps fully validated.
My question is, may this may arise any problems on some browsers. I tested some of the pages which I converted in all major browsers, being IE8, IE7, IE6, Firefox, Chrome, Opera and Safari and everything seems to be working well.
I am not using any features of HTML5 like canvas and so on. So there shouldn't be any problems with old browsers right? I converted to HTML5 so the web apps would be of the latest version known to the web and most importantly, they would validate correctly.
Is there any problems which might arise which I should be aware of?
P.S. By converting to HTML5, I mean that I changed the doctype from the usual transitional or strict one to just:
<!DOCTYPE HTML>
Thanks
As Jannis said old browsers don't recognize the new html elements.
If you want to apply the best practice for cross-browser compatibility check this link:
http://html5boilerplate.com/
Many browsers still do not understand the <article>,<header>,<footer>,<section> tags. If you are not using them, there will be no problems.
If you are using them, do like this:
CSS:
header,footer,section,article,nav,aside (and every other HTML5 block tag) {
display:block;
}
Javascript:
document.createElement("article");
document.createElement("header");
document.createElement("footer");
// do so for the rest of the HTML 5 tags.
There is a DRY-solution for the new tags:
https://code.google.com/p/html5shim/
Related
I just made a clean website using HTML4 and CSS. Which worked perfectly fine in Chrome and Firefox. I also checked my site using the W3C CSS validator and fixed all the errors and warnings that were displayed. However, when I checked on IE7. The site was totally misaligned and out of place.
Is there a HTML and CSS validator which also checks for ie7 compatibility?
No, because what you're asking for is not a "validator" but an "invalidator". IE7 has a number of bugs, and lacks implementation of a number of features. There's no way for an "invalidator" to know your intent with anything, and thus, can't tell what you are trying to do.
With your site being a clean html4 and css site, maybe I'm offbase and you've already done this, but just double check that you've included a doctype declaration tag at the beginning of each page. As mentioned above, IE renders in quirks mode without a DOCTYPE specified, and personally i've solved many problems by specifying a doctype in my sites.
The route leads along knowing important CSS concepts and browser characteristics. I think there is no such validation service or tool that points out the hacks necessary. :( But there are some magic bullets against bugs in IE7 (e.g. setting the flag hasLayout=true or position:relative). There is a good collection of bug descriptions and reduction here: http://www.brunildo.org/test/index.html.
I recommend you start using a CSS reset file. This will reset all default css. These default css settings are different for most browsers. If you do not override them manually, you give the browser the control on your layout. And that's not what we want, aren't we?
I suggest you to upgrade you html to some newer version (html5 if possible or) at least xhtml 1.1, I think the problem is that IE7 is working in "quirks mode".
More information about Quirks mode here
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
I'm overhauling my blog (http://gilesvangruisen.com/) and I'm going to be pushing new technologies as much as possible.
I'm a web designer/developer and the browser percentage is as follows:
42% Firefox
39% Safari
7% Chrome
7% IE
Is it OK to use the HTML5 doctype for my "rethunk" site?
I thank you.
-Giles :)
You can safely use the HTML5 doctype <!doctype html> and it will just render as HTML strict on most browsers, including IE6. Only caveat is that the new HTML5 elements (i.e. header, footer, input type="number", etc) isn't directly supported by all browsers, including the current versions.
You should feel comfortable using HTML5. To detect which browsers support some of the next generation browser technologies, you should use a tool like modernizr.
This site is really useful for comparing browser support for features: http://caniuse.com/
Also, you can click "Import stats", which lets you link your Google Analytics profile to the page so it tailors the responses to your site's browser access numbers.
I would give serious thought to using the HTML5 Boilerplate as a starting point. It's HTML5 (obviously) but has been tested for compatibility with a variety of different browsers to make sure it still displays correctly everywhere. It also has jQuery, Modernizr, and normalizr wired in so you've got a good foundation on which to build.
I've never used it for a mostly static site, but it has proven a good starting point for our various apps.
We have a site that works fine with any latest browser including ie8.
But it has lots of issues with ie6, ie7 and ie8(Compatibility mode).
We are using following doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So it is not using quirck mode.
Before i start digging into individual issues, just want to known if i am missing something or doing something wrong to go ie in some different mode other than standard?
I tried to find list of known issues with ie6 and ie7 when using w3c standards but didn't find much useful, but found just enough to confuse me.
Any known site where i can find known issues with old ie's when using w3c standards?
By specifying what type of HTML document you are using at the top of your document you are taking the browser out of quirks mode. Now, the newer browsers are much more standards compliant and therefore easier to code with. Here are some tips that might help you out:
Use DIV instead of TABLE for layout
Watch out for Document Object Model or DOM differences between browsers
Here is a site with CSS compatibility info: http://www.quirksmode.org/css/contents.html
Run your code through W3C's Validator
Instead of W3C's free validator, consider purchasing a HTML validator which you can run on your machine. In my opinion a programmer wouldn't run a C# program without compiling, and web development shouldn't be done without some sort of validation program. It will save you oodles of time.
Sorry I can't post more links. Stack overflow will only allow me to post one.
Here is one link that has a few fixes I used to use: http://hublog.hubmed.org/archives/001515.html
There are more conflicts and non-implementations than one should ever have to know. If you write standards-compliant websites, your websites will not work in IE6 or IE7. Most people special case IE6 and IE7 with special stylesheets to fix the breakage.
The IE6 PNG fix is especially common.
Here's a good overview of IE related CSS bugs.
Also, if you're not doing it already I strongly suggest you use a CSS reset (here's an example of one CSS reset there are others out there e.g. YUI CSS Reset) - bringing all browsers down to the same baseline and then working up will elminate a lot of inconsistencies without having to track them down individual and hunting for causes if they later appear.
To find out whether you are correctly picking up Standards Mode, enter:
javascript:alert(document.compatMode)
in the browser's address bar whilst your page is loaded. If you get ‘CSS1Compat’ you're sorted. If you get ‘BackCompat’, you're in quirks. This can happen in IE when you've put some stray bytes before the <!DOCTYPE declaration, for example a spurious <?xml declaration.
I tried to find list of known issues with ie6 and ie7
It would be quite long. Yes, even in Standards Mode. Anything in particular?