my safari browser version is 5.0.and my problem is how to give a css for safari browser not a chrome browser.
please, help me.Thanks
Use this. It will work only in Safari.
/* Css for Safari */
#media screen and (-webkit-min-device-pixel-ratio:0){
::i-block-chrome, .yourClassName {
background:#f00;
}
}
CSS Selector/Property/Value Hacks are imho problematic, as
preprocessors like SASS might not work with them
browsers or browser-versions they apply to, are subject to change
Therefore - if you really need to use browser-specific css - I'd recommend you to use JavaScript to set a certain class to the or tag, which is then used by a CSS Selector to style only in these desired browsers.
JS:
if(doSomeUserAgentLogic()) {
document.body.classList.add("is-safari")
}
CSS:
body.is-safari .custom-selector {
property: value;
}
Detecting the browser and certain versions using the userAgent in JavaScript is not that easy, therefore you should probably use something like https://github.com/DamonOehlman/detect-browser, but at least this way of detecting is "quite" stable.
Related
Can you please let me know how I can apply a specific rule like
.btn{width:25%;}
only on Safari? right now I have a rule .btn{width:23%;} which is working fine in all browsers but not in safari (my app btns looks smaller at safari).
I already saw some Browser Specific Hacks but they were very confusing for me.
Thanks
/* Safari Specific CSS */
#media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome,.btn{
width:25%;
}
}
So looking at the Browser Specific hacks URL that you posted. I am not sure what was so confusing about it...
html[xmlns*=""]:root .btn{
width:25%;
}
This should work
I have the following div:
<div id="views" style="margin-top:34px; margin-left:35px;">
// code...
</div>
this works perfect for me in all explorers but in safari in order to work perfect I need to set margin-top: -40 px; Any idea which is the easiest way to do this? I mean to make is select browser and if safari to apply margin-top: -40 px;
You could try to set specific vendor prefixes (although chrome and safari are both webkit)
this way you could set different styles for different browsers.
Vender Specific Prefix
Or the much more difficult way... detecting the browser and assigning CSS
Browser Detection
You should post some code though, I feel this problem your having could be avoided in a much more graceful manner.
Take out your inline styles.
Detect the browser by JavaScript,
add a class of .safari to the body tag if Safari is detected, then have your general
and Safari specific styles like this:
CSS:
#views {
margin-top:34px;
margin-left:35px;
}
.safari #views {
margin-top:-40px;
margin-left:35px;
}
Safari styles will be applied to Safari due to higher CSS specificity.
I just ran into what seems like absurd behavior to me. If IE8 doesn't understand part of a rule it ignores the entire thing:
input[type=radio]:checked,
input.checked {
/* Some CSS */
}
I already have IE8 specific JS adding the .checked class, but because it doesn't understand :checked, it ignores the entire thing, so I'm forced to now have several rules:
input[type=radio]:checked{
/* Some CSS */
}
input.checked {
/* The exact same CSS */
}
So my question -- does anyone know of a way to get IE8 and below to ignore the :checked instead of throwing out the entire rule?
Very basic example: http://jsfiddle.net/8UT56/
You can use a library like http://selectivizr.com/ to give IE newer selectors.
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}
Firefox 3.5 now supports the nth-* pseudoclass, which was what I was using to target my css for Safari and Chrome. Now Firefox reads those too, causing minor layout issues. Does anyone know a way to specifically target FF 3.5+?
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ {
height:19px
}
How about this, I tested it in Safari 4 and the height is 19px, in Firefox 3.5 the height displays as 39px.
<style>
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }
</style>
CSS Browser selector lets you write CSS that targets specific browsers, without worrying about hacks. I cannot recommend it highly enough.
On a "religious" note, we shouldn't be using CSS to target any browser. Unfortunately due to IE being waaaay behind on supporting CSS features (and all the bugs) hacks have been applied to target CSS for a given browser.
The Conditional Comments that IE uses... although ugly... do provide a handy mechanism for targeting a browser (and version)... I almost wish other browsers supported this.
I've seen a few sites do this... which is an interesting approach to handling targeting of various browsers.
<head>
<style>
body.safari form input{
/*special styles for Safari*/
}
body.firefox form input{
/*special styles for Firefox*/
}
body.firefox.v3-5 form input{
/*special styles for Firefox 3.5*/
}
</style>
</head>
<body>
<script>
//run code here, that sets the class and or id attribute on the body tag...
</script>
In the long run, they are all hacks... it just depends what kind of hacks you're willing to live with ;-)
Incidentally the "BODY:nth-of-type(1) ..." syntax breaks YUI compressor's ability to minify CSS. Instead I use "body:first-of-type ...".
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
using http://rafael.adm.br/css_browser_selector/
just substitute this part:
is('firefox/2')?g+'
ff2':is('firefox/3')?g+' ff3'
for this part:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3')?g+' ff3'
that should do the trick
PS: if you want to also catch other 3.x versions you might want to add:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3.6')?g+'
ff3_5':is('firefox/3.8')?g+'
ff3_5':is('firefox/3')?g+' ff3'
This works:
#media screen and (-webkit-min-device-pixel-ratio:0){
#topsearch input[type=submit] { height:19px; }
}}
That targets newer WebKit browsers, and not Gecko or Trident.
A lot has changed in the last few years. For a Firefox 3.5+ hack, here is one I created for that purpose:
/* Firefox 3.5 and newer */
_:-moz-handler-blocked, :root .selector { property:value; }
To test it you can see these live along with many others for different versions of browser at my live CSS hacks test site here: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox
Enjoy!