Встраивание дополнительных стилей с помощью noscript
У меня есть строгая страница XHTML с невидимым div, который контролируется Javascript. Для div установлен прозрачный и видимый скриптом и событием наведения курсора мыши, чтобы сделать div непрозрачным при наведении курсора.
Когда кто-то использует браузер (или firefox с noscript) без javascript, div просто остается невидимым. Проблема в том, что я не хочу, чтобы контент был недоступен. Я также не хочу оставлять div видимым, а затем использовать скрипт, чтобы сделать его прозрачным, поскольку div расположен в нижней части документа и вызывает заметное мерцание при загрузке страницы.
Я пробовал использовать теги noscript для встраивания дополнительной таблицы стилей, которая загружается только для людей без роскоши Javascript, но это не соответствует строгой проверке XHTML. Есть ли другой способ включить дополнительную информацию о стилях в блок noscript, который является допустимым XHTML?
Эд:
С помощью простого тестового примера я получаю ошибку проверки: тип документа не допускает здесь "стиля" элемента. Это пустой документ XHTML Strict с элементом стиля внутри элемента noscript. Носкрипт находится внутри тела.
Ответы 7
Какую ошибку проверки вы получаете? <noscript> должен быть разрешен в XHTML, но это блочный уровень, поэтому убедитесь, что он не в <p>, <span> и т. д.
XHTML 1.0: <noscript> разрешен только в теле, <script> только в голове.
Чтобы прояснить проблему проверки: noscript разрешен только в элементе body, style разрешен только в head. Следовательно, последнее недопустимо в рамках первого.
По общему вопросу: вам нужно сделать элемент div видимым по умолчанию, а затем скрыть его с помощью CSS + javascript. Это модель «прогрессивного улучшения». Я заметил, что вы говорите, что «не хотите этого делать из-за мерцания», но я не уверен, что именно вызывает это - скорее всего, вы сможете это исправить, поэтому, возможно, вам следует отправить который в качестве вопроса.
Да, HTML5 прямо разрешаетnoscript в head.
Предупреждение для людей, использующих WebForms, даже если noscript теперь можно использовать со стилем в голове. Любая обратная передача от updatepanel (если ответ содержит этот тег) будет применять указанные стили независимо от того, разрешен JS или нет. Обходной путь - не отрисовывать его в заголовке обратной передачи.
Используйте блок script в head, чтобы добавить элемент style с document.write:
<head>
...
<script type = "text/javascript">
//<![CDATA[
document.write('<style type = "text/css">.noscript{display:none}</style>');
//]]>
</script>
...
</head>
Осторожно с document.write () - stackoverflow.com/questions/802854/…
noscript в заголовке - это валидный 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>
Однозначно лучшее решение.
Примечание о моем ответе
Я написал этот пост после того, как понял, что он датируется 2008 годом.
Поскольку у меня была аналогичная проблема, я решил продолжить отвечать текущим ответом.
Мой настоящий ответ
Как сказал Боби Джек, теги style не допускаются в теле. Я сам поступил точно так же, как ты (Джошуа). Но «прогрессивное улучшение» Джека лишило меня не абстрактного решения, но затем я понял решение, на которое я не нашел ответов в этой теме.
Все зависит от вашей укладочной структуры.
Я предлагаю просто использовать что-то вроде modernizr в самом начале и использовать рекомендации Пола Айриша HTML5Boilerplate.
Короче говоря
- Тег HTML имеет атрибуты
classсno-js - Тег заголовка включает в себя первый модернизированный javascript как первый
- CSS имеет элемент (
.hide-me) сdisplay:noneна своем месте - Тогда
.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 на своем месте.
... остальное вы знаете :)
Не работает с XHTML 1.0 (ни Transitional, ни Strict). Причина: недопустимый атрибут "class" в теге <html>. Я имею в виду, что в браузере он будет отображаться нормально, НО вы не пройдете проверку XHTML (например, validator.w3.org).
В самом деле, это не XHTML 1.0. Но если вы не отправляете заголовок перед содержимым без указания application/xhtml+xmlсм. W3C, также делает его недействительным. Не правда ли :) Но. Я по-прежнему считаю, что нарушение этого правила для метки <html/> - более дешевая цена, чем прежние методы.
В случае использования XHTML хитрость заключается в использовании двух файлов CSS. Один глобальный и один 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.
document.write недействителен XHTML
Спасибо за подсказку. Я улучшил код. Надеюсь, теперь это действительно так. К сожалению, HTML Validator (users.skynet.be/mgueury/mozilla) не проверяет код JavaScript.
ОБНОВИТЬ для 2016 г.:
От w3school:
Differences Between HTML 4.01 and HTML5
In HTML 4.01,
<noscript>tag can only be used inside the<body>element.In HTML5, the
<noscript>tag can be used both inside<head>and<body>.Differences Between HTML and XHTML
In XHTML, the
<noscript>tag is not supported.
Мое решение для расширенных меню (списков и т. д.)
Я вставил в шапку вот так
<header>
<noscript>
<link rel = "stylesheet" href = "assets/css/x_no_script.css">
</noscript>
</header>
В x_no_script.css я установил селекторы, которые хотел
max-height: 9999px;
overflow: visible;
Таким образом, я расширил меню, когда JavaScript равен отключен или не существует.
Любой, кто сталкивается с такой же проблемой, вероятно, должен взглянуть на этот вопрос.