Share 12 CSS Tricks

The following CSS advanced tips

• Use: Not () apply/deselect border on menu

• Add row height to body

• Everything is centered vertically

• Comma-delimited list

• Use negative nth-child to select items

• Use SVG for icons

• Optimize display text

• Use Max-height for pure CSS Sliders

• Inherit box-sizing

• Table cell width

• Use Flexbox to get rid of the various hack of the outer margin

• Use the property selector for empty links

Use: Not () apply/deselect border on menu

Add a border to each menu item first

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

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

* Remove Border * *

. Nav li:last-child {  border-right:none;}

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

. Nav li:not (: last-child) {  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 (~):

.. Nav Li:first-child ~ Li {

  border-left:1px solid #666;}

Add row height to body

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

body {  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:

HTML, body {  height:100%;  margin:0;} body {  -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:

UL > Li:not (: Last-child):: After {  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.

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

It's so easy.

Use SVG for icons

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

. logo {  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:

HTML {  -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:

. 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;}

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:

. calendar {  table-layout:fixed;}

Use Flexbox to get rid of the various hack of the outer margin

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:

. list {  Display:flex;  Justify-content:space-between;}. List. person {  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:

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

Very convenient.

Support

These advanced techniques work effectively in Chrome, Firefox, Safari, the current version of Edge, and IE11.