diff --git a/README.md b/README.md index 3e14102..5379fb1 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ README.md file is automatically generated. **[Documentation](#documentation) |** --- -### Current version: v2.0.8 (2013-11-21) +### Current version: v2.0.9 (2013-11-22) ## Intro Why LESS Hat? In August 2012, while we were developing and extending [CSS Hat](www.csshat.com) for LESS we needed universal mixins. Unfortunately, none of available were good enough that would satisfy our needs and that’s why we created new custom ones on our own, which have become the most popular mixin library for the whole LESS CSS. @@ -2637,7 +2637,19 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans time += 's'; } - And also properties inside `transition` definition are automatically prefixed, if it is needed. + And also properties inside `transition` definition are automatically prefixed, if it is needed. + **W3C property value is appending all prefixed values.** + Why? Some browsers support W3C unprefixed property, but value must be sometimes prefixed. + Let's consider this example: + + div { + -webkit-transition: -webkit-filter .3s ease; + -moz-transition: -moz-filter .3s ease; + -o-transition: filter .3s ease; + + // There is a problem! Webkit needs -webkit-filter property + transition: filter .3s ease; + } **Example:** @@ -2748,7 +2760,19 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans **Tips and tricks:** - And also properties inside `transition-property` definition are automatically prefixed, if it is needed. + And also properties inside `transition-property` definition are automatically prefixed, if it is needed. + **W3C property value is appending all prefixed values.** + Why? Some browsers support W3C unprefixed property, but value must be sometimes prefixed. + Let's consider this example: + + div { + -webkit-transition: -webkit-filter .3s ease; + -moz-transition: -moz-filter .3s ease; + -o-transition: filter .3s ease; + + // There is a problem! Webkit needs -webkit-filter property + transition: filter .3s ease; + } **Example:** @@ -2758,10 +2782,10 @@ Resources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/trans // Result div { - -webkit-transition-property: -webkit-box-shadow; - -moz-transition-property: -moz-box-shadow; - -o-transition-property: box-shadow; - transition-property: box-shadow; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + transition-property: -webkit-transform,-moz-transform,-o-transform,transform; } diff --git a/bower.json b/bower.json index 50e2b6c..7304814 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { "name": "lesshat", - "version": "2.0.8", + "version": "2.0.9", "main": "./build/lesshat.less" } \ No newline at end of file diff --git a/build/lesshat-prefixed.less b/build/lesshat-prefixed.less index 509ee3e..159cffb 100644 --- a/build/lesshat-prefixed.less +++ b/build/lesshat-prefixed.less @@ -6,7 +6,7 @@ // Handcrafted by Petr Brzek, lesshat.com // Works great with CSS Hat csshat.com -// version: v2.0.8 (2013-11-21) +// version: v2.0.9 (2013-11-22) // TABLE OF MIXINS: // align-content @@ -2562,9 +2562,9 @@ @opera_local: true; @w3c_local: true; - @process_webkit: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],prefix="-webkit-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`; - @process_moz: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","box-shadow","column","transform","filter"],prefix="-moz-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`; - @process_opera: ~`(function(value){value=value||"all";var prefixedProperties=["transform"],prefix="-o-";return/^[-a-zA-Z0-9().\/]*,/.test(value)&&(value=value.replace(/(?:,)(?![^(]*\))/g,"")),prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`; + @process_webkit: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],prefix="-webkit-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`; + @process_moz: ~`(function(value){value=value||"all";var prefixedProperties=["background-size","box-shadow","column","transform","filter"],prefix="-moz-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`; + @process_opera: ~`(function(value){value=value||"all";var prefixedProperties=["transform"],prefix="-o-";return prefixedProperties.forEach(function(property){-1!==value.indexOf(property)&&(value=value.replace(new RegExp(property,"g"),function(match){return prefix+match}))}),value})((function(){var args="@{arguments}";return args=args.replace(/^\[|\]$/g,"")})())`; @process: ~`(function(value){value=value||"all";var prefixes=["-webkit-","-moz-","-o-",""],prefixedProperties=["column","transform","filter"],subSplit=value.split(/(?:,)(?![^(]*\))/g);return subSplit.forEach(function(css,index){prefixedProperties.forEach(function(property){-1!==css.indexOf(property)&&(subSplit[index]="",prefixes.forEach(function(vendor,i){subSplit[index]+=css.trim().replace(new RegExp(property,"g"),function(match){return vendor+match}),i