CSS naming convention II

2. Abbreviations of the same attribute:

The same attribute can also be abbreviated based on its attribute value, for example:

The code is as follows:	Copy code
. Search { Background-color: #333; Background-image: url (../images/icon.gif ); Background-repeat: no-repeat; Background-position: 50% 50%; } . Search { Background: #333 url (../images/icon.gif) no-repeat 50% 50%; }

3. Abbreviation of the outer and outer borders:

In CSS, the distance between the inside and outside borders is arranged in the order of top, right, bottom, and left. When these four attribute values are different, they can be abbreviated directly, for example:

The code is as follows:	Copy code
. Btn { Margin-top: 10px; Margin-right: 8px; Margin-bottom: 12px; Margin-left: 5px; Padding-top: 10px; Padding-right: 8px; Padding-bottom: 12px; Padding-left: 8px; }

It can be abbreviated:

The code is as follows:	Copy code
. Btn { Margin: 10px 8px 12px 5px; Padding: 10px 8px 12px 5px; }

If the top, bottom, left, and right border attribute values are the same, the attribute values can be abbreviated as two, for example:

The code is as follows:	Copy code
. Btn { Margin-top: 10px; Margin-right: 5px; Margin-bottom: 10px; Margin-left: 5px; }

Abbreviation:

The code is as follows:	Copy code
. Btn {margin: 10px 5px ;}

When the attribute values of the top, bottom, and left borders are the same, you can simply abbreviated them as one, for example:

The code is as follows:	Copy code
. Btn { Margin-top: 10px; Margin-right: 10px; Margin-bottom: 10px; Margin-left: 10px; }

Abbreviation:

The code is as follows:	Copy code
. Btn {margin: 10px ;}

4. Abbreviation of color value:

The color value code can be abbreviated to the color value code when the three color values of RGB are the same. For example:

The code is as follows:	Copy code
. Menu {color: # ff3333 ;}

Abbreviations:

. Menu {color: # f33 ;}

IV. hack writing specifications

Because different browsers have different W3C standards, different browsers have different interpretations of the page. For example, IE has a 3px gap with FF in many cases. For these differences, it is necessary to adjust the css hack. Of course, it is best not to write the hack to adjust it when there is no need to avoid page problems caused by the hack.

1. Compatibility between IE6, IE7, and Firefox:

Statement 1:

The code is as follows:

Copy code

IE can recognize *; standard browsers (such as FF) cannot recognize *; IE6 can recognize *, but cannot recognize it! Important, IE7 can recognize * and can also recognize! Important; FF cannot recognize *, but can recognize it! Important; According to the above expression, the CSS hack of the same class/ID can be written: . SearchInput { Background-color: #333;/* All three are allowed */ * Background-color: #666! Important;/* only IE7 */ * Background-color: #999;/* only IE6 and IE6 */ } Generally, the writing sequence is FF, IE7, and IE6.

Statement 2:

The code is as follows:	Copy code
IE6 can recognize "_", while IE7 and FF cannot be identified. Therefore, when only the difference between IE6 and IE7 and FF can be written as follows: . SearchInput { Background-color: #333;/* General */ _ Background-color: #666;/* only IE6 can be recognized */ }

Statement 3:

The code is as follows:	Copy code
* + Html and * html are unique tags of IE, which are not currently supported by Firefox. . SearchInput {background-color: #333 ;} * Html. searchInput {background-color: #666;}/* only IE6 */ * + Html. searchInput {background-color: #555;}/* only IE7 */

Shield Internet Explorer:

Select is a selection character, which is replaced according to the situation. The second sentence is unique to the safari browser on MAC.

The code is as follows:	Copy code
*: Lang (zh) select {font: 12px! Important;}/* FF dedicated */ Select: empty {font: 12px! Important;}/* safari visible */

IE6 recognizable:

Here we mainly use CSS annotations to separate an attribute and a value, and comment it before the colon.

The code is as follows:	Copy code
Select {display/* IE6 not recognized */: none ;}

Statement of the if condition hack of IE:

All IE identifiable:

The code is as follows:

Copy code

<! -[If IE]> Only IE <! [End if]-> Only IE5.0 can recognize: <! -[If IE 5.0]> Only IE 5.0 <! [End if]-> IE5.0 for IE5.5 can both be identified: <! -[If gt IE 5.0]> Only IE 5.0 + <! [End if]-> Only IE6 can recognize: <! -[If lt IE 6]> Only IE 6-<! [End if]-> IE5.x under IE6 and IE6 can be identified: <! -[If gte IE 6]> Only IE 6/+ <! [End if]-> Only IE7 can recognize: <! -[If lte IE 7]> Only IE 7/-<! [End if]->

2. Clear floating:

In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating HACK can be used to define the parent level.

The code is as follows:	Copy code
Select: after { Content :"."; Display: block; Height: 0; Clear: both; Visibility: hidden; }