Learning shorthand notation in CSS

Let's learn how to use the shorthand notation, and look at some examples. We will try to explain to you the most deployed about what it is.

An example of verbatim notation

Announcement of the background image option is quite common in CSS. Announcement of the background in shorthand notation might look like this:

. Element  {  
     Background : # FFF url (.. / Images / bg-image.png) no-repeat fixed 20 px 20 px ;     
}

In order to more clearly understand what this shorthand notation, let us consider the same option specified in the full format:

.element {  
    background-color: #fff;  
    background-image: url(../images/bg-image.png);  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: 20px 20px;  
}

You can already see why most of the CSS-developers prefer to use a shorthand notation - the first example clearly shows us how we can fit 5 lines into one.

A simple example of verbatim notation

Some shorthand notation works extremely simple manner. An example of a background parameter, which we brought you earlier, is one of the most complex types (more complex than the examples that follow later in this article). There is also very simple to understand the shorthand notation.

Margins and padding - excellent examples of parameters that are in the process of development are used very often. And very often they are used verbatim oboznacheniyax. In addition, they are not so difficult to understand:

. Element  {  
     padding : 20 px ;    
}

In this example, even though we dropped the other three values, these values ​​should be equal to the unique map. So, by code, all 4 of the specified item will have a value of 20 pixels of padding.

We can also do the following:

. Element  {  
     padding : 20 px 10 px ;    
}

In this example we declare in detail the upper and right margins. The lower and left margins, though not announced exactly have the same values ​​as the upper and right (in that order). Thus, the block will have a top and bottom margins to 20 pixels, and the left and right sides will be equal to 10 pixels of padding.

And, again, let's look at a complete announcement of these parameters:

. Element  {  
     padding-top : 20 px ;    
    padding-right : 10 px ;    
    padding-bottom : 20 px ;    
    padding-left : 10 px ;    
}

The boundaries and setting CSS3 border-radius will be working in a similar way, except that the parameter associated with the corners rounded corners and not the parties.

More complicated shorthand notation

There are also more complex variations of shorthand notation, but (with some exceptions) are unlikely to cause problems if it is good to learn how to use them. An example of the background, which we quoted earlier, is just one of those signs.

Let's just select the values ​​with which you may have a misunderstanding:

* List-style
* Font
* Border
* Outline

CSS3-properties that use the shorthand notation a little bit complicated style of writing, include:

* Animation
* Border-image

So what makes these values ​​more complicated? Since these parameters take on different types of values ​​(sometimes key words, sometimes some items, etc.), application-specific values ​​in the shorthand notation can often lead to unexpected results.

Here is an example of setting background:

. Element  {  
     Background-Color : Blue ;   
    Background : url (.. / Images / bg-image.png) no-repeat ;    
}

Using the above code, you probably expect that the target element will be issued repeatable background image, set over the blue background. But this will not happen until we turn the sequence of values. Since we used the shorthand notation background, this leads to the fact that all the values ​​associated with the parameter of the background, is reset to its initial position. In this case, the background color is "transparent", rewriting the meaning of "blue."

Do not fall into the trap

It is important to realize that every time you use one of these complicated notation, omitted all the values ​​associated with that symbol will be reset to the defaults.

In principle, this is not a problem because the parameters associated with the backgrounds, lists, margins, etc., the values ​​are not inherited from parent elements. The only time when we are faced with problems, was to regard shorthand notation font.

That is what prompted us to create a small guide that discusses some of the problems you may encounter while working on the shorthand notation of fonts. We expect that the specific typographic options will inherit values ​​from their parent elements.But when we use the symbol font, all the parameters associated with the designation, reset to its initial value, which interrupts the process of natural succession.

While working with the shorthand notation fonts, and other symbols, you can also face the problem that lies in the fact that if you lower the required value, then the whole line will be ignored by your browser. That's what you should pay attention, otherwise it will be a long time scratching your head and you can not understand why you are not working.

Completion

In general, we strongly recommend you to use the shorthand notation wherever possible! The only thing you can not have recourse, as is the use of the font. Personally, we often use these designations, and it seems that many people think and do exactly the same.

Of course, if you're a beginner, it is best to use the full value to first understand where and what fits. But in most cases much easier and more productive use of shorthand notation.