Встраивание дополнительных стилей с Noscript - PullRequest
Новая
       18

Встраивание дополнительных стилей с Noscript

19 голосов
/ 20 октября 2008

У меня есть строгая страница XHTML с невидимым div, который контролируется Javascript. Div устанавливается прозрачным и видимым сценарием и событием mouseover, чтобы сделать div непрозрачным при наведении.

Когда кто-то использует браузер (или firefox с noscript) без javascript, div просто остается невидимым. Проблема в том, что я не хочу, чтобы контент был недоступен. Я также не хочу оставлять элемент div видимым, а затем использовать скрипт, чтобы сделать его прозрачным, поскольку элемент div находится внизу документа, и он вызывает заметное мерцание при загрузке страницы.

Я пытался использовать теги noscript для встраивания дополнительной таблицы стилей, которая загружается только для людей без роскоши Javascript, но это не проходит строгую проверку XHTML. Есть ли другой способ включить дополнительную информацию о стилях в блок noscript, который является допустимым XHTML?

Ed:

С помощью простого тестового примера я получаю ошибку проверки: тип документа не допускает элемент "стиль" здесь. Это с пустым документом XHTML Strict с элементом style внутри элемента noscript. Носкрипт находится внутри тела.

Ответы [ 7 ]

62 голосов
/ 26 августа 2009

шрифт в голове действительный HTML5. Это не было действительным раньше. Я только что проверил, он работает в текущих Firefox, Safari, Chrome, Opera и IE. 

<!doctype html>
<html>
    <head>
        <noscript>
            <style>body{background:red}</style>
        </noscript>
    </head>
    <body>
        <p>is this red? it should <script>document.writeln("not");</script> be. <noscript>indeed.</noscript></p>
    </body>
</html>
12 голосов
/ 20 октября 2008

Чтобы устранить проблему проверки: noscript разрешено только в элементе body, style разрешено только в head. Следовательно, последнее не допускается в пределах первого.

По общему вопросу: вам нужно сделать элемент div видимым по умолчанию, а затем скрыть его с помощью CSS + javascript. Это модель «прогрессивного улучшения». Я заметил, что вы говорите, что «не хотите делать это из-за мерцания», но я не уверен, что именно вызывает это - скорее всего, вы можете это исправить, поэтому, возможно, вам следует опубликовать , что вопрос.

11 голосов
/ 03 декабря 2008

Используйте блок script в head, чтобы добавить элемент style с document.write: 

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>
10 голосов
/ 21 ноября 2011

Записка о моем ответе

Я написал этот пост после того, как понял, что он датируется 2008 годом

Поскольку у меня была похожая проблема, я подумал продолжить отвечать текущим ответом.

Мой фактический ответ

Как сказал Боби Джек, тег style не допускается в теле. Я сам сделал то же самое, что и ты (Джошуа) по этому поводу. Но «прогрессивное улучшение» Джека сделало меня без неабстрактного решения, но потом я понял, что не нашел ответов в этой теме.

Все зависит от вашей структуры стиля.

Мое предложение состоит в том, чтобы просто использовать что-то вроде modernizr в самом начале и использовать рекомендации Пола Ирриша HTML5Boilerplate.

Короче говоря

  1. HTML-тег имеет class атрибутов с no-js
  2. тег Head содержит первый модернизированный javascript в качестве первого
  3. CSS имеет элемент (.hide-me) с display:none на своем месте
  4. Тогда .no-js .hide-me { display:block }

Подробнее

Посмотрите HTML5boilerplate Пола Айриша и, если хотите, адаптируйте его к XHTML:)

1. Html имеет атрибуты класса с .no-js

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

цитата из html5boilerplate.com

2. Тег тега включает первый модернизирующий javascript в качестве первого

Выполнение Modernizr создаст html атрибутов с тем, что поддерживается.

Построит что-то похожее на это: 

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

Примечание это из Google Chrome modernizr тесты.

Первый - js, но если Modernizr не запустится (без JavaScript), no-js останется там.

3. CSS имеет элемент (.hide-me) с display:none на своем месте

... остальное ты знаешь :)

0 голосов
/ 15 июля 2016

ОБНОВЛЕНИЕ для 2016 :

С w3school :

Различия между HTML 4.01 и HTML5

В HTML 4.01 тег <noscript> можно использовать только внутри <body> элемент.

В HTML5 тег <noscript> можно использовать как внутри <head>, так и <body>.

Различия между HTML и XHTML

В XHTML тег <noscript> не поддерживается.

Мое решение для расширения меню (списки и т. Д.)

Я вставил в шапку вот так 

<header>
    <noscript>
        <link rel="stylesheet" href="assets/css/x_no_script.css">
    </noscript>
</header>

В x_no_script.css я установил селекторы, которые я хотел 

max-height: 9999px;
overflow: visible;

Таким образом, я расширил меню, когда JavaScript является отключенным или не существует.

0 голосов
/ 19 ноября 2012

В случае использования XHTML, хитрость заключается в использовании двух файлов CSS. Один глобальный one и один js-one настраивают глобальный для браузеров с поддержкой JavaScript.

style.css: 

.hidden {
  visibility:hidden;
}

стиль-js.css: 

.hidden {
  visibility:visible;
}

test.html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <title>Test page</title>
  <link href='css/style.css' rel='stylesheet' type='text/css' />
  <script type="text/javascript">
  //<![CDATA[
    //document.write("<link href='css/style-js.css' rel='styleSheet' type='text/css' />"); 
    //is not legal in XHTML, we do the long way:
    var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
    l.setAttribute("rel", "stylesheet");
    l.setAttribute("type", "text/css");
    l.setAttribute("href", "/css/style-js.css");
    document.getElementsByTagName("head")[0].appendChild(l);
  //]]>
  </script>
</head>
<body>
  <div class="hidden">
    <p>Only displayed at JavaScript enabled browsers</p>
  </div>
</body>
</html>

Основная идея tutorials.de . Подсказка о достоверности XHTML от Блог Эстель Вейль . Подсказка createElementNS от CodingForums .

0 голосов
/ 20 октября 2008

Какую ошибку проверки вы получаете? <noscript> должно быть разрешено в XHTML, но это уровень блока, поэтому убедитесь, что оно не в <p>, <span> и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...