CSS псевдо: dir (); : host-context () и стилизация на основе направленности - PullRequest
Новая
       28

CSS псевдо: dir (); : host-context () и стилизация на основе направленности

2 голосов
/ 23 января 2020

В этом вопросе я ищу самое чистое возможное решение для указанной ниже проблемы, а также призываю кодировщиков браузеров догнать spe c, особенно :dir() one !!

Проблема и ее наиболее известное на данный момент решение:

Я бы хотел стилизовать изображение ниже на основе направленности , например, при переворачивании, когда в Режим 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="..." />

Проблемы еще не решены:

  • Ни один из стилей выше не помог Safari : он еще не внедрил :dir() псевдокласс, и у его людей, похоже, есть сильное возражение против :host-context()
  • Я действительно не фанат эти двойные решения для разнообразия платформы; хотел бы избавиться от них, но это лишь второстепенная задача

Решения ?:

Лучшее, что я хотел бы иметь sh в том, что :dir() получит широкую межбраузерную поддержку - это решит проблему Safari , а также обеспечит по-настоящему контекстно-ориентированное моделирование (недостатки в [dir=ltr] немного затронуты в Ссылка на ошибку WebKit выше).

Но, учитывая, что

- имея все это: есть ли какое-то другое решение проблемы (ищите решение Safari выпуск на первом месте).

JS решения на основе являются интересными, но гораздо менее предпочтительными.

Ответы [ 2 ]

1 голос
/ 25 января 2020

январь 2020 г. ответ :

Как вы сказали: атрибут dir в теге body будет (в большинстве случаев) единственным признаком смены языка. Поскольку 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 };
0 голосов
/ 23 января 2020

Не уверен, что это то, что вы ищете, но вы можете использовать RTL CSS. Это фреймворк CSS, позволяющий легко переключаться между таблицами стилей RTL и LTR и создавать их без необходимости выполнять слишком много двойной работы.

Он также поддерживает несколько больших фреймворков CSS, если вы используете эти как Bootstrap и Семанти c -UI

...