So, Internet Explorer <= 8 does not accept the standard table-row
and table-row-group
values for the CSS display
property (amongst others). I'm reticent to use JQuery's browser detection features as these have been deprecated. How can I detect table-row-group
support in JQuery without parsing the browser/user-agent string? That is, how do I detect the presence of the feature rather than the presence of a specific browser?
views:
53answers:
3Hi pygorex,
I don't believe that with Javascript you can directly detect support for a CSS property. I have two recommendations if that's true:
Insert into a hidden div two elements, one with
table-row
and one without. See if there's a height or width difference. If so, calculate the height or width, having figured out the difference between a browser that supports it and one that doesn't.Even though jQuery's browser detection is deprecated, you can host the following script locally:
http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx
I use it and I love it! It adds two classes (e.g., ".browserIE7 and .browserIE") to the body tag, so that you can use Javascript (if $('body').hasClass('browserIE7')...
) or CSS (.browserIE7.div {...
)
Good luck!
Edit
Maybe it is possible with Javascript...3rd option: http://perfectionkills.com/feature-testing-css-properties/ although I haven't read the article or used his suggestion.
If CSS property detection doesn't work out I'd recommend using IE conditionals like this:
<!--[if lte IE 7]>
<script type="text/javascript">
var ie7 = true;
</script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
var ie6 = true;
</script>
<![endif]-->
Or something along those lines...that's if you want to allow your scripts to determine which browser your using and don't want to parse the user agent string.
If you just want to direct CSS to specific browsers then obviously just put a link to an IE stylesheet in the conditionals. I would never recommend sending different CSS based on JS browser detection as not all users will have JS enabled.
You might find Modernizr useful. It tests for a great variety of CSS properties, and according to these tests, adds classes to the <html>
tag. Also, it adds classes relative to the user agent and that stuff.
You canr ead more about Modernizr on its site: http://www.modernizr.com/