CSS thoughts

[6StringGeek]

What is the consensus on using css3 for current projects? Do you consider it bad form to provide functionality such as rounded corners, since it breaks in the validator:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;


Are there any known instances where css3, using the example above, causes older browsers to break?

:D Thanks for any replies.

[rpgfan3233]

In my opinion, if you use the CSS3 properties, you should also include the proprietary versions in browsers that don't provide official support for the properties. For example, if you used the 'border-radius' property, you would include the '-moz-border-radius' and '-webkit-border-radius' properties as well. Of course, keep an eye on the browser support; eventually the '-moz-' and '-webkit-' prefixes will be dropped. For those official properties that don't make it into CSS3, chances are that the proprietary versions will stop working as well.

As for CSS3 breaking older browsers, CSS3 isn't XML; as long as the style sheet follows the grammar rules for CSS, which in its simplest form consists of selector { property: value; }, I don't see any reason for older browsers to simply not apply the style sheet. CSS says to ignore any unrecognised properties. Of course, if there was an actual syntax error, the style sheet would fail to be applied as the author intended.

Simply put, I think it's fine to use them as long as you keep in mind that they won't always work. Use the official property name in addition to the prefixed properties. If a browser doesn't support a property, it should simply be ignored. Of course, avoid using the prefixed properties when possible.

:D

[Charles]

In my opinion, browsers should each support their own extensions to CSS under their own MIME type. Id est: <style type="text/microsoft-css">

[rpgfan3233]

In my opinion, browsers should each support their own extensions to CSS under their own MIME type. Id est: <style type="text/microsoft-css">

That's a possibility. However, you could very well be introducing unnecessary complexity as well:
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/gecko-css" href="gecko.css" />
<link rel="stylesheet" type="text/webkit-css" href="webkit.css" />

I don't even want to mention style elements with the CDATA section issue between HTML and XHTML, but the fact remains that you shouldn't need to use multiple style sheets for individual browsers that already support such functionality through their extensions to CSS.

Since CSS namespaces aren't exactly complete or whatever (I admit that I haven't exactly followed this too closely), I would say that idea is unusable for now as well, though that would probably be the best solution in my opinion.

I'd say injecting the CSS through a script would be a good possibility if it wasn't for the fact that more and more people seem to have scripting disabled by default (either through something like NoScript or through the browser itself). Only IE has conditional comments, so that doesn't work either.

Your idea is definitely a good one, Charles, and it's a great possibility. However, I feel the complexity added through its introduction results in time that could be better spent working on actual things. I see no solution that appears viable except including the browser-specific CSS extensions in your normal style sheet(s). They won't validate, but they don't need to validate, right? After all, you're using browsers to your advantage without using something that only one browser has. No functionality is excluded from other current browsers that support the functionality. For example, IE doesn't support 'border-radius' in any form as far as I know. As a result, it is excluded from the functionality due to lack of support, not lack of a proper CSS rule.

I like the media type idea. My idea is more...centralised? It is in the spirit of CSS; you can manage your styles from one central style sheet instead of using a bunch of elements to change the style (yes, I'm referring to HTML's FONT element, especially when it is nested several levels deep).