I have a CSS property:
top:20px;
It is Ok with Internet Explorer but not with FireFox. It should be that for Firefox:
top:0px;
How can I add that conditionally situation at CSS?
Found this piece of script here that could be of great use to you.
// This function returns Internet Explorer's major version number,
// or 0 for others. It works by finding the "MSIE " string and
// extracting the version number following the space, up to the decimal
// point, ignoring the minor version number
<SCRIPT LANGUAGE="JavaSCRIPT">
function msieversion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 ) // If Internet Explorer, return version number
return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
else // If another browser, return 0
return 0
}
</SCRIPT>
As a note, css is for styling your sheet, and so you would need to add this css via javascript or other scripting language.
It is a little excessive for what you need, but stripping it down (so as to not get the version number). It forms quite a good basis for your test.
A Good Example
The following example demonstrates how to detect the browser version from a client-side script.
Note that this example does not specifically check for platform version, such as Windows 95, Windows >NT, Windows 3.1, and so forth, which require a separate userAgent substring check when applicable:
<SCRIPT LANGUAGE="javascript">
if ( msieversion() >= 4 )
document.write ( "This is Internet Explorer 4 or later" );
else if ( msieversion() >= 3 )
document.write ( "This is Internet Explorer 3" );
else
document.write ( "This is another browser" );
</SCRIPT>
You can add the following conditional statement into your CSS
#-moz-document url-prefix() {
.className {
top:0px;
}
}
Any CSS in-between #-moz-document url-prefix() will only be applied to Firefox.
But maybe a better choice would be to apply a conditional to IE instead. You could leave top:0px; in your current CSS and add the following conditional for IE in the head of your document.
<!--[if IE]>
<style>
.className {
top:20px;
}
</style>
<![endif]-->
Note: Conditional comments are not supported in IE10+
<!--[if IE]>
<style>
#element{top: 20px;}
</style>
<![end if]-->
conditional comments that works for IE.
I want to do something like this (Source - CSS Tricks Article):
#veinte { color/*\**/: blue\9; }
in Less for IE7 and IE8 but it gives errors.
The below works:
#diecinueve { color: blue\9; }
but there are some elements that I dont want to be called in IE9. e.g. I have something in IE9 with :before elements but because IE8 doesnt support it, I want to give it a padding only in IE8.
But this
#veinte { color/*\**/: blue\9; }
gives errors in Less. I tried this
#veinte { color~"/*\**/": blue\9; }
but that also doesnt work. Does anyone know how to do this in Less?
Property name interpolation is possible with Less v1.6.0 and above. Hence this hack can be implemented as shown below:
#hack: ~"/*\**/";
#veinte {
color#{hack}: blue\9;
}
Compiled CSS:
#veinte {
color/*\**/: blue\9;
}
Are you including Modernizr or another shiv script that adds classes directly to the HTML element?
Thus something like this:
.selector {
...rules...
.lte8 & {
... < IE9 styles ...
}
}
Might suit your needs. (see: nesting selectors, using the &)
Otherwise, since you're being hacky anyway, why not just reference a different .less compiled output sheet in a conditional comment?
You can try this one: background-position:~"-150px 0px\9" width:~"300px\9";
example:
.test{
width:~"300px\9";
}
Is there a way to apply the following CSS to a specific div only in Google Chrome?
position:relative;
top:-2px;
CSS Solution
from https://jeffclayton.wordpress.com/2015/08/10/1279/
/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
#media screen and (-webkit-min-device-pixel-ratio:0) {
div{top:10;}
}
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
div{top:0;}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
.selector {-chrome-:only(;
property:value;
);}
}
JavaScript Solution
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
As we know,Chrome is a Webkit browser,Safari is a Webkit browser too,and Also Opera,so it's very hard to target the Google Chrome,using media queries or CSS hacks,but Javascript is really more effective.
Here is the piece of Javascript code that will target Google Chrome 14 and later,
var isChrome = !!window.chrome && !!window.chrome.webstore;
and below is a list of Available Browser hacks,for the Google chrome including the influenced browser,by that hack
WebKit hack:
.selector:not(*:root) {}
Google Chrome:All the versions
Safari:All the versions
Opera :14 and Later
Android:All the versions
Supports Hacks:
#supports (-webkit-appearance:none) {}
Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14
Google Chrome:28 and Later
Opera :14 and Later
Firefox: 64 and Later (i.e. this no longer works)
Property/Value Hacks:
.selector { (;property: value;); }
.selector { [;property: value;]; }
Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera > 14,and Safari 7 and Less than 7.
Google Chrome:28 and Before
Safari:7 and Before
Opera :14 and Later
JavaScript Hacks:1
var isChromium = !!window.chrome;
Google Chrome:All the versions
Opera :14 and Later
Android:4.0.4
JavaScript Hacks:2 {Webkit}
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
Google Chrome:All the versions
Safari:3 and Later
Opera :14 and Later
JavaScript Hacks:3
var isChrome = !!window.chrome && !!window.chrome.webstore;
Google Chrome:14 and Later
Media Query Hacks:1
#media \\0 screen {}
Google Chrome:22 to 28
Safari:7 and Later
Media Query Hacks:2
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
Google Chrome:29 and Later
Opera:16 and Later
For more information please visit this website
An update for chrome > 29 and Safari > 8 :
Safari now supports the #supports feature too. That means those hacks would also be valid for Safari.
I would recommend
# http://codepen.io/sebilasse/pen/BjMoye
/* Chrome only: */
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
p {
color: red;
}
}
This css browser selector may help you. Take a look.
CSS Browser Selector is a very small javascript with just one line
which empower CSS selectors. It gives you the ability to write
specific CSS code for each operating system and each browser.
http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Apply specific CSS rules to Chrome only by using .selector:not(*:root) with your selectors:
div {
color: forestgreen;
}
.selector:not(*:root), .div1 {
color: #dd14d5;
}
<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>
The accepted answer matches Firefox 80+ also.
To target all Webkit browsers (Edge 79+, Chrome, Safari), find a -webkit specific CSS extension that is not supported by Firefox (use https://caniuse.com). This is a moving target; one of the Webkit browsers may remove it, and a non-Webkit browser may add support for it.
Here are two examples:
#supports(-webkit-text-security: circle) {
/* Matches Edge 79 - latest (92) */
/* Matches Chrome 4 - latest (95) */
/* Matches Safari 3.1 - latest (15/TP) */
/* Matches Opera 15 - latest (78) */
/* does not match Firefox */
}
#supports(-webkit-tap-highlight-color: black) {
/* Matches Edge 12 - latest (92) */
/* Matches Chrome 16 - latest (95) */
/* Matches Opera 15 - latest (78) */
/* does not match Safari */
/* does not match Firefox */
}
If you actually need Chrome-only, JS is probably the only way to go.
The .selector:not(*:root) {} hack in https://stackoverflow.com/a/25496712/1218408 still excludes Firefox through version 92 but matches Safari.
Have never run across an instance where I had to do a Chrome-only css hack until now. However, I found this to move content below a slideshow where clear:both; affected nothing in Chrome (but worked fine everywhere else - even IE!).
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}
So simple. Just add a second class or id to you element at load time that specifies which browser it is.
So basically at the front end, detect browser then set id/class and your css will be befined using those browser specific nametags
if you want we can add class to specific brwoser see [fiddle link][1]
[1]:
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
BrowserDetect.init();
var bv= BrowserDetect.browser;
if( bv == "Chrome"){
$("body").addClass("chrome");
}
else if(bv == "MS Edge"){
$("body").addClass("edge");
}
else if(bv == "Explorer"){
$("body").addClass("ie");
}
else if(bv == "Firefox"){
$("body").addClass("Firefox");
}
$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
'width' : '100%',
'margin-left' : '0px',
});
});
.relative {
background-color: red;
height: 30px;
position: relative;
width: 30px;
}
.relative .child {
left: 10px;
position: absolute;
top: 4px;
}
.oc {
background: #ddd none repeat scroll 0 0;
height: 300px;
position: relative;
width: 500px;
float:left;
}
.oc1 {
background: #ddd none repeat scroll 0 0;
height: 300px;
position: relative;
width: 300px;
float:left;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>
Chrome provides no own conditionals to set CSS definitions just for it! There shouldn't be a need to do this, cause Chrome interprets websites like defined in w3c standards.
So, you have two meaningful possibilities:
Get current browser by javascript (look here)
Get current browser by php/serverside (look here)
I am using a sass mixin for chrome styles, this is for Chrome 29+ borrowing the solution from Martin Kristiansson above.
#mixin chrome-styles {
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
#content;
}
}
Use it like this:
#include chrome-styles {
.header { display: none; }
}
How to Apply CSS to Only Chrome
You might try the code below if you want to apply CSS to only Chrome browsers (Webkit/Blink). Keep in mind there are other browsers that use Chrome's Webkit engine...
#supports (not (-moz-appearance:button)) and (contain:paint) and (-webkit-appearance:none) {
body {
background: blue;
}
}
In 2022, this code works pretty well and should work in most Chrome browsers going back to ~ 2013. It should filter out all Internet Explorer, early Trident Edge, Firefox, Safari, and many other browsers. But please test!
Keep in mind Microsoft Edge version 83 and later switched from the old Trident engine to Chrome's Blink browser engine in May of 2020. So, this should work in the newer Edge browsers, as well. Expect that to function that way as the engines under the covers are close to the same!
NOTES ON THIS CSS
As mentioned, the code above works in all browsers that share some modern version of the Chrome Webkit or Blink engines. The two main deciding factors in the code above as far as earliest possible browser support in Chrome-based engines would be support of the CSS feature at-rule #supports and the newer Chrome prefixed property -webkit-appearance:none. Combined, full support for both in Chrome did not begin till May, of 2013 (I believe). So you can count on Chrome browsers version 28 through today would or should support this CSS hack above. But again, please test!
So let's go through how the hack works.....
Use of the new #supports at-rule or 'feature check' allows your browser to check if a specific CSS property or feature, and its value, is supported in the user's browser. The problem is very few older and even newer browsers support the #supports CSS trick. It really did not get support in Chrome till around the May 2013 browser release. So that would be the earliest Chrome browsers supported. Keep in mind Chrome was not released till 2008, so was a late browser.
But browser non-support of #supports is the main way this CSS is hidden from nearly all other browsers since adoption is still so poor. All browsers prior to 2010 and most prior to 2013 will ignore the rule above. But Chrome version 27 till today would have baseline support of the rule. Microsoft Internet Explorer 1-11 completely ignore it, and only Microsoft Edge version 83 to present (2020-present) would understand the #supports rule. Firefox did not adopt it till 2019 and most Safari user agents starting in 2021. So it is a major filtering tool!
The generic "appearance" CSS property (non-prefixed version) was supported in Mozilla/Firefox as early as 2006 and in Chrome around 2010 in prefixed experimental version with partial support for various features. The Firefox prefix version -moz-appearance and the Chrome browser prefixed version -webkit-appearance seem to have early adoption so would find support across a wide range of browsers. The value "button" (pre-2006) has earlier adoption in Mozilla/Firefox browsers than "none" for "apperance", so increases the chance you filter out those browsers. "none" for "appearance" in Chrome was a very early supported property value (2010), so was used to widen the range of Chrome browsers possible. So the two prefix rules both remove the most mozilla/Firefox browsers and widen the most Chrome browsers possible in the code above.
So you can probably assume Chrome browsers starting in 2013-present would be able to use the rules below, and seen by all browsers using Webkit engines since then.
The logic (not (-moz-appearance:none)) hides the CSS block from all Mozilla/Firefox browsers. When combined with limited support for "#support" however, it makes sure even earlier ones are all excluded.
The CSS property contain:paint was mainly supported after 2016 in Chrome and Firefox. So this excludes Safari browsers from the CSS block. Some Safari iOS switched to the Webkit Chrome engine, however. So contain:paint makes sure those older Safari browsers are excluded from the Chrome Webkit filter.
Lastly, the Chrome prefixed rule, -webkit-appearance, applies only to Chrome Webkit browsers. It makes sure the rule below is only seen by Chrome. Keep in mind some later Firefox browsers started to support Chrome prefix properties. But with the extra filters above, they are now hidden from the CSS block above. As mentioned above, -webkit-appearance:none has wide enough adoption that it should at least go back to the earliest adoption date of #support at-rules in the web browser. As far as I know that is sometime around May of 2013.
So in summary, the CSS above filters allows only Chrome browsers going back to version 27 in 2013 and Microsoft Edge 83 in 2020 to see the code.
WHY DO WE EVEN NEED TO APPLY CSS FOR CHROME?
HTML5 and CSS standards have changed since 2010. There are no more W3C Recommendations where carefully agreed on standards are applied by all browsers. This means browser vendors are randomly changing their browsers continually (called Evergreen) as far as CSS support. It also means CSS will change on-the-fly, code forks will rarely be aligned, CSS in all the other browsers will rarely match each other, and "hacks" above could change as well.
This failed Web Standards movement forms the basis for why new CSS has partial support between browsers and versions, browsers will increasingly not look the same, and these prefixed CSS hacks will be needed in the future. Not good :(
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
/*your rules for chrome*/
#divid{
position:relative;
top:-2px;
}
}
check this.it work for me.
For example:
.foo { font-family: ; font-size: ; }
I'm seeing different behaviors in IE9 and Chrome. IE9 seems to use this to zero out those attributes (although, this behavior isn't being consistent across different pages for me at the moment).
In Chrome, it seems to simply ignore it.
What is the true expected behavior? Is that even valid CSS?
That is invalid CSS.
Browsers are supposed to ignore declarations without values (and only each declaration, not the entire block or everything after an invalid declaration). From the spec (irrelevant code examples omitted):
Malformed declarations. User agents must handle unexpected tokens encountered while parsing a declaration by reading until the end of the declaration, while observing the rules for matching pairs of (), [], {}, "", and '', and correctly handling escapes. For example, a malformed declaration may be missing a property, colon (:) or value. The following are all equivalent:
p { color:green }
p { color:green; color: } /* malformed declaration missing value */
p { color:red; color:; color:green } /* same with expected recovery */
Chrome is right. See: p { color:green; color: } here:
http://www.w3.org/TR/CSS2/syndata.html#parsing-errors
.box_content ::selection {
background:#CCCC33; /* Safari */
}
.box_content ::-moz-selection {
background:#CCCC33; /* Firefox */
}
Anyone know if I can combine those like this?
.box_content ::selection .box_content ::-moz-selection {
background:#CCCC33;
}
Or maybe like:
.box_content ::selection, .box_content ::-moz-selection {
background:#CCCC33;
}
The second one is correct. You can use a comma to separate css selection rules.
So given:
selector-rule1, selector-rule2 {
style-x;
style-y;
}
This will apply style-x & style-y to anything that matches either selector-rule1 or selector-rule2.
Just to explain why your first example won't work, its because spaces imply ancestor-descendant relationships, so if you have:
selector-rule4 selector-rule4 {
style-z;
}
Then style-z will be applied to anything that matches selector-rule4 if it is also an an ancestor of something that matches selector-rule3.
More info on selectors here.
Your second example should work fine.
You need to use a comma to group the selectors:
.box_content ::selection, .box_content ::-moz-selection {
background:#CCCC33;
}
Your second example can’t work because a browser has to ignore the complete rule:
When a user agent cannot parse the
selector (i.e., it is not valid CSS
2.1), it must ignore the selector and the following declaration block (if
any) as well.
Opera and Webkit can’t parse the Gecko proprietary selector and Gecko can’t parse the regular ::selection. So the rule will never be applied.