Forum Moderators: not2easy
I would like to start using the multiple backgrounds where available and thought the background property might be available by using -webkit-background, where it could be kept in the main sheet and added to as other browsers jumped on board but it's not.
so I'm thinking the best way to use it would be to use a sheet which targets only Safari/Chrome
I came up with this:
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" media="screen and -webkit-min-device-pixel-ratio: 0" href="webkit.css"/>
which appears to work, does anyone have any pros and cons of the various methods or have experience on whether this stable or liable to break in the future?
However I've discovered that if you use brackets around the media query
<link rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>
You can exclude Opera 9.5 upwards, then by using a CSS3 selector in the webkit sheet to prefix all styles:
head~body li {} you can exclude Opera 9.5 downwards.. so that's Opera out of the way
Then by playing around I found that if you use the same inline @media query inside webkit.css
@media screen and (-webkit-min-device-pixel-ratio:0) {
head~body {background: #abc;}
}
that now also excludes Firefox.
any more thoughts? easier way?
It uses a.o. a CSS3 media query to target small screens.
CSS3 media queries require the braces around expressions in their syntax [w3.org]
I came up with this:<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" media="screen and -webkit-min-device-pixel-ratio: 0" href="webkit.css"/>
This is a malformed Media Query, since the feature, '-webkit-min-device-pixel-ratio: 0' isn't contained within paranthesis, as swa66 points out.
well it turns out it's still not that stable at all as it still targets Opera and FF even with the -webkit prefix
It's not a case of an unstable Media Queries implementation, since (due to the omission of the parenthesis) the above rule is parsed as a standard media descriptor rule. As such, as per parsing rules, a standards-compliant UA should truncate the Media attribute before encountering an invalid or unknown Media descriptor - it's worth noting IE8 doesn't comply to parsing rules, in this respect (see below)
However I've discovered that if you use brackets around the media query<link rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>You can exclude Opera 9.5 upwards, then by using a CSS3 selector in the webkit sheet to prefix all styles
Opera 9.5+ is exhibiting the correct behaviour; Firefox should also drop the entire Media Query in this case, since the '-webkit-min-device-pixel-ratio:0' feature is unknown to itself, but fails to do so.
Ultimately, when Media Queries is properly implemented in UAs (especially Firefox), (combined with properties that have been vendor-prefixed), it will offer an easy way to target a particular browser. Fortunately, IE8s current behaviour actually aids us in coming targeting Safari; as I mentioned before, it drops the entire media attribute (and doesn't truncate) if it encounters an invalid media descriptor, which means it will drop every media query we give it without trying to parse it.
>>unstable
Didn't mean to imply it was an unstable implementation of the query itself.. I just meant that it was unstable for the purposes I want it for, a filter :o
I know Opera & FF should ignore it too because of the -webkit prefix - but for FF it didn't, still doesn't, unless it was put inside the sheet as an @media query too.
I never tried it using @import to get the stylesheet perhaps that would work for FF too?
Opera is now getting it right, as you say, but that doesn't help for back support of Opera.. however the extra advanced selector trick helps filter the lower versions out too.
although I figure it would be OK to add multiple background rules to a main sheet as non-supporting browsers should just ignore those rules anyway.. I thought there might be cases where we would then want to make some other elements (internal) elements have a transparent background in Safari only to allow the multiple background to do its work.. this is the bit that would not be possible to overrule without a safari filter
>>browser specific extensions.
that's the other thing that worries me about the "stability" of this as a filter.. we can't be sure that they will always use the extension. And talking of extensions, in this case (background property) I think it's worked against CSS/Safari, and I wish they would've allowed us access to a -webkit-background property too, although background is a well supported property to allow us to target it with or without their extension we could've had access to their extra features quite easily
anyway thanks for help, and anymore ideas or discoveries stick them in here
ta.
I know Opera & FF should ignore it too because of the -webkit prefix - but for FF it didn't, still doesn't, unless it was put inside the sheet as an @media query too.
If you're talking about
<link rel="stylesheet" media="screen and -webkit-min-device-pixel-ratio: 0" href="webkit.css"/> then the UA should truncate the Media attribute value before encountering the invalid Media descriptor ('-webkit-min-device-pixel-ratio: 0', in this case)- which every browser except IE does. The '-webkit-' prefix makes no difference here; all browsers interpret it as an invalid Media descriptor (including Safari), so all standards-compliant browsers will parse the LINK declaration.
However, if you're talking about
<link rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio: 0)" href="webkit.css"/>then that Media Query should be dropped entirely, thus the whole LINK declaration is dropped - which Firefox doesn't do.
I never tried it using @import to get the stylesheet perhaps that would work for FF too?
As you probably know, the @import rule just gives authors another way to insert a stylesheet into a document; the criteria which governs whether a stylesheet can be used is out of scope of the @import (although you can Media Queries in this manner too).
that's the other thing that worries me about the "stability" of this as a filter.. we can't be sure that they will always use the extension
If you're able to find a standardised webkit-prefixed media query feature that is stil supported after the release of the normal-syntaxed feature (i.e '-webkit-device-aspect-ratio'), then you're quids in.
is there a CSS hack for Chrome that would not affect Safari?
Need to fix a 1px gap on top of an img (a span hover). Chrome has the gap, Safari doesn't. Help please!
thank you:)
not sure that there is such a thing as a Chrome Only filter at elast not without some browser sniffing.
Chrome and Safari both use the Webkit Engine so should render the same - Maybe the 1px gap is a rounding difference?
problem sorted. I had to replace 'margin-top' by 'top' in a:hover span and the gap dissapeared. I have another problem now, I'm not sure if I can post it in this thread.
Basically, I have a pop-up hover span img+text gallery fired by a element. a elements are numbers aligned to the right of the screen, the pop-up image with text shoudl display on the left in the same place, constantly, no matter what numbers being hovered over. the position is set to absolute and works perfectly fine in Opera, Chrome, Safari, Firefox, IE8 but it doesn't in IE7. I have a separate style sheet for IE7 and aligned the images to fit in the same place horizontally but what happens is that they are not appearing in the same place but they seem to be relative to a elements (in my case numbers). DO you have any idea what can be wrong?
Absolute positioning is relative to the closest parent that has position or failing such a parent relative to the viewport.
