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
Related
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.
I am trying to figure out why my media queries are working in Firefox and Chrome but not Internet Explorer 11.
Page here: http://skeeterz71.com/auto/dealers.html
The top form, the photos and information should be centering on the page at these: If anybody has time to look, I would appreciate it.
#media (max-width: 775px){
.bold-product-headline{
text-align:center;
}
.product-image-left{
text-align:center;
}
.dealer-headline{
text-align:center;
}
.dealer-location{
text-align:center;
}
.dealer-phone{
text-align:center;
}
.dealer-information{
text-align:center;
}
.search-by-city{
text-align:center;
}
.search-by-city-select{
text-align:center;
}
}
Note: I am using Bootstrap, but do not know of a bs class that will center in tablet and phone view only.
Multiple things i can suggest because of which it won't be working :
add where media query should work, eg screen
#media only screen and (max-width : 775px) {}
check that compatibility mode is off or not...most of the times this is the problem
missing <!DOCTYPE html> from your document page
Sorry guys: Nevermind. Didn't have a closing tag on one of the queries. I went over the css so many times trying to find the issue and didn't see it until about the 10th time. Probably should call it a day.
I noticed in the inspect element in ie it didn't even see the media query at all. That clued me in and should have been my first thing I should of done....
FF and chrome saw the media query and ie didn't. Strange, but ie was right in this case. FF and chrome were giving me to much slack:)
I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:
#media screen and (max-width:768px){
/* CSS */
}
All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.
After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.
Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.
I had a similar problem with an external css file in ie10.
I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).
It doesn't solve all my problems, but it may be enough for yours.
#media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}
I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.
$(document).ready(function() {
var w = window.outerWidth;
var h = window.outerHeight;
window.resizeTo(w, h);
});
I had similar issue while using external css with media query. solved by loading css after html code.
You can target IE9 only with this fix:
/* IE9 */
#media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue;
}
}
I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:
#media screen and (max-width: 767px){
/* Safari responds to css here */
}
#media screen and (max-width: 640px){
/* css here is ignored by Safari */
}
Firefox and Chrome both respond appropriately. Does anyone have any ideas about what is going on?
You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.
edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.
Turns out I was missing a squiggly brace, so I had code like the following:
#media screen and (max-width: 767px){
/* lots of css */
.some_selector { padding: 20px; /*<---- missing squiggly brace*/
/* more css */
}
#media screen and (max-width: 640px){
/* lots more css */
}
Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.
Thanks for the help everyone, I feel pretty silly now.
#media rules are the same concept as normal css rules, the latest rule overwrites the first one. but if a rule is different it would not overrule it.
you could make a workaround by typing, this code would just interpreted by webkits
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
I was also facing a similar issue with media query the queries were working at wrong break points: This thread has something that might help others coming here. To quote
Try zooming to a zoom in/out to 0 ie. normal resolution. Press Command + 0
Just a thought: could you have your font sizes bumped up in Safari? Try pressing Command 0 to make sure it’s reset to the default font size.
No but what you said made me figure it out!!! Thank you both for helping me work through this. The problem is, I was testing the media query not by resizing the window, but by zooming in on the page.
So, my question isn’t what I thought it was. Should I re-post this as a new question? In FF and Chrome, the media query in the above code kicks in when I zoom in on the web page, but in Safari, it doesn’t. Is there anything I can do to make Safari act more like FF and Chrome here?
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;
}
}