14 replies to this topic

[jimfog]

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?

[boen_robot]

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.

[ShadowMage]

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.

[jimfog]

boen_robot, on 06 March 2012 - 03:17 PM, said:

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.

boen_robot, on 06 March 2012 - 03:17 PM, said:

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

ShadowMage, on 06 March 2012 - 03:18 PM, said:

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.

[dsonesuk]

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

[boen_robot]

Quote

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.).

[ShadowMage]

jimfog, on 07 March 2012 - 08:32 AM, said:

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.

[jimfog]

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 .

Edited by jimfog, 08 March 2012 - 01:36 PM.

[thescientist]

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.

[jimfog]

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.

Edited by jimfog, 09 March 2012 - 10:23 AM.

[thescientist]

what about just trying it in a browser that supports, or one that doesn't?

you could always google...
https://www.google.c...iw=1440&bih=779

and find something like this (first link)
http://jonraasch.com...ation-with-css3

Quote

Fortunately, most CSS3 properties degrade fairly nicely on their own. Rounded corners become square, gradients become flat colors, and transitions become hard changes.

[boen_robot]

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);
}

[jimfog]

boen_robot, on 10 March 2012 - 04:10 PM, said:

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.

[boen_robot]

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>.

[jimfog]

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.