A collection of tips for improving CSS development capabilities

1. Use: Not () to add spacer lines to the navigation bar

We usually use the following code to add a spacer line to the navigation bar

/* Add Border */

. Nav Li {

border-right:1px solid #666;

}

/* Remove Border */

. Nav Li:last-child {

Border-right:none;

}

Now, we can use the: not () selector to simplify the operation, the code is simple and easy to read, good.

. Nav li:not (: last-child) {

border-right:1px solid #666;

}

Or, let's add the left border.

. Nav Li:first-child ~ Li {

border-left:1px solid #666;

}

2. Add the Line-height property to the BODY element

We don't need to set line-height for each p, H1 element, just set the BODY element, and other text elements will automatically inherit the body's characteristics.

Body {

Line-height:1;

}

3. Center any element vertically

It's not black magic, and it does allow any element to be centered vertically.

HTML, Body {

height:100%;

margin:0;

}

Body {

-webkit-align-items:center;

-ms-flex-align:center;

Align-items:center;

Display:-webkit-flex;

Display:flex;

}

4. Comma-delimited list

Make the HTML list look like a comma-delimited list of realities

UL > Li:not (: Last-child):: After {

Content: ",";

}

5. Using negative numbers in Nth-child

Use negative numbers in the CSS nth-child to select 1~n Records.

Li {

Display:none;

}

/* Select items 1 through 3 and display them */

Li:nth-child (-n+3) {

Display:block;

}

6. Using the SVG icon

There is no reason not to use SVG icons, which can be scaled in most resolutions and browsers, or even compatible with IE9, so no more. png,. gif, and so on.

. logo {

Background:url ("Logo.svg");

}

7. Text Display optimization

Some fonts can no longer be optimally displayed on all devices, so they need to be set.

HTML {

-moz-osx-font-smoothing:grayscale;

-webkit-font-smoothing:antialiased;

text-rendering:optimizelegibility;

}

Note the use of the Optimizelegibility property value, while Ie/edge does not support text-rendering.

8. Using Max-height in the pure CSS sliders

Use Max-height to implement hidden, displayed animations.

. Slider UL {

max-height:0;

Overlow:hidden;

}

. slider:hover UL {

max-height:1000px;

Transition:. 3s ease;

}

See Benbow "Auto Value CSS3 Transition solution"

9. Initialize box-sizing

Inherit the box-sizing attribute from HTML, so that later maintenance is more convenient.

HTML {

Box-sizing:border-box;

}

*, *:before, *:after {

Box-sizing:inherit;

}

10. Width of table cells

. calendar {

table-layout:fixed;

}

11. Use Flexbox to get rid of various margin Hacks

When implementing the sidebar, we no longer need to set the margin for various nth-, first-, and Last-child, and can easily be evenly distributed using Flexbox.

. list {

Display:flex;

Justify-content:space-between;

}

. list. person {

flex-basis:23%;

}

12. Use attribute selectors for null connections

For a that has an HREF attribute but empty content, the content is added automatically.

a[href^= "http"]:empty::before {

content:attr (HREF);

}

It's very convenient, isn't it.

From: Fedfun-csdn Blog Link: http://blog.csdn.net/whqet/article/details/48997389

Original: Https://github.com/AllThingsSmitty/css-protips

A collection of tips for improving CSS development capabilities