CSS 伪 :dir(); :host-context() 和基于方向性的样式

Question

在这个问题中，我正在寻找以下问题的最简洁的解决方案，同时敦促浏览器的编码人员赶上规范，尤其是 :dir() 一个！！

问题这是我目前最熟悉的解决方案：

我想根据 方向性 设置下图的样式，翻转它，例如，在 RTL 模式下。图像位于阴影 DOM 中。截至目前，我正在通过以下样式实现这一目标。

::shadowRoot
    <style>
        .directed-image:dir(rtl) { transform: rotateY(180deg); }    -- Firefox only as of now
        :host-context([dir=rtl]) { transform: rotateY(180deg); }    -- Chromium only as of now
    </style>

    <img class="directed-image" src="..." />

问题尚未解决：

None 上面的样式帮助 Safari：它还没有实现 :dir() 伪 class 而且人们似乎有一个strong objection 到 :host-context()
我真的不喜欢那些针对平台多样性的双重解决方案；想摆脱那些，但这只是次要问题

解决方案 ?:

我最希望的是 :dir() 将获得广泛的跨浏览器支持 - 它将解决 Safari 的问题以及提供真正的方向性上下文感知样式（[dir=ltr] 的缺点在上面的 WebKit 错误 link 中有所涉及）。

但考虑到

Chromium's bug on :dir() 从 2018 年开始就过时了
WebKit's bug on :dir() 最后一次触摸是在 2016 年！！！
Firefox's bug on :host-context() 从 2018 年开始过时，对规范有一些担忧
并且 WebKit 不愿意实现 :host-context()

-- 有了这一切：是否有任何其他解决方案（希望首先解决 Safari 问题）。

JS based solutions are interesting but much less preferred.

Answer 1

不确定这是否是您要查找的内容，但您可以使用 RTLCSS。这是一个 CSS 框架，可让您轻松地在 RTL 和 LTR 样式表之间切换并创建它们，而无需做太多重复工作。

它还支持一些大型 CSS 框架，如果您使用它们，例如 Bootstrap 和 Semantic-UI

Answer 2

2020 年 1 月回答：

如您所说：body 标签上的 dir 属性（在大多数情况下）将是语言更改的唯一指示。由于 CSS 没有级联（还；如您所说），现在 唯一的选择 是让 Elements 观察该属性变化。所以我担心你唯一的选择是 MutationObserver（在你拥有的元素中）

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false };

CSS 伪 :dir(); :host-context() 和基于方向性的样式

CSS pseudo :dir(); :host-context() and directionality based styling

css

web-component

custom-element