En el mundo moderno de hoy, hay muchas funciones disponibles en HTML y CSS y también muy pocos navegadores admiten todas las funciones. A veces es una tarea muy difícil de encontrar si nuestro navegador web admitirá estas funciones o no. Entonces, aquí Modernizr entra en escena, es muy útil en estos escenarios. En este artículo, veremos qué es HTML5 Modernizr y cómo podemos usarlo.
HTML5 Modernizr: es una biblioteca de JavaScript que detecta qué características de las tecnologías web de última generación son compatibles con nuestro navegador web. Se están introduciendo muchas funciones nuevas en HTML y CSS, pero muchos navegadores no son compatibles con estas nuevas funciones. Por lo tanto, Modernizr permite a los desarrolladores probar algunas de las nuevas tecnologías en HTML y CSS y luego proporcionar alternativas para los navegadores que no las admiten. Por ejemplo, si un navegador no admite un video GIF, nos gustaría mostrar un video mp4. WE puede crear reglas CSS basadas en la función y estas reglas se aplicarían automáticamente en la página web si el navegador no admite una nueva función.
Sintaxis:
Descargue el archivo de la biblioteca Modernizr y luego agregue ese archivo a la etiqueta de secuencia de comandos de su página HTML.
<script src="modernizr-custom.js"></script>
Ejemplo: en este ejemplo, verificaremos si nuestro navegador admite video HTML5 o no usando Modernizr.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Modernizr Browser Check</title>
<!-- Modernizr script added, You can download
it from modernizr official page-->
<script src="modernizr-custom.js"></script>
</head>
<body>
<h1>HTML5 Modernizr Browser Check</h1>
<!-- Here we are checking video support
in our browser using js script with
the help of Modernizr -->
<script>
if (Modernizr.video) {
// If you browser supports video
// then this code will execute
alert("HTML5 Video is supported in your browser");
}
else {
// If our browser doesn't supports
// video then this code will execute
alert("HTML5 Video is not supported in your browser");
}
</script>
</body>
</html>
Salida: estoy usando la última versión de Google Chrome. Entonces, Mi navegador admite video HTML5. Si va a utilizar la versión anterior, recibirá una alerta de que su navegador no es compatible.
producción
Publicación traducida automáticamente
Artículo escrito por iamabhijha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA