Можете ли вы оформить элемент noscript? - PullRequest
12 голосов
/ 24 марта 2009

Можно ли использовать элемент noscript в селекторах CSS?

noscript p {
    font-weight: bold;
}

Ответы [ 3 ]

13 голосов
/ 24 марта 2009

Да! Вы определенно можете сделать это.

Фактически, многие ( все? ) браузеры поддерживают таргетинг любого произвольного тега с помощью CSS. «Официальные» теги в спецификации HTML определяют только то, что браузер должен с ними делать. Но CSS - это язык, нацеленный на любой вариант XML, поэтому вы можете сказать foo {font-weight:bold;}, и в большинстве браузеров <foo> hello world </foo> будет выделен жирным шрифтом.

Как поясняет Darko Z , IE6 / 7 не добавляет произвольные (нестандартные) элементы в DOM автоматически из источника; они должны быть добавлены программно.

6 голосов
/ 24 сентября 2010

У меня есть ошибка IE, чтобы иметь в виду. Если, как и OP, вы просто хотите стилизовать текст внутри тега noscript, а не сам тег noscript, не обращайте на это внимания.

Скажем, вы хотите сделать фон тега noscript красным. В IE8 он будет отображаться с включенным JS. Только сама коробка, а не текст внутри.

Так что эта комбинация не очень хорошая:

CSS

noscript {
    background-color: red;
}

HTML

<noscript>Turn on your damned JavaScript! What is this, 1999?</noscript>

Но этот обходной путь работает нормально:

CSS

noscript div {
    background-color: red;
}

HTML

<noscript><div>Turn on your damned JavaScript! What is this, 1999?</div></noscript>

Странно, я вижу это только в IE8, а не в IE7. А кто знает про 6 ..

3 голосов
/ 24 марта 2009

В дополнение к ответ Rex M - IE 6/7 (6 def, 7 может быть?) Не будет стилизовать произвольный тег для вас. Но, к счастью для вас, как и для всех многих проблем IE, есть обходной путь.

Скажем, вы хотите стилизовать элемент с именем foo. Чтобы IE распознал его как элемент стиля, вам нужно включить эту строку где-нибудь в JS:

document.createElement('foo');

Вам не нужно добавлять его, просто создайте его.

Это позволит IE стилизовать этот элемент для вас с помощью правила CSS:

foo { font-weight:bold; }
...