Does anyone know if IE now supports transparent png's etc...? Does chrome as well?
IE7+, and every other modern browser including Chrome, supports PNGs with alpha channels.
The only drawback to watch out for in IE7-8 is that alpha channels do not play nicely with the IE-specific alpha filter typically used as fallback for CSS opacity.
Every mayor browser does (so that includes chrome). Only IE6 doesn't, but I wouldn't consider that a problem. So yes, you can use semi-transparent png's.
The older versions of IE don't support transparency, but there are a lot of fixes out there -- for example, http://jquery.andreaseberhard.de/pngFix/.
Related
I have an SVG icon and a corresponding PNG icon.
My goal is to load SVG icon when the browser supports it and PNG icon when the browser doesn't support SVG(IE8, IE9-quirks) using SVG Fallback.
I also have a restriction that I should use only sprites.
I have built the sprites individually, no problems on that front.
Now I do the following.
for a span with class 'abc',
span.abc {
background: url(sprite.png) bg-posn-x bg-posn-y;
background: rgba(0,0,0,0) url(sprite.svg) bg-posn-x bg-posn-y;
width: npx;
height: npx;
}
The trick is that browsers that don't support rgba fall back to the previous background delcaration.
This works perfectly in standards, but not ie8, ie9 quirks.
Unfortunately, I should not convert my page to standards.
Did anyone face this issue previously/ know how to solve it?
I would suggest using something like Modernizer to do feature detection to get around this, relying on browser fallback can be a pain in the butt sometimes. Check here: http://modernizr.com/docs/
It will add classes to the body like "no-rgba" so you will know when to do a work around.
Is there a way to make a grayscale image in chrome via css?
I have tried this but doesn't work on latest version of chrome
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is better and easier approach than SVG for webkit...
Another solution would be svg with a level of indirection.
Basically, <img src="wrapper.svg"/> where wrapper.svg applies an svg filter to the svg, and the svg has an image element pointing to your raster image. Works in Opera, Chrome, Firefox and probably IE10 (untested).
Here's a demo. You can pass in your own url if you encodeURIComponent it first. Note though that for passing in parameters to work it relies on scripting being enabled, so if you need to use it in <img> elements or in a css background image you'd need to generate the svg files on the server.
Not yet, but Chrome 18 will support css filters (released later this year). SVG filters is only supported by Firefox. You should be able to find a consistent canvas+javascript solution though.
EDIT: See Erik Dahlström's post for alternate solution.
Here's an HTML5 solution. Supported by current versions of Chrome: http://webdesignerwall.com/demo/html5-grayscale/
I need to have gradient backgrounds on my website for internet explorer. I know there is some kind of proprietry way of doing this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df');
But this doesn't grok with border-radius (supported by IE8, at least), which my site uses all over the place.
How should I solve this? (Other than just not having gradient backgrounds on old versions of IE, I mean.)
There's a great library called CSS3PIE, which adds support to IE 6-7-8-9 for many of the CSS3 stuff you seem to be interested in.
I'm using it a lot, and it's never let me down (although it does have its quirks).
My customer is telling me there are black outlines around the elliptical links on this page
http://animactions.ca/volet_entreprise.php
when using Internet Explorer. None of my pc's show this and i'm not sure how to fix this.
Thanks
It seems to be the outline of the coordinates area, set your CSS there as folows:
p.style2,
p.style2:focus,
p.style2:active,
p.style2:hover {outline:none; border:0;}
Should take care of it, but if not you may try:
p.style2 map,
p.style2 map:focus,
p.style2 map:active,
p.style2 map:hover {outline:none; border:0;}
Hope it helps...
Btw: I've tested that link on FF, IE 7 & 8, Safari, Chrome and Opera Over Windows, and FF over Linux and it was all ok... my guess is that you're client has an old browser's version that needs to be updated
It's probably because you're using 24-bit .png background images with alpha transparency and your client must be using IE6 (which doesn't natively support this). If this is the case then you need to implement a PNG transparency script. Here are a few:
http://www.twinhelix.com/css/iepngfix/
http://www.dillerdesign.com/experiment/DD_belatedPNG/
http://jquery.khurshid.com/ifixpng.php
Some browsers show a border around images inside <a> elements, though off my head it's a blue border rather than a black one. Try border: none instead of outline: none.
EDIT I can't reproduce it either.
I've already seen a lot of examples, but none of them work in safari.
For example:
https://jakearchibald.com/scratch/alphavid/
https://simpl.info/videoalpha/
http://www.sciencelifeny.com/transparency/transparency.html
Also I know about APNG but it is not supported in IE and Edge.
There is a seeThru library, but to work with it you need to create a mask. Is there a cross-browser solution?