Skip to content

Fallback for background-position edge offsets #1

@MattDiMu

Description

@MattDiMu

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions