JMiur [E]

Es bastante común que uno lea algo interesante, algún truco o script que nos llama la atención y luego, cuando abrimos el demo, aparece un cartelito que nos dice que eso no funciona en nuestro navegador o, peor aún, no nos dice nada y nos quedamos preguntándonos ¡qué demonios pasa!

Lamentablemente, la moda-fiebre Chrome hace que eso sea un problema permanente y en lo personal, me parece muy molesto ya que, bastaría advertirlo previamente o dar alternativas porque, salvo que el Dios Google disponga lo contrario y exija lo contrario, siempre habrá muchísimos usuarios que usarán otros navegadores, sin importar cuál y sin importar por qué.

En fin, al margen y para compensar un poco tanta chromemanía, estas son propiedades de CSS3 definidas por la w3org que no funcionarán en Chrome y que si lo harán en Firefox y en las versiones beta de Internet Explorer.

text-decoration es una propiedad muy vieja, jamás ha cambiado y es poco flexible; en principio, tiene unos pocos valores elementales: none, underline, overline, line-through y blink de las cuales, solemos usar sólo las dos primeras y lo que hacen es subrayar un texto o evitar que quede subrayado que es lo que por defecto ocurre con todos los enlaces.

este es un texto subrayado


Por ahora, las nuevas propiedades propuestas con la w3org son tres y en Firefox debemos usarlas, agregando el prefijo -moz:
text-decoration-color: color;
text-decoration-line: tipo;
text-decoration-style: tipo;
text-decoration-color es sencilla de entender, es el color de ese subrayado que, por defecto es siempre el mismo que el del texto.

text-decoration-line indica la posición del subrayado y posee las mismas opciones de siempre: none (ninguno) underline (debajo) overline (arriba) line-through (tachado)

Así que si quisieramos que ese texto se subraye con otro color distinto al del texto, podríamos poner algo así:
.ejemplo {
  /* colores, fuentes, etc */
  text-decoration: underline; /* se subraya en los navegadores que no aceptan la propiedad */
  -moz-text-decoration-color: red;
  -moz-text-decoration-line: underline;
}

este es un ejemplo subrayado en rojo en Firefox


text-decoration-style es la propiedad más interesante ya que agrega una serie de estilos distintos al tipo de línea que son los mismos valores que se utilizan en la propiedad border-style: solid, double, dotted, dashed:

estilo solid

estilo double

estilo dotted

estilo dashed


Y un valor extra llamado wavy que muestra una línea ondulada:
.ejemplo {
  /* colores, fuentes, etc */
  text-decoration: underline; /* se subraya en los navegadores que no aceptan la propiedad */
  -moz-text-decoration-color: red;
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
}

este es un ejemplo subrayado con wavy

5 comentarios:

Gem@  

Cuando ocurre eso que comentas que es muy cierto de encontrarnos con algo que no funciona en nuestro navegador pienso que es porque les importa muy poco como se vea en otros sitios o porque dan por sentado que todo el mundo es usuario de ese navegador Chrome en este caso.
Es un detallecito que confirma más mi creencia que la finalidad de Google es sumar y sumar usuarios y punto, como dice una famosa española.
Con wavy ha sido todo un descubrimiento, me gustan esas onditas :)

Responder
Abraham Santos Fernández  

¿Y estos efectos no pueden ser vistos en Google Chrome?, ¿No hay una forma para que se vean en él?

Responder
Andrés Méndez  

Mmmmh... No sería más sencillo, y para mantener la compatibilidad entre los navegadores poner:
.ejemplo{
border-bottom: 1px solid solid;
}
No crees?

Responder
JMiur  

Gem@
Coincido con esa teoria del imperio Google :-)
Sí, las onditas son la más interesante de las opciones.

Abraham Santos Fernández:
No, si el navegador no tiene incorporadas esas propiedades, no hay forma.

Andrés Méndez:
No ya que no es lo mismo porque esta propiedad sólo afecta a los textos en cambio, border, afecta a cualquier etiqueta y de tal modo, si se quisiera que los enlaces de texto tuvieran ese borde pero los enlaces con imágenes no, nos veríamos en problemas para establecer una regla de estilo.

Por otro lado, quien se supone que establece las reglas de compatibilidad es la w3org y esta es una propiedad definida por ellos.

A mi entender, jamás ha existido compatibilidad entre navegadores y jamas existirá; son empresas privadas que disputan mercados así que cada uno de ellos tira para su lado. Nosotros, sólo nos adaptamos y usamos aquellas cosas que nos parecen más convenientes, esto en particular, puede usarse perfectamente y será visible en ciertos navegadores y no visible en otros, tal como los bordes redondeados, las sombras o cualquier otra características de las nuevas propiedades del CSS3.

El diseño web es subjetivo, gracias a Dios.

Responder
Lautaro Rodríguez Xavier  

Excelente aporte che, gracias por ser tan servicial. ;)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR