El tag PROGRESS de HTML5

Hace tiempo leí que Mozilla había anunciado la inclusión del tag <progress> (HTML5) a Firefox 6.0.Me llamó mucho la atención; especialmente porque tengo un interés peculiar por las gráficas generadas con PHP. Aún recuerdo que un compañero de la universidad tuvo la grandiosa idea de generar gráficas de progreso/barrars usando una imágen de 1px * 1px y alterando el atributo width y height de <img>. Decidí buscar dónde poner barras de progreso.Por ahí tengo una página de seguimiento de tareas que empecé a escribir hace años y que ha ido evolucionando conforme evolucionan mis necesidades. En esa página, hay unos indicadores de progreso... en texto. El candidato perfecto para mi "experimento".

Decidí ver cómo se comportaba el tag <progress> en mi aplicación.

Tal y como dicen en varios lugares, Chrome si lo soporta y Opera 11 también.

Ni Firefox ni Safari ni IExplorer lo soportan.

Y aunque Firefox 6.0 si lo soporta, tiene un pequeño problema que más adelante explico.

Pero yo quería que siguiera viéndose bien en navegadores que no lo soportan aún; asi que habría que poner el porcentaje también en el contenido del tag (entre la apertura <progress> y cierre </progress>).

También quería que se mostrara el valor (es decir el string: "12%") cuando pasaran el mouse sobre la barra de progreso. Afortunadamente, el tag <progress> soporta atributos globales; asi que pude agregar el atributo title.

Finalmente, hay que mencionar que a menos de que se especifique lo contrario, <progress> espera valores entre 0.0 y 1.0; para cambiarlo, podemos usar el atributo max.

La declaración final es muy simple:

<progress value="12" max="100" title="12%">12% </progress>

¿Y los resultados?

* ¿¿Word??

Si Word. Resulta que a veces necesito hacerle unos ajustes antes de convertirlo a PDF.

Descubrí que si guardo el HTML con extensión .doc y con los estilos CSS en linea; Word lo abre sin quejarse mucho (y me respeta la mayoría de los estilos).

El cambio fue rápido y ya quedó funcionando.

Firefox 6.0

Si, Firefox 6.0 ya soporta <progress>, pero con un pequeño problema:

Resulta que en mi aplicación, el elemento <progress> está dentro de un <td> en una tabla; y por alguna extraña razón, no detecta bien el tamaño de la barra. Por lo pronto lo solucioné dándole la propiedad {min-width: 100px; } en el CSS. Y aunque min-width no es ampliamente soportado, mi problema sólo estaba presente en FF6.

Otras cosas

Algo que buscaré la próxima vez que me de curiosidad es el tag <meter>. Aquí hay unos ejemplos. Y la página de desarrollo de Mozilla.

• Can I Use: Un sitio web en donde pueden consultar el soporte de varios elementos en distintos navegadores.