Los desarrolladores que estén familiarizados con CSS deben conocer la tecnología de reemplazo de imágenes y su importancia. Dave Shea hizo un resumen detallado de esto en uno de sus artículos. Vea el excelente resumen de Dave Shea . Paul Young analiza todas las ventajas y desventajas. , se propone un nuevo método denominado "Método del estado". Este artículo presentará el principio de este método en detalle:
Desventajas de los métodos existentes:
Nuevo método de reemplazo de imágenes:
La nueva tecnología de reemplazo de imágenes debe implementarse con la ayuda de js, pero es fácil de implementar. Solo necesita introducir una pequeña parte de js en la cabeza. Una vez que se ejecuta js, se agregará ".image-on" a la regla de respuesta. Siempre que la imagen del cliente no esté deshabilitada, la regla tendrá efecto. La siguiente es una declaración aplicada al "método de campo de estado" h1:
La primera regla siempre tiene efecto, la segunda sólo tiene efecto cuando la imagen no está deshabilitada. "text-indent" hace que el texto se desplace fuera de la pantalla. "overflow:hidden" se utiliza principalmente para colocar el punto de anclaje debajo de FF para que su foco se desplace fuera de la pantalla cuando se hace clic en él.
La segunda regla está incluida en la pantalla @media y se utiliza principalmente para garantizar que el reemplazo de la imagen solo se produzca en el lector de pantalla y no en el estado de impresión. Si no se hace esto, cuando se imprima la página, la mayoría de los usuarios verán un gran espacio en lugar de texto significativo.
La tecnología es rápida de realizar. Debido a que el texto está desplazado de la pantalla, la imagen puede contener elementos transparentes para que no pueda ver ningún texto a través de la imagen misma. La ejecución de Js es muy rápida, casi instantánea, y aprovecha al máximo las características del propio navegador.
Análisis de métodos
El "método de campo de estado" es un método para hacer que las reglas CSS entren en vigor rápidamente en un estado supuesto, siendo el fondo del contexto el documento, evitando así que el navegador atraviese el árbol DOM. Hay dos razones para aplicar el "enfoque de dominio estatal":
El "método de campo de estado" agrega una clase al html mediante el siguiente script.
document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp(" \b " + scope + " \b "), "");
};
Hay un pequeño problema con este js. La función de cambio no tiene efecto en la página de muestra. Lo revisé nuevamente.
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};
Los métodos hasClass, addClass y removeClass anteriores toman prestados los métodos proporcionados por "Técnicas profesionales de JavaScript". Si ha utilizado jquery, el método será más sencillo.
El "campo de estado" se puede cambiar mediante los siguientes métodos:
if (condition == true) {
document.enableStateScope("myScope", true);
}
Si el "campo de estado" está "activado", el nombre del campo de estado se agregará al selector de la regla. La siguiente regla cambiará el color del ancla a azul cuando la condición sea verdadera.
a { color: red; }
.myScope a { color: blue; }
Como era de esperar, la técnica de reemplazo de imágenes de dominio de estado funciona verificando si la imagen está deshabilitada. Si no está deshabilitado, se activa el campo de estado "imagen encendida", lo cual es sencillo.
h1 {
ancho: 100px;
altura: 50 píxeles;
}
@pantalla de medios {
.images-en h1 {
sangría de texto: -10000px;
imagen de fondo: url(imagen.png);
desbordamiento: oculto;
}
}