Add aspectRatio utility

[AlfonzAlfonz]

🚀 Feature Proposal

Add aspectRatio utility to the xstyled. It should either be implemented using native aspect-ratio or with padding-top workaround. @supports query can be used to create fallback for older browsers.

Implementation with fallback in native css

.element {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .element::before {
    float: left;
    padding-top: 100%;
    content: "";
  }

  .element::after {
    display: block;
    content: "";
    clear: both;
  }
}

source

Motivation

Aspect-ratio is a way to set the aspect ratio of an element. It is a part of the official CSS specification and it's gaining support in browsers.

Example

<x.div aspectRatio={9 / 16}>...</div>

Pitch

Aspect ratio is a useful CSS rule and it would be nice to be able to use it in xstyled. Tailwind right now implements aspect ratio as an official plugin.

[pavelvondrasek]

@gregberge what do you think about it? Will you merge it if @AlfonzAlfonz implement it? We need this feature for our UI library which we prepare 😊

[gregberge]

I am OK for the feature, but please target the next branch to implement it. Also fallback will not be part of xstyled, it is not the job of xstyled to provide fallbacks for unsupported browsers.

[gregberge]

Oups, I am sorry, no it can't be part of xstyled as of today, the browser support is lacking. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

The best thing to do is create your own utility and include it in your library.

[gregberge]

The new v3 of xstyled let you create your own utility and easily extend xstyled. aspect-ratio will not be part of xstyled until the support is better. For now you can create a plugin: https://xstyled.dev/docs/adding-new-utilities/