2012-06-17 2 views
7

Я только что заметил, что Webkit теперь имеет некоторую поддержку в отношении спецификации CSS Values and Units Module Level. И мне было интересно, знает ли кто-нибудь, есть ли способ ссылаться на другое свойство селекторов CSS (или свойство DOM) из селектора CSS?Может ли селектор CSS ссылаться на другое свойство selectors?

Я ожидаю что-то вроде this, чтобы быть здесь ответом. Что я знаю, скорее всего, относится к текущим реализациям браузера; но, пожалуйста, продолжайте читать ...

Например, в том случае, когда анимация может изменить размер элемента (ПРИМЕЧАНИЯ${.element2.width} является фиктивным синтаксис):

<style type="text/css"> 
.element1 { 
    .width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width}); 
} 
.element2 { 
    .width: 100px; 
} 
.element2:hover { 
    width: 200px; 
    transition: all 0.4s ease-in-out; 
} 
</style> 

В этом случае я бы ожидать. ширину элемента1, подлежащую переоценке, исходя из перехода, вызванного событиями наведения на .element2.

Я понимаю, что вышеупомянутая спецификация. это только рабочий проект, но, возможно, синтаксис для ссылки на такое «свойство ссылочного селектора» определяется в другом spec. которого я еще не обнаружил? Или просто не случай для беспокойства (благодаря пропущенной работе вокруг)?

Заранее благодарим за внимание, не говоря уже о том, чтобы ответить на вопрос.

+0

Нет ... Использовать SASS, LESS или Stylus (google - ваш друг) – sg3s

+0

Нет, это не так, как работают селектор CSS, и вряд ли 'calc()' когда-либо будет поддерживать ссылку на другое свойство в каскаде, не говоря уже о другой собственности в совершенно другом правиле. – BoltClock

ответ

1

я добавил ответ на вопрос, который вы связаны между собой: https://stackoverflow.com/a/11071806/137626

  • Вы можете использовать ту же декларацию блок с таким количеством селекторов, как вы хотите, группируя их (селекторы через запятую)
  • Вы можете 'повторно использовать тот же блок объявлений позже с помощью другого селектора CSS без перезаписи всего блока объявлений, которому предшествует этот селектор, или используя препроцессор/макрос, который сделает это для вас. Или добавить его к существующему блоку объявления, как указано выше

Теперь с вашим примером элемента с измененным размером самой CSS вы можете использовать CSS3 Media Queries и его @media правила, содержащие столько декларирование блоков, как вы хотите. Эти медиа-запросы будут адаптироваться к ширине окна просмотра здесь.
Смешивание расширяющихся элементов с помощью анимационных и медиа-запросов, которые бы очень быстро изменили эффект обратного эффекта (и я задаюсь вопросом, с каким содержимым вы играете); если вы хотите сохранить это просто, тогда JS - это путь. Существуют переменные, циклы, события;), и вы можете запустить анимацию CSS3, добавив или удалив один класс из элемента (или любого другого селектора CSS).
CSS3 не заменит JS (и вы не должны использовать JS для стиля HTML, поскольку JS не активирован или не существует повсюду, и уже есть хороший резервный CSS).

+0

Спасибо за ваш ответ, он, безусловно, самый информированный.Я думаю, что вы правы в решении этой проблемы с помощью javascript, поскольку это не связано с вышеупомянутыми осложнениями. –

1

За исключением использования предварительного компилятора, такого как sass/scss или less, я считаю, что все, что вы можете сделать, это подождать или запрограммировать его.

+0

Я надеялся, что это не ответ, но по внешнему виду вещей вы абсолютно правы, подделываете его «реализованными» статическими предварительными вычислениями через less/sass или другие абстракции синтаксиса css. Или, как вы так элегантно выразились. Подождите;) –

Смежные вопросы