Tres Hacks Css para Webkit 9.6.13
Tres hack css para los navegadores webkit. A través de declaraciones específicas, o bien mediante el selector o una regla @media querie y así declarar estilos específicos para este motor y los navegadores basados en él.
Tres Hacks Css para Webkit
Todos los navegadores tienen sus "particularidades" que hacen más "ameno" lidiar con ellos. La familia de los Webkit (Chrome y compañía) también. Así que nunca está de más tener en la recámara alguna solución para cuando nos topamos con sus singularidades.
Así que si necesitas declarar algo en exclusiva para la familia de los webkit sólo tienes que usar alguna de estas tres técnicas, según necesites:
Declaración individual
Si sólo necesitas modificar un valor de una propiedad en concreto:
.selector { propiedad: valor; } /* para todos */
.selector { (;propiedad: valor;); }
.selector { [;propiedad: valor;;]; }
Válido para Chrome 28- | Safari 6- | Opera 14+
Selector
@media all and (min-width: 0px) {
/* Tus declaraciones AQUÍ */
}
Válido para Opera 7/15 | Chrome
Media Querie
@media all and (-webkit-min-device-pixel-ratio: 0){
/* Tus declaraciones AQUÍ */
}
Válido para Chrome | Safari 3+ | Opera 9.26-/14+
Adenda
Para ampliar info sobre los hacks específicos para cada navegador, visita browserhacks
Muy bueno, gracias. Yo siempre tengo problemas de compatibilidad, especialmente en Opera y Mozilla, aunque en este último ya existe el método estándar de su propiedad que funciona bien y todos los demás navegadores deberían tomar de ejemplo:
ResponderEliminar@-moz-document url-prefix(){ ... } }
Yo sigo insistiendo en que la mejor manera es usar sus mismos prefijos (-moz-; -ms-; -webkit-; ...) para filtrar propiedades y valores (¡hasta selectores!), pero se tienen que poner de acuerdo e implementarlo. Así sabríamos siempre qué va a funcionar en cada uno.
Me parece importante aclarar que los hacks que ponen selectores que son válidos pero aún no soportados, se deben usar con mucha precaución; porque mañana sí los van a reconocer todos y el truco desaparece.
Aprovecho a dejarte uno para Chrome, que tiene la limitación de usarse sólo antes de
< /style>
(además de ser esteticamente asqueroso)
{[chrome} /*HACIA ABAJO, SOLAMENTE PARA CHROME*/
h1 {color: red; }
.miClaseParaChrome {display: none; }
</style>
Oh-oh!
ResponderEliminarRecién me doy cuenta de algo, y por eso vuelvo. Siempre creí que
-moz-document
era propio de Mozilla, pero resulta que es el "document" de CSS Lavel 4. Así que es otro que en algún momento dejará de funcionar.
Perdón.
Muy bueno, muchas gracias, llevaba tiempo buscando un hack solo para la propiedad de css y acá por fin la encontre!
ResponderEliminar