inset-inline-end css on Safari

user_11561643 0
Viewed 96

I've added inline-inset-end and inset-inline-start to an absolutely positioned element. I'm using them for language support as these two should help when the layout needs to switch between RTL and LTR.

This is working fine on chrome and forefox but I have absolutely no idea how to set up an equivalent in Safari.

I'm trying to understand if there is a basic css alternative that will work on Safari

An example of what the layout would be like:

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.reader {
  width: 50px;
  height: 100%;
  display : flex;
  flex-direction : column;
  position: absolute;
  inset-inline-end: 0px;
  background: yellow;
}
<html>

<body>
  <div class="container">
    ha ha
    <div class="reader">
      hola
    </div>
  </div>
</body>

</html>

safari css
1 Answers

Safari supports inset-inline-end and inset-inline-start now (and most other logical properties), but if you still need a fallback there are options. As long as you are using the dir attribute properly, you can add a fallback that works in basically any browser.

[dir="ltr"] .reader {
    right: 0px;
}

[dir="rtl"] .reader {
    left: 0px;
}

If you want to go a step further (at the cost of some support), you can use @supports:

@supports not (inset-inline-end: 0px) {
    [dir="ltr"] .reader {
        right: 0px;
    }

    [dir="rtl"] .reader {
        left: 0px;
    }
}

The same trick can be used with most logical properties as well.

user_25910070
Related