CSS Advanced Tips

Use: Not () to add/Remove borders on the menu

Many people will add a border to the navigation and then cancel the last one out:

/* Add Border */.nav li {  border-right:1px solid #666;} /* Remove Border */.nav li:last-child {  border-right:none;}

In fact, using the CSS3: not () can be simplified to the following code:

. Nav li:not (: last-child) {  border-right:1px solid #666;}

Of course, you can also use. nav Li + li even. Nav li:first-child ~ Li, but using: not () can make the intent more explicit
All major browsers support: Not selectors, except for IE8 and earlier versions

Add Line-height property to Body

You do not need to add line-height attributes for <p>,

body {  line-height:1;}

In this way, the text element can easily inherit the property from the body

Center vertically

You can center any element vertically:

HTML, body {  height:100%;  margin:0;} body {  -webkit-align-items:center;  -ms-flex-align:center;  Align-items:center;  Display:-webkit-flex;  Display:flex;}

Note: There are some bugs in Flexbox under IE11

Use comma to split list

Make the list look like a comma-delimited:

UL > Li:not (: Last-child):: After {  content: ",";}

By: The Not () pseudo-class removes the comma after the last element

Select an element using a negative nth-child

Use negative nth-child to select an element between 1 and N:

Li {  display:none;} /* Select the 1th to 3rd element and display them */li:nth-child (-n+3) {  display:block;}

Of course, if you understand: not (), you can do the following:

Li:not (: Nth-child (-n+3)) {  display:none;}

Use SVG for icon icons

There's no reason not to use SVG as icon icons:

. logo {  background:url ("Logo.svg");}

SVG scales well for any resolution and supports ie9+ all browsers, so discard PNG, JPG, GIF files.
Note: The following code can improve accessibility for users who use a secondary device to surf the Internet:

. no-svg. Icon-only:after {  content:attr (Aria-label);}

Optimize display text

Sometimes, fonts don't get the best display on all devices, so you can have your device browser help you:

HTML {  -moz-osx-font-smoothing:grayscale;  -webkit-font-smoothing:antialiased;  text-rendering:optimizelegibility;}

Note: Please use optimizelegibility responsibly. In addition Ie/edge does not support text-rendering

Implementing a pure CSS slide with max-height

Use Max-height to implement plain CSS slides beyond hiding:

. Slider ul {  max-height:0;  Overlow:hidden;}. Slider:hover ul {  max-height:1000px;  Transition:. 3s ease; /* Animate to Max-height */}

Inherit box-sizing

Let box-sizing inherit from HTML:

HTML {  Box-sizing:border-box;} *, *:before, *:after {  box-sizing:inherit;}

This makes it easier to modify the Box-sizing property in a plug-in or other component

Set the table to the same width

. calendar {  table-layout:fixed;}

Use Flexbox to avoid margin Hacks

In the multi-column layout, you can avoid nth-, first-, Last-child and other hacks by Flexbox's Space-between property:

. list {  Display:flex;  Justify-content:space-between;}. List. person {  flex-basis:23%;}

In this way, the white space between the columns will be evenly filled

Using the property selector for empty links

When there is no text in <a> and the href is not empty, the link is displayed:

a[href^= "http"]:empty::before {  content:attr (href);}

The processing method of text overflow ellipsis

Single-line text overflow

. inline{    Overflow:hidden;    text-overflow:ellipsis;    White-space:nowrap;}

Multiple lines of text overflow

. foo{    Display:-webkit-box!important;    Overflow:hidden;    text-overflow:ellipsis;    Word-break:break-all;    -webkit-box-orient:vertical;/* direction */    -webkit-line-clamp:4;/* display How many lines of text */}

