CSS - How to make if “Firefox, Safari, Opera and IE”?
Question
I love the effect of using border and box-shadow inset but only "Chrome" does support the inset negative value 0px, 0px, -1px .
However when I checked FF, Safari and IE (opera I don't have it but I bet it doesn't support it either)... There wasn't box-shadow at all.
When I inspect elements with firebug and try to type box-shadow: 0px 0px 1px rgba(255,255,255,0.7) inset; it does appears but not with -1px . Then the value is invalid.
Does anybody know anything about this? If not how can I make "IF" the browser isn't chrome, then add positive value instead?
2 answers
solution1
2 2012-08-07 22:30:40
You could use user-agent detection to detect chrome browser:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
(taken from this page )
and then:
// include this in the <head> of your doc
if (is_chrome) {
<link href="chrome_style.css" rel="stylesheet" />
} else {
// do stuff for other browsers (or ignore)
}
It seems the word 'chrome' appears in most (if not all) chrome's user agent. I found that userAgentString.com provides a list for previous user-agent strings of older versions as well.
solution2
1 ACCPTED 2012-08-07 22:23:55
I'm sure there's a better way for this specific case, but I just want to share this.
CSS Browser Selector is a pretty cool little JS file that allows you to specify CSS classes for specific browsers.
For example the following will only apply to elements with the example class if the browser is IE7.
.ie7 .example {
background-color: orange
}
The page lists all the supported browsers and you can make a style that applies to everything but Chrome.
.ie, .ie7, .ie8, .opera, ... { style }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.