Foros del Web » Creando para Internet » CSS »

Validando css

Estas en el tema de Validando css en el foro de CSS en Foros del Web. Hola chicos estoy queriendo validar una hoja de estilo (CSS versión 2.1) y como no soy muy entendida del tema nuevamente le solicito ayuda a ...
  #1 (permalink)  
Antiguo 20/03/2012, 10:02
 
Fecha de Ingreso: marzo-2012
Mensajes: 51
Antigüedad: 9 años, 1 mes
Puntos: 5
Validando css

Hola chicos estoy queriendo validar una hoja de estilo (CSS versión 2.1) y como no soy muy entendida del tema nuevamente le solicito ayuda a los que saben. Le copio mi hoja de estilo a continuación les pongo como tengo las lineas de errores y los errores que me marca a ver si algún entendido me puede ayudar a reemplazarlo:

LAS LINEAS DONDE MARCA ERRORES DE LA HOJA DE ESTILO:

Código:
LINEA 1 

@import "reset.css";


LINEAS 23 A 28: 

/* ========== Text colors ========== */
.red { color: #862727; }
.blue { color: #40556d; }
.dgrey { color: #2d2d2d; }
.lYellow { color: #e4d6ba; }
.white { color: #ffffff; }

LINEA 61

.static { -webkit-box-shadow: 0px 0 0 1px #252525; -moz-box-shadow: 0px 0 0 1px #252525; box-shadow: 0px 0 0 1px #252525; border: 4px solid #3b3b3b; }

LINEAS 123 A 127

.legend, .legendInner { background: url(../images/curves.gif) repeat-x 50% 50%; text-align: center; position: relative; display: block; margin: 40px 0 40px 0; padding: 0; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 400; }
.legendInner { margin-top: 80px; }
.legend .left, .legendInner .left { background: url(../images/bg.jpg) repeat; padding: 0 10px 0 10px; font-style: italic; margin-left: 5px; color: #862727; }
.legend .right, .legendInner .right { position: absolute; top: -1px; right: 0; background: url(../images/bg.jpg) repeat; padding: 0 10px 0 10px; font-size: 11px; margin-right: 5px; }
.arrowSep { width: 272px; height: 21px; background: url(../images/arrowSep.png) no-repeat 0 0; margin: 0 2px; margin-top: 30px; }

LINEA 201

.emailHr, .tags { width: 378px; display: block; float: left; margin-tight:28px; }

LINEA 266

.pageTitle {  padding: 40px 0 36px 18px; background: url(../images/arrow.png) no-repeat 0 48px; color: #2d2d2d; width: 480px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; }

LINEA 374

.content_slide_title { font-size: 32px; display: block; padding: 13px 0 10px 0; color: #ffffff; font-family: Georgia, "Times New Roman", Times, serif; text-shadow: 0 1px 0px #000; }

LINEA 687

.nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color: #D9D9D9; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; }

LINEA 717

div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 1001; }

LINEA 722

span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url(../images/orbit/pause-black.png) no-repeat; z-index: 4; opacity: 0; }

LINEA 724

div.timer:hover span.pause, span.pause.active { opacity: 1 }

ERRORES EN LAS LINEAS QUE ME MARCA LA W3

Código:
61	 .static	 La propiedad -webkit-box-shadow no existe : 0 0 0 1px #252525
61	 .static	 La propiedad -moz-box-shadow no existe : 0 0 0 1px #252525
61	 .static	 La propiedad box-shadow no existe en CSS versión 2.1 pero existe en [css3] : 0 0 0 1px #252525
123	 .legend, .legendInner	 Propiedad no válida : font-weight 400 no es un valor de font-weight : 400
201	 .emailHr, .tags	 La propiedad margin-tight no existe : 28px
374	 .content_slide_title	 La propiedad text-shadow no existe en CSS versión 2.1 pero existe en [css2, css3] : 0 1px 0 #000
687	 .nivo-caption	 La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0.8
717	 div.timer	 La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0.6
722	 span.pause	 La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0
724	 div.timer:hover span.pause, span.pause.active	 La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 1
728	 .orbit-wrapper .orbit-caption	 Propiedad no válida : background Faltan valores o no se reconocen los valores : rgba(0,0,0,0.6 )
ADVERTENCIAS DE LA W3C:

Código:
1		Las hojas de estilo importadas no se comprueban en los modos de entrada directa y carga de archivo
26		Color de primer plano y color de fondo iguales en dos contextos .bgrey y .dgrey
26		Color de primer plano y color de fondo iguales en dos contextos .pages li a y .dgrey
266		Color de primer plano y color de fondo iguales en dos contextos .bgrey y .pageTitle
266		Color de primer plano y color de fondo iguales en dos contextos .pages li a y .pageTitle
Bueno desde ya agradezco enormemente su atención y la ayuda que me puedan acercar.

Gracias y saludos!!!
  #2 (permalink)  
Antiguo 20/03/2012, 11:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 13 años, 11 meses
Puntos: 539
Respuesta: Validando css

Las propiedades con prefijos privativos (-moz-/-webkit-) las sigue marcando como errores pese al anuncio hace tiempo de que sólo sandrían como advertencias.
Razón: so forman parte del standar.

font-weight 400: hay un tema abierto unas líneas más abajo sobre este fallo del validador.

La siguientes: está clara la explicación. No son de css2.1 sino del nivel 3.

Valide utilizando el nivel (versión) 3 de css.

Sobre las advertencias de colores similares: tema referido a la accesibilidad que exige contraste de color entre el texto y el fondo de la caja que lo contiene. O con el de su ancestro si el fondo de su padre es sólo una imagen sin definir color (creo recordar).

background: rgba(0,0,0,0.6 ) además de ser css3 el espacio entre el valor alpha y el paréntesis no suele colocarse.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/03/2012, 11:33
 
Fecha de Ingreso: marzo-2012
Mensajes: 51
Antigüedad: 9 años, 1 mes
Puntos: 5
Respuesta: Validando css

Bueno kseso te agradezco mucho la respuesta pero no se como y con que reemplazar estos errores. Voy a mirar los de font-weight 400: pero el resto no tengo idea de como reemplazarlo.

Saludos.
  #4 (permalink)  
Antiguo 20/03/2012, 17:01
 
Fecha de Ingreso: marzo-2012
Mensajes: 51
Antigüedad: 9 años, 1 mes
Puntos: 5
Respuesta: Validando css

Bueno pude solucionar los errores despues de horas de romperme la cabeza buscando info y tocando todo pero no se como solucionar las advertencias que debo cambiar? me ayudan?

1 Las hojas de estilo importadas no se comprueban en los modos de entrada directa y carga de archivo
26 Color de primer plano y color de fondo iguales en dos contextos .bgrey y .dgrey
26 Color de primer plano y color de fondo iguales en dos contextos .pages li a y .dgrey
266 Color de primer plano y color de fondo iguales en dos contextos .bgrey y .pageTitle
266 Color de primer plano y color de fondo iguales en dos contextos .pages li a y .pageTitle
  #5 (permalink)  
Antiguo 20/03/2012, 22:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 13 años, 10 meses
Puntos: 1567
Respuesta: Validando css

En cuanto a HTML, sin duda alguna tratá siempre de que sea 100% válido, en lo que respecta al css, no te lo tomes muy a pecho, por lo ya expuesto en los posts previos, hacer que valide el css es una mision cuasi imposible.
Por supuesto la validación puede ser un recurso muy importante para detectar errores de sintáxis graves, falta de una llave de apertura o cierre, falta de un ; al final de la declaración de una propiedad, ó cosas como
color; red;
que son bastante habituales.
asi y todo podés mejorar la validación pasando determinados parámetros al validador, ejemplo
http://jigsaw.w3.org/css-validator/v...all&warning=no
Si tu css tuviese advertencias y no errores, te validaría correctamente (warning=no)

otro ejemplo

Por defecto, esto no validaría

<style type="text/css">
/*<![CDATA[*/

p{
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

/*]]>*/
</style>

porque border-radius es de css3 y -moz y -webkit son extensiones propietarias,

pero pasado de esta manera
http://jigsaw.w3.org/css-validator/v...g=true&lang=es
Si, ya que con profile, le decimos que es css3, con warning=no, le decimos que no considere las advertiencias, y finalmente con vextwarning=true, le decimos que considere las extensiones propietarias como advertencias

espero que se entienda, y te aclaro que yo personalmente desde hace tiempo, ya no valido mi css, mientras que el html si (generalmente usando xhtml strict y bastante ya con html5)

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 21/03/2012, 06:07
 
Fecha de Ingreso: marzo-2012
Mensajes: 51
Antigüedad: 9 años, 1 mes
Puntos: 5
Respuesta: Validando css

Muchas gracias por tu respuesta, me ha sido de mucha utilidad emprear.

Etiquetas: css3, hover, validador, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:26.