good morning everybody,
my problem today is, that I would like to use some background-images for mobile phones (retina and non-retina), also for desktop browsers (like the actuell version of google chrome, firefox, internet explorer).
my css, or how I use it:
.item { background-image: url(../images/list-background.png); background-size:24px 24px; }
the original list-background.png is (for retina devices) 48*48* pixel width/height.
in all browsers, there is no problem with the css3 attribute background-size.
now my problem is to support internet explorer 7 and 8.
is there still a useful solution for fixing the background-size in ie7+8?
css3pie offers support for non-repeating background images background-size declaration for ie6 and ie7. http://css3pie.com/2013/01/28/pie-2-0-beta-1-released/ there's also a polyfill that supports ie8. https://github.com/louisremi/background-size-polyfill
or you could simply use conditional comments in your media queries to serve up separate separate images to ie7 and ie8.
Related
I’m developing a webpage with Retina image support for the first time,
I’m using
background: -webkit-image-set( url(images/myimage.png) 1x,
url(images/myimage_2x.png) 2x);
I’ve got Safari on Mac working like expected, and also Chrome on Windows works, but with Internet Explorer and Firefox on Windows no images are displayed.
I thought maybe adding background: url(images/myimage.png) like:
background: -webkit-image-set( url(images/myimage.png) 1x,
url(images/myimage_2x.png) 2x);
background: url(images/myimage.png)
and using that as a fall back would be the right way to do it, while this now get images to show in Internet Explorer and Firefox I then lose my Retina version on Safari (it now only loads the standard resolution image).
If someone could please show me the right way how I provide retina support for Safari on Mac while providing a fall back for IE and FF browsers on Windows etc.
Any help would be great
-webkit- is exclusive to Chrome and Safari (& Opera now). You've to supply vendor specific tags for css to pick up.
Coming ot your question, as of now image-set property is not available for IE or Firefox. You can see this Caniuse data.
Is there anyway to check if a given CSS property is supported? For example, I want to do an animation on a page using perspective-origin, but if not available I would just alter the size instead.
there are many css-hacks for browsers but for that you need to handle yourself each css property for all browsers
CSS Hacks
but if you want automatically handled all the browser for CSS3 and html5 then use Modernizr
Supported browsers
It support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile.
Use http://caniuse.com/ website to check how your property is supported by different versions of web-browsers. You can load different styles according to client's browser version.
Also, you can emulate not-supported properties in old browsers by using CSS3PIE (http://css3pie.com/).
you can include modernizr.js which will be helpful for your issue.
you may visit the following link which was helpful when i was learning about it.
http://css-tricks.com/video-screencasts/126-using-modernizr/
Is there a way that I can use the CSS3 'Background-Size' property and then use something like Modernizr to ensure that it's supported in older browsers (in particular I want to use 'background-size: cover' option)?
I took a look at cssFx, which is mentioned from the Modernizr website, but this only seems to add vendor prefixes for browsers which need them to use a property, rather than allowing browsers such as IE8 to support the background size property.
Also looked at CSS3Pie, but that doesn't seem to currently support the background-size property.
[11/10/2011 - By older browsers I'm thinking mainly of IE7/8, but ideally I would like to cover FF3.6, etc.]
You're right that background-size is not supported on a number of older browsers.
The typical solution to this is to simulate it using an additional <div> or even an <img> element positioned behind the element you want to have the background.
This can be achieved simply by using additional markup, but this solution has the disadvantage of meaning that you'll be using it for all browsers, instead of the background-size property. In other words, it means deliberately degrading your code for the sake of old browsers, which is not ideal.
If you want to use the CSS property for browsers that support it, you could use a bit of Javascript to generate the above markup, but only if required. This means that modern browsers can happily use background-size, and only older browsers will use the fallback.
There are a number of Javascript solutions to this available on the web (a quick google turned up the following: http://css-tricks.com/766-how-to-resizeable-background-image/ among others), but more importantly you need to know how to trigger it based on the browser.
This is where Modernizr comes in. The description you've given of Modernizr in the question is not entirely accurate. What it does is produce a set of CSS classes in your HTML markup and matching variables in your Javascript that represent all the browser features. These are boolean flags indicating whether the current browser supports.
So with Modernizr you can then check in Javascript whether the browser supports background-size or not, and only run the alternative javascript function if it doesn't support it.
if(!Modernizr.backgroundsize) {
//do stuff here to simulate the background-size property for older browsers.
}
Hope that helps.
You can see support for background-size and its properties at: http://www.standardista.com/css3/css3-background-properties
This CSS supports IE9+, FireFox 3.6+, Safari, Chrome:
background-size: cover;
-moz-background-size: cover;
For IE7/8 support, caniuse.com lists this polyfill: https://github.com/louisremi/background-size-polyfill
First of all there is an easy fix for Firefox 3.6. There is a vendor prefix:
-moz-background-size
With regard a solution when using media queries: You could use Modernizr to target another image for when users are viewing older browsers, this would mean another browser request. However, presumably you will be loading smaller images for each query where the screen size gets smaller. Because Modernizr will create a situation where these requests will be ignored in newer browsers you will cut down on server requests for the majority of people using newer browsers.
Out of curiosity, I tried the above solution and it worked. I applied the following modernizr classes as: .no-backgroundsize for non background-size supporting ie and loaded in a new image.
For all other browsers I added the class .backgroundsize and included the prefix mention at the top for FF. This could be repeated for each media query with a new image for .no-background. This is one way to solve the problem.
-I edited this post after I tried it 12/15/12.
I think you probably want to use modernizr to check whether or not the property is supported in the current browser. If not, try to figure out an alternative display of your site/application that still looks good without the need of the background-size property.
Of course, you can also try another approach that does not involve this property at all like an underlying div with a picture in it (which you can size) and the content that is overlapping this div. Good luck.
Another option would be Background Size Polyfill:
.selector {
background-size: cover;
/* The url is relative to the document, not to the css file! */
/* Prefer absolute urls to avoid confusion. */
-ms-behavior: url(/backgroundsize.min.htc);
}
Best sample to support better:
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 - Old Chrome - Old Android */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
Don't add this, because it made problem in new firefox versions:
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5)
Source: mozilla.org
Do I need some special DOCTYPE when I want to use CSS3 ? I have div with dashed border and I want to set border-image (only can with CSS3), but when I set border-image:url(.., nothing happens.
Some browsers may only support CSS 3 features in Standards Mode, but a standards mode triggering Doctype should be considered business as usual and not "special".
Keep in mind that CSS 3 is a collection of specifications that have not yet reached recommendation stage. They are very new and browser support is far from universal (and isn't a binary state of 'supports CSS 3 or not' — the current versions of all the major web browsers support some of CSS 3 (for different values of 'some'). Your problem could simply be that you aren't using a browser that supports border-image.
border-image currently works in Safari
and Firefox 3.1 (Alpha). The syntax to
use it is:
border-image: url(border.png) 27 27 27
27 round round;
See demonstration page
CSS3 is not available on all browsers at this time. Right now, only Chrome, Opera, and Safari support it. CSS3 commands will not work on IE; you'll have to find other work-arounds or wait until browsers catch up with the standards.
Most likely the border-image did not show up, because you didn't use the correct prefixes.
Right now, just "border-image" is not supported by major browsers, hence you need to add the prefix for the browser.
E.g.
-webkit-border-image
-moz-border-image
-o-border-image
-webkit - for WebKit-based browsers such as Google Chrome and Safari
-moz - for Firefox
-o - for Opera
You do not need a specific DOCTYPE, but border-image is only supported in some browsers. You can also use:
-webkit-border-image
-moz-border-image
-khtml-border-image
-o-border-image
to broaden the range of support for browsers. CSS3 has not been implemented as a standard across all current browsers, so using specific CSS tags is the best way to go for now.
Support is very limited and inconsistent across the browsers that do support it. Check Quirksmode (bottom of the table) to see the bad news http://www.quirksmode.org/css/background.html
Which browsers support the CSS !important directive, and what are the various quirks amongst the different browsers that do support it?
Excellent browser support.
It was part of the CSS1 spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
At the very least (from personal experience) IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Pretty much supported by every browser that supports CSS (which is every browser you care about).
According to Wiki, IE7, FireFox 1.0, Safari 1.0, Opera 7, and Chrome fully support !important. IE6 supports it, but it does have a bug. If you do this, color will be red:
h1 {
color: green !important;
color: red;
}
Any browser which supports CSS1+ - ie, any browser that supports CSS - even IE. Even if the CSS implementations are not fully standards-compliant, !important is a core CSS feature.
To elaborate, IIRC, IE5+, all Firefox, most Netscape, Opera, Safari, Chrome.
All browsers apart from IE6 support it which makes it quite handy for CSS hacks. Example:
#someElement { width:200px !important; width:198px; }
All browsers apart from IE6 will render #someElement at 200px because they will honor the !important. IE6 however will just ignore the !important and render #someElement at 198px.
EDIT: Most common use case scenario for this (at least with me) is using it to correct the double margin bug in IE6