is there any way to validate -moz-border-radius / -webkit-border-radius in the CSS validator?
The client wants validation buttons in the sidebar (ugh!) and I can't find any way to bypass it. I've used #import too, no success.
-moz- and -webkit- aren't going to validate. They are vendor specific. When CSS3 becomes more 'offical', the actual border-radius should validate fine. Remember that there are several jQuery plugins that can round borders, but I highly recommend against them.
If you use PrefixFree, you can use non-prefixed properties in your stylesheet and it'll convert them to prefixed properties (if necessary) for the appropriate browsers. This means in your stylesheet, you can write, for example, border-radius: 5px; (which will validate as CSS3), but older versions of Firefox and Safari will automatically use -moz-border-radius: 5px; and -webkit-border-radius: 5px;.
Related
Why are some attributes declared regularly while others require the hyphen?
.box {
width: 500px;
margin: 20px;
border: solid black 5px;
-box-sizing: border-box;
}
While your CSS isn't technically correct, what you're seeing is vendor-prefixing. Vendor prefixing is used for non-standard-compliant or not fully implemented specs of the W3C recommendation. These are apparent in some CSS3 specs that browsers are still in the process of implementing.
Some examples would be box-sizing, transform, transition.
Some common prefixes are
-moz- for Firefox/Mozilla
-webkit- for Safari/Chrome
-ms- for IE/Edge
-o- for Opera
-khtml- for Konqueror
You may want to see what the Mozilla Developer Network has to say about vendor prefixes.
Quote:
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don't break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.
These are experimental CSS attributes, and not officially defined or supported. In your case of box-sizing, see the browser compatibility section at MDN.
Additionally, I don't think there is a browser that supports it as -box-sizing as you have suggested, it's either -webkit-box-sizing or -moz-box-sizing.
Currently, when I code I use:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
But based on my tests, it didn't make any difference with any modern browser ( Chrome 33+, opera 25+, safari 8+). Internet Explorer 8 doesn't supports this property, but the vendor prefixes won't make any difference.
Is there any reason to keep them?
Use http://caniuse.com/#search=border-radius for checking such
Conclusion: No need for adding vendor prefixes for border-radius, as its supported in all major browsers (and IE9+). If you really need border-radius in IE8 check out: How to apply border radius in IE8 and below IE8 browsers?
But in 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners
You can also add PrefixFree to your page to cover you in a few more cases than just border-radius, as it will add these prefixes for you to be safer.
And for backwards compatibility using CSS3 with older versions of IE there is PIE (again not just for border-radius but others) and you can just add this where you need it:
behavior:url('pie.htc');
I've inherited a web project that is supposed to work in IE8 (as well as the other browsers but I am not worried about them by comparison). When I run the website in Firefox and check the Error Console it mentions:
"Warning: Unknown property '-moz-border-radius'. Declaration dropped"
Wherever -moz-border-radius appears in the style sheet border-radius also appears. For example, these were right next to each other in the style sheet:
border-radius:20px;
-moz-border-radius:20px;
Is there any reason to keep the -moz-border-radius styling? Is it better to just remove them?
-moz-border-radius hasn't been necessary in firefox for a long time, so I'd remove it. See:
https://developer.mozilla.org/en-US/docs/CSS/border-radius
-moz-border-radius removed from firefox 13
border-radius:20px; will work in all new browsers
-moz-border-radius: was for older versions of FireFox , and -webkit-border-radius: was for older versions of Chrome. Both browsers update them selves so users SHOULD be ok with border-radius: for everything .
I don't see wrong though with adding extra properities in CSS that may not be used by new browsers to ensure that all old browsers also function properly.
I've wondered this for a while. Why do different browsers only support the CSS border-radius property if it is prefixed with their own special prefix. I don't understand why I have to write this:
/* For Firefox and other Gecko browsers */
-moz-border-radius: 5px;
/* For Chrome/Safari and other Webkit browsers */
-webkit-border-radius: 5px;
/* For others */
border-radius: 5px;
When I could just write this:
border-radius: 5px;
Is there a reason that I'm required to write the prefixes? Why don't the browsers all just support the border-radius property? It just doesn't make sense to me, why browser developers decided to all have different properties that just make my life harder. Is there a technical or legal reason behind it?
The answer to this question is essentially the same given here:
Why there is -moz-XXX and -webkit-XXX in the CSS3?
That "namespacing" allows vendors to test new cool features, and if
they're great, they can be incorporated into the standards. This is
what is happening [here]: Mozilla and the Webkit team tried cool
things, and now they're going to become standard. It's just not done
yet.
Basically, life isn't perfect. Ideally yes, it should be standardized. It's an old issue dealing with the various large companies/groups that develop browsers. W3C tries to make standards, but in the end you can't force anyone.
Try reading more at this very relevant SO.programmers page - https://softwareengineering.stackexchange.com/questions/103048/why-is-it-unrealistic-to-expect-all-browsers-to-support-the-same-standards . And more regarding browsers/compatibility here,
Eventually they will all support the standard border-radius. I'm given to understand they do that when things are up in the air standards-wise, or for similar reasons.
(also, no need for -moz-border-radius, the normal cross-browser is now supported by Gecko. I believe it's the same for WebKit too, but I'm too lazy to check.)
The CSS3 Specifications are in the main browsers partly implemented and you get very nice results with less code, but there are many reasons not to use CSS3. E.g. not downwardly compatible, probably not similar renderd views on different browsers, etc.
So I'm asking myself: Which is the best way to use CSS3 anyway with a option to intercept default problems, like I've discribed above?
As long as your site degrades gracefully there's nothing wrong with using CSS3 now. Afterall, if a browser does not understand a particular CSS rule it will just ignore it:
#foo {
border:1px solid #000; /* shown by all browsers */
border-radius:5px; /* shown if browser understands border-radius */
-moz-border-radius:5px; /* Firefox only */
-webkit-border-radius:5px; /* Safari and Google Chrome */
}
As long as the site does not look broken in browsers that don't support the CSS3 rules you want to use then you should be ok progressively enhancing your site in the browsers that do support them.
You might find "When can I use..." useful for seeing what features you can reasonably use.
If your making a public website then you have to support ie6, which means no css 2.1, let alone 3.
One thing you can try is: lesscss
This will let you use shorthand css notation and "compile" it to valid css on build.