postcss-fixes
postcss-fixes copied to clipboard
Fallback for background-position edge offsets
As I've just had this issue in a real-world-project: The browser-support for background-position edge offsets (from right or from bottom) like this
.selector {
background-position: right 5px bottom 5px;
...is suboptimal, especially on older android devices. These devices support calc() (at least prefixed) though. Therefore this could be transformed into
.selector {
background-position: calc(100% - 5px) calc(100% - 5px);
Browser support: http://caniuse.com/#feat=calc http://caniuse.com/#feat=css-background-offsets
Optionally this could also support the background-position-x and y properties, as they have great browser support on webkit-based browsers (especially mobile) as well: http://caniuse.com/#feat=background-position-x-y
Important notice: While the edge offset ability is already an official W3C Recommendation (https://www.w3.org/TR/css3-background/#background-position), the background-position-x and y properties are only a working draft (https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands)!! The potential plugin should therefore differentiate between 2 modes. A safe one for postcss-fixes plugin pack and an opt-in-mode for more experimental plugin packs like cssnext.