HTML 5 es el último estándar de HTML que incluye muchos cambios y funciones nuevos. La compatibilidad con HTML 5 se puede detectar mediante el uso de tres enfoques:
Método 1: Comprobación de la compatibilidad con geolocalización: la API de geolocalización se agregó en HTML5. Se utiliza para identificar la ubicación del usuario. La presencia de esta API podría detectarse comprobando si la propiedad de geolocalización está presente en el objeto del navegador. Esto se hace usando navigator.geolocation que devuelve el objeto Geolocalización. Si el objeto existe, significa que el navegador admite HTML5.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to detect HTML 5 is supported
or not in the browser ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to detect HTML5 support
in the browser ?
</b>
<p>
Geolocation features is added in HTML5.
Checking the Geolocation supports.
</p>
<p>
Click on the button to check
for Geolocation support
</p>
<p>
Gelocation is supported:
<span class="output"></span>
</p>
<button onclick="checkGeolocation()">
Check for Geolocation
</button>
<script type="text/javascript">
function checkGeolocation() {
if (navigator.geolocation)
isSupported = true;
else
isSupported = false;
document.querySelector('.output').textContent
= isSupported;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Comprobación del elemento canvas: el elemento canvas se utiliza para representar formas o elementos de mapa de bits. Esta es una nueva característica añadida en HTML5.
El elemento canvas tiene un método getContext() que se utiliza para devolver el contexto de dibujo del elemento canvas. Devuelve un valor nulo si no se admite el identificador de contexto. Esta propiedad se puede utilizar para comprobar si se admite el elemento canvas.
Se crea un nuevo elemento de lienzo usando el método document.createElement(). El método getContext se comprueba accediendo a él en el objeto de entrada creado. El resultado de esta expresión se comprueba con una sentencia if. Si el resultado es verdadero, significa que el navegador admite HTML5.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to detect HTML 5 is supported
or not in the browser ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to detect that HTML5 is
not supported by JavaScript?
</b>
<p>
The Canvas features added in HTML5. Checking
for canvas support in HTML5.
</p>
<p>
Click on the button to check
for Canvas support
</p>
<p>
Canvas is supported:
<span class="output"></span>
</p>
<button onclick="checkCanvas()">
Check for canvas
</button>
<script type="text/javascript">
function checkCanvas() {
if (document.createElement('canvas').getContext)
isSupported = true;
else
isSupported = false;
document.querySelector('.output').textContent
= isSupported;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 3: Verificación de tipos de entrada de texto: HTML5 introdujo nuevos tipos de entrada que se pueden usar para ingresar diferentes formas de datos con validación. El elemento de entrada anterior a HTML5 no admitía estos nuevos tipos y usarlos volvería automáticamente al tipo de «texto» predeterminado. Esto se puede usar para verificar si el navegador es compatible con HTML5.
Se crea un nuevo elemento de entrada utilizando el método document.createElement(). Luego, el método setAttribute se usa en el elemento creado para establecer el tipo de entrada en cualquiera de los tipos de entrada más nuevos. El tipo de este elemento se comprueba mediante una declaración if para ver si coincide con el valor de ‘texto’ predeterminado. Si el valor no vuelve a la configuración predeterminada, significa que el navegador admite HTML5.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to detect HTML 5 is supported
or not in the browser ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to detect HTML5 support
in the browser ?
</b>
<p>
New input types are one of the
features added in HTML5. <br>
Checking for the new input types
means that HTML5 is supported.
</p>
<p>
Click on the button to check if
the new input types are supported
</p>
<p>
New input types supported:
<span class="output"></span>
</p>
<button onclick="checkInputType()">
Check for input types
</button>
<script type="text/javascript">
function checkInputType() {
let tempElement = document.createElement("input");
tempElement.setAttribute("type", "color");
// Check if the type attribute falls back
// to default text type
if (tempElement.type !== "text")
isSupported = true;
else
isSupported = false;
document.querySelector('.output').textContent
= isSupported;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA