Incorporação estilos extras com noscript
https://stackoverflow.com/questions/218162
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho uma página estrito XHTML que tem uma div invisível que é controlado por Javascript. O div é definida como transparente e visível pelo script e um evento mouseover para fazer o opaco div em foco.
Quando alguém usando um navegador (ou firefox com noscript) sem javascript o div simplesmente permanece invisível. O problema com isso é que eu não quero o conteúdo a ser inacessível. Eu também não quero deixar a div visível, em seguida, usar o script para torná-lo transparente como o div está localizado na parte inferior do documento e que provoca um tremor perceptível sempre que uma página é carregada.
Eu tentei usar as tags noscript para incorporar uma folha de estilo adicional que só é carregado para as pessoas sem o luxo de Javascript, mas isso falhar a validação estrita XHTML. Existe alguma outra maneira de incluir informações de estilo extra dentro de um bloco noscript que é XHTML?
Ed:
Com um caso de teste simples recebo um erro de validação de:. tipo de documento não permite elemento "estilo" aqui Isto é com um documento estrito XHTML vazio com um elemento de estilo dentro de um elemento não script. O noscript está dentro do corpo.
Solução
Para esclarecer o problema de validação: noscript só é permitido no elemento body, style só é permitido na head. Portanto, esta não é permitido dentro do primeiro.
Sobre a questão geral: você vai querer fazer o elemento div visível por padrão, então escondê-lo via CSS + JavaScript. Este é o modelo 'melhora progressiva'. Eu observo você diz que "não quer fazer isso por causa do flicker", mas eu não sei exatamente o que está causando isso - as chances são de que você pode corrigi-lo, então talvez você deve postar que como uma pergunta.
Outras dicas
noscript na cabeça é HTML5 válido. Não era válido antes. Eu só testei, ele funciona no atual Firefox, Safari, Chrome, Opera e 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>
Use um bloco script na head para adicionar um elemento style com document.write:
<head>
...
<script type="text/javascript">
//<![CDATA[
document.write('<style type="text/css">.noscript{display:none}</style>');
//]]>
</script>
...
</head>
Nota sobre a minha resposta
Eu escrevi este post depois que percebeu que estava namorando a partir de 2008
Desde que eu tive um problema semelhante, eu pensei que continuar respondendo com uma resposta atual.
Minha resposta real
Como Boby Jack disse, tag style não é permitido no corpo. Eu mesmo fiz a coisa exata como você (Josué) sobre isso. Mas "melhora progressiva" de Jack me fez sem solução não abstrato, mas então eu percebi uma solução que eu não encontrar respostas sobre esta discussão.
Tudo depende da sua estrutura de estilo.
A minha sugestão é usar algo claramente como modernizr mesmo no início da cabeça e usar recomendações HTML5Boilerplate de Paulo irlandeses.
Para encurtar a história
- Html tag tem atribui um
classcomno-js - tag cabeça inclui uma primeira javascript Modernizr como o primeiro
- CSS tem o elemento (
.hide-me) comdisplay:noneem seu lugar apropriado - Depois
.no-js .hide-me { display:block }
Em detalhe
HTML5boilerplate See de Paul Irish, e adaptá-lo para XHTML se quiser:)
1. Html tem uma classe de atributos com .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]-->
citando html5boilerplate.com
2. tag cabeça inclui uma primeira javascript Modernizr como o primeiro
execução Modernizr vai construir html atributos com o que está suportado.
vai construir algo semelhante a isto:
<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">
Nota esta é a partir de testes modernizr Google Chrome.
O primeiro é js mas se Modernizr não correr (sem javascript) a no-js iria ficar lá.
3. CSS tem o elemento (.hide-me) com display:none em seu lugar apropriado
... você sabe o resto:)
O erro de validação que você ganha? <noscript> devem ser permitidos em XHTML mas de nível de bloco, para se certificar que não está em um <p>, <span>, etc
Atualizar 2016 :
A partir w3school :
Diferenças entre HTML 4.01 e HTML5
Em HTML 4.01, tag
<noscript>só pode ser usado dentro do<body>elemento.Em HTML5, a tag
<noscript>pode ser usado tanto<head>dentro e<body>.Diferenças entre HTML e XHTML
Em XHTML, o tag
<noscript>não é suportado.
Minha solução para ter menus expandidos (listas, etc ..)
Eu coloquei no cabeçalho como este
<header>
<noscript>
<link rel="stylesheet" href="assets/css/x_no_script.css">
</noscript>
</header>
No x_no_script.css eu definir os seletores que eu queria
max-height: 9999px;
overflow: visible;
Desta forma, eu expandiram menus quando JavaScript é desativada ou não existe.
No caso de XHTML é usado, o truque é usar dois arquivos CSS. Um um global e um js-one aprimorando o global para navegadores JavaScript habilitado.
style.css:
.hidden {
visibility:hidden;
}
estilo de 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>
Main por tutorials.de . XHTML ponta validade por Estelle de Weyl Blog . createElementNS ponta por CodingForums .
