Clase 7 - Especificidad y Media Queries

Especificidad

Vimos los cálculos con los que se define la especificidad de los selectores CSS. Una regla con mayor especificidad va a tener prioridad sobre cualquier regla con menor especificidad.

A modo de ejemplo vimos el sitio http://batificity.com/

Media Queries

La idea de Media Queries es hacer consultas sobre las características del dispositivo.

Con esto podemos aplicar de forma condicional estilos CSS.

https://developer.mozilla.org/es/docs/Web/CSS/Specificity

Documento de ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
@media print {
    p {
        color: blue !important;
    }
}

@media screen {
    p {
        background-color: yellow;
    }
}

@media (min-width: 320px) {
    html {
        background-color: cadetblue;
    }
}

#primer-parrafo {
    color: gray;
}

.parrafo {
    color: green;
}

p {
    color: red;
}

* {
    color: blueviolet;
}
    </style>
</head>
<body>
    <p 
        class="parrafo" 
        id="primer-parrafo"
    >
        Hola Mundo
    </p>
    <p id="mensaje">Estoy en una pantalla chica!</p>
</body>
</html>

Compatibildad de Navegadores

Hablamos por un momento de los distintos niveles de compatibilidad que presentan las versiones de los navegadores para las diferentes media queries (y para cualquier otra característica de la plataforma web), y que nosotros como programadores vamos a decidir si esa compatibilidad es importante para nuestros proyectos.

Por ejemplo, la siguiente tabla se puede encontrar respecto a la regla @media de CSS en MDN: Tabla de Compatibilidad