query - ¿Cómo deben gestionarse las consultas de medios de CSS3?

media query min and max

Question

Dado que hay muchas maneras de implementar consultas de medios CSS3 en un sitio web, me gustaría saber cuál es el recomendado por los diseñadores web más experimentados. Puedo pensar en una pareja:

1. Todo en una hoja de estilo

Hay un estilo predeterminado que se aplica a todos los anchos de pantalla y las consultas de medios que se aplican solo a anchos de pantalla más bajos y sobrescriben el archivo predeterminado, todo en uno. Por ejemplo:

HTML

<link rel="stylesheet" href="main.css">

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(tenga en cuenta que esto es solo un ejemplo)

Pros:

• El estilo predeterminado se aplica a los navegadores antiguos
• Solo se requiere una solicitud HTTP

Contras:

• Se desordena con un montón de código
• Algunos navegadores deberán descargar código que no se aplicarán

2. Hojas de estilo separadas

Hay hojas de estilo separadas que contienen el código completo adaptado para cada ancho de pantalla. Los navegadores solo cargan el que aplica. Por ejemplo:

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

pantalla grande.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

Pros:

• Limpio y organizado
• Solo se requiere una solicitud HTTP
• Los navegadores solo cargan lo que necesitan

Contras:

• (Es por esto que dudo en usar esto :) Cuando se realiza un cambio que se aplica a todos los anchos de pantalla, el cambio se debe copiar y pegar en los lugares apropiados en todas las hojas de estilo.

3. Hojas de estilo separadas, una hoja de estilo global

Lo mismo que # 1, pero el estilo global y las consultas de medios están en hojas de estilo separadas. Por ejemplo:

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

main.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

Pros:

• También ordenado y manejable
• No tiene problema de # 2 cuando realiza cambios globales
• El estilo global se aplica a los navegadores antiguos

Contras:

• Los anchos de pantalla más pequeños requieren 2 solicitudes HTTP

Eso es todo lo que puedo pensar. ¿Cómo se deben gestionar las consultas de los medios?

Gracias por cualquier respuesta.

Answer 1

Bueno, ciertamente no puedo afirmar que soy una autoridad en el asunto (todavía estoy aprendiendo acerca de las convenciones de codificación), pero en realidad me inclino por la opción n. ° 1: una única hoja de estilo. Estoy pensando en una implementación específica de eso, sin embargo. En lugar de tener un único punto de interrupción para cada caso de tamaño de pantalla para el que necesita nuevos estilos, sugiero múltiples puntos de interrupción, uno para los estilos CSS de cada módulo donde se deben abordar múltiples tamaños de pantalla.

Ah ... eso podría haber sido una declaración un poco confusa. Un ejemplo es en orden ...

En lugar de algo como:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

Sugeriría la opción n. ° 1, recién implementada:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(Todas las clases son marcadores de posición. No soy muy creativo ...)

Aunque esto significa que hará la misma declaración de consulta de medios varias veces (lo que lleva a un código poco más), es mucho más útil para probar módulos individuales, lo que en general ayudará a la mantenibilidad de su sitio a medida que crezca. Intente agregar múltiples estilos reales, más etiquetas / clases / id al ejemplo que di, y tal vez agregarles un poco más de espacio en blanco, y verá pronto cuánto más rápido es restringir y cambiar / agregar estilos (a través de todos los tamaños de pantalla) en la implementación que se muestra en la segunda parte del ejemplo.

Y atribuyo esta respuesta por completo a la información de Scalable y Modular Architecture for CSS , de Jonathan Snook. (¡Después de todo, no hay forma de que un principiante como yo pueda descifrar y razonar una respuesta como esa por mí mismo!) Como se cita en una de las muchas partes relevantes de ese libro,

"... en lugar de tener un único punto de interrupción, ya sea en un archivo CSS principal o en una hoja de estilos de consulta de medios separada, coloque consultas de medios alrededor de los estados del módulo".

Sin embargo, si por preferencia personal prefiere no usar este enfoque, entonces es libre de usar cualquiera de las otras opciones que propuso, después de todo, el mismo Snook dice que su libro "es más guía de estilo que marco rígido". ", así que no sienta que esto es un estándar de codificación. (Aunque creo que debería ser. XD)

Answer 2

Creo en "poner código donde lo esperas". Si un estilo necesita una anulación, me gustaría que mi código que invalida sea tan cercano al estilo predeterminado, por lo tanto en el mismo documento. De esa forma, dentro de un año, sabré lo que sucede cuando miro el código. En el otro enfoque (archivo css por punto de interrupción), tendré que recordar buscar el código de los estilos de sobrecarga en un archivo separado. No es un problema, a menos que olvide que lo hice así dentro de un año. Supongo que es una preferencia personal y al navegador no le importa.

Answer 3

Si desea utilizar la segunda opción, hay una forma de evitar "copiar y pegar" los estilos globales que necesita tanto para su versión móvil y de escritorio del sitio que es muy útil y lo ayuda a mantener todo más organizado en mi opinión y que está usando SASS.

Podrías tener algo así:

> CSS Folder
> Sass folder
 - _global.scss
 - _mobile_layout.scss
 - _desktop_layout.scss
 - main_mobile.scss
 - main_desktop.scss

que se compilará en

> CSS Folder
 - main_mobile.css
 - main_desktop.css

Espero que lo encuentres útil ^^