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
它有什么作用?
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添加了容器查询的支持,允许添加响应于父元素宽度的样式.
autoprefixer添加了 vendor 浏览器前缀,它使用 Can I Use 上面的数据。
postcss-cssnext允许你使用未来的 CSS 特性(包括autoprefixer)。
postcss-image-set-polyfill为所有浏览器模拟了image-set函数逻辑。
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。
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