Utilities classes not IE11 compatible

[madsfors]

Some of the CSS utility classes (the ones based on CSS-variables are not compatible with IE11).

I haven't tested all of them but stumbled upon issues with .-translate-50% and .bg-opacity-10%

[sebastiano-guerriero]

Hi Mads! The transform utility classes make a heavy use of custom properties, therefore they can't work in IE:

[class^="flip"], [class*=" flip"],
[class^="-rotate"], [class*=" -rotate"],
[class^="rotate"], [class*=" rotate"],
[class^="-translate"], [class*=" -translate"],
[class^="translate"], [class*=" translate"],
[class^="-scale"], [class*=" -scale"],
[class^="scale"], [class*=" scale"],
[class^="-skew"], [class*=" -skew"]
[class^="skew"], [class*=" skew"] {
  --translate: 0;
  --rotate: 0;
  --skew: 0;
  --scale: 1;

  transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

.flip   { --scale: -1; }
.flip-x { --scale-x: -1; }
.flip-y { --scale-y: -1; }

// ...

The custom properties are used to combine multiple transformations on the same element using multiple utility classes. I'll add a note on the documentation. Unfortunately we couldn't find a solution that worked for new and olders browsers.

[madsfors]

Understood. Just wanted to call it. Thank god the IE support is ending soon 🤞