JMiur [E]

Así como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada @media que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada @supports, es probable que pronto se convierta en una de esas cosas imprescindibles.

Por ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en TRUE el valor layout.css.supports-rule.enable en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.

¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.

La sintaxis sería.
@supports una_condición {
  /* y aquí las reglas de estilo si la condición se cumple */
}
Por ejemplo, supongamos que quiero que una etiqueta tenga una animación que use @keyframes sólo si estas son soportadas y, caso contrario que no se vean:
#mi_animacion {display:none;} /* por defecto no lo muestro */
@supports (animation-name: un_ejemplo) {
  /* y sólo se verá si el navegador soporta animaciones */
  @keyframes un_ejemplo  {
    from {background-color:#000;border: 0px solid #444;} 
    to {background-color:#F00;border: 15px solid #FF0;}
  }
  #mi_animacion {
    display:block;}
    animation: un_ejemplo 1s infinite alternate;
  }
}
En ese caso, sólo hay una condición pero puede haber varias y combinarse con OR y AND:
@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {
  /* las reglas se aplicarían en cualquiera de los dos casos */
}

@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {
  /* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador */
}
O incluso, puede usarse el NOT para hacer lo contrario:
@supports not (display: flexbox) {
  /* estas reglas se aplicarían si la propeidad no es reconocida por el navegador */
}
Si bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):
@supports (background: red) {
  body {background: white;}
}
Sí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.

11 comentarios:

Indeziisoow  

Yo tengo la versión 26. Osea que ¿ya funciona?

JMiur  

Lo desconozco.

Responder
Graciela de Palomas  

Jorge buenos días, estoy haciendo cambios en la parte de la plantilla de los comentarios. Saqué la caja de los emoticones, aún así permanece una línea de color sobre la caja para comentar, no encuentro la solución para sacarla. Es en el blog de Palomas de Papel.
Intenté buscando imágen, colores, aún así no logro descifrar, podes ayudarme?

JMiur  

Sí. Ya veo, Graciela. Se trata de un DIV vacío.

El código fuente me dice esto:

<div style="width: 383px; text-align: left; border: 1px solid #cdc9c9;margin:0px auto; padding: 5px; background: #eee9e9; height:86"> </div>

Aunque la plantilla puede decir otra cosa. Creo que si buscas ese número 383 tenés que encontrarlo porque no debe haber muchos códigos con ese valor.

Simplemente, hay que borrar ese DIV ¿Será dónde estaban los emoticones?

Graciela de Palomas  

Exacto era donde estaban los emoticones, muchas gracias! :D
Hace tres días -no todos de 24 hs-, que buscaba y nada, hice una copia de la imágen para encontrar el color, busqué en todos los colores (parece que no), me resistía a preguntarte. A eso ya no lo tengo más ¿cómo coloqué tal cosa) quedó en la CPU antigua.
Gracias Mon Amic

JMiur  

Perfecto, Graciela. Hubiera preguntado sin problemas, ya sabe que, lo máximo que puede ocurrir es que diga que no tengo la menor idea :-)

Graciela de Palomas  

Me estoy haciendo mayor con lo de las plantillas :D

JMiur  

De eso no hay la menor duda ... es inevitable; a fuerza de errores, uno aprende. No nos queda otar alternativa tampoco porque nos la hacen difícil :-)

Graciela de Palomas  

Bueno ahora, no puedo ver las entradas, si podés Jmiur, de otro modo bien, que quede así, ésto de los coments me tiene hasta...gracias siempre :)

Responder
Graciela de Palomas  

Ya está amigo, perdón por tantos mensajes. Coloqué la copia que tenía, eso sí debo comenzar con todos los 'chiches' de nuevo...buen domingo :D

JMiur  

Paciencia, paciencia, paciencia :D

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