Jump to content

Conditional Comments inside CSS file - possible?


joecool

Recommended Posts

Hi all,

 

I don't think this is possible but I thought I would ask anyway.

 

I have managed to create a separate style-sheet for one of my sites, and made it specific for some IE compatibility problems I was having and then I have linked to it using conditional comments in in the head section of each page.

 

It all works beautifully. :clap:

 

However, I was wondering if there was a way to put conditional comments straight into the current css file rather than creating a new style-sheet. As it stands I don't think this is possible because the particular comment tags used are not made for being inside style-sheets.

 

However, I thought maybe there was a way.

 

The reason I ask is because as it stands I would need to make sure everything I change in the future in the standard css is then replicated in the IE specific css, and it just means double the work. Anyone, know of a way around this?

 

(I only implemented the IE conditional comments when my standard style sheet was virtually complete, for now, so there hopefully there will not be a lot of tweaks to either in the future).

Link to comment
Share on other sites

I could be wrong, but I think the only way to do something like that is to use hacks in the CSS which are not a good idea. They don't validate and they could cause problems for you in the future. I think a link to a separate stylesheet is the best way to go.

 

I apologize if this is something you already knew, but it took me a while to figure out.....you don't have to put ALL your styles in the IE stylesheet. Only put the few lines you need to make IE behave. So, when you make changes, you'll only need to open the IE stylesheet if something in there is affected.

Link to comment
Share on other sites

Conditional comments can be avoided for IE by making adjustments to your existing standard css without messing it for the other browsers. IE7 & 8 I never have to use CC for and very rarely for IE6.

 

Otherwise, the suggestion that Susie made is best approach by applying just only the IE CC stuff. In my opinion, if you have to make a ton of changes specifically for IE then you may want to seriously look into the way you are coding.

Link to comment
Share on other sites

Usually you can get away with using the same code for all browsers. There are quite a few fixes for IE that have no effect on the others. Like width 100%, display inline, etc. So if you have the option its always easier to feed the same code to all. As you learn you will have to hack less and less. Here are all the ways to feed rules to only ie. http://www.visibilityinherit.com/code/target-ie.php

Link to comment
Share on other sites

Thanks everyone. You comments where all really useful.

 

Susie, I didn't know that about just putting the few lines in there to make IE behave and I still don't know how that would work, but since you said it I am going to give it a try. I assumed because it was going to the IE stylesheet that it would not check the other one at all. That little bit of info you have just given me changes everything and makes things a lot more manageble.

 

I think you are right Eddie when you say I need to look at my code. I am sure it must be something that I have done wrong that causes a couple of things to not look the same in IE. However, I spent a lot ot time trying to figure it out and I couldn't so I took the short cut... :( . I will go back and look at my code again though.

 

Eric, thanks for that link, I will take a good look at it.

Edited by joecool
Link to comment
Share on other sites

Susie, I didn't know that about just putting the few lines in there to make IE behave and I still don't know how that would work, but since you said it I am going to give it a try. I assumed because it was going to the IE stylesheet that it would not check the other one at all. That little bit of info you have just given me changes everything and makes things a lot more manageble.

 

It will check the main stylesheet first as long as you place the link to the IE stylesheet below it. So, something like this:

 

<link rel="stylesheet" href="style.css" type="text/css" />

 

<!--[if IE]>

<link rel="stylesheet" href="ie-style.css" type="text/css" />

<![endif]-->

 

And here's a good explanation of IE-Only Stylesheets that I just found: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Edited by Susie
Link to comment
Share on other sites

Thanks makes sense now Susie. How you described it is how I have done it. I learned it from the videos in the killersites university. Intellectually I knew that it checked IE css after the first one because I put it after it, however, I just didn't think it had time to check all the way through the first one before moving onto the IE only one. These robots, there pretty quick I guess. :)

Link to comment
Share on other sites

If you only want to target IE6 without using a conditional comment, you can do that all in one main stylesheet read this:-

 

* html { } Only IE<7 (browsers less than IE7) understand this. The * html tells the CSS parser to look for any element (*) with a child <html> tag. Think about this. The <html> tag is the top level tag, so nothing has it as a child. You can follow this with any other selectors you want. Example: * html p { font-style: italic } means that all font in a <p> tag in IE6 or lower will be italic but not in IE7 or other browsers. Note that * { margin: 0; } or * h4 { margin: 0; } where the * is on its own or followed by anything except html will be operated by all browsers.

 

* html { font-size: 20px; }
* html p { font-style: italic; }

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...