Предупреждение о переполнении стека, как JavaScript, и проверка w3c HTML - PullRequest
0 голосов
/ 11 ноября 2010

У меня есть сайт, который сильно зависит от JavaScript. В то время как большинство вещей приятно ухудшается, функционально это действительно второй класс. Итак, я хочу предупредить пользователей, что им следует включить JS, если они его отключили. Для этого я использую NOSCRIPT, чтобы показать div с предупреждением в верхней части страницы, подобно тому, как это делает переполнение стека.

Этот div охватывает верхнюю часть содержимого страницы, поэтому мне нужно переместить тело документа вниз. Поскольку JS недоступен, нужно использовать CSS, а я использую что-то вроде: margin-top: 8px. Полный HTML выглядит так:

<noscript>
<style type="text/css">body { margin-top:8em; }</style>
<div class="warn">WARNING<br>Turn on JavaScript for best experience</div>
</noscript>

Проблема в том, где разместить этот код?

Я пытался в разделе HEAD, в разделе BODY, после BODY, но где бы он ни находился, валидатор разметки W3C HTML жалуется, что либо тип документа не допускает использование элемента "STYLE" или тип документа не допускает здесь элемент "BODY"

Я даже пытался разделить CSS и DIV на две части и найти правильное размещение для каждой из них, но получил те же ошибки.

Ответы [ 2 ]

2 голосов
/ 11 ноября 2010

Возможно, вам просто придется смириться с этим и признать, что ваша страница не будет подтверждена.

... или изменить его работу. Можете ли вы поместить его сначала с помощью position: static, чтобы он естественным образом давил на содержание вашей страницы?

... или , чтобы быть хитрым, сделайте, чтобы у вашего body всегда было margin-top: 8em. Затем на DOM ready (или загрузке окна) в JavaScript, сделайте его 0.

CSS

body {
   margin-top: 8em;
}

body.javascript {
   margin-top: 0;
}

JavaScript

window.onload = function() {
   document.getElementsByTagName('body')[0].className += ' javascript';
};
0 голосов
/ 11 ноября 2010

Вам необходимо иметь элемент block (например, div) внутри элемента noscript И переместить элемент style внутри элемента head, чтобы получить правильную проверку.

...