Summary of CSS advanced skills and css skills

Summary of CSS advanced skills and css skills

When we write code at ordinary times, we do not have any CSS skills? Today I will share with you a summary of CSS advanced skills to make your code concise and efficient. You must master these tips to make it very efficient for you to write web pages.

/* Add border */. nav li {border-right: 1px solid #666 ;}

 

...... And then remove the last element ......

//* remove border */.nav li:last-child {     border-right: none;}

 

...... You can directly use the: not () pseudo class to apply elements:

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

 

In this way, the code is clean, easy to read, and easy to understand.

Of course, if your new element has a sibling element, you can also use the common sibling selector (~) :

..nav li:first-child ~ li {     border-left: 1px solid #666;}

 

◆ Add Row Height to the body

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

body {   line-height: 1;}

 

In this way, text elements can be easily inherited from the body.

◆ Center everything vertically

It's too easy to vertically center all elements:

html, body {   height: 100%;   margin: 0;}body {   -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;   display: -webkit-flex;   display: flex;}

Check whether it is easy.

Note: Be careful with flexbox in IE11.

◆ Comma-separated list

Make the HTML list items look like a real list separated by commas:

ul > li:not(:last-child)::after {   content: ",";}

 

Use the not () pseudo class for the last list item.

◆ Use negative nth-child to select a project

Use negative nth-child in CSS to select project 1 to Project n.

li {   display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) {   display: block;}

 

It is so easy.

◆ Use SVG for icons

We have no reason not to use SVG for the icon:

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

 

SVG provides excellent scalability for all resolution types and supports returning all browsers to IE9. In this case, you can avoid the. pngw..jpg or. GIF file.

◆ Optimize display text

Sometimes, the font cannot display the best on all devices, so you can use the device browser to 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.

◆ Use max-height for the pure CSS Slider

Use max-height and overflow hiding to implement the CSS slider only:

.slider ul {   max-height: 0;   overlow: hidden;}.slider:hover ul {   max-height: 1000px;   transition: .3s ease;}

 

◆ Inherit box-sizing

Let box-sizing inherit html:

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

 

In this way, the box-sizing can be changed more easily in the plug-in or other components that leverage other behaviors.

◆ Table cell width

Table is very troublesome to work, so try to use table-layout: fixed to keep the cell width equal:

.calendar {   table-layout: fixed;}

 

◆ Use Flexbox to get rid of various margins Hack

When Column delimiters are required, you can use the space-between attribute of flexbox to get rid of the hack of nth-, first-, and last-child:

.list {   display: flex;   justify-content: space-between;}.list .person { flex-basis: 23%;}

 

Now, the list separator will appear at the even interval.

◆ Use the attribute selector for empty links

When the <a> element has no text value but the href attribute has a link, the link is displayed:

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

 

It is quite convenient.

◆ Supports these advanced skills in current versions of Chrome, Firefox, Safari, Edge, and IE11.