Entradas etiquetadas con Maquetación

Hace casi un año me vi en la tarea de investigar una vez mas cual era la mejor forma de obtener bordes redondeados para estos navegadores pero esta vez teniendo en cuenta la velocidad de desarrollo.

Las opciones que tenia a mano eran:

La mas tradicional, anidar divs hasta el cuatro niveles para poder colocar imágenes en cada una de las esquinas:

<div class="redondeo">
    <div>
        <div>
            <div>
                <h2>Lorem ipsum dolor</h2>
                <div class="contenido">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                </div>
            </div>
        </div>
    </div>
</div>

* {
    font-family: Verdana;
}

.redondeo {
    background: url("images/esq_sup_2-1.png") no-repeat scroll 100% 100% transparent;
    width: 300px;
}

.redondeo div {
    background: url("images/esq_sup_1-1.png") no-repeat scroll 0 100% transparent;
}

.redondeo div div {
    background: url("images/esq_sup_2.png") no-repeat scroll 100% 0 transparent;
}

.redondeo div div div {
    background: url("images/esq_sup_1.png") no-repeat scroll 0 0 transparent;
}

.contenido {
    background: none repeat scroll 0 0 transparent !important;
    padding: 0 15px 15px;
    text-align: center;
}

h2 {
    color: #fff;
    text-align: center;
}

Ver ejemplo | Descargar

Este método tiene sus pro y sus contras.
Lo que tiene de bueno es que esta técnica es compatible con todos los internet explorer partiendo de la versión 5 y que la velocidad de renderizado es instantánea.

Lo malo es que es poco mantenible. Lo digo por lo siguiente: pensemos por un momento que tenemos que cambiar el color de la cabecera de la caja de ejemplo. El primer problema es que al ser una imagen que tiene los bordes creados con algún editor de imágenes como Photoshop, Gimp o Paint.NET, para cambiar el color deberíamos recurrir a estas herramientas. Si quisiéramos ponerle un borde de color lo mismo., y ni hablar si queremos remaquetar el site entero.
Y lo anterior es por decir alguno de los casos mas normales, pero hay mas, y quien haya usado esta técnica sabe de lo que hablo.

La segunda opción DD_roundies:

Es la que estuve usando intensamente hasta hace poco. Se trata de una librería JavaScript llamada DD_roundies.
Esta librería redondea cualquier elemento HTML de tipo bloque usando VML para conseguirlo.
Es realmente notable el resultado que se consigue con esta librería. De hecho por un buen tiempo la consideré la solución mas acertada ya que es realmente fácil de usar:

<!-- Agregamos el JS--> <script src="DD_roundies.js"></script> 

//Agregamos el JS
/*
Ahora solo necesitamos decirle a ddroundies sobre que
class o id debe redondear y de cuanto es el radio de
redondeo que debe aplicar */

/**
 * Un redondeo de todos los bordes a 10 pixeles para todos
 * los elementos HTML que lleven definida esta clase
 * */
DD_roundies.addRule('.redondeado-10px', '30px');

/*
 Tambien se puede especificar un redondeo para cada
 una de las esquinas

 5px para la esquina superior izquierda
 10px para la esquina superior derecha
 15px para la esquina inferior derecha
 20px para la esquina inferior izquierda
 */
DD_roundies.addRule('.redondeado-popurri', '5px 10px 15px 30px');

/*
Es opcional definir los css, pero
aca los defino para darles un color
*/

.redondeado-10px {
    background-color: #336699;
}

.redondeado-popurri {
    background-color: #ff0000;
}

<div class="redondeado-10px">
    <br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    <br/>
    <br/>
</div>

<br/>

<div class="redondeado-popurri">
    <br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    <br/>
    <br/>
</div>

Ver ejemplo | Descargar

Como ven el uso es simple, PEEEERO la gran pega que tiene esta técnica es el hambre voraz de procesador para renderizar las esquinas, brutal, y en un principio para hacer cosas chicas como una o dos cajas redondeadas va de maravilla, pero haganlo con 20 o 30… Mejor NO LO HAGAN, ya les puedo adelantar que la pagina va a quedar congelada varios segundos hasta que termine de dibujar todas las esquinas.

La tercera, curved-corner:

Basada también en VML, es “curved-corner” y Alexis de Eliseos.net ha dedicado un post hace unas semanas.

Esta implementacion fue de las primeras alternativas que conoci hace un tiempo ya, y la usé y deje de usar con la misma rapidez porque tiene dos flaquezas inaceptables y que al dia de hoy no se han solucionado:
La mas importante es que despues de redondear una X cantidad de div o lo que sea, va a fallar y dejar de redondear el resto.
La segunda es que esta solucion a diferencia de la segunda propuesta, solo permite aplicar un redondeo completo al div, dejando fuera la porsibilidad de hacer un redondeo solo a una esquina.

Las otras soluciones:

¿Hay mas? si claro, un millón de soluciones. Las que mas han prosperado son sobre todo las basadas en frameworks js. Un ejemplo es

http://www.malsup.com/jquery/corner/

Pero ni vale la pena ponerse a hablar este tipo de soluciones porque no alcanzan a crear unos bordes tan perfectos como los que logran las anteriores soluciones ya citadas.

Conclusion:

De estas tres tecnicas la mas reocmendable de todas es la de DD_roundies, que mas alla de tener inconvenientes como las otras dos, es la que mas compensa la relacion velocidad de desarrollo – calidad. Lo unico en lo que hay que tener un muy especial cuidado es en no llenar la pagina de bordes redondeados por medio de este metodo porque insisto, van a tener un increible problema de performance.
De hecho, para cerrar este post puedo proponer una solucion hibrida entre la solucion de redondeo por medio de imagenes y la de DD_roundies, usando la primera para cualquier lista de elementos HTML que se repitan contantemente y sean iguales claro, dejando la opcion de DD_roundies para situaciones mas complicadas de solucionar con lo que a diseño respecta.