So I've been messing around with SVG filters, and I'd like to apply them to HTML content.
http://paulirish.com/work/videooo.xhtml - works in firefox, not chrome.
https://dl.dropbox.com/u/4031469/woohtml.html - My example, works in FF, not Chrome.
Around the web, I've seen things mentioning the url() syntax for defining svg-based filters, while custom() refers to css shaders.
However, I haven't been able to get the filter working by either using the filter: property, nor the -webkit-filter: property.
Any ideas on how to get them to work? about:flags in Chrome doesn't have any options, so I'm trying to figure out if they're not implemented yet, or if I'm doing something incorrect.
In addition to the shorthand filters (blur, sepia, etc), Chrome now supports SVG filters on HTML content, as of V.21, using the -webkit-filter: url(#foo) syntax.
Webkit doesn't support svg filters on html elements. It does, however, support css filters.
So if you want to support both browsers you could write...
selector {
filter: url(#reference_to_blur);
-webkit-filter: blur(10px);
}
You can see more CSS filters here: http://davidwalsh.name/css-filters
I haven't tested, but I doubt IE9 and Opera support css or svg filters in their current incarnations (IE9 and Opera 11).
Related
I have switched from IE8 to IE11, but still I am not able to use CSS3 properties. IE11 not recognising the CSS3 specific porperties like border-radius and box-shadow.
In the developer tools they are without a check box and are red underlined.
A possible reason which I have found is that the doctype html is always commented out and I assume that because of that IE is not recognising the properties.
Try this website: http://caniuse.com/
It will show a guide as to what CSS and general web design rules work with which browsers with and without plugin support.
Border radius: http://caniuse.com/#feat=border-radius
Boxshadow : http://caniuse.com/#feat=css-boxshadow
The graphs output on these links show that both these CSS rules work in IE above IE8.
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.
Do we require filter gradient ( filter: progid:DXImageTransform.Microsoft.gradient ()for IE only as it work on firefox without it?
Setting the below property in css gave me proper gradient effect on IE
#mainmenu .gradientfilterIE {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8', endColorstr='#3FA4D8',GradientType=0 );
}
But on Chrome and Firefox it works without it too.
This question is actually in continuation of Why Displaying different gradient color on IE but works perfectly on firefox and chrome?
The filter (and -ms-filter) CSS properties are only supported in Internet Explorer. They’re a Microsoft extension to CSS, and aren’t supported in any other browser
They’re the only non-image way to achieve gradients in Internet Explorer as of version 9 (although IE 10 should support CSS gradients in some form), so they’re required in IE if you want gradients without images.
(Although as #Jules notes, IE 9 does support both SVG images and embedded base-64 encoded images, so you can have gradients in IE 9 without separate image files).
Note that Microsoft’s gradient filter is a bit more limited than the various CSS gradient syntaxes, and SVG’s gradient syntax.
IE filters are not needed on any browser except IE.
Most other browsers support CSS, including CSS3 gradients
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'm using <meta http-equiv="X-UA-Compatible" content="IE=8"> to make IE9 render as IE8. This has fixed a lot of my issues, however because IE8 doesn't have support for box-shadow I was forced to use filter: progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=145, Strength=5); to get a similar effect to my shadow. Now, IE9 does have support for box-shadow however i can't get IE9 to use box-shadow instead of the filter.
Does anyone know how to get IE9 to render the shadow?
You can't make IE9 use its native box-shadow if it's in IE8 mode.
You can:
Just use IE9 mode and fix your page to work in it - this is what I'd do.
Use CSS3 PIE - it can simulate box-shadow in IE6-8.
Why are you forcing it to render as IE8 then expecting it to render as IE9? :) IE8 didn't have box-shadow support, so IE9 dutifully disables it when it's rendering as IE8.
If you want IE9 to render the box-shadow you'll have to set it back to rendering as IE9 or EDGE. If you are forced to maintain the x-ua-compatible as it is, then you'll have to use filters.
Note there's different syntax for IE8...
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
(example grabbed from http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/)
Because these are pretty nasty ideally I'd suggest you isolate them in an IE-only stylesheet delivered with conditional comments.