I am trying to test out the canvas tag, I started with this code:
<html>
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</html>
In IE8 I get the message:
This text is displayed if your browser does not support HTML5 Canvas.
I then installed IE9 but get the same error. Does IE9 support HTML5 canvas or not?
Edit
The problem was that I was missing the doctype tag
<!DOCTYPE html>
IE9 does support canvas. Here is an exmaple.
If canvas does not work in your browser, press F12 (open developer tools), and make sure, that IE is not in compatibility mode.
Extending the answer from gor, make sure that you have added following metadata.
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
This will force IE to use the latest mode as possible and users don't need to change the compatibility mode from developer tools.
As far as I'm aware HTML 5 Canvas support is under development for IE9, unless it is already in the RC.. Perhaps not the best website to find out you could browse to html5test with IE9 to see if it supports certain HTML 5 tags or not. As an alternative you can browse to caniuse which should also give you alot of info regarding the HTML5 support of browsers .
Just an add on to this there's a little script I've been using called excanvas that has allowed me to run canvas animations (slowly) on IE8, haven't tried it on 7 and 6 but it's worth a look.
If you install the Google Chrome Frame Plugin [http://www.google.com/chromeframe][1], it upgrades IE6-9 to run the webkit rendering engine - along with HTML5/CSS3 support.
Related
Does sharepoint 2007 support html5, and css3 ?
or compatibility of html5 / css3 are based on browser itself?
If html5 tag and css3 are implemented with sharepoint 2007 will sharepoint strip off css3 and html5 tags?
The compatibility is based on the browser itself. If you want to see it working, create a content editor web part, throw the following code in it and try to open the page in IE8 and Chrome. Chrome will render the canvas normally, and IE will display the message inside the tag.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
SharePoint 2010 does not support CSS3 so I'm sure 2007 isn't going to support it either. Will 2013 support CSS3? Who knows. Probably not even Microsoft knows this.
HTML5/CSS3 support is related to browser. In share point you need to add HTML5 doctype if you want your webspage to be rendered in HTML5, However if your browser supports HTML5/CSS3 then you will be able to make it work.
HTML5 Doctype :
I'm currently working on a site that has uses the Emulate IE7 meta tag like this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
As far as I know and as far as I've googled this tag also addresses IE9, forcing it to go into IE7 compatibility mode.
However I noticed that one of the devs on the project is viewing the page in IE9-mode, not in compatibility mode.
How does this work? Is compatibility mode the default setting in IE9, when the Emulate IE7 meta tag is set? Would one have to manually change a setting in IE9 to bypass the Emulate IE7 meta tag?
The Developer Toolbar in IE9 (and IE8) allows you to change the browser mode-- including forcing display using the IE9 rendering engine.
For more information, read this MSDN article: http://msdn.microsoft.com/library/dd565628(VS.85).aspx#browsermodes
Try this link on Firefox or Chrome:
http://dl.dropbox.com/u/34375299/aaa/index.html
Notice a simple animation appears on a HTML5 canvas there.
Load the same link in IE9, and it displays the fallback content inside the canvas tag: "Your browser does not appear to support HTML5..." - but IE9 has perfectly good canvas support!
I'm using <!DOCTYPE html>, and if all the necessary files are downloaded and run in IE9 from disk, it works OK. Also, the same page hosted on other providers (e.g. normal web servers rather than dropbox), it also works OK.
What's different about dropbox that means IE9 won't show a canvas, and can I fix it?
Check to make sure that your IE9 is not in Compatibility Mode, which would force it behave like IE8, which doesn't support canvas. I'm guessing something on the dropbox site is forcing your browser into compatibility mode. See this answer for more details on that... Why does IE9 switch to compatibility mode on my website?
Unsure as to why this is happening, but it is going into IE 9 compatability mode instead of rending in standards mode. You can try forcing it with the following meta element: <meta http-equiv="X-UA-Compatible" content="IE=9" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This is a very cool piece of code that forces Chromeframe or latest rendering engine. It can even be sent throught the http headers if you want the html to validate. But with this comes a doubt for me. I use IE8 in compatibility mode to test my websites for IE7 (either clicking the "sheet-of-paper" icon next to the URL box, or by activating "browsing mode" in developer tools). So my question is:
Does compatibility mode still renders webpages as IE7, or does the X-UA instruction blocks my intention?
Im worrying that I think ive checked my pages in IE7 and it turns out what im seeing it's not really what a native IE7 would show....
Thanks for your comments.
Anything you do in developer tools overrides the headers and meta tags. Here's a flowchart which explains it all:
If IE7 compatibility is really important to you, don't use IE7 mode in IE8/9/10 to test it. Use a virtual machine with a native IE7. IE7 mode in IE8/9/10 doesn't behaves exactly the same as a native IE7. What you worry about is true even if Chrome frame isn't installed.
I have a gwt application with various layoutpanels. My layout works fine with all browsers except IE9. The layout is completely broken. Text appears everywhere, images at the bottom of the page or just shown for a 3/4, etc. I have recompiled my app with the newest version of gwt 2.3 but it didn't change anything. Any suggestions? Thanks in advance. Here an image with the broken background:
It is very strange that in IE9 something is broken and NOT in the other browsers.
Try this:
-correct the issues for IE9 and your other target browsers
-then see if in the other browsers you continue seeing everything ok (probably you will have problems with IE6 and IE7 so then what I would do is to fix them with a hack)
So what I recommend is to beging working with the highest version of the browsers and THEN fix the older ones. Do the inverse way...=)
If this doesnt help you, could you attach us some code?
A workaround to your problem might be to add the "X-UA-Compatible" meta tag to your HTML to tell IE to render in a different mode. For example, to tell IE9 to always render in IE8 mode:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
There are many useful articles regarding this meta tag