New CSS3 Features: Learn How This Version Improved CSS2

Brief Introduction to CSS3

CSS3 version introduced new features that allowed developers to style HTML elements with less CSS code. CSS3 is most notorious for modules that speed up the specification process.

At first, browsers did not support CSS3 features, and it took a while for them to become fully compatible.

Remember: CSS3 is backwards-compatible with former CSS versions. It means that CSS3 features work on web pages using older CSS. Browsers that support CSS2 also represent the modifications with CSS3.

It took nine years for CSS Level 2 to gain the Recommendation status because some features delayed the specification. To speed up this process, CSS Working Group divided CSS into more convenient parts referred to as modules.

Look at this list of CSS3 tutorials explaining the majority of modules:

• User Interface
• Box Model
• Selectors
• Backgrounds
• Borders
• Media Queries
• Transforms
• Text Effects
• Multiple Column Layout
• Animations

Note: modules are now separate components of the language, and their specification does not depend on other parts of CSS.

The main benefit of modules is the guarantee that all styles for a particular component will be kept in one place and will only apply to that component and nothing else.

The Difference Between CSS and CSS3

The main difference between CSS and CSS3 is that CSS3 offers new features and separates CSS into convenient modules.

Also, CSS2 consisted of a single specification that defined individual features. However, separate documents (modules) introduced CSS3 features.

Note: each module adds new properties and features such as rounded corners, border images, shadows, gradients, transitions, animations.

CSS3 vs CSS

CSS3 does not deprecate older CSS code because it is only an addition to the features offered by CSS1. This list provides the main arguments in the CSS3 vs CSS debate:

• CSS3 allows developers to style HTML elements easier. They are less dependent on image files and can complete CSS styling with fewer lines of code.
• The aim of CSS1 was for appearance formatting, and it did not allow responsive designs.

Overview of New Features

Box Shadow

One of the CSS3 new features is the box-shadow property that adds a shadow to an element. Instead of using multiple images around an item, this property lets you add shadow with a short line of code.

Opacity

One of the CSS3 properties called opacity makes elements see-through or completely transparent.

For instance, you can apply opacity to images or other HTML elements. The transparency level depends on the indicated values.

Rounded Corners

Before the release of CSS3, developers had to write long code to produce rounded corners. Now, it is enough to apply the border-radius CSS3 property to HTML elements.

Attribute Selectors

CSS3 also introduced new selectors in addition to the ones in CSS2. Instead of applying IDs or classes for styling, developers can select HTML elements according to their attributes.

As a result, you do not have to create unique IDs only to apply CSS rules.

New Colors

One of the CSS3 features is the addition of new colors:

• RGBA
• HSL
• HSLA
• Gradient Colors

More than Web-Safe Fonts

Instead of only using fonts labeled as web-safe, developers now can apply more unique fonts in their HTML documents. Before that, CSS wanted to ensure that all browsers and machines display fonts the same.

CSS3 Features: Useful Tips

• CSS3 supports responsive designs and manages media queries (used for determining users' devices and screen sizes).
• Since CSS3 new features let you produce fewer lines of code, you can boost the website speed.
• Since CSS3, CSS animations move without JavaScript or Flash code.