CSS3 y border-radius: esquinas redondeadas

Uno de los elementos imprescindibles para cualquier sitio web al estilo 2.0 (junto con los degradados, reflejos y colores pastel) son las esquinas redondeadas (nótese la ironía).

Sabemos que hay técnicas para hacerlo mediante CSS e imágenes de fondo (¿quién no se acuerda de Redondeando esquinas (I) y Redondeando esquinas (II) ?).

En la especificación de CSS 3 podemos encontrar una forma más sencilla de hacerlo, mediante el atributo border-radius (especificación CSS 3 del W3C), mediante el uso de las siguientes propiedades: border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius. Aunque la implementación de esa propiedad ha sido irregular en los principales navegadores: puedes encontrar un resumen en can i use – border-radius.
Aquí va un resumen:

  • Firefox: en las versiones 3.x las soporta mediante el prefijo -moz (-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft). A partir de la versión 4, está previsto que siga la sintaxis del W3C.
  • Safari: al menos desde la versión 3.2 hasta la versión 4, soportaba esquinas redondeadas mediante el prefijo -webkit (-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius). A partir de la versión 5 sigue la sintaxis del W3C.
  • Safari (iOS), desde la versión 3.2 hasta la 4.2 soporta las esquinas redondeadas con el prefijo -webkit.
  • Chrome: al menos desde la versión 7, sigue la sintaxis del W3C.
  • Opera: Desde la versión 10.5 soporta esquinas redondeadas con la sintaxis del W3C.
  • Explorer: se espera que a partir de la versión 9 siga la sintaxis del W3C. Para versiones las versiones entre la 6 y la 8 – se puede usar CSS PIE. Hay circulando un error bastante insistente diciendo que a partir de cierta versión de Explorer soportaba esquinas redondeadas con el prefijo -ms, pero como digo, es falso.
  • KonquerorA pesar de que ha habido gente que ha dicho que soportaba esquinas redondeadas con el prefijo -khtml (yo entre ellos), lo cierto es hasta la versión 3.4 que no hay ninguna notica al respecto (se puede consultar en CSS 2.1 & 3 Support in KHTML 3.4).

En la especificación de CSS 3 podemos encontrar una forma más sencilla de hacerlo, mediante el atributo border-radius (especificación CSS 3 del W3C ) (recordemos, de momento es un borrador y pueden pasar años hasta que sea una recomendación). Pero hasta que llegue ese momento, y mientras se concretan los atributos y valores, cada motor de navegador que se precie (excepto Opera y Explorer ) tiene su propia implementación de esta propiedad, con sutiles diferencias. Hay que tener en cuenta que estas implementaciones de CSS se pueden cosiderar como una especie de versión beta , y que todavía no está claro que la especificación del W3C cambie más adelante (como lo ha hecho recientemente).

Aquí se recopilan las propiedades definidas por el W3C , mozilla, khtml y webkit . Empezando por el borde redondeado para toda la caja, y después para las esquinas individuales (esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda, como las agujas del reloj).

W3C (borrador)

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Mozilla (Firefox, SeaMonkey, K-meleon,…)

-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Khtml (Konqueror)

-khtml-border-radius
-khtml-border-top-left-radius
-khtml-border-top-right-radius
-khtml-border-bottom-right-radius
-khtml-border-bottom-left-radius

Webkit (Safari, Chrome)

-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

Qué pasa con Opera y Explorer

Del Explorer se ha hablado en algunos sitios de una propiedad -ms-border-radius , pero no existe (¿todavía?). Y en Opera,… tampoco existe, pero, hay una forma de crear esas esquinas redondeadas usando como imágenes de fondo ficheros svg : puedes verlo en la sección Rounded corners del artículo New development techniques using Opera Kestrel (9.5).

Esquinas redondeadas usando javascript

Existe otra forma de lograr tener esquinas redondeadas en navegadores de versiones antiguas mediante javascript, como podemos ver en Nifty Corners Cube , jQuery Corners y probablemente unos cuantos cientos de sitios más.

Diseñando para dispositivos móviles: uso y contexto

Designing for Mobiles: Users & Context, un video de animación corto – 3,43 minutos – que han creado con motivos didácticos para un curso de User Experience Design.
El video, alojado en vimeo, termina así:

When design for Mobile, remember: you’re disigning for context. You can’t control how the phone will be use or the enviroments the phone is use in.

Designing for Mobiles: Users & Context

Documentos y citas sobre la web móvil

En la sección Best Practices de mobithinking.com (de la gente de mtld.mobi, antiguo dot.mobi) podemos encontrar algunos documentos de interés – en formatos HTML y PDF – en el mundillo de la web móvil:

  • Mobile Internet Usage & Attitudes Study (publicado en Mayo del año 2008). Se trata de los resultados de un estudio que compara usos y actitudes frente a la web móvil en Reino Unido y Estados Unidos, con una muestra de algo más de 2000 personas -algo pobre en mi opinión de estadístico -. A pesar de este detalle, creo que el estudio es bastante amplio y ofrece muchos datos de interés. ¿Los resultados son extrapolables a otros países? Probablemente no, pero puede servir para detectar tendencias (que no es poco).
  • A Three Step Guide to Usability on the Mobile Web (publicado en Septiembre del año 2008). Esos tres pasos de los que habla: arquitectura de la información, prototipado, y diseñar teniendo en cuenta las limitaciones de los dispositivos.
  • 10 Mistakes in Mobile Marketing (publicado también en Septiembre del 2008). Ojo a este documento, que no habla de “marketing” -entendida como publicidad, un título mucho más apropiado podría ser “10 errores conceptuales de posicionamiento de marca en el contexto de la web móvil” (tomayá).
  • Best and Worst Of The Mobile Web (fechado en Noviembre del año 2008). El documento, basado en las opiniones de un grupo de “expertos”, alaban y critican sitios webs populares que destacan en ciertos aspectos, tanto técnicos como de diseño, experiencia de usuario,…

Es de esperar que con el paso del tiempo vayan publicando más documentos. Algunas citas de interés de las muchas que se podrían extraer:

Five rules for designing usable mobile web sites

  1. The mobile web is mobile
  2. Context is king
  3. The devices are (very) different
  4. Forget your dotcom thinking. You need unique content and design.
  5. Never forget rules one to four.

A Three Step Guide to Usability on the Mobile Web

Mobile lets you reach people all across the world, many of whom may never own a PC. It’s not just a western phenomenon, it’s global.

Beyond the numbers, the vast potential of the mobile web is also due to the way people think about and use their mobile devices:

  • They’re always on.
  • They’re always at hand.
  • They’re always personal, rarely shared.

No other marketing medium can say any of these things, much less all three.

10 Mistakes in Mobile Marketing

Mobile is not a niche – but it’s still seen as a niche play by too many brands. With anywhere from 3.5 to 4 billion mobile phone users, you’re missing a prime opportunity if you’re not using the mobile web to strengthen relationships with your present and prospective customers when they’re on the move.

[…]

Any site that doesn’t have handset detection, dynamic content formatting and URL redirects is missing out on giving the best user experience.

Best and Worst Of The Mobile Web