Medias Queries, RWD, anchuras de ventanas, scrollbars y navegadores 26.4.13
La barra del scroll en el RWD con @media queries y anchuras ¿queda dentro o fuera? Cómo hace cada navegador y lo que dicen las especificaciones.
Medias Queries, RWD, anchuras de ventanas, scrollbars y navegadores
Si haces diseños RWD y aún mantienes el gusto por el desaparecido "pixel pefect" posiblemente te hayas encontrado con cierta discrepancia según en qué navegador diseñes y compruebes. Discrepancia que se manifiesta cuando coinciden la barra de scroll vertical y marcas un punto de inflexión en la anchura del la ventana del navegador (el viewport, no la la anchura de la página).
En código la situación sería que por la altura de la página aparezca el scroll y tengas declarada una media querie tal que así:
@media (min-width: 600px) { ... }
Por si hasta hoy no te lo has planteado, la cuestión es si en la anchura total de la ventana del aparato (el viewport) el scroll cuenta o no. Esto es lo que dicen las especificaciones del W3c:
La propiedad width describe la anchura de la zona de visualización específica del dispositivo de salida. Para los medios continuos, esto es el ancho de la ventana gráfica (como define CSS2, section 9.1.1 [CSS21]) incluyendo el tamaño de la barra de desplazamiento mostrada (si la hay). Para los medios paginados, este es el ancho del cuadro de la página.
Esa es la recomendación. Pero del dicho al hecho... el resultado en la práctica es que según qué navegador esto se respeta o no. Este es el resultado:
- Firefox, IE y Opera (clásico) incluyen la anchura del scrollbar en el cómputo de "width"
- Chrome y Safari la excluyen (con motor WebKit),
Una vez Blink entre nosotros habrá que ver cómo lo hace.
El resultado de lo anterior es que si tienes una declarada una anchura mínima en la media querie de 600px en las páginas con scroll-Y ocurrirá que:
En Firefox, IE y Opera (clásico) la anchura disponible para la página son 583px + 17px de la barra (píxel más o menos) y por lo tanto el cambio en las propiedades (afecta la @media) es a una anchura de la ventana de 600px.
En Chrome y Safari la anchura de disponible para la página serán 600px y la @media actuará cuando la anchura del viewport alcance los 617px (las anchuras de la página más del scroll).
Lecturas para ampliar
- Media queries, viewport width, scrollbars, and WebKit browsers por Roger Johansson
- Viewport Genie y mqGenie 2 realizaciones en javascript para corregirlo en Webkit.
- Responsive Web Design and Scrollbars: Is Chrome’s Implementation Better? por Craig Buckler
Kseso
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
Interesante. Supongo que Blink hará lo mismo que WebKit ya que es un mero fork de la versión de Apple.
ResponderEliminarGracias por tenernos tan bien informados :)
Genial la explicación, gracias!
ResponderEliminar