tag identifica funcionalidad funcion etiqueta ejemplo chrome css xhtml

css - identifica - noscript tag



Incrustar estilos adicionales con noscript (7)

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 mouseover para hacer el div opaque 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 visible el div, luego uso 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 no valida la validación estricta de XHTML. ¿Hay alguna otra manera de incluir información de estilo adicional dentro de un bloque de 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 "estilo" 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.

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

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

Sobre el tema general: querrá hacer que el elemento div visible de forma predeterminada, y luego ocultarlo a través de CSS + javascript. Este es el modelo de ''mejora progresiva''. Noté que dijiste "no quiero hacer esto debido al parpadeo", pero no estoy seguro de qué es lo que está causando esto. Lo más probable es que puedas arreglarlo, así que tal vez deberías publicarlo como una pregunta.

Use un bloque de script en la head para agregar un elemento de 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 databa de 2008

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

Mi respuesta real

Como dijo Boby Jack, la etiqueta de style no está permitida en el cuerpo. Yo mismo hice lo mismo que tú (Joshua) al respecto. Pero la "mejora progresiva" de Jack me hizo 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 tu estructura de estilo.

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

Larga historia corta

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

En detalle

Vea el HTML5boilerplate de Paul Irish, y adáptelo 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. Head tag incluye un primer javascript modernizr como el primero

La ejecución de Modernizr construirá atributos html con lo que es compatible.

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

Tenga en cuenta que esto es de las pruebas modernizr de Google Chrome.

El primero es js pero si Modernizr no se ejecuta (no javascript), los no-js se quedarían allí.

3. CSS tiene el elemento ( .hide-me ) con display:none en su lugar correcto

... tu sabes el resto :)

noscript in head es HTML5 válido. No fue válido antes. Acabo de probarlo, funciona en los actuales 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>

ACTUALIZACIÓN para 2016 :

Desde w3school :

Diferencias entre HTML 4.01 y HTML5

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

En HTML5, la etiqueta <noscript> se puede usar tanto dentro de <head> como en <body> .

Diferencias entre HTML y XHTML

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

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

He puesto el encabezado así

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

En x_no_script.css establecí los selectores que quería

max-height: 9999px; overflow: visible;

De esta forma, amplié los menús cuando JavaScript está desactivado o no existe.

En caso de que se use XHTML, el truco es usar dos archivos CSS. One global uno y one 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 por tutorials.de . Consejo de validez de XHTML por Blog de Estelle Weyl . createElementNS tip by CodingForums .