[SOLUCIONADO] Meter css segun resolucion y que valide en W3C

Gothgauss · #1 (**permalink**) 10/02/2013, 02:51

Buenos días

Quiero que una web se centre verticalmente si la resolución de pantalla es mayor de 1024, por lo que en el head he incluido el siguiente código:

Código HTML:

<head>

<script type="text/javascript">

if(screen.width > 1024){
document.writeln("<link href='../../css/es/1152.css' rel='stylesheet' type='text/css' media='screen' />");

}
</script>
</head>

Pero al pasar el validador W3C me dice que hay un error:

Código:

document type does not allow element "link" here
…f='../../css/es/1152.css' rel='stylesheet' type='text/css' media='screen' />");
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Que viene a decir que el código lo está metiendo en el body y no en el head.

Como haríais vosotros para que cogiera el css en función de la resolución sin usar CSS3 (porque el explorer 8 no lo soporta )

ipraetoriux · #2 (**permalink**) 10/02/2013, 04:02

...pero para que te complicas la vida si podes usar condicionales de HTML

Código HTML:

Ver original<!--[if lt IE 9]> 
<link rel="stylesheet" type="text/css"  href="hojadeestilo.css"/>
<![endif]-->

..luego tenes otra alternativa, para no estar metiendo muchas hojas de estilo...podes usar esto

Código HTML:

Ver original<!DOCTYPE html>
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
        <meta charset="utf-8">
</head>
<body>
</body>
</html>

.. acá también usas condicionales de HTML, peroooo, no es necesario agregar ninguna hoja de estilo extra. Lo único que tenes que hacer es crear una clase general "ie8" en la etiqueta HTML, y dentro de tu CSS, crear estilos que desciendan de esta clase.

Código CSS:

Ver original.ie8 #contenedor{
   width:1024px;
   margin: 0 auto;
}

...entonces cuando se este usando IE8, el navegador va a renderizar la web con la clase para IE8 y todas sus clases desendientes, de esta forma podes crear estilos para distintos navegadores sin sobrecarga tu web con hojas de estilo, y tener todo ordenado dentro de una sola...

emprear · #3 (**permalink**) 10/02/2013, 10:47

Cita:

Iniciado por Gothgauss

Buenos días

Quiero que una web se centre verticalmente si la resolución de pantalla es mayor de 1024, por lo que en el head he incluido el siguiente código:

Código HTML:

<head>

<script type="text/javascript">

if(screen.width > 1024){
document.writeln("<link href='../../css/es/1152.css' rel='stylesheet' type='text/css' media='screen' />");

}
</script>
</head>

Pero al pasar el validador W3C me dice que hay un error:

Código:

document type does not allow element "link" here
…f='../../css/es/1152.css' rel='stylesheet' type='text/css' media='screen' />");
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Que viene a decir que el código lo está metiendo en el body y no en el head.

Como haríais vosotros para que cogiera el css en función de la resolución sin usar CSS3 (porque el explorer 8 no lo soporta )

Con uno de estos doctype y usando bloques CDATA no vas a tener problemas

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
if(screen.width > 1024){
document.writeln("<link href='../../css/es/1152.css' rel='stylesheet' type='text/css' media='screen' />");
}
//]]>
</script>
</head>
<body>
</body>
</html>

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript">
//<![CDATA[
if(screen.width > 1024){
document.writeln("<link href='../../css/es/1152.css' rel='stylesheet' type='text/css' media='screen' />");
}
//]]>
</script>
</head>
<body>
</body>
</html>

Si no tambien media queries, aunque para ie8 vas a necesitar algo de esto
https://www.google.com/search?btnG=1...eries+polyfill

Los comentarios condicionales de IE van a desaparecer en la versión 10 de IE, así mejor que ir dejándolos de usar

SAludos