CSS3 Features
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings many long-awaited novelties, such as rounded corners, shadows, gradients, transitions or animations, and new layouts like multi-columns, flexible box, or grid layouts.
1. Modules
Unlike CSS2, which was a single large specification, CSS3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS2.
2. Key Features
Selectors Level 3
CSS3 introduced many powerful selectors, allowing designers to select elements based on attributes, states, and structural relationships without needing extra classes or IDs.
- Attribute selectors:
[attribute^=value],[attribute$=value],[attribute*=value] - Structural pseudo-classes:
:nth-child(),:last-child,:empty - UI element states:
:enabled,:disabled,:checked
Box Model & Borders
border-radius: Allows creating rounded corners for elements.box-shadow: Adds shadow effects around an element's frame.border-image: Allows using an image as a border.
Backgrounds
background-size: Specifies the size of the background image.background-origin: Specifies the positioning area of the background images.Multiple Backgrounds: Allows adding multiple background images for a single element.
Text Effects
text-shadow: Adds shadow to text.word-wrap: Allows long words to be able to be broken and wrap onto the next line.@font-face: Allows web designers to use fonts that are not installed on the user's computer.
2D/3D Transformations
CSS3 allows you to format elements using 2D and 3D transformations.
transform:translate(),rotate(),scale(),skew().
Transitions & Animations
- Transitions: Allows changing property values smoothly (from one value to another), over a given duration.
- Animations: Allows animation of most HTML elements without using JavaScript or Flash. Keyframes (
@keyframes) define what styles the element will have at certain times.
Layouts
- Flexbox (Flexible Box Layout): Provides a more efficient way to lay out, align and distribute space among items in a container.
- Grid Layout: A two-dimensional grid-based layout system.
- Multi-column Layout: Allows content to flow into multiple columns, like a newspaper.
Media Queries
A cornerstone of Responsive Web Design. Media queries allow you to apply different styles for different media types/devices (e.g., screen vs. print) and specific conditions (e.g., screen width).
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}3. Vendor Prefixes
In the early days of CSS3, browser vendors used prefixes for experimental features. While most modern browsers support standard properties now, you might still see them in older codebases.
-webkit-(Chrome, Safari, newer Opera)-moz-(Firefox)-o-(Old Opera)-ms-(Internet Explorer)