Jump to content

css3 and compatibility


jimfog

Recommended Posts

CSS3 offers great features but what worries me is the compatibility issue. Some users will not be able to see css3 effects etc... cause of their older browsers. So the question comes down to this: css3 in favor of great effects or non-css3 coding in favor of greater compatibility? What do you prefer?

Link to comment
Share on other sites

Depends... some CSS3 effects can easily be fallbacked, like rounded corners for example - if the user has an older browser, he simply would see corners as sharp ones.As for those which can't be fallbacked... I put my bar on IE8, since it's the best you can expect from XP.

Link to comment
Share on other sites

Depends on your target audience and the purpose of your site. Although, I think by now most browsers are modern enough that they support a good chunk of CSS3. The only real exception is IE. Personally, I prefer to use modern coding practices and techniques with graceful degradation for older browsers. Most CSS3 properties degrade well. This site mentions a JavaScript library which detects browser support, and if the browser does not support CSS3, it uses jQuery.

Link to comment
Share on other sites

Depends... some CSS3 effects can easily be fallbacked, like rounded corners for example - if the user has an older browser, he simply would see corners as sharp ones.
Yes but this might ruin the design of the site-so i would use "graceful degradation" so that round corners appear on both cases.
As for those which can't be fallbacked... I put my bar on IE8, since it's the best you can expect from XP.
What do you mean "put my bar in IE8"? I am not following you here
Depends on your target audience and the purpose of your site. Although, I think by now most browsers are modern enough that they support a good chunk of CSS3. The only real exception is IE. Personally, I prefer to use modern coding practices and techniques with graceful degradation for older browsers. Most CSS3 properties degrade well. This site mentions a JavaScript library which detects browser support, and if the browser does not support CSS3, it uses jQuery.
You say "they degrade well". Does that means what boen...robot means, for example,"see corners as sharp", or using css3 for modern browsers AND code also for older browsers which have though THE SAME OUTCOME EFFECT as css3. The end result being round corners(taking as reference this example)for BOTH cases.
Link to comment
Share on other sites

For round corners, box shadow, text shadow in IE7 - 8 I use ie-css3.htc (google), but you can't apply this to individual round corners, only to all four. with the other css3 styling for IE7-8 you can't do anything much to achieve the same effect, unless in some cases use css2 styling in such a way to get more or less the same result and using conditional comments to apply these for IE7-8. 'best viewed in all browsers other than IE, but! if you must! gees...use IE9' is a message you could use :)

Link to comment
Share on other sites

What do you mean "put my bar in IE8"? I am not following you here
I mean that if something is not working in IE8, I say to myself "fine, I'll fix it, so that it looks well even in IE8", but if it doesn't work in IE7 or IE6, I go "screw this! I'll just put a message telling people to upgrade or use another browser!".But like I said, some features fall back easily. I'd use border-radius even though IE8 and below don't support it, because this is not a vital visual style (unlike, say, margins, "display:table;", etc.).
Link to comment
Share on other sites

You say "they degrade well". Does that means what boen...robot means, for example,"see corners as sharp", or using css3 for modern browsers AND code also for older browsers which have though THE SAME OUTCOME EFFECT as css3.
I was referring to the same sort of degradation that boen mentioned. As in, users with older browsers will not have round corners or they will not see transitions.To have the same outcome as CSS3 requires a lot of extra code in many cases. Round corners is a good example. You would need to use images and divs, one for each side and each corner (a total of 8).The link I posted in my previous reply mentions a JavaScript library that allows you to use CSS3 transitions (and possibly some other new properties) for supporting browsers and jQuery for non-supporting browsers.
Link to comment
Share on other sites

Ok i got your point-what worries me though, is that if you have a bunch of css3 features and all these degrade(in case the browser does not support ) then the visual outcome will be far from what i want, so it seems to me, that resorting to js(jQuery) is the way to go if you want to close the holes .

Link to comment
Share on other sites

JS can be turned off, although not typically. However, going the JS route often involved DOM manipulation, which can be taxing on the browser in it's own right depending on the circumastances. If it's vital the design, then images are the surefire way to go, although they require more load times initially. (sprites can be very helpful here). If it's supported well in all the main browsers you care about, then try and use CSS first. There are also proprietary styles that you can use for individual browser vendors. If you are comfortable with the JS route, then use that. Typically a developer would like to use a technique that is forwards compatible as much as it backwards compatible and that doesn't require a ton of extraneous code for something that will soon be standard/spec, given what we know about the fairly generous CSS3 support there is out there for the time being. Using a bunch of JS might seem superflous, because really, eventually it will just be able to be done with CSS fairly soon.

Link to comment
Share on other sites

And something else. You told me for example what is the case with rounded corners(fallbacks in square ones) But what about gradients. I want to aply css3 gradient. Do these degrade also gracefully? Basically, i must have told this from the beginning-sorry for that.

Link to comment
Share on other sites

what about just trying it in a browser that supports, or one that doesn't? you could always google...https://www.google.com/#hl=en&sclient=psy-ab&q=css3+graceful+degradation&oq=css3+grace&aq=0&aqi=g1g-v2g-b1&aql=&gs_sm=3&gs_upl=89l2749l0l3980l10l10l0l0l0l0l114l793l8.2l10l0&gs_l=hp.3.0.0j0i15l2j0i8.89l2749l0l3980l10l10l0l0l0l0l114l793l8j2l10l0.llsin&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb&fp=f20844cc91153529&biw=1440&bih=779 and find something like this (first link)http://jonraasch.com/blog/graceful-degradation-with-css3

Fortunately, most CSS3 properties degrade fairly nicely on their own. Rounded corners become square, gradients become flat colors, and transitions become hard changes.
Link to comment
Share on other sites

In general, any unsupported CSS property is ignored. You can specify a property multiple times, and when you do that, the last supported one will be in effect.So, in the case of gradients, you can simply specify a solid color to be used as a fallback, e.g.

.fancy {background-color: #F07575; /*Fallback for browsers not supporting gradients or SVG backgrounds*/background-image: url("bg.svg"); /*Fallback for browsers not supproting gradients, but supporting SVG backgrounds. The image is expected to completely overlap the color.*/background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55);}

Link to comment
Share on other sites

In general, any unsupported CSS property is ignored. You can specify a property multiple times, and when you do that, the last supported one will be in effect. So, in the case of gradients, you can simply specify a solid color to be used as a fallback, e.g.
.fancy {background-color: #F07575; /*Fallback for browsers not supporting gradients or SVG backgrounds*/background-image: url("bg.svg"); /*Fallback for browsers not supproting gradients, but supporting SVG backgrounds. The image is expected to completely overlap the color.*/background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55);}

The above code is the way to go, but what i do not understand is this SVG format What do you mean by saying "...SVG backgrounds", how SCG relates to PNG or JPEG. I just need some clarification with the above.
Link to comment
Share on other sites

SVG is another image format. Unlike PNG and JPEG, it's a vector format. Although you'd typically use image editors to edit it, SVG uses an XML syntax, so you can use a text editor or an XML API do edit it. There's a tutorial on W3Schools about its syntax.By virtue of being a vector format, SVG images can be stretched without any quality loss. More importantly to the example above, SVG supports gradients.Although SVG has been supported in browsers since Firefox 2, Opera 9 and Safari... 3 I believe... it's only in recent versions (Opera 9.5, Firefox 3.6, IE9, Safari... I think 4) that browsers support SVG images to be used as a value of background-image. Previously, they only supported SVG with <object>, or at best, with <img>.

Link to comment
Share on other sites

Well. i really did not know these facts you mention about SVG. As i understand it, PNG and JPEG(as opposed to SVG) degrade as they stretch-as they are bitmaps. In fact ,i always wonder what is the image format which has to do with vectors, since all the formats I have deal so far are bitmaps.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...