Cálculo de valores en CSS3

En estos últimos tiempos la evolución y el trabajo que se está realizando en las nuevas tecnologías de CSS3 y HTML5 es asombroso.

Hoy descrubrí la función calc de CSS3 que esta soportada en los mas grandes browsers (o sea Firefox y Chrome… y tambien las ultimas versiones de IE)

Si bien gran parte de lo que se puede hacer también se hubiera podido hacer con LESS, para quellos que no queremos utilizar LESS o por algun motivo no lo creemos conveniente para algun proyecto o somos rehacios a mezclar LESS con javascript o simplemente no queremos, es una interesante y util alternativa.

Un ejemplo muy simple, imaginemos que tenemos una página cuyo backgroudn se extiende de lado a lado de la pantalla pero el contenido de la pagina debe estar limitado a 960 pixeles, Por ejemplo algo como la siguiente imagen en la cual estoy trabajando.

Ejemplo página centrada

Suelo crear un una estructura y un css de la siguiente manera

<!DOCTYPE html>
<html>
<head>
    <title>Contenido centrado</title>
    <style>
        .container { background-color: #eee;}
        .content { width: 500px;  margin: 0 auto; }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        Aca escribo el contenido que quiero limitar a un ancho fijo y que este centrado en la pagina
    </div>
</div>
</body>
</html>

Si bien esto no tiene nada de malo, y creo que la mayoría de los sitios terminan haciendo algo similar a esto, el tener dos divs es algo que hace ruido, o al menos a mi me hace ruido.

El problema es que uno de los divs no tiene ningun motivo más de ser, mas que ayudar al layout. Por una limitación de que no podía hacer las cosas de otra manera, terminaba agregando un div extra sin sentido alguno.

Esto me hace recordar mucho a utilizar las tablas para realizar el layout de las paginas. Si bien el tag div no tiene un significado semántico, dudo que este bien el ver páginas que tienen tags divs por miles de lugares. Desde mi punto de vista el sobre-uso de los divs no es mejor que el abuso que en un tiempo se le daba al tag Table.

Pero esa era la única forma que yo conocía de poder tener un contenido complejo centrado en un área que debía tener un fondo que abarcara un área mayor.

Hasta que descubrí calc(), el cual me permite realizar cuentas en CSS y poder así definir los tamaños dinámicamente y que conseguir de esta manera el mismo resultado.

La versión CSS3 de este mismo html, al menos hasta mi entendimiento actual, sería:

<!DOCTYPE html>
<html>
<head>
    <title>Contenido centrado</title>
    <style>
        .content {  
            padding-left: calc(50% - 500px / 2); 
            padding-right: calc(50% - 500px / 2);
            background-color: #eee; 
        }
    </style>
</head>
<body>
<div class="content">
    Aca escribo el contenido que quiero limitar a un ancho fijo y que este centrado en la pagina
</div>
</body>
</html>

En esta última versión, no hay un tag div extra lo cual me deja un poquito más feliz.

Obviamente los div seguirán siendo útiles. Pero esperemos que con esta y otras funciones cada vez tengamos que depender menos de ellos para layout y podamos usarlo para lo que realmente fue creado, que es agrupar contenido.

Ahora solo espero que var() se estandarice un poco más y sea implementado en varios exploradores y ahi si será divertido ver lo que se podrá lograr !


Discussion Area - Leave a Comment