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

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 <head>您的页面在条件注释和任何样式表之后。

<! - [if lt IE 9]>

<script src =“bower_components / html5shiv / dist / html5shiv.js”></script>

<![endif]-->

手动安装

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

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-modulesreact-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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • 1.什么是 CSS hack? 以下是引自百度文库的定义: 简单地讲,css hack指各版本及各品牌浏览器之间对...
    饥人谷_Young丶K阅读 383评论 0 6
  • 什么是 CSS hack? 基础概念 由于不同厂商的浏览器,比如Internet Explorer,Safari,...
    Sketch阅读 287评论 0 0
  • 关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如I...
    熊蛋子17阅读 686评论 0 2
  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 383评论 0 1
  • 1. 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Moz...
    QQQQQCY阅读 231评论 0 0