CSS 3 - Main Difference

Blog

Main differences

Maybe the biggest difference between CSS2 and CSS3 is the separation of modules. While in the previous version everything was a large single specification defining different features, CSS3 is divided into several documents which are called modules. Every single module has new capabilities, without hurting the compatibility of the previous stable release. When we talk about modules, we can name more than fifty of them, however four of these have been published as formal recommendations. The big four is comprised of the following:

  • Media Queries (published in 2012)
  • Namespaces (published in 2011)
  • Selectors Level 3 (published in 2011)
  • Color (published in 2011)

The media queries might well be the most important addition to CSS. What it does is simple: it allows certain conditions to be applied to different stylesheets, making websites fluid and fit all kinds of screen sizes. Media queries allow developers to tailor to different resolutions without having to change or remove content.

Media queries work very easily and once you have used them once you are pretty much set. Let’s look below at some lines of code.

1

@media screen and (max-width: 600px) {

2

    background: #FFF;

 

3

}

By starting to style in the media query above, you will only style for screens with a maximum width of 600 pixels. In the example above, all screens with a maximum width of 600 pixels will show you a white background. However, the max-width is not the only condition you can apply to a stylesheet. You can use max-device-width too (which is the screen resolution, unlike max-width which is the viewing area), you can use min instead of max, but you can also combine two conditions, such as in the example below, which will only apply for screens with a viewing area between 600 and 900 pixels.

1

@media screen and (min-width: 600px) and (max-width: 900px) {

2

    background: #FFF;

 

3

}

CSS3 has some pre-defined stylesheets for portable devices, such as iPhone or iPad, which you can see below:

1

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

and

1

<link rel="stylesheet" media="all and (orientation:portrait)"href="portrait.css"/>

1

<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"/>

As you can see above, the media queries can come in quite handy when developers need to make fluid grids work on different devices with different screen sizes.

Some other important design considerations of CSS3 are, for example, the borders, which now can be made rounded without hacks. CSS3 has actually introduced rounder borders, which is a huge help for designers and developers. However, many of these features do not work in older versions of Internet Explorer , but this is not something new for us, we’ve heard it before. The only code you need to add in the stylesheet (in the specific class) is something similar to:

1

-moz-border-radius: 5px;

2

-webkit-border-radius: 5px;

 

3

border: 2px solid #897048;

As you can see, it is much easier than before. Gradients are also available in CSS3, another cool addition that we have wanted to see for some time, as well as box/text shadows and border images. In order to add text shadow to content without any hacks, CSS3 simply requires something similar to the following line of code:

1

text-shadow: 2px 2px 2px #ddccb5;

Creating columns for content has never been easier than with CSS3, as now you have four lines of code you can use at any time. These are:

  • column-count
  • column-width
  • column-gap
  • column-rule

Another great time saver is the option of inserting multiple background directly from CSS, instead of using all kinds of hacks as we used to do before. The code is simple to write and to remember, and I am sure you will use it at some point in time.

1

.multiplebackgrounds {

2

height: 100px;

 

3

width: 200px;

4

padding: 20px;

 

5

background: url(top.gif) top right no-repeat,

6

url(bottom.gif) top left repeat-y,

 

7

url(middle.gif) bottom repeat-z;

8

}

Vendor prefixes

Back when CSS3 was newly released, vendor prefixes were used all the time, as they helped browsers interpret the code. Sometimes you still need to use them today, in case the browser you are testing in doesn’t read the code. So below is a short list with all the vendor prefixes for major browsers:

  1. -moz- : Firefox
  2. -webkit- : Webkit browsers such as Safari and Chrome
  3. -o- : Opera
  4. -ms- : Internet Explorer

Note that, according to an official press release from a few weeks ago, Opera will soon build their new desktop and mobile browser on webkit too, instead of their current Presto rendering engine. This means that the -o- vendor prefix will disappear at some point in time, leaving us with only three major ones

Comments (0)

Add comment

Get Call Us

Human Test : 6+0=?