Media query hacks for weird browsers (React+Styled Components)

CssUtils.ts

// cssUtils.ts
import { css } from "styled-components";

export const IEOnly: Function = style => {
  return css`
    @media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, & {
      ${style};
    }
  `;
};

export const hoverSupported = style => css`
  @media not all and (pointer: coarse) {
    ${style};
  }
`;

ie11.scss

@mixin ieOnly {    
    @media not all and (pointer: coarse) {
      *::-ms-backdrop {
        @content;
      }
    }
}

@keyframes move {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

@keyframes moveIE {
  0% {
    margin-left: -100%;
  }
  100% {
    margin-left: 100%;
  }
}

body {
  overflow-x: hidden;
}

.text {    
  animation: move 5s linear infinite forwards;

  @include ieOnly() {
    animation: moveIE 10s linear infinite forwards;
  }
}

RandomAnchor.tsx

// RandomAnchor.tsx
import styled, { css } from "styled-components";
import { hoverSupported } from "./CssUtils";

export const RandomAnchor = styled.a`
  color: #fff;

  /*
   * Only use hover for the browsers we choose to support
   */
  ${hoverSupported(css`
    &:hover {
      color: "#eee";
    }
  `)};

  &:active {
    color: "#ddd";
  }

  &[disabled] {
    color: "ccc";
  }
`;

RandomDiv.tsx

// MovingText.tsx
import styled, { css, keyframes } from "styled-components";
import { IEOnly } from "./CssUtils";

const move = keyframes`
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
`;

const moveIE = keyframes`
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -100%;
  }
`;

export const MovingText: any = styled.div`
  animation: ${`${traverse} 5s linear infinite forwards`};

  /**
   * Using vw units with 3D transforms in IE don't work properly.
   * Override the property in IE.
   */
  ${IEOnly(css`
    animation: ${`${traverseIE} 10s linear infinite forwards`};
  `)};
`;