How to avoid mistakes in CSS3

The new CSS3 properties not only provide us with additional opportunities, but lead to some difficulties. This article will help you learn, whether you use the new features and avoid common mistakes.

Finally it's time to CSS3. You have probably noticed that some CSS3 properties are more complex syntax to use weird prefixes, to understand the specifics of different Web browsers and stay abreast of the latest changes.

In general, some frightening moments. Today we look at the error, you can take when writing a CSS3-code and learn how to avoid them.

Do not forget to specify a prefix for all browsers

Prefixes for the browser ( vendor prefixes ) are added to the properties of CSS. Use these boxes without actually attached property is meaningless.

For example, the property of CSS3 transform we give a -moz-transform for Mozilla Firefox, as -webkit-transform for Safari and Chrome, as -o-transform for the Opera, and finally as -ms-transform - for Internet Explorer.

It is not always necessary to use just four prefix, but do not forget to use all the boxes when necessary.

Do not do this:

.rotate {
    -webkit-transform: rotate(7.5deg);
    -moz-transform:    rotate(7.5deg);
}

Do this:

.rotate {
    -webkit-transform: rotate(7.5deg);
    -moz-transform:    rotate(7.5deg);
    -ms-transform:     rotate(7.5deg);
    -o-transform:      rotate(7.5deg);
}

Do not forget to be lazy and do not add each console. Perhaps you have a few visitors who use Opera, or you hate the browser, you still try to overcome itself. You do not just give everyone the opportunity to enjoy the site user, but they themselves will get invaluable experience.

More about this feature you can read in the article by Eric Meyer .

Do not place the property with an attachment to the bottom of the list

We are at a very exciting stage of development of CSS3, where some properties are already standardized, and some - not. The saddest thing is that they have different syntax. Properties with prefixes are a number of features and you should first make sure that they all work.

Always prescribe a property without the prefix (this is necessary), and remember the important thing: never put a property with a prefix to the browser at the end of the list. If the browser supports a version without the prefix, this property is becoming a priority. If you put the property at the end of the list, the browser will not play it.

Do not do this:

.not-a-square {
   /* These do totally different things */
   border-radius: 30px 10px;
   -webkit-border-radius: 30px 10px;
}

Safari5 understand these two properties in different ways. Property without the prefix round the upper left and lower right corners to 30px and the upper right and lower left corner to 10px. A property with an attachment will round the corners of the horizontal to 30px and add vertical rounding radius of 10px.If you set a property with a prefix to the end of the list, the browser will not reproduce it.



See the example

You can learn more about this feature article from Chris Coire .

Stay in the subject

Google Chrome is rapidly evolved from version 0 to version 10 in the last couple of years.Consequently, there are some differences in how these versions of code to display the CSS3.

A simple example - the way we provide linear gradients for the Mozilla and WebKit . We can see that they have different syntax for the same properties:

.gradient {
    background-image: -moz-linear-gradient(top, #eee, #ccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eee),color-stop(1, #ccc));
}

Version of Mozilla is simpler and closer to the standards than the version of WebKit . Perhaps, in the latest versions of browsers, WebKit (Chrome10, and Safari 6), they will have a different syntax (not exactly) similar to the syntax for Mozilla.

.gradient {
    background-image: -moz-linear-gradient(top, #eee, #ccc);
    background-image: -webkit-linear-gradient(#eee, #ccc);
}

WebKit will support both the syntax, but it can be assumed that, ultimately, the syntax will be deprecated in the past. Stay up to date, because it is the specificity of our work, check for updates.

Recommended remarkable service sss3please - an online resource for copy-paste excerpts CSS3, which have all the "fresh" CSS3 properties in the right order.

Poor formatting

Poor formatting - not a mortal sin, as the previous ones, but still let's look at this issue. If you use a lot of characters in a row, the code looks awful, and you can get lost in it.

Do not do this:

.shadow {
    -webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.1),0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0 0 8px rgba(0,0,0,0.1),0 0 16px rgba(0,0,0,0.1);
    box-shadow:inset 0 0 8px rgba(0,0,0,0.1),0 0 16px rgba(0,0,0,0.1);
}

Suppose that the code will be clean:

.shadow {
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
}

CSS is quite lenient with the indentation, so why not take advantage of it.

Do not overdo it

Of course, you can get all rotated and changed in size, add all the transparency, to use 10 different fonts and make sure that every element on the page, cast a shadow, but why is it all right?

I'm not going to explain to you what tastes good. You - a web designer and need to know everything yourself.

Just keep in mind that many properties there are some features of CSS3. In WebKit, for example, has an excellent property keyframe-animation, if you "relive" only a few elements on the page, the animation will be played for a long time, and perhaps even to slow down your browser.

Another example - the big shadows lead to problems with scrolling page in WebKit, which users will be seen in the older versions for some time.

Just keep in mind that by removing some of the properties of CSS3, you get rid of several problems.

As for mobile devices

Another amazing property of CSS3 - a media queries. Now we have the ability to adjust to different sites and change the width of the device elements. You can directly insert styles in the styles for very small screens:

@media screen and (max-width: 480px) {
    /* Mobile stylings */
}

Remove the items that you feel less important. Make sure that the image sizes are correct and will not appear at the bottom of the horizontal scrolling. And remember about the problems that we talked about? That goes double for mobile devices, because the slightest inaccuracy can cause serious inconvenience. Consider the example of how to do:

@media screen and (max-width: 480px) {
    aside, .hide-mobile {
        display: none;
    }
    img {
        max-width: 100%;
    }
    pre {
        white-space: normal;
    }
    * {
        -webkit-animation:  none !important;
        -webkit-transition: none !important;
        -moz-transition:    none !important;
        -o-transition:      none !important;
    }
}

Hooray!

You've done everything correctly, you can be proud.