Develop Reference

Dynamically adding css files to head (priority reversed in IE)

I'm adding .css files with javascript to the head and order them with the highest priority last and the least prioritized first.
Like:
base.css
theme.css
responsive.css
And this works fine with every browser I've tried apart from IE (I've tested IE8,9 and 10) but If I reverse the order:
responsive.css
theme.css
base.css
It works in IE(8,9,10) but that doesn't work in every modern browser.
Is there any IE priority bug? If I statically add the files without the problem, so it seams to be a javascript problem but just for IE.
Anyone know about this problem or even a solution?

One solution is first check with javascript what kind of browser there's used.
BrowserDetect.browser
And after that use an if-else statement..
if(IE){
responsive.css
theme.css
base.css
}
else{
base.css
theme.css
responsive.css
}

It's because older versions of IE don't understand media queries, which are used in the responsive design, I guess in your responsive.css you have things like #media screen and (min-width: 960px).
Normally conditional comments are used to detect if the current browser is IE (and it's version) and load a css file or not.
Personally I like the mobile first philosophy when doing responsive design, there's a sample tutorial: http://gomakethings.com/mobile-first-and-internet-explorer/
This is called Progressive Enhancement. Doing the css for the simplest platform first, and adding up things for the newer browser.
If you want options there is another practice called Graceful Degradation, which is the opposite, having the full featured CSS and ignoring / removing those features for the older browsers.
You should google a bit about both those practices to understand them better if you really want to do clean and good responsive design

There must be another problem somewhere, because IE and other browsers do not differ in the way they cascade style sheets. Please create a JSfiddle.

IE8 conditional javascript not linking

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!

Html5 helper files?

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.

JQuery - Detect support for CSS 'display: table-row-group'

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/

If I have a CSS solution for all browsers except IE then what should be chosen for IE? CSS expression vs JavaScript vs jQuery with plugin?

If I have a CSS solution for all browsers except IE then what should be chosen for IE?
CSS expression in IE conditional comments
or
JavaScript in IE conditional comments
or
jQuery + plugin in IE conditional comments
Which will be less slow in rendering speed?

CSS expressions only work in Internet Explorer only, so you'll have to use Javascript in some form, for complex styles. Firefox, Safari and Chrome recognise a lot of CSS3 so if you're trying to do something like rounded corners or multiple backgrounds you could use that and look for an expression equivalent for IE.
However, I would recommend using jQuery. It's built to be cross-browser, and your code will likely end up simpler than using combinations of expressions/browser-specific styles.

jQuery plugin, if I'm already using jQuery.
I don't think I ever used CSS expression, not even as a hack.
As for a non-jQuery JavaScript library - I'd have to learn it from scratch, it might re-implement some of jQuery's features (so doesn't benefit from jQuery's engine, cross browser, etc), and it may not be written in the convenient style of jQuery, like chaining and liberal null checks.

You should avoid CSS expressions.
As for JavaScript vs. jQuery, that depends. If I can do it in just a few lines of JS without cross-browser issues, and I'm not already using jQuery for other stuff, there's no reason to load the entire jQuery library. Anything much more complicated than a few document.getElementById or alert calls, though, and I'm likely to want jQuery available, and at that point I might as well be using jQuery plugins

Do not use CSS expressions.
The reason:
CSS expressions can be evaluated many hundreds of times per second. Especially considering that IE is not the fastest horse in the race, don't do that to the poor old browser.
The average IE CSS expression is evaluated over one thousand times in the time the person views the page.
What's more, it is just Javascript - it doesn't work if JS is off, creates the same garbage global variables, et al. So the gain is nill, the loss is high.
Do not include JQuery just for this.
But if it (or Mootools etc.) is included, use them by all means.
Creating your function without JQ is simple and straightforward.
Just have it run on page load and resize (http://www.devarticles.com/c/a/JavaScript/OnReset-OnResize-and-Other-JavaScript-Events/1/) and that should do the trick.
Use IE conditional comments and you are even valid.
<!--[if IE]>
<script>
var dumbIE = function (){
//your stuff
}
onload=onresize=dumbIE;
</script>
<![endif]-->

Although I strongly disrecommend using CSS expressions (is there really no "normal" CSS hack for the particular problem? doublecheck it, twice, if necessary ask question here), I would go ahead with it. This removes the risk that the your application breaks in case that the user has JS disabled. JS is at its best when used unobtrisively and in your case it is clearly not the solution.

Updated to new focus: If you've got it looking good in everything but IE (an all too common situation...) then you need some method of writing code that only IE sees/executes. You can do this with browser sniffing in JavaScript, conditional comments in CSS and HTML. IE CSS bugs (anyone else have some good links?)
(Old answer:)
CSS expressions: Internet Explorer only shortcut.
JavaScript: Have to code every stinking thing yourself. Works "cross browser", but you still need to test in all the browsers to make sure it's doing what you want.
jQuery: cross browser, easy, simple. :D

Wait for Microsoft to improve IE.. haha.
Ignore IE -> Encourage your web-visitors/users yo download/use a different browser (IMHO, firefox is a really, really good choice, if not the best)
There are ways of making IE 'compatible' with modern, css-stylized websites (such as the well-known comment <!--[if lte IE 6]>...<[endif]--> and so on.. but anyway, it's up to you.