Comentario: La transformación HTML5 nos ha traído muchos atributos nuevos muy útiles, como marcador de posición, descarga, oculto, etc. Cada nuevo atributo nos trae nuevos métodos de control y efectos de control en los elementos de la página
En particular, hay un nuevo atributo que nos permite controlar las propiedades de múltiples elementos, a saber: el alcance. El atributo de alcance recién aparecido en la etiqueta de estilo puede hacer que el estilo CSS sea efectivo solo en elementos locales. Específicamente, los elementos infantiles del elemento que almacena este estilo de estilo entran en vigencia. La única diferencia con el estilo habitual es que se agrega un nuevo atributo de alcance:
<estilo alcance>
/ * Los estilos van aquí */
</style>
Los estilos con atributos de alcance se aplican solo al elemento actual y a sus hijos. Los estilos en línea siguen siendo una prioridad más alta que los estilos de alcance, por lo que es mejor evitar el uso de estilos en línea. Aquí hay una mezcla de varios estilos juntos para comparar su rango de eficiencia:
<div>
<estilo alcance>
div {borde: 1px sólido verde; margen-fondo: 20px; Min-aguja: 40px; }
.democontain {fondo: #f8f8f8; }
</style>
<div> </div>
<div>
<estilo alcance>
div {fondo: lightblue; borde: 1px azul sólido; }
</style>
<div> </div>
</div>
<div> </div>
</div>
En los estilos de alcance, puede usar las etiquetas legales de estilo CSS, como consultas de medios, como esta:
<estilo alcance>
@Media Only Screen y (Max-Width: 1024px) {
div {fondo: #000; }
}
</style>
Esta propiedad de alcance emergente es muy útil, especialmente para aquellos que crean plantillas, o usuarios de CMS, o algunos desarrolladores que no pueden operar todo el archivo de estilo. Pero debe tenerse en cuenta que algunos navegadores antiguos no admiten esta propiedad. En este caso, es posible que deba usar el complemento jQuery (https://github.com/thingsinjars/jquery-scoped-css-plugin) para compensar este problema.