Stylus makes it easy to implement CSS prefixes and reset CSS_html/css_WEB-ITnose

CSS prefix

Break free from CSS prefix hell!
Get rid of CSS prefix hell!

CSS3 Each browser has private properties. For example, -moz represents firefox browser private properties, -ms represents IE browser private properties, and -webkit represents chrome and safari private properties. The CSS3 standard has not yet been finalized. At that time, many properties in CSS3 were still in the experimental stage. Each browser implemented the new CSS3 features according to its own understanding of the interim draft specification. However, because the specification has not yet matured and been finalized, some descriptions are unclear or unclear. It is the incompleteness of the processing logic that may cause some current implementations to be modified in the future. The original intention of temporarily using prefixed properties such as -webkit-transform is that even if the final implementation of transform is different from the current one, the -webkit-transform you originally wrote can still work normally. So browsers are now increasingly inclined to directly implement the final attribute and abandon the prefix. Old browsers may not support transform, so we usually add the -webkit-transform and transform attributes in order to be compatible with various versions of browsers.

• -webkit- (Google Chrome & Safari)
• -khtml- (Konqueror)
• -moz- (Mozilla Firefox)
• - ms- (Internet Explorer)
• -o- (Opéra)
• syntaxe normale

Download

shell$ bower install AutoPrefixCss #下载$ bower info AutoPrefixCss #查看详情

Original intention

There are many js implementations on the Internet that automatically add CSS prefixes Oh, such as autoprefixer, prefixfree.

• With the emergence of stylus, I feel that adding this prefix is ​​not too troublesome.
• Only CSS is generated, and the browser renders CSS directly without generating CSS through js for rendering.

Prerequisites for use

You need to install node.js and stylus, and you must also learn to use stylus, stylus github, stylus tutorial

Usage

reset.styl

Only required Add reset.styl to your project, then reference @import('reset.styl'), then call any of the following methods in the .styl you referenced:

• global-reset() # All tag resets excluding HTML5 new tag reset
• nested-reset() # Nested tag reset
• reset-font()
• reset-box- model()
• reset-body()
• reset-table() # Table reset
• reset-table-cell() # Table cell reset
• reset-html5() # HTML5 new tag reset

Example:

@import('reset.styl')global-reset()

Automatically add CSS suffix

Just add vendor. styl to your project, then reference @import('vendor.styl') and then you can use stylus syntax normally in your styl files. The effect is as follows:

opacity

adds opacity filter for IE

body    opacity:0.5

Generate:

cssbody {  opacity: 0.5;  -khtml-opacity: 0.5;  -moz-opacity: 0.5; /* old Mozilla */  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*old IE */}