I want to have a particular CSS style different for IE6. Basically I am using CSS sprites with a PNG file. But for IE6 I want to use the .gif version.
I dont want to use the <!-- if lte IE6 statement. I want to include it within my CSS file itself.
How do I do that?
Edit:
I need this because I want my users to include a single CSS file and not 4 lines of code. My users are absolute newbies. I don't want to confuse them. Plus the only change I want is to use .gif instead of the current .png.
Edit:
How does _background-image: sound? Is there anything wrong with that?
Alternatively, can I use a conditional statement inside a CSS file?
If you don't want to use conditional comments, then you can use the * html hack:
h1 {
color: green;
}
* html h1 {
color: red; /* this will only be applied by IE 6, 5.5, 5, and 4 */
}
Apparently you can put IE6 specific statements into a CSS by prefixing them with an underscore.
See http://vexxhost.com/blog/2007/03/01/only-css-hack-you%E2%80%99ll-ever-need-seriously/
As you obviously will have noticed from the answers you're getting, using conditional comments for this is so standard that people tell you to do that even when you've specifically said you don't want to.
But if you absolutely have to have the user agent determination made at the CSS file level, what I would do is write a PHP script that outputs the CSS (rather than HTML) and analyze the user agent in PHP. If the file has to be referred to as stylesheet.css or whatever, Apache rewrites or MultiViews can be used to make a PHP script available under that name.
Here's a pretty comprehensive list of unrecommended hacks:
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
You said you don't want to use conditional statements, but they are very much the recommended and best way to go. The main reason is maintinability, CSS browser hacks are often hard for the next person, or you several months down the line, to understand. Having non-hacky CSS in a completely separate file makes it far easier to manage.
I would very much recommend you don't do user agent sniffing, it is open to lots of problems, for instance many browsers report themselves as IE even when they are not (default in Opera 7 I think). The User-Agent string is not to be trusted and should only be used as a last resort.
Use a conditional comment.
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css">
<![endif]-->
edit: Now that Wellbog has fixed your question, no, there's no way to do that with pure valid CSS.
You could conceivably use PHP or another server-side language to detect IE6 from the user agent string and serve a different CSS file, but it's much better to just use the conditional commenting technique.
What's your reason for refusing to use the existing, working, non-hacky solution Microsoft provides?
Related
I was thinking this morning, my mind was on CSS and creating different style sheets for IE7, IE8, FF, etc.. I started wondering if there was a tool that exists to make this easier. I was thinking something along the lines of this:
Build the "core" style sheet.
Any time a "broken" rule is entered
into the "core" style sheet, a fix
is added to the associated browser
specific style sheet.
If a fix is added it would also be
noted, so you know that a particular
style has extras in the browser
specific sheets.
This could work in two different ways, either automatic, IDE style, or as a tool which you input the core css and output all the different css you need.
Thoughts? Does something like this exist?
The problem with this is that the term "broken" is subjective. No machine is able to tell what you consider to be "broken". Granted there are some well-known bugs, but even then you're only really scratching the surface.
Your best bet is to just code using web standards and using a tool like SASS to make coding your CSS easier.
For instance, if you are using HTML5Boilerplate and want to add an IE6 specific rule, all you do is something like this:
#mydiv {
/* mydiv specific styles */
.ie6 & {
/* IE6 specific styles for #mydiv
}
}
Compass is doing some of what you were looking for.
I know it is has been 5 years since you asked but this might help someone in pain :)
Is it a good idea to put all conditional CSS rules in one conditional stylesheet instead of making multiple stylesheets for different versions of IE?
Example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Content of all-ie-only.css:
selector {
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
Using IE underscore/asterisk hacks see: http://webstandardstips.com/2008/11/18/css-hacks-for-ie-only-style-rules/
The advantage I see in this technique is that you have just one style sheet in your server which may be easier to maintain.
The disadvantage is that users will need to download the whole file which may be 3 times bigger hence taking more time to download and to process.
Appart from that, I think there's no other issues with it.
Yes, it's fine. I think it becomes a question of how many items the file has to hold. If you're just overriding 1/ 2/ 3 things, the single file makes much more sense. At some arbitrary point (10 things? 100 lines of code), I'd say the trade-off swings the other way and it's simpler to maintain the three files.
What if IE 10 comes along and invalidates some of these hacks? I think this approach defeats the purpose of using IE conditional comments in place of hacks, that being more of a future-proof implementation.
Plus is there any advantage, besides slightly easier maintenance, and negligible HTML file size savings? As LuckyShot mentioned, it's already a detriment for IE users which will have to download a larger browser-specific file.
this is right to use this for all IE Version. but when you use this then you will find that, this is not w3c valid. Generally IE create problem.Safari, Chrome , and Firefox will run these good.I think this is better idea to use one Css for all IE version.
As long as it works and its valid, then it doesn't really matter whether its in 1 file or 3, its just personal preference.
Personally, I prefer to have a seperate sheet for each IE version (if needed), as I find it easier to organise.
Like I said, if its W3C complient (god, don't we just love them), then its all good.
If a site is looking the same in all required browsers, is it okay if my CSS is not valid?
Specifically, the CSS is not valid because:
I'm using vendor specific properties,
I'm using IE 6 and 7 hacks,
I'm using browser specific hacks
What benefits do I get if I make my CSS fully valid?
The pros are simple --
Your site is more likely to render in multiple browsers in a uniform manner if you follow standards, and your code will be more machine readable.
Browser specific hacks are sometimes fine, but beware that you may have to maintain them as later browsers come out that don't support them.
(from below:) If you don't use fully CSS compliant code, you'll have to remember which bits are intentionally non-compliant every time you verify your code through a CSS parser/verifier.
It will illustrate any obscure bugs you've most likely missed, which have effect on things you won't have tested.
One thing you can do is have a special stylesheet for specific browsers. For example, for IE specific code, you can use special IE-only conditional comments to include the CSS. Here's an example to show a sheet called iestylesheet.css for IE 6 only:
<!--[if IE 6]> <link href="iestylesheet.css" type="text/css" rel="stylesheet" /> <![endif]-->
And obviously, the most important reason to use compliant CSS is that without doing so, you don't get that nifty W3C CSS compliant icon to put on your site. :-)
If you keep your CSS fully valid, you can easily use the validator to check your CSS files for errors. (Because anything invalid will be a mistake.)
If you’ve got some intentional invalidity, you need to remember which bits of invalidity are intentional, and which aren’t. Future developers who work on the code will also need to work out which invalid bits are intentional.
So commenting intentional invalidity is a good idea.
I have designed many web-templates. But (except my first one) I've never used browser detection scripts to load corresponding CSS.
I am not sure whether it is a good technique, or just an alternative way (to struggle with a single CSS to satisfy all the browsers)?
It depends on how complex your layout is.
On the whole, there are a set of "problem features" with some browsers, such as the browser not following the border-box model and assigning margin, border and padding values incorrectly.
Many designs aren't affected by the problems and look very similar in all browsers, but if you have a part of your design that has a touch point on one of the issues, it is probably better to extract the "fixes" into a separate stylesheet, rather than pollute your standard CSS with hacks.
You should find that you have
1 Stylesheet for "standards compliant browsers"
and
1 Stylesheet to cater for any issues with the others
If you have more than this, you're creating trouble for yourself and are juat adding to the number of http requests for the page.
Most commonly people use conditional comments in Internet Explorer to load a separate stylesheet for just IE, and a default one for all the others.
More info on MSDN
The best option is to use a css which is compatible for each (major) browser.
So the question is; do you really need browser-specific-css?
If you really need it; you can use:
<!--[if IE 7]> <link rel="stylesheet" ....> <![endif]-->
From my experience I would always try to avoid to really fall into the specific-browser-CSS-trap. Try using CSS-reset-methods and from a fresh start build for a defined set of current browsers. I would rather try to make little changes to the designed layout to get it working as so much time can be saved by that (if it's possible in the project or the designer is cooperative).
Another aspect where it would make sense is an approach like the one Andy Clarke talks about in his nice book (Website http://www.transcendingcss.com/). Use latest tags and all options that make your code and CSS simpler, shorter, more semantic - even if it results in explicitely different look and feels for, e.g. Firefox and IE.
I've just been assigned the task to refactor a huge 5000 line CSS file... but here's the worst part - I also need to make it IE6 compatible. Any CSS gurus have suggestions of tools, or possibly tips (common pitfalls) for use in my monolithic expedition? Cheers.
checkout sass... it includes the ability to convert css to sass.
http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html
A sass file is a yaml file that can be parsed down into a css file. It allows you to use variables and alternate organization...
sass example:
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
css output:
#main {
color: #00ff00; }
#main p {
background-color: #00ff00;
color: #000000; }
Some tips:
Use version control so you can roll back when needed.
Come up with a checklist of visual tests to run through after each change, in each browser. A spreadsheet of URL links and things to look for, building on them as you run across problems (think "unit tests" but not automated).
Use a CSS-specific beautifier first to get everything into the format you prefer for braces, etc.
Consider using something like SASS to "compile" your CSS as you go along.
Comment the heck out of things, especially where you're doing IE6-specific stuff.
Future-proof yourself by building a separate file with IE6-specific directives as you go along, or at least use Microsoft's way of filtering them out for other browsers.
Use the W3C Validation often.
Mechanically, I would attack it like this:
<link type="text/css" href="newhotness.css" />
<link type="text/css" href="newhotness-ie6.css" />
<link type="text/css" href="oldandbusted.css" />
Move code from the third (old) file into the other two, cleaning up as you go. That way you can validate your code without worrying about tons of errors in the old stuff, and you can track your progress, Ctrl-Tab between them more easily than between locations in a single file, etc.
(If you can't control the markup to add your CSS files, use an #import at the top of the old file.)
Start from scratch!
Assuming you can check all the major pages manually, I would be VERY tempted to wipe the entire file and start from scratch. Spot-checking for IE6 inconsistencies, you'll be doing nearly the same amount of work anyway, but it will be much, much more painful if you're modifying old, browser-specific CSS.
That 5000 lines may well be expressable in 2000 lines of modern, well-designed CSS. I think most experienced CSS developers would find it less work to write 2k lines of new CSS than modify 5k lines of horrible CSS.
http://www.codebeautifier.com/
which is based on this:
http://csstidy.sourceforge.net/
Not necessarily CSS, but here's worflow tip: use GIT.
start off by importing the files in git;
commit for every minor step, and record what you did;
whenever you find that you broke something, you can identify the exact same step broke using git bisect ( a good description );
For extra kicks, here's a talk about code coverage for CSS to help you quickly weed out unused rules.
As Triptych said, I would start from scratch. Also, consider the following:
use a CSS reset file to smooth out cross-browser inconsistencies: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
get it working perfectly in Firefox, then tweak for other browsers as needed
study the underlying HTML. How is it organized? Is it laid out with tables? all DIVs? Semantic tagging?
is the CSS used for layout or simply styling (fonts, colors, etc.)?
Once you get a feel for that, study the content. Categorize the layout and elements as much as possible, so that you identify all the common elements and can maximize the efficiency of your CSS
remember the C in CSS, Make the most commonly used font the body font, so that other elements will inherit it by default.
use relative units (ems) for font size, to allow proper scaling of text
try not to use ANY inline styles
make use of Firebug - it will let you inspect an element and see exactly what CSS is in effect and where the rules came from
don't be afraid to re-use portions of the old CSS, especially for things like dropdown menus, which can need very specific incantations to work properly
have fun! starting from scratch lets you implement best practices and learn a ton along the way. When you are done you are probably going to look back on this as a good experience.
there is a presentation here that should get you in the right headspace for tackling this task: CSS Systems
I would be tempted into creating a test suite first: automating page visits (perhaps with Selenium?), taking screenshots, then using something like ImageMagick to compare those with reference images.
Also, I second all the suggestions to use source control. If you later discover that your refactorings broke something that wasn't checked by the test suite, you can add a new test and then bisect your history to find the change that broke it. Git is good for that.
Get a code editor with good syntax highlighting. Also, goodluck I dont envy you.
My initial thought was does some like NCover exist for CSS, as it would be handy to see if all of the CSS is referenced. A quick Google on CSS code coverage found a few things- you might want to look yourself though: http://development.lombardi.com/?p=436
Install sass, run css2sass on your 5000 lines of css, proceed. After you are done with your sass file refactoring, run sass2css to regenerate the css file. Best of luck!
I'd suggest Stylizer - it is a CSS editor with an embedded live preview browser. It makes life much easier when editing CSS files and can tell you which rules affect which element on the page and more.
All of you guys saying he should start from scratch are wrong. You shouldn't. Try to identify the different parts the site uses. Put them on a sheet of paper. Find the parts that match together. Build a structure. Find parts of the application that are the same but are still styled with different rules.
Take that one part and name it. Then match all app parts that use that "pattern" with the correct HTML/CSS.
Repeat until you're done. Break up the large task in small chunks.
Identify whether the original CSS writer used standard methods like using a CSS reset. If he didn't, and everything is defined by #id without reusable classes, well, then maybe the guys saying you should start from scratch are in fact right. But my point here is that you can't just recommend that without assessing the situation.
Using the Dust-Me Selectors Firefox Plugin can be handy. It's a bit like a code coverage tool for CSS.
Tool suggestion: ReSharper by JetBrains. It will autocomplete CSS and rename selectors site wide from the CSS file editing window.