Incrustar estilos adicionales con noscript

StackOverflow https://stackoverflow.com/questions/218162

  •  03-07-2019
  •  | 
  •  

Pregunta

Tengo una página estricta XHTML que tiene un div invisible que está controlado por Javascript. El div se establece en transparente y visible por el script y un evento de mouseover para hacer que el div sea opaco al pasar el mouse.

Cuando alguien usa un navegador (o firefox con noscript) sin javascript, el div simplemente permanece invisible. El problema con esto es que no quiero que el contenido sea inaccesible. Tampoco quiero dejar el div visible, luego usar el script para hacerlo transparente ya que el div se encuentra en la parte inferior del documento y causa un parpadeo notable cada vez que se carga una página.

He intentado usar etiquetas noscript para incrustar una hoja de estilo adicional que solo se carga para personas sin el lujo de Javascript, pero esto falla la validación estricta XHTML. ¿Hay alguna otra forma de incluir información de estilo adicional dentro de un bloque noscript que sea válido para XHTML?

Ed:

Con un caso de prueba simple obtengo un error de validación de: el tipo de documento no permite el elemento " style " aquí. Esto es con un documento XHTML Strict vacío con un elemento de estilo dentro de un elemento noscript. El noscript está dentro del cuerpo.

¿Fue útil?

Solución

Para aclarar el problema de validación: noscript solo está permitido en el elemento body, style solo está permitido en el head. Por lo tanto, este último no está permitido dentro del primero.

Sobre el problema general: querrá hacer que el elemento div sea visible de forma predeterminada, luego ocultarlo a través de CSS + javascript. Este es el modelo de 'mejora progresiva'. Me doy cuenta de que dices que & "; No quiero hacer esto debido al parpadeo &"; Pero no estoy seguro de qué es exactamente lo que está causando esto, es probable que puedas solucionarlo, así que tal vez deberías publicar que como una pregunta.

Otros consejos

noscript en la cabeza es HTML5 válido. No era válido antes. Acabo de probarlo, funciona en Firefox, Safari, Chrome, Opera e IE actuales. 

<!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 un bloque script en head para agregar un elemento style con document.write: 

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>

Nota sobre mi respuesta

Escribí esta publicación después de darme cuenta de que era de 2008

Como tenía un problema similar, pensé continuar respondiendo con una respuesta actual.

Mi respuesta real

Como dijo Boby Jack, la etiqueta style no está permitida en el cuerpo. Yo mismo hice exactamente lo mismo que tú (Joshua) al respecto. Pero Jack & "; Mejora progresiva &"; me dejó sin una solución no abstracta, pero luego me di cuenta de una solución que no encontré respuestas en este hilo.

Todo depende de su estructura de estilo.

Mi sugerencia es simplemente usar algo como modernizr al principio de la cabeza y usar las recomendaciones HTML5Boilerplate de Paul Irish.

Larga historia corta

    La etiqueta
  1. Html tiene class atributos con no-js
  2. La etiqueta Head incluye un primer javascript modernizr como primer
  3. CSS tiene el elemento (.hide-me) con display:none en su lugar apropiado
  4. Entonces .no-js .hide-me { display:block }

en detalle

Vea la placa de HTML5 HTML5 de Paul Irish y adáptela a XHTML si lo desea :)

1. HTML tiene atributos de clase con .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 de html5boilerplate.com

2. La etiqueta Head incluye un primer javascript modernizr como primer

La ejecución de Modernizr generará html atributos con lo que se admite.

Construirá algo similar a esto: 

<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 esto es de las pruebas de Google Chrome js.

El primero es <=> pero si Modernizr no se ejecutó (sin javascript), el <=> permanecería allí.

3. CSS tiene el elemento (<=>) con <=> en su lugar apropiado

... ya sabes el resto :)

¿Qué error de validación obtienes? <noscript> debería permitirse en XHTML pero es de nivel de bloque, así que asegúrese de que no esté en <p>, <span>, etc.

ACTUALIZACIÓN para 2016 :

De w3school :

  

Diferencias entre HTML 4.01 y HTML5

     

En HTML 4.01, la etiqueta <noscript> solo se puede usar dentro de <body>   elemento.

     

En HTML5, la etiqueta <head> se puede usar tanto dentro de x_no_script.css como   <=>.

     

Diferencias entre HTML y XHTML

     

En XHTML, la etiqueta <=> no es compatible.

Mi solución para tener menús expandidos (listas, etc.)

He puesto en el encabezado de esta manera 

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

En el <=> configuré los selectores que quería 

max-height: 9999px;
overflow: visible;

De esta forma, he expandido los menús cuando JavaScript está deshabilitado o no existe.

En caso de que se use XHTML, el truco es usar dos archivos CSS. Uno global y uno js-one ajustando el global para navegadores habilitados para JavaScript.

style.css: 

.hidden {
  visibility:hidden;
}

style-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>

Idea principal de tutorials.de . Sugerencia de validez XHTML por Blog de Estelle Weyl . consejo de createElementNS Foros de codificación .

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top