JMiur [E]

Los navegadores interpretan las propiedades CSS como se les da la gana, algunos de una forma, otros de otra; con el tiempo, esto ha mejorado bastante aunque siguen habiendo diferencias. Para colmo, a esas propiedades les agregan extensiones, funciones o caracterísitcas propias que no son parte de los estándares o que son experimentales.

Si bien es cierto que no se aplicarán a todos, nada impide que las usemos siempre y cuando chequeemos nuestro sitio y verifiquemos que se ve de manera más o menos razonable en cualquiera de ellos.

Por ejemplo, Mozilla las identifica con el prefijo -moz- y Chorme/Safari con el prefijo -webkit-

Una de ellas es la llamada background-clip que acepta dos valores: border y padding:

-moz-background-clip en Firefox (más información)
-webkit-background-clip en Chorme/Safari (más información)

Esta propiedad, controla la forma en que se muestran los bordes y los fondos de cualquier elemento. Por defecto, el valor que tiene es border y lo mejor es verlo en acción. Colocamos entonces una etiqueta con un borde exagerado para que el detalle sea bien visible:
<div style="background-color:#456;border: 10px dashed #ABC;">
....... cualquier contenido .......
</div>

Phasellus tellus eros, aliquet sit amet vehicula sit amet, sodales non tortor. Ut venenatis luctus nunc nec mattis. Cras mollis semper adipiscing. Nunc adipiscing ullamcorper lacus amet.

Lo mismo ocurrirá con una imagen o con cualquier otro contenido:


Así se ve por defecto, tenga o no tenga agregado -moz-background-clip: border; -webkit-background-clip: border; el fondo se extiende por debajo del borde cuando este tiene partes transparentes. Ahora, cambiemos ese valor por padding:
<div style="background-color:#456;border: 10px dashed #ABC; -moz-background-clip: padding; -webkit-background-clip: padding;">
....... cualquier contenido .......
</div>

Phasellus tellus eros, aliquet sit amet vehicula sit amet, sodales non tortor. Ut venenatis luctus nunc nec mattis. Cras mollis semper adipiscing. Nunc adipiscing ullamcorper lacus amet.

El resultado es diferente, el fondo ya no se extiende debajo del borde.


En Internet Explorer y Opera, esto no tendrá ningún tipo de efecto por lo que podemos usarla sin problemas.

5 comentarios:

_CarlitoX_  

El primero en comentar, jeje.... gracias, usare esto en una web que tengo por allí.... era lo que me hacia falta para agregar un borde cuando se usa safari :)

Responder
Gem@  

Este problema de diferencias entre navegadores lleva a todo el mundo de cabeza, es la pregunta del millón cada día, la que más se repite y la que más quebraderos de cabeza trae para ser solucionada.

Responder
JMiur  

No cabe duda; se está haciendo complciado en extremo.

Responder
alvaro  

Pues yo no veo diferencia entre los ejemplos sin y con "padding".

JMiur  

Dependerá del ejemplo concreto que estés mirando.

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