Vaguely related to this question, but not quite the same. I'd like to target Chrome ONLY, without targeting Safari.
I used the following media query, but it targets both Chrome and Safari:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
h1, h2 {
font-weight: bold;
}
}
Chrome does a great job at rendering the header elements in bold even though a bold version of the font I'm using doesn't exist. Safari... not so much. Hence the super specific targeting. For reference, the font is Cody Star.
There are browser-specific CSS hacks that might work for this problem now, but they certainly aren't supported.
IMHO, your best bet is to add a class to the body tag using JavaScript that reads your navigator.userAgent and use that class (body.chrome for example) to target Chrome.
Safari,Chrome,Opera all of them are Web-kit browsers, so it's very difficult to find a CSS or media query hack to target this browsers specifically,
but here is a JavaScript code that will target the Google Chrome,
not all the versions of Google Chrome,But Chrome 14 and later.
var isChrome = !!window.chrome && !!window.chrome.webstore;
if you want to know more information,please refer to my answer,for this question
Related
I am using 'Coolvetica Regular' for my headings. It works ok on different browsers on my PC, but on mobile it looks weird on every mobile browser that is based on Chromium (Chrome, Edge, Kiwi).
And by weird I mean that letter-spacing between words isn't handled correctly on mobile. This font was also used on this portfolio website and I didn't see this problem there.
What should I do to fix this problem? Is there any way to only add letter-spacing to mobile Chromium-based browsers?
I'm assuming you're referring to the font. You need to note that not all browsers are created equally. If you want consistency cross-browser then I might suggest sticking with a simpler font such as sans-serif. Now, in my opinion, the fonts don't seem to differ too much to raise concern. Remember, the first font in quotation marks is what the browser is going to attempt to render first. If it cannot, it will move to the second option. Chrome and Edge are probably the most versatile browsers.
This is the best solution I could come up with. I saw this question on StackOverflow and tried to implement it for my own scenario. On the desktop, it worked correctly and could differentiate between Chrome and Firefox, but on the mobile, it didn't differentiate between Firefox and other Chromium-based browsers.
Overall I'm happy with the result and I don't think this issue worths the time and effort as #Rene suggested in a comment above.
Here's what I added at the end of my CSS to fix this issue:
h1, h2 {letter-spacing: 0;}
#media screen and (max-width: 480px) {
.selector:not(*:root), h1, h2 {
letter-spacing: 0.04em;
}
}
I've recently came across a project with css rules like this:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder {
line-height: 140%;
}
}
In my opinion this is kinda weird, as I know vendor prefixes are used to target different browsers. What about a situation like this then, when you use a different vendor prefix compared to the parent? Is it just a typo from a previous programmer? Or is it a perfectly valid rule that would apply in certain scenarios? If yes, what would the scenario be when this rule gets applied?
Looks like a careless mistake. There are no known implementations of Gecko that recognize -webkit-min-device-pixel-ratio — the prefix that Gecko uses is min--moz-device-pixel-ratio1 instead, which has since been deprecated in favor of the standardized resolution. And there are no known implementations of WebKit or Blink that recognize :-moz-placeholder.
Either way, this snippet of CSS is meaningless to both engines. At best, in WebKit/Blink, you get an empty #media screen and (...) {} rule, and in Gecko, you theoretically get #media not all { ... }, which means "this rule will never be applied in any situation".
1 Unlike the code in the question, this is not a typo.
-webkit-min-device-pixel-ratio:0 Is a browser hack to target Safari 3+ and Chrome 1+.
input:-moz-placeholder Is a pseudo-class that has been deprecated in Firefox 19 in favor of the ::-moz-placeholder pseudo-element and only targets Firefox browsers.
Given your code that your code is asking to target Safari and Chrome only to then run code for FireFox only; it's ultimately code that will never run under any circumstances and is likely a mistake.
Additional information can be read on the Safari 3+ / Chrome 1+ hack here:
https://css-tricks.com/snippets/css/browser-specific-hacks/
and more information on -moz-placeholder can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
and more information on style placeholder text in general can be found here:
https://css-tricks.com/snippets/css/style-placeholder-text/
can you please let me know how to write single statement to with specific for IE, Mozilla, Chrome.
Whether using this approach to target browsers specifically is a good idea or not is a seperate question in itself. However, assuming you have a legitimate reason to target browsers as you asked, there are couple of ways you can achieve your goal
CSS Browser Specific Selector Hacks
browserhacks.com has an exhaustive list of browser specific selector based hacks that will apply to only specific browsers. Also, as Mr. Alien suggests, this question details browser hacks well too.
CSS Browser Selector JS Library
This library will add classes to the root html tag that indicate browsers and more other potentially useful info: https://github.com/ridjohansen/css_browser_selector/
Once you've included the library, it . You can use those classes to target specific browsers in css similar to this:
.chrome .some-class { } /* Will only apply in chrome (all versions) */
.ie .some-class { } /* Will only apply in IE (all versions) */
.ie7 .some-class { } /* Will only apply in IE7 */
.opera .some-class { } /* Will only apply in Opera (all versions) */
The library will add a bunch of classes that can be used to target based on browser, browser version, platform, platform version, device, device version etc. Check the documentation in the github link for full details.
I am newbie to web development, in specific browser related css compatibility issues.
I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.
Please refer to this link to see my css rules.
Any suggestions regarding why and how this happens. Any useful link also will be appreciated.
Thanks in advance.
Try using a media query, selecting only webkit specific stuff such as:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Your CSS */
}
This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.