Is it possible to use CSS round-corners and still pass validation?

views:

answers:

+2 Q:

Is it possible to use CSS round-corners and still pass validation?

IIRC the situation is that IE simply doesn't support rounded corners, but some other browsers need browser-specific extensions... either FF or web-kit, I don't recall.

I'm happy to use it in some cases and let IE fall-back to square corners, but does using browser-extension CSS break validation... I quite like having my site validate AND work on IE6.

+1 A:

I think that most browsers no longer need specific extensions: simply use border-radius, and make sure you validate your CSS as CSS3 (rather than CSS 2.1, which the default for the W3C validator).

Eric 2010-05-28 14:04:45

John 2010-05-28 14:09:34

Certainly works in the newest chrome and FF. Not sure about safari.

Eric 2010-05-28 14:14:41

+5 A:

border-radius will validate against CSS3 and will work in IE9 and Opera 9.5+.

To support rounded corners in Gecko (Firefox) and WebKit (Safari, Chrome) you would need the vendor extensions -moz-border-radius and -webkit-border-radius for now. Eventually (sometime around when CSS3 Background and Borders reaches Recommendation stage), those browsers will also support the simple border-radius property, but for now they don't as there are still some issues to be hammered out over the exact syntax for specific elliptical and multiple corners.

The -vendor-x extension properties will never validate, which is a shame, but they are defined by CSS itself to be harmless so you can safely ignore those errors.

bobince 2010-05-28 14:32:28

@bobince - http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html CSS vendor prefixes considered harmful

metal-gear-solid 2010-05-29 02:21:58

@metal: sorry, but Peter is talking total crap here. Without vendor extensions we would had had a broken incompatible mess with `border-radius` as two vendors chose diverging syntax. “Forcing web developers to make their style sheets much more verbose” absolutely *is* necessary until such time as new features are standardised. You can certainly criticise the W3 process for being too slow, but as a holding measure in the meantime vendor extensions are the least-worst solution.

bobince 2010-05-29 11:05:18

His ‘redux’ article rows backwards from his initial unworkable suggestion, grasping instead at ideas like “browser vendors should go through their current list of prefixed declarations and remove the prefixes where there is no incompatibility”... well, duh, what does he think the standardisation process *is*? The whole point of W3 CR-stage specs is to gather experience from deployed imps and resolve any incompatibilities before Rec. You could certainly argue that this process is currently too slow, partly because each individual standard is too big, but that's a difficult problem to address.

bobince 2010-05-29 11:10:32

Invalid HTML/CSS is not why pages break in browsers like IE6, it's because they don't follow the standard.

IMO, validation is meaningless if you're using a CSS property for progressive enhancement. If the rest of the page is valid then adding border radius (including the vendor-specific properties) doesn't break in other browsers, they just ignore the property.

DisgruntledGoat 2010-05-28 15:58:16

That's not the point. It works in IE6, and validates right now. Working pages is the most important thing, but it is preferable to be able to display standards-validated logos since this is important to some people.

John 2010-05-31 12:32:49

@John: Sure, I understand. I'm just saying that valid code != good code, necessarily. The point of progressive enhancement is to add things that don't work in every browser (but also don't have negative effects). Half the sites that have those silly badges on don't validate anyway. And who the heck are they for? Your users certainly won't care.

DisgruntledGoat 2010-05-31 13:18:01

If I am selling my services to other techies they may care... I'm a software company not a web-design company but still I might expect techy clients to view-source on my page and test the validation!

John 2010-05-31 13:59:53

Using vendor extensions will invalidate your document of course, since they're defined to signify to designers that the engines only implement those CSS styles experimentally.

However, if you still want to display CSS rounded corners for the browsers that still insist on vendor extensions and keep your document valid, you can choose one of these:

Use JavaScript on the client side to apply them after your page loads
Use a server-side script to check the user-agent string for 'W3C' and only prevent the vendor extension styles from displaying to the validator, while continuing to allow them to display to web browsers

If it's against your principles to lie to the validator, well, I can't help you further then :P

BoltClock 2010-05-28 16:04:26

ansaurus

tags:

views:

answers:

Is it possible to use CSS round-corners and still pass validation?

related questions