CSS Advanced Tips Summary

Do we not have some CSS skills when we write code in peacetime? Today to share a "CSS advanced skills Summary to make your code simple and efficient." Be sure to master these tips, and you will be very efficient in writing Web pages.

Use : Not ()Apply/deselect borders on a menu

Add a border to each menu item first

/** *{     border-right: 1px solid #666;}

...... Then remove the last element ...

/ /*  */{     border-right: none;}

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

{     border-right: 1px solid #666;}

This makes the code clean, easy to read, and easy to understand.

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

{     border-left: 1px solid #666;}

Add row height to body

You don't need to add line-height to each <p>,

{   line-height: 1;}

This allows text elements to be easily inherited from the body.

Everything is centered vertically

To center all the elements vertically, it's too simple:

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

Look, isn't it simple.

Note: Be careful flexbox in IE11.

Comma-delimited list

Make the HTML list item look like a real, comma-delimited list:

{   content: ",";}

Use the: Not () pseudo-class for the last list item.

Use negative nth-child to select items

Use negative nth-child in CSS to select item 1 to Project N.

{   display: none;} /*  */{   display: block;}

It's so easy.

Use SVG for icons

There is no reason for us not to use SVG for icons:

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

SVG has good extensibility for all resolution types and allows all browsers to return to IE9. This avoids. png,. jpg, or. gif files.

Optimize display text

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

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

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

Use Max-height for pure CSS Sliders

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

{   max-height: 0;    overlow: hidden;}  {   max-height: 1000px;    Transition: . 3s ease;}

Inherit box-sizing

Let box-sizing inherit HTML:

{   box-sizing: border-box;}  {   box-sizing: inherit;}

This makes it easier to change the box-sizing in other components of the plug-in or leverage other behaviors.

Table cell width

Tables are cumbersome to work with, so be sure to use table-layout:fixed as much as possible to maintain the width of the cell:

{   table-layout: fixed;}

Use Flexbox to get rid of all kinds of outer margin hack

When you need to use the column delimiter, by Flexbox the Space-between property, you can get rid of nth-,first-, and Last-child hack:

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

The list separator now appears at an evenly spaced position.

Use the property selector for empty links

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

{   content: attr (HREF);}

Very convenient.

Support for these advanced techniques works effectively in Chrome, Firefox, Safari, the current version of Edge, and IE11.

CSS Advanced Tips Summary