Background-Image + Rgba() with Fallback in Ie 7-8

background-image + rgba() with fallback in IE 7-8

Try this:

.element {
    background: url(image.png);
    background-color: #000; /* IE 8 */
    background-color: rgba(0,0,0,0.5);
    *background-color: #000; /* IE 7 */
}

IE8: Div hover only works when background color is set, very strange, why?

I recently ran in to this problem also. I also solved it by adding a 1 by 1 px transparent background image to the hover element. I felt like taking a shower afterwards.

IE8: Div hover only works when background color is set, very strange, why?

I recently ran in to this problem also. I also solved it by adding a 1 by 1 px transparent background image to the hover element. I felt like taking a shower afterwards.

CSS conditionally apply style based on availability of a property

You can test for most CSS properties via

document.body.style.hasOwnProperty(`prop name`)

The text of the property name changes like standard style properties, i.e.

css -webkit-background-filter <=> webkitBackgroundFilter js

As to applying the styles, depends on whether you add/change the styles of elements or add/change the CSS rules...

Slick Slider css has `\9` in margin rule

This is a "CSS Hack" for IE, to make it render properly.

CSS: automatic fallback/workaround for devices not supporting CSS3 image-mask and/or pseudo-elements

Ok. Only webkit supports image-mask so to get a masking-effect you can either use

a) SVG images = you will need the SVG plugin to be loaded in IE
b) Cutout PNG images

I went with cutting out png shapes from a background-image

Example see here

---

Related Topics