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.