25 may 2012

css3 calc y caniuse.com

"Yo he comido ratas en el desierto" bueno no, pero si que he aprendido CSS por las bravas, cometiendo muchos errores, porque cuando yo empecé apenas había web especializadas, y nadie de mi entorno tenía la menor idea.

Bueno, pues por aquel entonces eché mucho de menos un atributo CSS3 nuevo llamado "Calc" que lamentablemente sólo soporta el 37% de los navegadores.

¿Que es calc? pues puedes hacer cálculos simples en css ¿alguna vez queríais poner el ancho del 80% y que el margin, padding y border se quite de ahí? Yo muchas veces (normalmente le añadía uno o dos divs para tener estas cosas pero así es mejor).

Pues imagina esto


#cuerpo {
margin:0 10px;
padding:0 15px;
border-left:1px red solid;
border-right:1px red solid;

width:calc(80% -2*10px - 2*15px -2px)
-moz-width:calc(80% -2*10px - 2*15px -2px)
-webkit-width:calc(80% -2*10px - 2*15px -2px)
-o-width:calc(80% -2*10px - 2*15px -2px)

}


si, los prefijos son un rollo ¿puedo usar Calc? pues me he dado cuenta de que en realidad no.
Gracias a mi recién descubierta página web caniuse.com (puedousar.com en español) te mide quien soporta estas características.
http://caniuse.com/calc (32%)
http://caniuse.com/svg (imágenes svg) (73%)

Herramientas muy útiles ambas espero que os sirvan.

4 comentarios:

  1. Muy interesante la propiedad "calc", pero si deseas quitar el margin, padding y border, también puedes utilizar el "box-sizing", que es soportado por más del 90% de navegadores http://caniuse.com/css3-boxsizing.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Muchas gracias foxero es increible que no conociera esa propiedad y más increible aún que ie8 la coja siendo CSS3.
      Ha sido de gran utilidad, muchas gracias tio.

      Eliminar
  2. que os pasa patanes ? estais muy calladitos !

    ResponderEliminar
  3. supongo que pillas la cita:
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,
    Mucho trabajo y poca diversión hacen de Piki un tipo tristón,

    ResponderEliminar