postcss-fixes icon indicating copy to clipboard operation
postcss-fixes copied to clipboard

Fallback for background-position edge offsets

Open MattDiMu opened this issue 8 years ago • 0 comments

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.

MattDiMu avatar Jun 24 '16 08:06 MattDiMu