Working practices with / without CSS3

[simbob]

Following the 'acceptance' of CSS3 as a standard, I want to ask people’s opinion on what’s the best way of working with it.

Recently I tried to validate the CSS of a website I’d designed (as it’s a school they are keen to show compliance) using some CSS3, but the result was approx 22 errors (mostly ‘does not exist’ and ‘Parse error’), which were all related to legacy rules like ‘filter:Alpha(opacity=50)’ for IE8 and various Browser prefixes for older browsers (moz, webkit, o, etc…).

If such rules as ‘Border-radius’, ‘opacity’ and ‘box-shadow’ etc… are only going to work in the latest browsers what’s the point in using them, are people still using images instead when validation is required?

And what about using polyfills? These don't seem to validate either.

Bearing in mind i tried w3.org in their own css3 validator and it came back with 66 errors, how worthwhile an exercise is this?

Thoughts?

 

[Phreaddee]

validation means nothing really except that you haven't made any typos.
css3 prefixes and the like are essentially words it doesn't know.

If I type recognise right here. this forum tells me that is a spelling error. I'm not American so I don't write it as recognize, but to "validate" this post I would need to change it to recognize. does that help me, no? not at all.

If such rules as ‘Border-radius’, ‘opacity’ and ‘box-shadow’ etc… are only going to work in the latest browsers

you mean every browser except IE8 and below?

what’s the point in using them, are people still using images instead when validation is required?

no not validation, IE compatibility.
otherwise no, css all the way.

polyfills get the old guys to play happy.

the choice is yours. code the OLD STYLE and end up being redundant in a few years because you are out of your depth, or code the NEW STYLE and design for the future...
IE6 is dead, IE7 is on its last legs, and IE8 well...give it a few years... once they have all gone it'll be a much smoother road for all parties, and really that is the hold up.
the only thing that is making their life last even longer is developers using old styling and hacks to make IE look great. stuff IE, as long as it functions I couldnt care less what it looks like in IE.
(you end up with better clients with that approach as well)

 

[leroy30]

I always use the new CSS3 in a way that it's backwardly compatible. That way I get *most* of the benefits of CSS3 yet the website still works if the browser doesn't support it. For example I'll use subtle shadows, rounded corners and gradients to make an awesome CSS3 button but if the browser doesn't support CSS3 it still works I just get a mere solid fill, no shadow, square-cornered button.

I don't care for validation as long as it is valid CSS and valid CSS3 then who cares what the validator tells me; For all you know the validator is outdated, not your code.

 

[simbob]

Thanks, i'm liking your attitude, there are so many articles out there saying we have to consider every possible user. Although in this instance the client is a school and their PC's and Internet access are maintained by the local authority so they are marooned on IE8 island, so i have to use some hacks.

Also, i'm getting confused here,

you mean every browser except IE8 and below?

do we no longer have to use any of the prefixes (moz, webkit etc...) for CSS3 to display in older versions of those browsers?

 

[Phreaddee]

iE8 and below are the only browsers that dont natively support css3 elements in anyway be it unprefixed or prefixed.

because modern browsers actively make you upgrade your looking at 85%-90% on the latest versions and the rest on older versions.

prefixes will still need to be used until it becomes a CR or a standard
still... you can use plugins like modernizr which helps older versions
or write a js script that adds -moz-, -webkit-, -o-, -khtml-, -ms- to css3 selectors.

 

[chrishirst]

Personally I have always refered to the W3c validator as the W3c Spell Check.


The prefixes are really there to let the rendering engine developers test and debug their implementation of the particular properties, without it creating any problems for "early adopters" of the specification. Once their code is working correctly to the specification and is bug free (hopefully), the code routines are then compiled into the engine codebase without the prefix OR with the prefixed functions aliased to the official name or vice versa of course. At some point in time the prefixed routines may even be removed from the codebase to reduce the footprint of the engine, which is why you should use the engine prefixed property name AND the official W3c property name to "futureproof" your stylerules.

 

[chrishirst]

Following the 'acceptance' of CSS3 as a standard,

CSS3 is not yet the "standard".

Because of the way that CSS3 is being developed by the W3c in modules, each module will reach recommended status independently. Currently (Aug 2012) only three modules are complete (recommendation) and are almost at full recommended status.
These are the colour module (June 2011), the namespace module (Sept 2011) and the selectors module (Sept 2011).

There are several in the CR status (Candidate [for] Recommendation), but it is going to be some while before all modules are at "Recommended Status" (which not the same as Recommendation in W3c parlance)

 

[jumpingspider]

validation means nothing really except that you haven't made any typos.
css3 prefixes and the like are essentially words it doesn't know.

If I type recognise right here. this forum tells me that is a spelling error. I'm not American so I don't write it as recognize, but to "validate" this post I would need to change it to recognize. does that help me, no? not at all.

This should explain enough on what's his concern is.

 

[zoran123456]

CSS3 is mostly supported in all modern browsers. If it's not supported graceful degradation will occurr. I don't see any problem here.
I prefer using CSS3 rather than creating graphics in Photoshop. Much, much easier.