Opciones de esquinas redondeadas para internet explorer 6, 7 y 8
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
* { 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; } |
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:
|
1 |
<!-- Agregamos el JS--> <script src="DD_roundies.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//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'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Es opcional definir los css, pero aca los defino para darles un color */ .redondeado-10px { background-color: #336699; } .redondeado-popurri { background-color: #ff0000; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
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.
DD_roundies power!!
Doy fe de ello, lo usamos habitualmente y nos está yendo bastante bien.
Thanks Capy!!
Coincido contigo. Después de probar varias cosas, la mejor es DD_roundies pero tiene un fallo grave en IE 8, que es que no aparecen imágenes de fondo en los elementos a los que se aplica.
Una pena. A seguir usando código sucio.
Hola, un saludo…
Es solo mi opinion, pero me gusta la tecnica de anidar div’s y usar sprites en el lugar de imagenes por separado, y para mejorar el mantenimiento (Si se conoce la programacion del lado del servidor), una clase con metodos getters y setters que me permita crear estas capas a gusto, y con un motor de plantillas que remplaze el resultado en la vista html. Eficiente,y sin fallos!!
Hombre claro!
Gracias por el aporte, CSS3 permite redondear esquinas pero algunos navegadores como IE8 no soportan estas propiedades, sería deseable hallar alguna solución solo para estos navegadores y no aumentar, ni romper demasido los estandares. Gracias
Gracias por el aporte, no sabia que habia tantas formas de redondear esquinas, mil gracias de verdad.xD
DD_roundies no me funciona en Google Crhome..
No te funciona porque es una solucion para internet explorer. chrome soporta la propiedad “border-radius”
esa cosa no funciona con degradados css3
si podes usar degradados css 3 quiere decir que este tipo de solución no te hace falta. en su lugar usa directamente la propiedad border-radius
funciona solo y solo en internet explorer
existe un pollyfill muy bueno que se llama css3pie lo he usado con resultados muy satisfactorios especialmente con la propiedad de border-radius, incluso con box-shadow, con los degradados aun le falta pero si necesitan de bordes redondeados esta es muy buena opción. saludos