Tres Hacks Css para Webkit

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

Por Kseso ✎ 3

Hacks Css para WebkitTodos 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

browserhacks
browserhacks: recopilación de hacks específicos por navegador

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. 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:

    @-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>

    ResponderEliminar
  2. Oh-oh!
    Recié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.

    ResponderEliminar
  3. Muy bueno, muchas gracias, llevaba tiempo buscando un hack solo para la propiedad de css y acá por fin la encontre!

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap