Taobao Duan Zhengchun's CSS Notes Collection_Experience Exchange

Imagine summarizing the experience of writing CSS and Unfortunately, I am already very old, and I am really unable to do what I want. So I changed my mind and thought that I could present it in the form of notes, so I don’t have to worry about not being able to write it out.

Now let’s talk about a little trick on Taobao’s homepage.

Horizontal and vertical lines between categories

From a long time ago At first, there were only three types of vertical lines between categories.

1. Background image
   Set a padding in the a tag and position it to the right with a background image of 1px width and height.
   Disadvantage: The last one still needs to use class to hide the background.

2. Symbol
   Use "|" symbols to fill in between each a tag.
   Disadvantages: HTML files become larger, file maintenance becomes cumbersome, and it is meaningless in HTML.

3. The boder on the right side of the a tag.
   Same as the background image, but use border-right instead. The disadvantages are the same as above.

Seeing this, someone may have opened the Taobao homepage and used firebug to view the source code to see how it was done.

In fact, the current method is to use ul's overflow:hidden and then li's margin-left:-1px. This approach can avoid the above shortcomings at the same time.
I don’t know why I haven’t done that before. Could it be that I was the first to discover such a practice?
No matter who has used this method before to implement vertical lines between categories.
However, soon after Taobao’s homepage went online, some peer websites also used this method in their homepage revision.
It’s okay not to read that website. Class is really a bit much to write. Loading the html becomes a lot more work.
Anyway, if a home page needs to load a 1.17m web page, my brain will automatically block it.

The method of rounding corners.

For this rounded corner, the front-end developers have put in too much effort. They have to consider the number of http connections and css. The code size and semantics of HTML.
What is posted is the recent plan to replace the existing rounded corners. There may be many situations that have not been considered. But the general writing method is as follows.
Benefits It is easy to maintain. There is only one image. It can also be scaled arbitrarily to a certain extent. The disadvantage is that there are more meaningless html codes.

css:

.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://www.php .cn/);/*Background image*/
background-repeat:no-repeat;
}
.c{
width:200px;/*Temporarily determined width* /
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block; height:4px;
background-position:0 bottom;
}
.c b b{
margin:0 0 0 4px;
background-position :right bottom;
}
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px ;
}
html：



Button button button button button Button
Press press button button button button button button button button button button button


phpcn ltphpcn /p>

Global definition of table

The caption tag has a bug of 1px gap on the left under Firefox, which is very annoying. The simple method I can think of is only -1px The margin is gone.

css:

table{ 
border-collapse:collapse; 
} 
table caption,table td,table th{ 
border:1px solid #a2bbdd;/*边框颜色*/ 
background:#c3d9ff;/*背景颜色*/ 
} 
table caption{ 
text-align:left; 
border-bottom:none; 
margin-left:-1px; 
} 
html： 
 
表格标题 
 
标题 
标题 
标题 
标题 
 
 
 内容 
 内容 
 内容 
 内容 
 
 

Two tags that need to be taken seriously

The acronym tag is great for explaining nouns, but it is used too little. (I have always wanted to use it, so I wrote it down. .)
css:
acronym{cursor:help}
html:
text
I forgot which website I saw this tag on, which is used to display more links in h2. After checking the book, everyone felt that it was a bit inappropriate and a bit controversial.
css:
The css component has not been written yet...it needs to be submitted
html:
title more>>

The implementation of "more" on the right side of the title
/>


I once did the effect shown in the picture above, and used position to relatively position it to the right side of the h2 tag. In this way, the code will indeed add several lines. In fact, it can Use a clumsy way to achieve it:

For example, the html code is as follows:

title more...
The css for using potsition is almost as follows:

h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
} In this way, we can achieve more on the right side. In fact, it can be even simpler:

h2{
height:20px;
}
span{ float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
In fact, it just uses margin- The negative number of top is used to achieve this. Because the default float will wrap under the h2 tag, let it jump up by itself. That’s it for the code. Isn’t it very simple? I said it is very simple! Because it is very simple, I won’t release a separate test page.

ps: I think we have to make an editor the same as Blue Ideal at some point...

Taobao’s css attribute order writing standards

Colleagues in the previous department each had a set of writing standards, which made it very difficult to read each other’s css code, so they implemented a set of writing standards, maybe Helpful for you too.


*{
/*Display properties*/
display
position
float
clear
cursor …

/*box model*/
margin
padding
width
height

/*Typesetting*/
vertical-align
white-space
text-decoration
text-align
…

/*Text* /
color
font
content

/*border background The reason why we put boder and background at the end is that the frequency of modification will be more frequent than before. It’s convenient to check at the end, haha. */
border
background
}
In the final analysis, the specification of the writing order of attributes is: God? Monster? - How is your figure! - Type of clothing (bikini? Padded jacket?) - Style of clothing (black? white? Buttons? Zippers?) - What cosmetics and hairstyle are used.
This small part of the writing standard is not a writing standard promoted by browser manufacturers, so It may not be recognized by the majority of standard promoters. But these are the ones that a few brothers have come to believe are most in line with the existing Taobao environment.

The abbreviation of css code

The syntax of css abbreviation is helpful to novices, but veterans don’t need to read it.

0px does not require units. , directly: margin: 0
Abbreviation of box model, the syntax is margin: top right bottom left;. It can even be abbreviated to margin: top (right left) bottom, of course the values ​​​​for the right and left should be the same
css The ";" sign in the last attribute is omitted. (Not recommended ^_^)
Replace the font width normal with 400, and replace bold with 700.
Hexadecimal color values, if the values ​​of each two digits are the same, can be abbreviated by half, for example: #000000 can be abbreviated to #000; #0044DD can be abbreviated to #04D;
Abbreviation of border, The syntax is border:width style color, similar to boder:1px solid red;
The abbreviation of background, the syntax is color image repeat attachment position. Similar: background:#f00 url(background.gif) no-repeat fixed 0 0 (Why do I never write fixed?)
The abbreviation of font, similar to font: italic small-caps bold 1em/140% "SimSun", sans-serif, can be omitted to the simplest font: 12px "SimSun".
The attribute abbreviation of list, the syntax list-style:square inside url(image.gif), but generally we don’t use it.
It’s really difficult to make up 10 items. Just delete the useless line breaks and spaces Count it as one
One day everyone was discussing the problem of "vertical centering of unknown pictures" in the team, and suddenly thought of using the attribute vertical-align:middle to implement it, so I took the time to make the following immature example:
CSS:

p{
width:140px;
height:140px;
text-indent:-8px;
text-align:center;
line-height:138px;
background:red;
font-size:12px;
*font-size:120px;
* text-indent:-60px;
}
img{
width:100px;
height:100px;
vertical-align:middle;
} HTML:

& nbsp;
The original intention was not to use position. After all, a large number of pictures displayed by the browser will consume more resources when rendering.

The disadvantage is that it outputs meaningless nbsp;, and the calculation formulas of font-size and font-indentd are not very simple (so the above numbers are all made up^_^).

Later Xiaoma saw this idea and spent some time upgrading the code, using :after output instead of boring nbsp. The code is shown below.

CSS:

.tb-p-c{
display: block;
width:140px;
height:140px;
line-height:140px;
text-align:center;
*font-size:123px;
}
.tb-p-c img{
vertical-align :middle;
}
.tb-p-c:after {
content: ".";
visibility: hidden;
font-size: 12px;
margin-left: -5px;
}
HTML:


In this way, the annoyingnbsp disappears. Everyone has a better understanding of the rendering method of vertical-align:middle. Many comrades also discovered that the after pseudo-class can also be used for hacking.

As a result, the center of the circle upgraded CSS again:

CSS:

.tb-p-c{
display: table-cell;
vertical-align:middle;
width:140px;
height:140px;
text-align :center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img {
vertical-align:middle;
}
This is the third upgrade. Due to time constraints, I did not test the above code. The reason is that display is used for rendering, which feels like it will cause the browser to run multiple times. Rendering, so I haven’t tested it yet.
This discussion has given us a lot of gains. I believe that if everyone participates, there will be more methods and perspectives that we have not discovered. Don't be stingy, everyone, post more replies and improve together.