2

I am not quite sure how to create a new / modify my current stylesheet so that it complies with CSS3 using the new selectors etc...

My current stylesheet does not take some new selectors such as border-top-right-radius: 5px; as properties it simply ignores it.

Anyone know how I could use these new CSS3 features?

2
  • It's a vague question. There is no specific answer to that. Consider going through the list of new CSS3 features first, see what's been added and use them accordingly.
    – Learner
    Jun 5, 2013 at 17:22
  • To begin with, there is no “CSS3” as a standard even in a lose sense, just documents labeled CSS3, ranging from sketchy or abandoned drafts to W3C recommendation. The question mentions “new selectors” but mentions just one property, and it does not explain what “these new CSS3 features” are. Jun 5, 2013 at 18:01

3 Answers 3

2

Not all browsers take properties like the one you're mentioning. It all depends on the browser (not all browsers support CSS3 either). Example:

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

You use -webkit and -moz for WebKit and Mozilla compatible browsers, even if the standard one (according to CSS3) is border-radius. That's just because not all browsers use CSS3 standards. They will, eventually, but not now.

You can include the three lines I wrote, but it's not considered standard and it will fail verification (but still works).

2

Like others said, there is no such thing as a "CSS3" or "CSS2" stylesheet. There's only one CSS stylesheet standard, and you can put CSS1, 2 or 3 properties and selectors in it.

What changes is browser support. Some new properties and CSS selectors will only work in more recent browsers.

I recommend you see by yourself at http://caniuse.com/. You can see there which CSS3 properties and selectors are widely supported and which ones are not.

I would also recommend you have a look at this : http://cssprefixer.appspot.com/. While it won't help you with unsupported selectors, it will add browser-specific prefixes to CSS properties in your file which might not be fully supported in most browsers.

1

You might need a prefix to the property to make it run on different browsers as they not all share a standard way of implementing these features.

#yourCssRule{
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;

border-style: solid;
border-width: 2px;
}

To make changes visible you will have to give some width to the border and maybe some color too.

When it comes to Border Radius property I like to use this small tool that generates the prefixes for you http://border-radius.com/

Not the answer you're looking for? Browse other questions tagged or ask your own question.