soy Kseso y esto EsCSS

Control del renderizado de elementos web con Css: propiedades *-rendering

Control del renderizado de elementos web con las propiedades Css. Representación mejorada del texto, color e imágenes.

Control del renderizado de elementos web con Css: propiedades *-rendering

·Por Kseso ✎ 2
Control del renderizado de elementos web con Css: propiedades *-rendering
Yo he visto estilos más allá de la especificación Css. He visto propiedades definidas en el corpus de SVG que te pueden ayudar. Y he visto mutar algunas otras como image-rendering que pasan al corpus de Css cambiando las palabras claves de sus valores.

En algún otro artículo del blog ya he mencionado la existencia de propiedades Css definidas fuera del corpus específico del propio Css. Y no por estar allí son menos. El lugar donde están recogidas ni las hace menos usables ni les resta potencialidad ni mucho menos impide su uso. Sólo hace que su difusión y aprovechamiento sea un poco más minoritario. Hasta que se difunden o se dan a conocer.

Uno de esos campos donde puedes encontrar "otros estilos Css" es la especificación que desarrolla los Gráficos Vectoriales Redimensionables (Scalable Vector Graphics) o SVG.

Entre otros aspectos, hay dos detalles que hacen más que interesante echarles un vistazo de vez en cuando:

  1. Que los elementos a los que aplican estas propiedades no son solo los objetos SVG
  2. Que permiten controlar aspectos que las especificaciones de Css no contemplan.

Un ejemplo de lo anterior ya lo vimos en el artículo sobre la propiedad Css pointer-events.

El renderizado de los elementos en la web

Otro de los campos que se escapaban al control del desarrollador era todo lo relativo al renderizado de los objetos presentes en la web. Dos situaciones, viejas conocidas, son la gestión del color según el modelo que el motor del navegador implementa y el perfilado de las tipografías. Si estos temas te son nuevos, una simple consulta en google.

Para ayudar en algo y en algunas situaciones, el documento mencionado incluye una serie de propiedades para actuar en el renderizado web. Las que vamos a ver son:

  1. Renderizado del texto
  2. Renderizado del color
  3. Renderizado de las imágenes

La propiedad Css text-rendering

La propiedad text-rendering le indica al motor de renderizado del navegador qué aspecto debe primar al representar los textos.

El valor inicial es 'auto', se hereda y aplica a todos los elementos de texto. También se puede animar.

Los valores admitidos, además de 'inherit, y su significado son:

auto

Indica que el agente de usuario deberá hacer concesiones para equilibrar la velocidad, la legibilidad y la precisión geométrica, pero a la legibilidad le da más importancia que a la velocidad y a la precisión geométrica.

optimizeSpeed

Indica que el agente de usuario hará hincapié en la velocidad de procesamiento sobre la legibilidad y precisión geométrica. Esta opción provocará que a veces se desactive el anti-aliasing para el texto

optimizeLegibility

Indica que el agente de usuario hará hincapié en la legibilidad sobre la velocidad y la precisión geométrica.

geometricPrecision

Indica que el agente de usuario se hará hincapié en la precisión geométrica sobre la legibilidad y la velocidad de procesamiento.

En las pocas pruebas que he realizado he notado mínimas variaciones a mejor con ciertas tipografías con las dos últimas: optimizeLegibility y geometricPrecision

Puedes ver información complementaria y soporte en este artículo del Mozilla Developer Network

Control del renderizado de imágenes con Css: propiedad image-rendering

La propiedad image-rendering

NOTA: Este apartado ha quedado obsoleto

Al igual que en la representación del texto, con las imágenes también se le puede indicar al navegador vía Css qué aspecto priorizar con la propiedad image-rendering.

Los viejos valores definidos para image-rendering han sido cambiados por completo. Sólo a efectos de información, eran éstos: auto optimizeSpeed optimizeQuality inherit Tenían el mismo significado que en text-rendering. Pero repito, estos valores ahora ya no existen.

La propiedad image-rendering ha cambiado su definición al documento CSS Image Values and Replaced Content Module Level 3, pero no en el que se encuentra con status CR de fecha 17 Abril de 2012. Ha sido traspasada a él en el más reciente Editor’s Draft, del 10 de Febrero de 2015.

Fin Nota

La propiedad image-rendering le indica al navegador qué aspecto de la imagen debe priorizar cuando la imagen se escala. Esto es, al representarla en un tamaño mayor o menor al que que tiene la propia imagen.

image-renderingLos valores actuales, recogidos en el Editor’s Draft del 10 de Febrero de 2015 son: auto crisp-edges pixelated y éste su significado. Tomemos la pequeña imagen adyacente a este párrafo y el resultado al ampliarla x3 sería el mostrado en la imagen de abajo que acompaña a las definiciones de los valores. Estas imágenes son del documento del W3c.

image-rendering: auto | crisp-edges | piselated

auto

El valor por defecto. Al aumentar o disminuir el tamaño de la imagen para mostrarla en la página el navegador prioriza "la apariencia" suavizando los colores. En especial para lograr una transición suave de unos a otros. Indicada para fotos.

crisp-edges

Este valor preserva (prioriza) el contraste y los bordes existentes en la imagen. Indicada, por ejemplo, para lo que se conoce como pixel art

pixelated

La imagen es escalada con el algoritmo "nearest neighbor" o similar para que el resultado final sea un aspecto de imagen pixelada. Este valor es el que más difusión está teniendo.

Sugerencia: puedes pinchar en la imagen de las 3 para verla a su tamaño original y así observar mejor el resultado final de declarar un valor u otro.

Comentaba que el valor pixelated es el que mayor interés y difusión está teniendo por lo efectista y vistoso que resulta al declararlo a imágenes que necesitan mantener su aspecto pixelado bien sea por estética (como las imágenes que en origen tienen esa apariencia) o por necesidad, como pueden ser los códigos QR.

Puedes ampliar información sobre image-rendering: pixelated en estos artículos:

  1. image-rendering: pixelated en Html5Rocks
  2. La propiedad image-rendering en MDM
  3. Demo y códigos privativos en un icono de 16x16px

El manejo y gestión de las imágenes vía Css se ve complementada con las propiedades image-resolution y image-orientation además de la ya vista image-rendering

La propiedad shape-rendering

Para elementos shape* la misma especificación define la propiedad shape-rendering con los valores:
auto | optimizeSpeed | crispEdges | geometricPrecision | inherit.

Personalmente no he apreciado diferencias al jugar con la propiedad 'image-rendering' en FF. En Chrome, el inspector de código tacha (line-through) los valores de obtimización con y sin prefijo -webkit-.

*Shape:
Un elemento gráfico que se define por una combinación de líneas rectas y curvas. En concreto: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ y ‘polygon’

La propiedad color-rendering

La propiedad 'color-rendering' se puede declarar a container elements, graphics elements, ‘animate’ y ‘animateColor’. Para desambiguación de estos términos ver la definición de los mismos aquí.

'Color-rendering' indica cómo optimizar la interpolación de color y las operaciones de composición del mismo. Tiene prioridad sobre la propiedad 'color-interpolation-filters'.

Los posibles valores son: auto | optimizeSpeed | optimizeQuality | inherit. El significado es el visto en las propiedades anteriores.

También se hereda y se puede animar.

Junto a 'color-rendering' hay otras dos propiedades que aplican a la gestión del color que realiza el navegador: color-interpolation y color-interpolation-filters

Sobre estas propiedades no he realizado pruebas. Quizás un campo propicio para probarlas sea con objetos con gradientes Css. ¿Te animas y nos dices tu opinión al respecto?. Gracias.

Artículo publicado originalmente el 29 de Agosto de 2013. Actualizado el 12 de Febrero de 2015 por las modificaciones tan sustanciales habidas, especialmente en el apartado referente al manejo de las imágenes escaladas (image-rendering).

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso