La regla @charset especifica la codificación de caracteres utilizada en la hoja de estilo. El @charset debe ser el primer elemento en la hoja de estilo y si se definen varias reglas de @charset, solo se usa la primera. No se puede usar en el elemento <style> donde el conjunto de caracteres de la página HTML es relevante.
Sintaxis:
@charset "utf-8";
Valor de la propiedad: este parámetro acepta un valor único «juego de caracteres». Es útil cuando se utilizan algunos caracteres NO ASCII en el contenido. Hay tantas formas de definir la codificación de caracteres de una hoja de estilo. Todo el navegador sigue los siguientes métodos en las órdenes dadas.
- El valor del carácter de orden de bytes Unicode debe colocarse al principio del archivo.
- El valor viene dado por el atributo charset del tipo de contenido: encabezado HTTP o el equivalente en el protocolo utilizado para servir la hoja de estilo.
- Utilice la codificación de caracteres definida por el documento de referencia. Este método no se usa en HTML 5.
- Supongamos que el documento es UTF-8
Nota: La siguiente lista describe la codificación del juego de caracteres correcta e incorrecta:
@charset ‘iso-8859-15’; [Se utilizó un estilo de comillas incorrecto, no es válido] @charset “UTF-8”; [Más de un espacio no válido] @charset “UTF-8”; [No válido, hay un carácter (espacio) antes de la regla arroba] @charset “UTF-8”; [Establece la codificación de la hoja de estilo al Unicode UTF-8]
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @charset Rule</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<p>Learn</p>
<p>Contribute</p>
<p>Explore</p>
<center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la regla @charset se enumeran a continuación:
- Google Chrome 2.0
- Microsoft Edge 12.0
- Internet Explorer 5.5 superior
- Firefox 1.5
- Safari 4.0
- Ópera 9.0
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA