Some CSS properties that you don't know

Box-sizing

Although Box-sizing was introduced in CSS3, it has a value of Border-box, which allows the height and width of the element to contain padding and borders.

.div{     width: 150px;     height: 100px;     border: 1px solid #ccc;     box-sizing: border-box;}

This property is supported by Chrome 31+, ie8+, Firefox 31+, Safari 7+, Opera 27+, IOS Safari 7.1+ and Android Browser 4.1+.

Z-index and positioning

If the element has no positional attributes, such as static/absolute/relative/fixed, the property is ignored

positionrelative;z-index100;

Disable an element

You can use a none value of the Pointer-event property to effectively disable an element. Whether it's jquery or JavaScript, click events are not triggered

.bricked{     pointer-events: none;}

Chrome 31+, ie11+, Firefox 31+, Safari 7+, Opera 27+, IOS Safari 7.1+ and Android Browser 4.1+ support this property

Long Link Line Wrapping

Block long links from overflow parent element

a{     word-wrap: break-word;}

PS: Related article: CSS line wrapping

Detect retina displays with media queries

The retina display can be detected using the following media query

@media     (min-device-pixel-ratio2),      (min-resolution192dpi) {           /* Retina CSS */     }

Filter

In addition to the Ie,filter property is widely supported, it may be supported by Spartan. Over the next few decades, it will be a big event.

.blur{     filter: blur(30px);}

Chrome 31+, Firefox 35+, Safari 7+, Opera 27+, IOS Safari 7.1+ and Android Browser 4.4+ support this property

Shorten text with ellipses

You can shorten long text by using ellipses in an element

.whatever{     overflow: hidden;     text-overflow: ellipsis; }

Let an empty element obey the width

Sometimes you need an empty element to follow its Width property, you can do this:

.whatever{     min-height: 1px;}

@supports

@supports queries are similar to @media queries, the given CSS will be displayed if supported by the browser. Currently, IE and Safari do not support this property, but will change soon. Spartan promises to support this attribute and is worth looking forward to

@supports (display: flex) {     /* flexbox CSS */  }@supports not (display: flex) {     /* CSS for no flexbox */   }

This property is supported by Chrome 31+, Firefox 31+, Opera 27+ and Android Browser 4.4+.

Ps:
In a column that is known to have introduced three odd kinky tricks, which are useful, supplement this article:
About css[almost] no one knows 3 things

English Original: Some CSS know

Some CSS properties that you do not know

Some CSS properties that you don't know