Some CSS properties you don’t know_html/css_WEB-ITnose

Box-sizing

Although box-sizing was only introduced in CSS3, one of its values ​​is border-box, which makes the height and width of the element include padding and border.

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

Chrome 31, IE8, Firefox 31, Safari 7, Opera 27, iOS Safari 7.1 and Android Browser 4.1 all support this attribute.

z-index and positioning

If the element does not have a positioning attribute, such as static/absolute/relative/fixed, changing the attribute will be ignored

position: relative;z-index: 100;

Disable an element

An element can be effectively disabled using a none value for the pointer-event attribute. Regardless of whether it is JQuery or JavaScript, the click event will not be 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 attribute

Long link line wrapping

Prevent long links from overflowing the parent element

a { word-wrap: break-word; }

ps: Related articles: CSS line wrapping

Detecting Retina displays with media queries

Retina displays can be detected using the following media query

@media     (min-device-pixel-ratio: 2),      (min-resolution: 192dpi) {           /* Retina CSS */     }

Filtering

The filter attribute is widely supported except in IE, but may be supported by Spartan. It's going to be a big deal in the next few decades.

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

Chrome 31, Firefox 35, Safari 7, Opera 27, iOS Safari 7.1 and Android Browser 4.4 support this attribute

Shorten text with ellipses

Can be used in Use ellipsis in an element to shorten long text

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

Make an empty element obey its width

Sometimes you need an empty element to obey its width attribute, you can do this:

.whatever { min-height: 1px; }

@supports

The @supports query is similar to the @media query. If the browser supports it, the given CSS will be displayed. Currently, IE and Safari do not support this attribute, but this will change soon. Spartan promises to support this attribute, and it is worth looking forward to

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

Chrome 31, Firefox 31, Opera 27 and Android Browser 4.4, etc. will support this attribute.

PS:
A column on Zhihu introduced three weird techniques, which are very useful. I added them at the end of this article:
3 things about CSS that [almost] no one knows.

Original English text: Some CSS you may not know