处理浏览器兼容问题的超好用工具盘点

html5shiv.js

HTML5 Shiv可以在旧版Internet Explorer中使用HTML5部分元素,并为Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5样式。

这些文件做什么?

html5shiv.js

这包括基本的createElement()shiv技术,以及用于IE6-8的document.createElement和document.createDocumentFragment的monkeypatches。它还适用于IE6-9,Safari 4.x和FF 3.x的HTML5元素的基本样式。

html5shiv-printshiv.js

这包括以上所有内容,以及允许HTML5元素被风格化并在IE 6-8中打印时包含子元素的机制。

它也与Modernizr一起发行。

安装 

1.使用Bower

bower install html5shiv --save-dev

这将克隆最新版本的HTML5 shiv bower_components目录,并创建或更新文件bower.json。它指定了您的项目依赖关系。

2.也可以在HTML5中包含HTML5 shiv 您的页面在条件注释和任何样式表之后。

<! - [if lt IE 9]>

手动安装

从这个存储库中下载并提取最新的zip包,并将两个文件dist / html5shiv.js和dist / html5shiv-printshiv.js复制到您的项目中。然后将其中一个包含在您的中,如上所述。

HTML5 Shiv API

HTML5 Shiv作为一个简单的插件解决方案。在大多数情况下,无需配置HTML5 Shiv或使用HTML5 Shiv提供的方法。

html5.elements

elements选项是一个空格分隔的字符串或数组,它描述了shiv元素的完整列表。

在html5shiv.js之前配置元素

//create a global html5 options object

window.html5 = {

         'elements':'mark section customelement'

};

在html5shiv.js之后配置元素。

//change the html5shiv options object

window.html5.elements='mark section customelement';

//and re-invoke the `shivDocument` method

html5.shivDocument(document);

html5.shivCSS

如果将shivCSS设置为true,则HTML5 Shiv将添加基本样式(主要显示:块)到切片元素(如章节,文章)。在大多数情况下,网页作者应该在他的普通样式表中包含这些基本样式,以确保没有JavaScript的旧版浏览器支持(即Firefox 3.6)。

shivCSS默认为true,并且可以设置为false,仅在包含html5shiv.js之前:


//create a global html5 options object

window.html5={'shivCSS':false};


html5.shivMethods

如果shivMethods选项设置为true(默认情况下),HTML5 Shiv将在Internet Explorer 6-8中覆盖document.createElement / document.createDocumentFragment,以允许HTML5元素的动态DOM创建。

关于方法这里不过多介绍--传送门===>HTML5 Shiv method


respond.js

适用于最小/最大宽度CSS3 Media Queries(适用于IE 6-8及更多),快速和轻便。

使用说明

1.使用最小/最大宽度的媒体查询来制作CSS,以使您的布局从移动端一直到网页端

@media screen and (min-width:480px) {

     /** ...styles for 480px and up go here **

/}

2.参考所有CSS之后的response.min.js脚本(1kb分钟/ gzip压缩)(运行的时间越早,IE用户将看不到非媒体内容的闪存越大)

3.破解打开Internet Explorer的乐趣

怎么工作?

基本上,脚本循环遍历页面中引用的CSS,并在其内容上运行正则表达式,以查找媒体查询及其相关的CSS块。

传送门===>Respond.js API


css reset

讲的非常好的一篇!==>关于CSS Reset 那些事(一)之 历史演变与Normalize.css


normalize.css

npm :         npm install --save normalize.css

bower:        bower install --save normalize-css 

cdn:            https://cdnjs.com/libraries/normalize

它有什么作用?

1.保留有用的默认值,与许多CSS重置不同。

2.规范各种元素的样式。

3.更正错误和常见的浏览器不一致。

4.通过微妙修改提高可用性。

5.说明什么代码使用详细。

浏览器支持

Chrome (last two)

Edge (last two)

Firefox (last two)

Firefox ESR

Internet Explorer 8+

iOS Safari (last two)

Opera (last two)

Safari 6+

Normalize.css v1 provides legacy browser support(IE 6+, Safari 4+), 但不再积极开发。

更多了解请戳==>normalize.css API


Modernizr

Modernizr是一个JavaScript库,可以检测用户浏览器中的HTML5和CSS3功能。

Modernizr测试当前UA中可用的本机CSS3和HTML5功能,并通过两种方式将结果提供给您:作为全局的属性Modernizr对象,以及作为元素上的类。此信息允许您逐渐增强您的页面,同时对这些体验进行细致的控制。

新的异步事件侦听器

//Listen to a test, give it a callback

Modernizr.on('testname',function(result)

 {

if(result) {console.log('The test passed!');  }

else{console.log('The test failed!');  }

})

更多使用请戳-->Modernizr


postCSS

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚未被浏览器广泛支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。

PostCSS 在工业界被广泛地应用,其中不乏很多有名的行业领导者,如:维基百科,Twitter,阿里巴巴, JetBrains。PostCSS 的Autoprefixer插件是最流行的 CSS 处理工具之一。

截止到目前,PostCSS 有 200 多个插件。你可以在插件列表或搜索目录找到它们。 下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。

如果你有任何新的想法,开发 PostCSS 插件非常简单易上手。

解决全局 CSS 的问题

postcss-use允许你在 CSS 里明确地设置 PostCSS 插件,并且只在当前文件执行它们。

postcss-modules和react-css-modules可以自动以组件为单位隔绝 CSS 选择器。

postcss-autoreset是全局样式重置的又一个选择,它更适用于分离的组件。

postcss-initial添加了all: initial的支持,重置了所有继承的样式。

cq-prolyfill添加了容器查询的支持,允许添加响应于父元素宽度的样式.

提前使用先进的 CSS 特性

autoprefixer添加了 vendor 浏览器前缀,它使用 Can I Use 上面的数据。

postcss-cssnext允许你使用未来的 CSS 特性(包括autoprefixer)。

postcss-image-set-polyfill为所有浏览器模拟了image-set函数逻辑。

更佳的 CSS 可读性

precss囊括了许多插件来支持类似 Sass 的特性,比如 CSS 变量,套嵌,mixins 等。

postcss-sorting给规则的内容以及@规则排序。

postcss-utilities囊括了最常用的简写方式和书写帮助。

short添加并拓展了大量的缩写属性。

图片和字体

postcss-assets可以插入图片尺寸和内联文件。

postcss-sprites能生成雪碧图。

font-magician生成所有在 CSS 里需要的@font-face规则。

postcss-inline-svg允许你内联 SVG 并定制它的样式。

postcss-write-svg允许你在 CSS 里写简单的 SVG。

提示器(Linters)

stylelint是一个模块化的样式提示器。

stylefmt是一个能根据stylelint规则自动优化 CSS 格式的工具。

doiuse提示 CSS 的浏览器支持性,使用的数据来自于 Can I Use。

colorguard帮助你保持一个始终如一的调色板。

其它

postcss-rtl在单个 CSS 文件里组合了两个方向(左到右,右到左)的样式。

cssnano是一个模块化的 CSS 压缩器。

lost是一个功能强大的calc()栅格系统。

rtlcss镜像翻转 CSS 样式,适用于 right-to-left 的应用场景。

语法

PostCSS 可以转化样式到任意语法,不仅仅是 CSS。 如果还没有支持你最喜欢的语法,你可以编写一个解释器以及(或者)一个 stringifier 来拓展 PostCSS。

sugarss是一个以缩进为基础的语法,类似于 Sass 和 Stylus。

postcss-html允许你在 HTML /Markdown/Vue component里编写样式。

postcss-scss允许你使用 SCSS(但并没有将 SCSS 编译到 CSS)

postcss-sass允许你使用 Sass(但并没有将 Sass 编译到 CSS)

postcss-less允许你使用 Less(但并没有将 LESS 编译到 CSS)

postcss-less-engine允许你使用 Less(并且使用真正的 Less.js 把 LESS 编译到 CSS)

postcss-js允许你在 JS 里编写样式,或者转换成 React 的内联样式/Radium/JSS。

postcss-safe-parser查找并修复 CSS 语法错误。

midas将 CSS 字符串转化成高亮的 HTML。


请戳这里使用-->postcss

你可能感兴趣的:(处理浏览器兼容问题的超好用工具盘点)