I'm working on a layout with CSS-Columns. To know about the browser's support, I'm loading modernizr.js. Now, I was opening my website in Safari 6.1, which does not support the CSS-Columns, but still, I get the following element:
<html lang="en" class=" js csscolumns no-firefox">...</html>
Shouldn't modernizr be telling me a class like no-csscolumns?
Safari has supported css columns since Safari 3 - you just need to use the -webkit- prefix
Related
Is there a straightforward way of targeting CSS for IE10 and below? IE11 works fine (the CSS I'm using is now supported) but I need to add specific CSS for anything below.
I know I can use this up to IE9:
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
But conditional comments are not supported in IE10, and I don't want to target IE9 in the content meta tag as I want to use 11/Edge by default (I don't want to be stuck in the past!).
Using IE specific media queries isn't an option as that will apply the CSS to IE11 as well which I don't want to do. The reason I want to target anything below IE11 only is that I have a set of 'backup' CSS that I want to apply when the default 'proper' CSS (which works with IE11, Chrome, Firefox etc.) can't be applied.
I also tried doing it backwards - having the backup CSS as the default and then having the good CSS specifically target:
IE11+ using _:-ms-fullscreen :root
Chrome using #supports (-webkit-appearance:none)
Firefox using #supports (-moz-appearance:meterbar)
But this didn't work, as IE11 was still picking up parts of the default CSS. Chrome and Firefox displayed the specific CSS correctly but then had all sorts of other issues with the rest of the site styles.
Any ideas on how I can specifically target IE10 without also targeting IE11?
Thanks
Don't check for browser but rather the feature you are trying to use. Modernizr allows to check if a specific feature is supported in your current browser or not -> http://modernizr.com/
Also checking for browser in IE 11 won't work like you would expect, they changed the agent name from IE to Mozilla (read more)
Here is more info regarding #support and modernizr -> http://demosthenes.info/blog/964/A-Browser-Native-Modernizr-Using-supports-in-CSS (scroll down a bit)
Just used this on a website I'm doing for a client to target IE10 and 11:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
var userAgent = $('html').attr('data-useragent');
if ( userAgent.indexOf('MSIE 10.0') >=0 || userAgent.indexOf('Trident') >=0 ) {
/* YOUR CODE */
}
This adds the attribute data-useragent to the HTML element and populates it with the navigator.userAgent (a good way to identify the browser). Then it uses the 'if' argument to detect a particular string in that attribute, for example IE10 has MSIE 10.0 and IE11 has Trident.
Hope this helps somebody!
I am using a spring based application where all the images are loaded from a separate image server. I have a common css file used accross the application. Initially it had doctype as MATHML and i tried other doctypes also. But the css is not loaded only for IE9 browser mode with IE9 standards but it works for IE9 browser mode with IE8 document standards. And the same is working for firefox, chrome, IE8. Can anyone suggest me the solution to make it work in IE9.
I have tried using
<meta http-equiv="X-UA-Compatible" content="IE=edge">
but still it did not work.
Though, most online resources on HTML5 mention that datalists are supported in Firefox 4 & above, but it does not work with my Firefox 6.0.2.
Also tried the example at http://www.html5tutorial.info/html5-datalist.php.
Does it work only in Firefox 4?
Is there a way to check the support with Modernizr?
Regards,
S
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.
I'm making a site for European client and he said Firefox 3 and IE 7 and 8 has more user than others browser for desktop in Europe http://gs.statcounter.com/#browser_version-eu-monthly-200812-201001-bar
I've only IE 7 and Firefox 3.5.7 installed in my PC.
Should I download portable Firefox 3.0 and test in it too even if I'm not using any new css property/selector which only has support in Firefox 3.5 or testing in 3.5.7 would be enough?
And for IE testing in IE 7 would be enough or should i check my site in IE8 (downloading VPC image of IE8 and testing in VM) even if I'm not using any new css property/selector which only has support in IE8?
Or is it necessary to use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> in <head> ?
But what will happen when user will switch compatibility mode to IE 8 default rendering mode?
Can we make site compatible in IE 7 and 8 both without using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />? If yes, then what special we need to do.care/consider in css to make site identical in both?
It's worth testing the site in all browser to ensure that it is working correctly. Another way to test is to use the browser sandbox here: http://spoon.net/browsers/
IE8 is alot more standards compliant then previous versions of IE so if you are designing for FF 3.5 then you shouldn't have too many problems with IE8. It's worth using conditional comments as Dough mentioned to target IE7 or IE6 - http://www.quirksmode.org/css/condcom.html
Consider using this website checklist - http://www.xs4all.nl/~sbpoley/webmatters/checklist.html as once you have validated your html and css and gone through most of the other points then you will be well on your way to having the site display properly across all browsers
You don't necessarily need to download all the copies, but yes, there is a larger possibility of a difference between IE7 and IE8, though they should be minimized if not eliminated by your meta tag. I highly recommend you don't use that meta tag and just check for differences that might be able to be easily fixed. Since IE8 has come out, I have never had to use the meta tag to fix any problems or differences. I still use IE conditional comments to add rules for fixing differences in IE6 + IE7.
There is much less of a concern between Firefox 3 and 3.5 if you are not using CSS3 or -moz specific selectors.
Either download IETester (IE only) or used Adobe Browser Labs (both) to check IE8 and Firefox 3 as a precaution before launch.
I do dev testing using IEtester, been using it for about a year and it's been 100% correct in rendering CSS when compared to the stand alone versions of IE6,7,8. It's also very good for tweaking CSS and quickly seeing the impact.
From a general perspective I normally have alot more issues between IE6 and other browsers, while IE7 and IE8 are very similar in most regards.