Is there a way to do browser specific conditional CSS inside a *.css file?
There is a way to do it in IE by taking advantage of bugs in the browser and @import. The best method I've seen is here, courtesy of bobince (and definitely beat out my answer, heh).
In general though, no. Even conditional comments are browser-specific to IE.
CSS method to include IE6 hacks
Is it possible to combine them like
* html @import url(ie6hacks.css);
No. at-rules like @import are not selectors, so cannot be combined with other selectors.
There are ways to make at-rules work as hacks, for example this:
@import url(/* no! */iehacks.css);
will be loaded by IE6/7 but not the other browsers. However, I wouldn't recommend using it; this sort of thing can be really fragile. This particular example is also invalid CSS.
As Daniel says, if you want separate .css files for hacks, the best approach is a conditionally-included link tag. The beauty of “* html” is that you can put hack-rules in the same stylesheet, which is easier to manage if there are only a few of them; if you're having a separate style sheet anyway, it offers no advantage.
IMO “* html” for IE6 is the only hack it's still legitimate to use today. All the box model stuff is dead along with IE5 — assuming you're not using IE6 Quirks Mode, which you shouldn't — and the other browsers, even IE7, are generally too good to be able to attack with a simple hack; the few hacks that can target them are too complex/fragile/invalid to really use.
(And as the inventor of the Simplified Box Model Hack, I say a hearty good riddance to them.)
Put browser specific condition in CSS selector
Try this out:
*line-height:10px; //* is hack for IE7
line-height:10px\0/; //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers
@media screen and (-webkit-min-device-pixel-ratio:0)
{
line-height:10px;
}
Conditional inline CSS for different browser chrome & firefox
I wrote a test page, did not find what you said this situation.
maybe you write a test page.
Strictly speaking, firefox chrome is the standard of modern browers, should not have this kind of situation has.
*{ margin:0; padding:0;}
body{font:12px/1.5 arial;background:#fff;}
.test{background-color: white; border-style: outset; margin: 115px 0px 0px -40px;}
<div class="test"></div>
demo here
Can you use if/else conditions in CSS?
Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:
<p class="normal">Text</p>
<p class="active">Text</p>
and in your CSS file:
p.normal {
background-position : 150px 8px;
}
p.active {
background-position : 4px 8px;
}
That's the CSS way to do it.
Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.
A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).
With them you could do something along the line:
:root {
--main-bg-color: brown;
}
.one {
background-color: var(--main-bg-color);
}
.two {
background-color: black;
}
Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php
file, that looks something like this:
p {
background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}
In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.
Related Topics
Rmarkdown Font Size and Header
What Is Correct Media Query for iPad Pro
Css: How to Position Element in Lower Right
Responsive Image Full Screen and Centered - Maintain Aspect Ratio, Not Exceed Window
Difference Between "Margin-Left", and "Left" (Or "Margin-Right", and "Right")
Angular Material Side Bar with "Half" Side Mode
Image Stretching in Flexbox in Safari
Webkit Border-Radius and Overflow Bug When Using Any Animation/Transition
Instagram New Logo CSS Background
Sticky Navigation Element Jumps During Scroll
Apply Style to Only First Level of Td Tags
Sass and Combined Child Selector
How to Turn on Visual Studio 2010 .CSS Intellisense on .Less File