Я думаю, что ответ на этот вопрос не есть, но прежде чем я сделаю более радикальные изменения, я хочу, чтобы я ничего не пропустил.
Есть ли средство, только с помощью CSS, изменить обоснование элемента и его дочерних элементов на основе того, ориентировано ли оно больше налево или вправо экрана?
Там нет прямой собственности для этого, но я вижу, если я пропустил какой-то хакерский метод, возможно, с участием псевдоселекторов или элементов.
Демонстрация текущего затруднительного положения:
У меня есть панель навигации <ul> которая содержит смесь ссылок <a> и некоторых вложенных контейнеров <ul> для выпадающих меню при наведении указателя мыши. Довольно стандартно и отлично работает на более широких экранах:
Если доступ к экрану меньше, навигационная панель переносится на следующую строку, как предполагалось. Это желаемый результат. Однако иногда выпадающие меню могут быть усечены за кадром, что не очень желательно:
Вместо того, чтобы предлагать совершенно разные стили для мобильных устройств (мой резервный план состоит в том, чтобы представить раскрывающиеся меню в виде диалоговых вариантов через размещение postion: fixed на меньших экранах, а не на position: absolute как сейчас), я мог бы исправить мои ситуация, когда мои элементы осознают свое приключение вне экрана и необходимость как text-align: right и, возможно, корректируют их абсолютное позиционирование для привязки справа от родительского <li> а не слева, как сейчас:
Я могу управлять этим с помощью javascript, но у меня уже достаточно событий для прослушивания, и вы хотите предоставить более элегантный ответ, который позволяет избежать javascript. Если нет метода css-only, я могу вместо этого использовать альтернативу фиксированной позиции, как план b.
Разъяснения:
Хотя я изначально ожидал использовать медиа-запросы для решения этого затруднительного положения на мобильных устройствах, я понял, что хотя это видно только на меньших размерах экрана для меня, это не то, что я могу считать само собой разумеющимся.
Например, количество навигационных элементов может расти в будущем и может представлять эту ситуацию на любом экране. Просто нужно выпадающее меню, которое будет справа.
Я также не могу гарантировать, что устройство, которое я еще не тестировал, не реплицирует проблему, размер которой я не ожидал.
Моя точка зрения заключается в том, что я не вижу способа, которым я могу полагаться на запросы на размер экрана. Я думаю, что мое решение, если оно есть, должно реагировать на положение элемента на экране - вот почему я думаю, что может оказаться неудачным для решения, отличного от javascript.
Во-вторых: предположим, что контент является динамическим и, как и любая способная страница, элементы, которые должны динамически изменять свойства для этого, выполняют (например, порядок заказа, счет, ширину и т.д.). Я должен обратиться к любому, кто ищет более тонкие оговорки в этой области, к первому вопросу: есть ли средство, только с помощью CSS, изменить обоснование элемента и его дочерних элементов на основе того, ориентирована ли она больше налево или вправо на экране?
Образец кода:
В соответствии с запросом, вот пример кода. Я не думаю, что это хорошая идея, включая его в этом сценарии (хотя и понимайте его значение в большинстве вопросов), поскольку это умаляет вопрос, который в основном не связан с моим конкретным кодом и гораздо более связан с вопросом о способности css динамически изменять атрибут (ы), основанный на позиции экрана или осведомленности о краях экрана - в любом случае - отсюда и мое предпочтение для иллюстрации вопроса.
Код - это упрощенная версия, но вопрос можно было задать практически с любым стандартным знакомым меню навигации <ul> которое предоставляет выпадающие списки с помощью :hover в CSS.
Имея это в виду, если вы пытаетесь решить вопрос, работая через мой код, я, возможно, плохо описал свое затруднительное положение. Я считаю, что я довольно хорошо разбираюсь в экстентах, в которые в настоящее время может быть добавлен CSS, и верю, что ответ будет "невозможен без javascript", но я просто гарантирую, что не упустил умного обходного пути/взлома для динамического изменения атрибутов элемента через CSS на основе экранной позиции (извините за повторение вопроса - я просто хочу убедиться, что он понял, следуя некоторым комментариям). Благодарю.
<ul class="nav nav__container">
<li><a class='nav nav__item' href="#">Standard Link</a></li>
<li><a class='nav nav__item' href="#">Standard Link</a></li>
<li><a class='nav nav__item' href="#">Standard Link</a></li>
<li><a class='nav nav__item' href="#">Standard Link</a></li>
<li class='nav nav__item nav__item--dropdown'><li><a href="#">Dropdown Label</a></li>
<ul class='nav nav__dropdown'>
<li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
<li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
<li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
</ul>
</li>
</ul>
