Пользовательский стиль! Важно не принимать приоритет

Question

В соответствии с W3C, пользователь Важные объявления стиля должны иметь наивысший приоритет, выше, чем автор важных деклараций, но я не вижу, что это происходит. Если вы идете в jsfiddle (намеренно оставлена ​​пустой, я имею в виду сам сайт), и посмотреть на стиль для фрейма, вы увидите следующее:

#content textarea, #content iframe 
{ 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 0 none !important; 
    box-shadow: 0 1px 3px #E4E4E4 inset; 
} 

Я сделал пользовательский стиль (используя стильный) со следующим css:

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("jsfiddle.net") { 
    iframe 
    { 
     border: 4px solid red !important; 
    } 
} 

Когда я применил его, ничего не произошло. Если я использую firebug, чтобы отключить правило или удалить !important, указанный jsfiddle, он работает. Он также работает, если я сменил селектор в моем пользовательском стиле на #content iframe.

W3C конкретно указывает: 3. Sort rules with the same importance and origin by specificity of selector Поскольку правило стиля пользователя должно иметь более важное значение, специфика не должна иметь никакого эффекта здесь, поэтому почему стиль не применяется при использовании только iframe в качестве селектора?

(проверено с помощью Firefox 24.2 в случае, если имеет значение)

---

Поскольку я не получил ответ, позвольте мне привести конкретный пример того, что я пытаюсь сделать, и почему меняющегося селектор не поможет. Here's a dabblet, демонстрирующий точный html/css/js, с которым я имею дело.

Следующий пользовательский стиль правильно применяет красную рамку, но не влияет на цвет текста.

@-moz-document domain("preview.dabblet.com"){ 
    #test 
    { 
     color: white !important; 
     border: 1px solid red; 
    } 
} 

Использование пользовательского стиля, как заставить текст всегда быть белым?

Answer 1

Вы правы, что декларация !important происхождения «пользователь» должна иметь приоритет перед любым заявлением о происхождении «автор», независимо от важности или специфики. Однако вы делаете предположение, что Stylish применяет свои стили с «пользовательским» происхождением.

Со Стильным 1.4.1 для Firefox это будет apply styles with "author" origin by default. Одной из причин этого изменения была совместимость со стилями для других браузеров. Их API-интерфейсы позволяют стильным добавлять стили «автора», что означает, что стиль, который работал в Firefox, не работал в Chrome. Твой пример - это пример.

Лучший способ исправить это (и для обеспечения совместимости с другими браузерами, если вы поделитесь своим стилем на userstyles.org), необходимо повысить специфичность вашего селектора до чего-то большего, чем CSS.Самый простой способ сделать это будет использовать тот же селектор в качестве места, но добавить селектор в body типа в начале:

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("jsfiddle.net") { 
    body #content iframe { 
    border: 4px solid red !important; 
    } 
} 

Есть случаи, когда это не представляется возможным: стиль, который влияет на iframe сек на многих сайтах, которые не могут быть настолько конкретными с его селектором, или стиль, пытающийся переопределить объявление !important внутри атрибута HTML style. Стильный для Firefox позволяет переключить свой стиль на «агент» со специальным комментарием: /* AGENT_SHEET */. Это приведет к тому, что ваш !important будет избивать все, что может сделать сайт (очень похоже на «пользовательское» происхождение), но он не будет работать в других браузерах и может привести к таким неприятным последствиям, как сбои, поэтому это предлагается только в том случае, если вышеуказанный метод для вас совершенно неработоспособна.

Все это описано на Stylish's wiki наряду с некоторой информацией, менее релевантной вашей ситуации.

Answer 2

Вы правы с идеей специфики. Проблема заключается в правиле вашего правила и правила jsfiddle: !important, что означает, что оба правила имеют одинаковый приоритет, но правило #content textarea, #content iframe более конкретное.

Чтобы решить, вы можете написать правило, как:

#content iframe { 
    border: 4px solid red !important; 
} 

Смотрите это для более подробной информации: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing

Этот раздел даст вам то, что вам нужно, но в целом статья очень интересна.