En los años que llevo escribiendo en Rosapolis siempre he diseñado y empleado mis propios themes de WordPress. Éste que tengo ahora creo que es el tercero que hago, y casi siempre me baso en alguno que esté ya hecho y lo adapto para hacerlo más ovino. Ahora mismo el que tengo está basado en TwentyTen Five, una adaptación a HTML5 del theme predeterminado de WordPress.
Modificar un theme es una tarea en la que soy tremendamente lenta, la hago a ratos sueltos y me tiro una eternidad con cada pequeño cambio. Las decisiones no se me da bien y escoger entre dos tonos distintos de gris para el fondo del pie del post o añadir 2px más de margen se convierten en fascinantes, absorbentes tareas. Con el de ahora cuando abrí de nuevo el blog todavía no había terminado de arreglar todo lo que quería pero como estaba viendo que si esperaba a que estuviese completamente terminado acabaría escribiendo de nuevo en Rosapolis en 2012, dejé unas cuantas cosas pendientes por hacer. Entre ellas estaba añadir media queries a la CSS para que Rosapolis se siguiese viendo bonito en su versión impresa, en un móvil, en mi nuevo iPad cortesía de Tuenti… Y ahora que me he puesto a ello, me ha parecido buena idea documentar por aquí un par de cosillas que he descubierto, por si a alguien le sirve de algo (y de paso me gano unas cuantas visitas, que los tutoriales/post informativos como éste venden mucho).
Las media queries éstas son una extensión de CSS2 que permite definir hojas de estilo específicas para distintos dispositivos o media, como screen, print… Ahora con CSS3 esta funcionalidad se ha extendido, permitiendo definir condiciones en cuanto al tamaño, la resolución, el color… las características del dispositivo, vamos. Así se puede especificar mucho más qué reglas queremos que se apliquen y cuándo. Las media queries se pueden usar tanto en la propia hoja de estilo, usando @media. Así no tienes que cargar distintas CSS, lo pones todo en el mismo archivo y listo.
@media only screen and (max-width: 480px) { ... }
O también las puedes usar dentro del <head>, si lo que quieres es cargar hojas de estilo distintas:
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />
En esta demo se puede ver esto en acción (probad a redimensionar la ventana) y en mediaqueri.es se dedican a recopilar páginas que usan media queries, la mayoría son una pasada de chulas.
Especificando el tamaño
Aquí tenéis una lista completa de todas los aspectos que se pueden controlar con media queries. En la práctica, si estáis usando esto para lo de las versiones en pantallas de distintos tamaños, lo más normal es que uséis sólo las relativas a width:
@media screen and (max-width: 767px) { .. }
@media screen and (min-width: 768px) and (max-width: 1023px) { .. }
@media screen and (min-width: 1024px) { .. }
Una vez que sabía esto, escribí reglas CSS para dos versiones más de la página: una más que nada para dispositivos de 768px de ancho (tablets) y otra para móviles con 320px/480px de ancho. Otras páginas tienen además versión para netbooks (1024px) pero como la mía usa sólo una columna y el footer cabe tal cual en ese tamaño, no he considerado que me hiciera falta.
Imágenes con tamaño flexible
Es tan simple como añadir esta regla:
img {
max-width: 100% !important;
}
De ese modo cuando las imágenes excedan las dimensiones del área visible se reducirán hasta ocuparla por completo. max-width no se aplica a elementos inline, así que tal vez tengáis que añadir un display: block; por ahí. Ah, hacer esto no significa que estemos optimizando la página para móviles. Para eso tendríamos que reducir de verdad el tamaño de dichas imágenes, aunque yo de momento me conformo con que se vea bien y me parece perfecto y recomendable que la gente consuma sus tarifas de datos cargando mis bonitas imágenes :D
Mi HTC ignora las media queries
En cuanto estuve satisfecha de cómo se veía al redimensionar la ventana del navegador hasta dejarla estrechísima, lo primero que hice fue coger el móvil para probarla en el medio adecuado. Me decepcionó bastante comprobar que mi móvil, un HTC Wildfire con Android 2.2.1, ignoraba absolutamente todas las reglas que yo con tanto amor había escrito para él. Me puse a investigar por ahí y esto es lo que finalmente lo resolvió para mí:
Usar max-device-width en vez de max-width, ya que la segunda se refiere al tamaño del área de visión (el tamaño de la ventana del navegador), mientras que el primero se refiere a la resolución real del dispositivo. Las reglas quedarían algo así (la coma hace las veces de or y permite combinar varias condiciones, como véis):
@media only screen and (max-width: 479px), screen and (max-device-width: 480px) { ... }
@media only screen and (max-device-width: 320px) { ... }
Y añadir esta meta tag en el head:
<meta name="viewport" content="width=device-width" />
Por cierto, en mi búsqueda también descubrí que iOS, Blackberry y Android ignoran por completo @media handheld, aparentemente es algo pasado de moda que sólo móviles antiguos reconocen.
Evitar imágenes partidas en modo impresión
Y ya lo último, para todos esos fanáticos de Rosapolis que necesitan imprimir mi blog para forrar las paredes de su habitación con él, el @media print. Aparte de ocultar cosas como el footer, los enlaces para comentar, algunas imágenes y poner colores algo mejores para el papel, sólo hay algo que puede ser relevante: las imágenes partidas entre dos páginas:
Es doloroso a la vista, pero se puede solucionar así (también es útil para citas, tablas…):
img, pre, blockquote, tr {
page-break-inside: avoid;
}
(Firefox 5.0.1 no parece soportarlo, por cierto)
Y el resultado final
Hala, a cambiar el tamaño de la ventana para verlo en directo.
Qué chulada. Justo ahora ando ‘luchando’ con CSS para remodelar mi blog, así que voy a probar. Eso de que cambiando el ancho de la ventana el contenido se adapte me ha enamorado (sobre todo porque yo soy de usar el mínimo tamaño de las ventana del navegador siempre que pueda).
Genial artículo. Yo también ando cambiando el diseño de mi blog (me dieron ganas al ver el tuyo, aunque no creo que se quede ni la mitad de bien), a ver si así escribo más. No había pensado en la versión móvil, y menos en la versión tablet, así que ahora ya tengo más trabajo ^_^
“Éste que tengo ahora creo que es el tercero que hago, y casi siempre me baso en alguno que esté ya hecho y lo adapto para hacerlo más ovino”
¿Qué significa ovino?
xD
No es más que otra de mis estupideces. Las ovejas tienen un gran protagonismo en todo lo que rodea a Rosapolis. Los nombres de los themes que he hecho para mi blog son: “Dios es oveja”, “My patronus is a sheep” y “TwentyTen Five Sheeps and Fishes” (éste último).
Creo que la oveja es el mejor animal.
Ah, ok ;)
Soy un lector relativamente nuevo en tu blog.
Por cierto, aquí: “Usar max-device-width en vez de max-width, ya que el primero se refiere al tamaño del área de visión (el tamaño de la ventana del navegador), mientras que la segunda se refiere a la resolución real del dispositivo.“
¿Es tremendamente desafortunada la nomenclatura de las propiedades o hay una errata en el post?
¡Errata en el post!
Gracias mil, ya está arreglado :D
Pingback: Implementación – Web del proyecto | /* Datos en abierto ~ */
hola una consulta. digamos al momento de subir una imagen, hago 2 thumbnails..y para la version movil necesito la mas pequeña .. como muestro esa imagen„ no quiero redimenzionar como dice el articulo quiero elejir la otra imagen mas pequeña.. por supuesto que todo es dinamico , es para un blog que hago..
Gracias! sigue publicando con ese humor