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?
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/
Related
My problem is, that I have a meteor application, and the clearest and simplest way to change style is to use CSS variables.
BUT: IE doesn't support them at all, so I had to write a helper function, what changes the style on every template creation, and user interaction.
That helper function is slow, and ugly, so I want to specify the helper function only for IE, and use CSS variables in others browsers.
-How can I specify before the build if the browser is IE use IEspec.css,
Other case use nonIEspec.css?
I don't know meteor build process, but you can add this in your index.html:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
Regarding variables IE doesn't support them, just Edge 15+.
In Edge 15, nested calculations with css variables are not computed
and are ignored see bug In Edge 15 animations with css variables may
cause the webpage to crash see bug In Edge 15 is not possible to use
css variables in pseudo elements see bug
You have pure css variables or is something like SASS/LESS? Maybe there is a compiler which make them css 1, 2 or 3.
Check compatibility here
I know how to detect different browser types and select different jQuery versions using HTML if / endif statements like this:
<!--[if lt IE 7]> <script src="jQuery-1.11.x.min.js"></script> <![endif]-->
Now I want to support IE version < 8 using compatible version of jQuery. I also want to use jQuery 2.x.x for more modern browsers. Is there a way to use certain JavaScript library and implement this (for example requirejs or modernizr) with a single global configuration file, instead of adding HTML detection in every single page?
As suggested by #CodeDreamer68 , browser detection is a bad practice. But, this might help you.
http://api.jquery.com/jquery.browser/
here's a landing page I've coded up:
http://rsa-partner.com/
It all looks fine in every browser bar IE8. In IE8, the advanced CSS selector 'nth child' is not recognised.
I downloaded and linked selectivizr.js (http://selectivizr.com/), which should have sorted it in ie, but alas, the background images that show on all my nth child selectors are not showing. The code is
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
Is there something I'm missing? I swear I've used conditional IE specific comments before and got nothing back. Any suggestions would be much appreciated.
Of course I could simply remove my nth child selectors and replace with specific classes but I'd like to avoid that if possible!
If your content is loaded in dynamically (like if you are using a CMS system), then it gets loaded after Selectivizr is run, and therefore it won't work.
From selectivzr.com:
The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected.
I recommend using Modernizr instead. You can check for css-lastchild and customize the styles if the browser doesn't support it (together with the rest of the CSS3 selectors, like nth-child, etc.). I share your pain though!
We are writing site logic which its design was made by another company. (they sent us the html files)
However when we looked at their source code html we saw:
1) modernizr.js
2) creation of html5 element scripts :
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
3) Html5 shiv JS :
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
4) reference to css3-mediaqueries.js for media queries
5) Respond.js v1.1.0 min/max-width media query
I don't know much about html5 integration , but I think there are a redundant components here.
For example I heard that modernizr already includes the solution which html5 shiv provides.
As an assumption which I want to use modernizr.js , What components should I keep ? ( I tagged each section with numbers so it will be easier to you to reference).
(p.s. this question didnt help much cause I have much more sections)
Together all of these have the purpose to do two things:
Enable HTML5-elements to be rendered in legacy browsers (1, 2 and 3)
Enable CSS media-queries in older browser (4 and 5)
The way they are used today, in your example, you will have a lot of overlapping functionallity, which is unnecessary. My take on this is as follows.
HTML support
If you will be using Modernizer for other purposes than just enabeling HTML5-elements in older browser, then I suggest that you use only Modernizer and remove 2 and 3 as Modernizer include the HTML5 shiv.
If you won't be using Modernizer, it might be unnecessary to load the entire library. Then you might be better off using HTML5 shiv only, with the conditional IE-comment.
Using no. 2 seems totally redundant, if you use either 1 or 3.
Media-query support
When it comes to 4 and 5, they both work to enable responsive web sites in older browser, by adding support for media queries in browser that lack native support.
I only have personal experience of Respond.js, which is very light-weight. The limit is that it will only add support for the min/max-width media queries. If that is enough for your design, then no. 5 will be sufficient.
If you need more extensive media queries support, I believe you need to look in to no. 4 instead, but then I guess you can get rid no. 5, as it will be redundant.
As per the claims on modernizr web page, you dont need any other check to test for HTML5 elements amd CSS3 media queries.
That means you can waive off all the other libraries, still need to go back and check.
I have a written a jquery plug-in which pops-up a div section on hover over an element, and I need to deal with the "select z-index" bug in IE6 (http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx). So, if running in IE6, my code needs to hide some select boxes on the page, when the pop-up div is visible.
My question is: In trying to follow best practices, I would like to avoid detecting the actual browser version and instead do a 'feature-test", to determine whether I am in an affected browser. (http://ejohn.org/blog/future-proofing-javascript-libraries). Is there any way to do this? Or should I just treat this as a special case, detect the browser and handle IE6?
I use this snippet all the time. It's cool because it checks only for IE6. But be aware that if you using any code compression tools that removes HTML comments this won't work.
<!-- THESE LINES ARE NOT NORMAL HTML COMMENTS! They are instructions that only IE6 can understand. -->
<!--[if IE 6]>
<script type="text/javascript">
// redirect to the Default error page passing a custom error code.
window.location = '/your/redirect/page';
</script>
Cheers.
Use the bgiframe plugin to fix the bug without having to hide the select boxes on the page.