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.
Related
If I want a simple two color gradient background, would it be accurate to say that SVG would have more cross-browser support than HTML5?
I checked for Gradient support in old browsers in SVG and they all appear to support them. However, some real-world experience can help shed some light on the pros and cons of these two choices? There are some questions asked earlier but they do not address this specific case of a simple two-color gradient to be used as a background and comparison with HTML5 gradient support.
Also, I would like to know if the same SVG or CSS, whichever option is chosen, will work for all the major browsers or is there tweaking required to support different browsers. For emphasis, I repeat: I AM NOT LOOKING FOR ANY FANCY BACKGROUND, JUST A TWO-COLOR GRADIENT.
(An auxiliary optional question: Will SVG support eventually die in browsers given its lack of popularity?)
The only browser version with significant marketshare that supports SVG but not CSS3 gradients is Internet Explorer 9.
Pros of using SVG gradients
IE9 support
It's cleaner linking to an external SVG file rather than
using vendor prefixes for gradients
Cons of using SVG gradients
Causes an additional request unless you base64 encode it and embed it in the CSS file.
If you embed the base64 version of the gradient then it's difficult to modify.
Your concern for SVG's future is greatly exaggerated. There's plenty of interest in SVG given new high resolution displays ("retina") an it is used by major javascript data-viz and graphing libraries. If anything, the future actually looks brighter for SVG.
I personally use SVG gradients when I need IE9 support. I use Microsoft's SVG Gradient Generator and use the base64 version as to not cause an additional request. I haven't run into any issue at all, SVG gradients behave just like their CSS3 counterparts.
I have been trying to apply CSS to a thin spacer that I have .
Normally for mozilla, the gradient that i have added is :
background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%);
This looks in mozilla like :
For IE , i added the following bit of code :
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d5d0',GradientType=0 );
And in IE this looks like :
As you can see from above , the spacer in IE is not a thick continuous red line, however, in mozilla it is so. Can somebody suggest as to how must i make the spacer in IE thick and continuous like in mozilla ?
EDIT : For the folks who are facing this problem, i have used CSSPIE3(PIE.js version 1.0) as per Spudley's suggestion to overcome this problem .
There aren't any good solutions for gradients in old-IE -- it's just something that those old browsers simply don't do very well.
IE's old filter styles are well known for having major bugs and quirks. As you're finding, they're really not much fun to work with.
You have a couple of other options though:
You could just drop the gradients for old IE versions. It's only a visual nicety, and won't affect the actual functionality of the site. Okay, so old IE users may not get the site looking quite as nice as people with newer browsers.... well, yeah, but you know what? They're on an old IE versions, so used to that by now; they can live with it.
Creating a plain fall-back is easy. Simply specify a normal plain colour background style in the CSS immediately above your gradient background. Where there's a conflict, browsers will take the last one they understand, so modern browsers will take the gradient and old IE (and other old browsers if anyone's using them) will take the plain colour background.
If you really do need the gradients, you could try using the CSS3Pie library. This is a little Javascript lib that tries to add a few standard CSS features to old IE versions, including CSS gradients. It works internally by using VML graphics, not filter styles, which means that you don't get the bugs that filter causes, so it might work better for you in this case than what you have.
Hope that helps.
I am working on a real basic design as a side-project for my company, however am unable to get the background-size to do anything meaningful (or find any alternative that preserves the functionality it currently has). I have been working on this specific problem for around an hour and half now, any help would be appreciated.
The site I am working on can be found at http://code.msap.com/gflyer/flyer1.html
its important to note that I cannot modify anything before or after the container div. I also am not able to use javascript, and all CSS must be done in-line.
Is anyone able to steer me in the proper direction here?
IE8 does not support CSS background-size.
Your only solutions are:
ignore it; IE8 users will just have to upgrade.
use a Javascript polyfill to emulate the background-size property in IE8 and earlier.
Rewrite your HTML so that the background image is in its own <img> tag, which is sized appropriately and layered behind the element so that it looks like a background image.
use the Chrome-Frame plugin, which makes IE use the Chrome rendering engine. (your users would have to install the plugin for themselves though)
I have created a background-size polyfill for IE8 that is really simple to use:
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
I have a web service that returns a string of svg code. My problem is, I'm not sure what to do with it. I've never worked with SVG before. My questions are:
Does SVG have strong support by common browsers?
How do I actually display the image that the SVG represents?
SVG is supported by nearly all major browsers except IE i think but that also can be rendered with some plugin. IE renders VML
I suggest using RaphaelJS http://raphaeljs.com/reference.html#image
EDIT :
var r = Raphael("holder", 600, 540); //"holder" is the id of an empty div in html file
r.image("lion.svg", 140, 140, 320, 240);// r.image(src,x,y,width,height)
Svg is a specification for XML. Most modern browsers can just display it inline, but Internet Explorer can't.
I recommend wrapping all your svg content in svgweb, which is a thin layer around the svg code. If the user is using a standard compliant browser, it will display the svg normally. Otherwise, it converts it into flash content.
Starting with HTML5, you can embed SVG directly in a HTML document. This is supported by all of the major modern browsers, except Internet Explorer. You can use the HTML canvas concept (as illustrated here )
But, since you most likely can't leave IE folks behind yet, you can go with one of the three legacy options shown here
Most state-of-the-art-browsers do support SVG,
but few still used browsers (for example Internet Explorer 7) fail.
So for perfect compatibility you should stick to gif, jpg or png formats.
Test your own browser here: http://alphanemoon.com/2008/artikel/inline-svg-browser-test.xhtml
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.