css - style - pseudo class required

Cómo escribir fallbacks css para vh vw

Question

¿Alguien puede explicar cómo funcionan los fallbacks en CSS? Estoy intentando configurarlo para vh y vw y claramente no lo entiendo ...

Aquí está mi intento de solución, que no funciona. La propiedad de altura se toma cada vez.

CSS:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */

Answer 1

Tu Código (y por qué no funciona)

Mirando tu código original, tengo un par de comentarios:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */

Los prefijos, el bit -webkit- , solo se aplican si hay una propiedad prefijada con ese nombre. Altura no tiene una propiedad prefijada, por lo que los navegadores simplemente ignoran esas declaraciones.

(Sugerencia: puede verificar algo como MDN para ver qué propiedades existen).

Solución:

En este caso, podemos aprovechar el hecho de que, si los navegadores encuentran una propiedad o un valor que no comprenden, lo ignoran y continúan. Entonces, lo que estás buscando es algo como:

height: 41px;
height: 5.2vh;

El navegador ve la height: 41px , como se esperaba. Analiza eso, y sabe qué hacer con él. Entonces, ve height: 5.2vh . Si el navegador entiende la unidad vh , usará eso en lugar de 41px, como el color: blue; color: red; color: blue; color: red; Terminaría siendo rojo. Si no entiende la unidad vh , la ignorará y, como definimos primero el repliegue, el hecho de que el navegador ignore la unidad vh no importa.

¿Tener sentido?

Answer 2

Coloque su caída por encima de usted otros valores. Si los valores que prevalecen no funcionan en un navegador, se usa el primer valor.

 height: 41px; /* The Fallback */
height: 5.2vh;

Answer 3

Las propiedades -moz-height , -webkit-height , -o-height y -ms-height no son propiedades de extensión válidas, no están definidas por ninguna de las implementaciones de UA.

height: 41px como valor ganador porque no se reconoce en absoluto -webkit-height (en Chrome o Safari), pero la height: 41px es.

Querrás usar esto:

height: 41px;
height: 5.2vh;

... con este código, los navegadores primero reconocerán la height: 41px , luego si reconocen la height: 52.vh que se aplicará, de lo contrario, volverán al último valor "bueno": 41px .