关于网络组件：CSS pseudo：dir(); ：host-context()和基于方向性的样式


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

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

该问题及其当前对我最有名的解决方案：

我想根据方向性对下面的图像进行样式设置，例如在RTL模式下将其翻转。该图像位于影子DOM中。到目前为止，我正在通过以下样式实现这一目标。

1
2
3
4
5
6
7
::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="..." />

有待解决的问题：

  • 上面没有一种样式可以帮助Safari：尚未实现:dir()伪类，人们似乎强烈反对:host-context()
  • 我真的不喜欢那些针对平台多样性的双重解决方案。想摆脱这些，但这只是次要问题

解决方案？：

我最想拥有的是:dir()将获得广泛的跨浏览器支持-它可以解决Safari的问题，并提供真正的方向性上下文感知样式([dir=ltr]的缺点在WebKit的错误链接上方)。

但是鉴于

  • Chromium在:dir()上的错误从2018年开始生效
  • WebKit在:dir()上的错误最后一次出现在2016年！！！
  • Firefox在:host-context()上的错误从2018年开始出现，对规范有些担忧
  • WebKit不愿意实现:host-context()

-具有所有这些：是否还有其他解决方案(希望首先解决Safari问题)。

JS based solutions are interesting but much less preferred.

相关讨论