Some of the techniques worth remembering in CSS

This article mainly introduces the CSS in some of the techniques worth remembering, this article describes these attributes in peacetime applications, although not often can be seen, but very efficient, need friends can refer to the

Box-sizing

Although box-sizing is introduced in CSS3, one of the values is Border-box, so that the height and width of the elements contain padding and borders.

CSS code copy content to clipboard

. 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 does not have a positional attribute, such as static/absolute/relative/fixed, the property is ignored

CSS code copy content to clipboard

position:relative;

z-index:100;

Disabling an element

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

CSS code copy content to clipboard

. 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 Wrap

Block long link Overflow parent element

CSS code copy content to clipboard

A

Word-wrap:break-word;

}

Using media query to detect Retina display

You can use the following media query to detect Retina display

CSS code copy content to clipboard

@media

(Min-device-pixel-ratio:2),

(MIN-RESOLUTION:192DPI) {

/* Retina CSS * *

}

Filter

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

CSS code copy content to clipboard

. blur {

Filter:blur (30px);

}

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

Shorten text with ellipses

You can shorten long text with ellipses in one element

CSS code copy content to clipboard

. whatever {

Overflow:hidden;

Text-overflow:ellipsis;

}

Let an empty element obey the width

Sometimes you need an empty element to follow its width properties, and you can do this:

CSS code copy content to clipboard

. whatever {

min-height:1px;

}

@supports

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

CSS code copy content to clipboard

@supports (Display:flex) {

/* Flexbox CSS * *

}

@supports not (Display:flex) {

/* CSS for no Flexbox * *

}

Chrome 31+, Firefox 31+, Opera 27+ and Android Browser 4.4+ support this property.