Skip to content

Latest commit

 

History

History
136 lines (98 loc) · 3.13 KB

README.md

File metadata and controls

136 lines (98 loc) · 3.13 KB
Raw

CSS3.js

CSS3 polyfill

专治各种不服，让IE6+、Android 2.3+ 等老旧浏览器对CSS3服服帖帖

注意请web站点环境下使用，本地双击html打开无效

css属性兼容

  • IE下兼容圆角，阴影、渐变。基于PIE
  • IE9下自动屏蔽 与css3冲突的滤镜(Alpha|Matrix|Gradient|FlipH|FlipV)
  • IE9下transform属性免前缀
  • IE6、7下兼容 display : inline-block;
	require("cssprops");

IE6下兼容 position: fixed;

  • 暂时只兼容left、top，right、bottom取值的单位为px的情形，其他单位的兼容正在开发中
	require("posfixed");

css3 免私有前缀(-webkit-、-moz-等)

  • css文件中免浏览器私有前缀
  • js操作DOM对象中的样式，免浏览器私有前缀
	require("prefixfree");

基于prefixfree

伪类和css3选择符兼容

  • 为IE6-8下提供各种css选择符中的伪类选、伪对象、属性择器支持。基于selectivizr
	require("jquery");	//可使用的外部选择器有：Nwmatcher、MooTools等，见[原版selectivizr官网](http://www.selectivizr.com/)
	require("selectivizr");

媒体查询 @media

  • 为IE提响应式媒体查询css语句的支持
	require("matchmedia");
	if (window.matchMedia("(min-width:480px)").matches) {
		//view port至少480px宽度  
	} else {
		//view port比480px宽度小  
	}
	if (window.matchMedia("(max-msie:9)").matches) {
		//IE6-9
	} else {
		//其他浏览器  
	}
	@media screen and (min-width: 960px) {
		body{ background: #999; }
	}

基于media-match

兼容性查询 @supports

	require("supports");
	CSS.supports("display", "flex");
	@supports ( display: flexbox ) {
		#navigation,
		#content {
			display: flexbox;
		}
	}

上面的规则表示，当浏览器支持弹性盒子布局时，括号里的所有样式将会生效

基于CSS.supports

url查询 @document

	require("document");
	@document url(http://www.w3.org/),
				url-prefix(http://www.w3.org/Style/),
				domain(mozilla.org),
				regexp("https:.*")
	{
		/* 该条CSS规则会应用在下面的网页:
		 + URL为"http://www.w3.org/"的页面.
		 + 任何URL以"http://www.w3.org/Style/"开头的网页
		 + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页     
		 + 任何URL以"https:"开头的网页 */

		/* make the above-mentioned pages really ugly */
		body { color: purple; background: yellow; }
	}

@document文档

长度单位兼容

  • IE兼容vw、vh、vmax、vmin、rem等相对长度单位
  • 移动端兼容绝对长度(忽略缩放)，如厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)
	require("cssunits");

placeholder 文本框占位符

  • 为低端浏览器提供placeholder功能，为老版本浏览器抹平差异
	require("placeholder");