How can i start using css3

Question

I want to use css3 features like

box-shadow

so for that

1. Do i need to include some special tag for css3 at top of page
2. which browsers currently support it
3. what will happen if use many css3 features and people view in old brosers.cause any error or so
4. Should i really use it or not

Answer 1

Do i need to include some special tag for css3 at top of page

No

which browsers currently support it

Most browsers support some CSS 3. No browser supports all CSS 3. When can I use tracks when support for various features was added.

what will happen if use many css3 features and people view in old brosers.cause any error or so

Unless the browser is exceptionally buggy, the error handling rules of CSS will apply and the unrecognised thing will be ignored.

This is only a problem if another style (which does apply) will render content unreadable unless the unsupported style is also applied. This probably can sometimes be worked around by applying the same property twice. First with widely supported values, then with less widely supported ones: eg:

color: white;
background: url(blue_0.5_pixel.png);
background: rgba(0%, 0%, 100%, 0.5);

Should i really use it or not

That needs to be determined on a case-by-case basis.

Answer 2

Updated Answer: If you're googling this some additional info might be helpful because CSS can be very confusing on how to get started.

CSS3 Doesn't really exist, per se: By that I mean that there is no Formal CSS3 Standard ( per MDN ).There was a CSS, then CSS2, which were "releases" or "recommendations" by themselves. CSS3 is really a set of modules that independently progress in development and browsers adopt the modules and the changes at different rates and it is evolving more "organically".

There is nothing to install or "add-on". Its all built into the various browsers ( some more than others ).

What this means is that using "CSS3" requires a lot of study and testing on one's own site(s) to figure out what is acceptable in your own use cases. As has been stated, it may ( or will most assuredly ) be necessary to have workarounds and multiple styles that will default depending on the browser in use by the user.

How do I know?: If you are new to CSS my recommendation is to develop for a single browser at first to learn CSS ( personally, I tend to dev to the latest versions of Chrome as my personal standard, but this does change for me. I used to dev to FireFox ). Then go back and adapt it to other browsers by testing and seeing where it has issues.

How Old to Adapt to: Also, you will want to identify how far back in browser versions you are willing to "adapt" your sites, ie: maybe stopping at IE 11, Chrome 49, Safari 5 as well as mobile versions, etc. This can be researched here to see which browser versions still have enough current user base to bother with. Once your site(s) are up and running browser usage can be tracked to get a better idea of your own user base's browser versions and adapt accordingly.

If you detect a user with a browser version that may not work well a dialog can be shown to let them know which minimum browser version is best on that site.

Testing Browser Compatibility: Personally, I use https://crossbrowsertesting.com to test different browsers and versions. It has different browsers and operating systems that can be selected including mobile devices.

Its also a good idea to constantly check the compatibility tables in the documentation as those change on a regular basis.

Library: As you continue to develop with CSS you should build up a library of how you prefer to do things and keep that updated as CSS and browsers change.

Avoid the "Bleeding Edge" Versions: Its usually best to avoid the absolutely latest versions of CSS as the current browsers will tend to lag way behind as well as the legacy browsers that are still out there.

Enterprise or In-House: If you are developing for "Enterprise" or "In-house" only web based apps then you have a lot more freedom to use the "latest and greatest" as you may have more control over which browser versions "must" be used and even whether or not you develop for certain browsers. I've had instances where we only developed to a single browser and version and the users had to be on that version, which can be better controlled in an organization like that of course.

Answer 3

You use css3 just like regular css - no special declarations necessary. The only thing to keep in mind is that there are browser-prefix versions of many css3 styles that you'll want to use and while most of them use the style rules in exactly the same way, there are a few that have slightly different syntax (some older versions of Chrome, for example, use different gradient syntax.) When you do use the browser-prefix versions, always use the non-prefixed version as well following the prefixed versions. For example:

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}