//---------------------------------------------------
// LESS Prefixer
//---------------------------------------------------
//
// All of the CSS3 fun, none of the prefixes!
//
// As a rule, you can use the CSS properties you
// would expect just by adding a '.':
//
// box-shadow => .box-shadow(@args)
//
// Also, when shorthand is available, arguments are
// not parameterized. Learn CSS, not LESS Prefixer.
//
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// .keyframes(@name; @args)
// .animation(@args)
// .animation-delay(@delay)
// .animation-direction(@direction)
// .animation-duration(@duration)
// .animation-fill-mode(@mode)
// .animation-iteration-count(@count)
// .animation-name(@name)
// .animation-play-state(@state)
// .animation-timing-function(@function)
// .background-size(@args)
// .border-radius(@args)
// .box-shadow(@args)
// .inner-shadow(@args) *
// .box-sizing(@args)
// .border-box() *
// .content-box() *
// .columns(@args)
// .column-count(@count)
// .column-gap(@gap)
// .column-rule(@args)
// .column-width(@width)
// .gradient(@default,@start,@stop) *
// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .keyframes(@name; @args)
// .opacity(@factor)
// .transform(@args)
// .transform-origin(@args)
// .transform-style(@style)
// .rotate(@deg)
// .scale(@factor)
// .translate(@x,@y)
// .translate3d(@x,@y,@z)
// .translateHardware(@x,@y) *
// .text-shadow(@args)
// .transition(@args)
// .transition-delay(@delay)
// .transition-duration(@duration)
// .transition-property(@property)
// .transition-timing-function(@function)
// Flexbox:
// .flex-block()
// .flex-inline()
// .flex-flow(@direction: row, @wrap: nowrap)
// .flex-direction(@direction: row)
// .flex-wrap(@wrap: nowrap)
// .justify-content(@justification)
// .align-items(@mode)
// .align-content(@alignment)
// .flex(@args: none)
// .flex-grow(@grow: 1)
// .flex-shrink(@shrink: 1)
// .flex-basis(@basis: auto)
// .order(@num: 0)
// .align-self(@align: auto)
//
// Credit to LESS Elements for the motivation and
// to CSS3Please.com for implementation.
//
// Copyright (c) 2012 Joel Sutherland
// MIT Licensed:
// http://www.opensource.org/licenses/mit-license.php
//
//--------------------------------------------------- // Animation
.keyframes(@name; @args) {
@-webkit-keyframes @name { @args(); }
@keyframes @name { @args(); }
}
.animation(@args) {
-webkit-animation: @args;
animation: @args;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
-o-animation-direction: @direction;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-o-animation-duration: @duration;
}
.animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode;
animation-fill-mode: @mode;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-play-state(@state) {
-webkit-animation-play-state: @state;
animation-play-state: @state;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
animation-timing-function: @function;
} // Background Size .background-size(@args) {
background-size: @args;
} // Border Radius .border-radius(@args) {
border-radius: @args;
background-clip: padding-box;
} // Box Shadows .box-shadow(@args) {
-webkit-box-shadow: @args;
box-shadow: @args;
}
.inner-shadow(@args) {
.box-shadow(inset @args);
} // Box Sizing .box-sizing(@args) {
-webkit-box-sizing: @args;
-moz-box-sizing: @args;
box-sizing: @args;
}
.border-box(){
.box-sizing(border-box);
}
.content-box(){
.box-sizing(content-box);
} // Columns .columns(@args) {
-webkit-columns: @args;
-moz-columns: @args;
columns: @args;
}
.column-count(@count) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
}
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-width(@width) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
}
.column-rule(@args) {
-webkit-column-rule: @args;
-moz-column-rule: @args;
column-rule: @args;
} // Gradients .gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
} // Opacity .opacity(@factor) {
@iefactor: @factor*100;
filter: ~"alpha(opacity=@{iefactor})";
opacity: @factor;
} // Text Shadow .text-shadow(@args) {
text-shadow: @args;
} // Transforms .transform(@args) {
-webkit-transform: @args;
-ms-transform: @args;
transform: @args;
}
.transform-origin(@args) {
-webkit-transform-origin: @args;
-ms-transform-origin: @args;
transform-origin: @args;
}
.transform-style(@style) {
-webkit-transform-style: @style;
-ms-transform-style: @style;
transform-style: @style;
}
.rotate(@deg:45deg){
.transform(rotate(@deg));
}
.scale(@factor:.5){
.transform(scale(@factor));
}
.translate(@x,@y){
.transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
.translate(@x,@y);
-webkit-transform: translate3d(@x,@y,0);
-o-transform: translate3d(@x,@y,0);
transform: translate3d(@x,@y,0);
} // Transitions .transition(@args:200ms) {
transition: @args;
}
.transition-delay(@delay:0) {
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
transition-duration: @duration;
}
.transition-property(@property:all) {
transition-property: @property;
}
.transition-timing-function(@function:ease) {
transition-timing-function: @function;
} // Flexbox
.flex-block() {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-inline() {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.flex-flow(@direction: row, @wrap: nowrap) {
-moz-flex-flow: @direction @wrap;
-ms-flex-direction: @direction;
-ms-flex-wrap: @wrap;
-webkit-flex-flow: @direction @wrap;
flex-flow: @direction @wrap;
}
.align-content(@alignment) {
-moz-align-content: @alignment;
-ms-align-content: @alignment;
-webkit-align-content: @alignment;
align-content: @alignment;
}
.flex-direction(@direction: row) {
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
.flex-wrap(@wrap: nowrap) {
-webkit-flex-wrap: @wrap;
-moz-flex-wrap: @wrap;
-ms-flex-wrap: @wrap;
flex-wrap: @wrap;
}
.justify-content(@justification) {
-webkit-box-pack: @justification;
-moz-box-pack: @justification;
-ms-flex-pack: replace(@justification, "flex-", "");
-webkit-justify-content: @justification;
justify-content: @justification;
}
.align-items(@mode) {
-webkit-box-align: @mode;
-moz-box-align: @mode;
-ms-flex-align: @mode;
-webkit-align-items: @mode;
align-items: @mode;
}
.flex(@args: none) {
-webkit-flex: @args;
-moz-flex: @args;
-ms-flex: @args;
-webkit-flex: @args;
flex: @args; }
.order(@order: 0) {
-webkit-box-ordinal-group: @order;
-moz-box-ordinal-group: @order;
-ms-box-ordinal-group: @order;
-ms-flex-order: @order;
-webkit-order: @order;
-moz-order: @order;
-ms-order: @order;
order: @order;
}
.flex-grow(@grow: 1) {
-webkit-flex-grow: @grow;
-moz-flex-grow: @grow;
-ms-flex-grow: @grow;
-webkit-flex-grow: @grow;
flex-grow: @grow;
}
.flex-shrink(@shrink: 1) {
-webkit-flex-shrink: @shrink;
-moz-flex-shrink: @shrink;
-ms-flex-shrink: @shrink;
-webkit-flex-shrink: @shrink;
flex-shrink: @shrink;
}
.flex-basis(@basis: auto) {
-webkit-flex-basis: @basis;
-moz-flex-basis: @basis;
-ms-flex-basis: @basis;
-webkit-flex-basis: @basis;
flex-basis: @basis;
}
.align-self(@align: auto) {
-webkit-align-self: @align;
-moz-align-self: @align;
-ms-align-self: @align;
-webkit-align-self: @align;
align-self: @align;
}

  

针对css3特性浏览器兼容 封装less的更多相关文章

  1. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  2. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. 老式浏览器兼容HTML5和CSS3的问题

      1.让老式浏览器支持HTML5   HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...

  4. 第四节:教你如何快速让浏览器兼容ES6特性

    写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...

  5. 解决浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  6. 解决让浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  7. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

  8. js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)

    /** *浏览器兼容写法封装 */ let elementStyle = document.createElement('div').style let vendor = (() => { le ...

  9. JS控制CSS3,添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

随机推荐

  1. 基于superagent 与 cheerio 的node简单爬虫

    最近重新玩起了node,便总结下基本的东西,在本文中通过node的superagent与cheerio来抓取分析网页的数据. 目的  superagent 抓取网页 cheerio 分析网页 准备 N ...

  2. Java POI Word 写文档

    package apache.poi; import java.io.ByteArrayInputStream;import java.io.ByteArrayOutputStream;import ...

  3. git中进入带有空格的目录下的解决办法

    比如:要进入Program Files目录下 有两种方法: 1.将Program Files目录用引号引起来. $ cd "Program Files" 2.将空格处使用空格引号 ...

  4. 简单几何(凸包) POJ 1696 Space Ant

    题目传送门 题意:一个蚂蚁一直往左边走,问最多能走多少步,且输出路径 分析:就是凸包的变形题,凸包性质,所有点都能走.从左下角开始走,不停排序.有点纠结,自己的凸包不能AC.待理解透凸包再来写.. 好 ...

  5. POJ3321 Apple Tree(DFS序)

    题目,是对一颗树,单点修改.子树查询.典型的dfs序入门题. DFS序可以将一颗树与子树们表示为一个连续的区间,然后用线段树来维护:感觉算是树链剖分的一种吧,和轻重链剖分不同的是这是对子树进行剖分的. ...

  6. HDU3037 Saving Beans(Lucas定理+乘法逆元)

    题目大概问小于等于m个的物品放到n个地方有几种方法. 即解这个n元一次方程的非负整数解的个数$x_1+x_2+x_3+\dots+x_n=y$,其中0<=y<=m. 这个方程的非负整数解个 ...

  7. BZOJ4303 : 数列

    将每个点看成二维坐标点$(i,a_i)$,那么每次操作的范围都是一个矩形. 于是建立KD-Tree,通过打标记支持操作即可. 时间复杂度$O(m\sqrt{n})$. #include<cstd ...

  8. BZOJ1770 : [Usaco2009 Nov]lights 燈

    设$f[i]$表示$i$点按下开关后会影响到的点的集合,用二进制表示. 不妨设$n$为偶数,令$m=\frac{n}{2}$,对于前一半暴力$2^m$搜索所有方案,用map维护每种集合的最小代价. 对 ...

  9. .NET中的视图和过滤器 (DefaultView和RowFilter)

    NET中的视图和过滤器 (DefaultView和RowFilter) ADO.NET中有一层对象,用来创建任意数据源的抽象模型.其中包括DataSet,DataTable,DataRow,DataV ...

  10. MONO Jexus部署最佳体验

    根据我的测试和得到的反馈意见,目前几个月内开发跨平台的asp.net企业应用,应该在这个范围内进行:mono版本:3.2.8 (或3.2.7)Jexus版本:5.5.1(或5.5)MVC版本:1.2. ...