Les développeurs qui connaissent CSS doivent connaître la technologie de remplacement d'image et son importance. Dave Shea en a fait un résumé détaillé dans l'un de ses articles. Voir l'excellent résumé de Dave Shea qui analyse toutes les méthodes existantes. , une nouvelle méthode est proposée et nommée « The State Method ». Cet article présentera en détail le principe de cette méthode :
Inconvénients des méthodes existantes :
Nouvelle méthode de remplacement d'image :
La nouvelle technologie de remplacement d'image doit être implémentée à l'aide de js, mais elle est facile à mettre en œuvre. Il suffit d'introduire un petit morceau de js dans la tête. Une fois js exécuté, ".image-on" sera ajouté à la règle de réponse. Tant que l'image du client n'est pas désactivée, la règle prendra effet. Voici une instruction appliquée à la "méthode du champ d'état" h1 :
La première règle prend toujours effet, la seconde ne prend effet que lorsque l'image n'est pas désactivée. "text-indent" décale le texte en dehors de l'écran. "overflow:hidden" est principalement utilisé pour placer le point d'ancrage sous FF afin que son focus soit décalé en dehors de l'écran lorsqu'on clique dessus.
La deuxième règle est enveloppée dans @media screen et est principalement utilisée pour garantir que le remplacement de l'image se produit uniquement dans le lecteur d'écran et non dans l'état d'impression. Si cela n'est pas fait, lors de l'impression de la page, la plupart des utilisateurs verront un grand espace au lieu d'un texte significatif.
La technologie est rapide à mettre en œuvre. Étant donné que le texte est décalé par rapport à l'écran, l'image peut contenir des éléments transparents afin que vous ne puissiez voir aucun texte à travers l'image elle-même. L’exécution de Js est très rapide, presque instantanée, et exploite pleinement les caractéristiques du navigateur lui-même.
Analyse de la méthode
La "méthode du champ d'état" est une méthode permettant de faire rapidement prendre effet aux règles CSS dans un état supposé, l'arrière-plan du contexte étant le document, évitant ainsi au navigateur de parcourir l'arborescence DOM. Il y a deux raisons d’appliquer « l’approche du domaine d’État » :
La "méthode de champ d'état" ajoute une classe au code HTML à l'aide du script suivant.
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 "), "");
};
Il y a un petit problème avec ce js. La fonction de commutation ne prend pas effet dans la page d'exemple. Je l'ai à nouveau révisé. Le code est le suivant :
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);
};
Les méthodes hasClass, addClass et removeClass ci-dessus empruntent les méthodes fournies par « Pro JavaScript Techniques ». Si vous avez utilisé jquery, la méthode sera plus simple.
Le « Champ d'état » peut être commuté via les méthodes suivantes :
if (condition == true) {
document.enableStateScope("myScope", true);
}
Si « champ d'état » est « activé », le nom du champ d'état sera ajouté au sélecteur de règle. La règle suivante changera la couleur de l'ancre en bleu lorsque la condition est vraie.
a { color: red; }
.myScope a { color: blue; }
Comme on peut s'y attendre, la technique de remplacement d'image de domaine d'état fonctionne en vérifiant si l'image est désactivée. S'il n'est pas désactivé, le champ d'état "image activée" est activé, ce qui est simple.
h1 {
largeur : 100 px ;
hauteur : 50px ;
}
@écran média {
.images-sur h1 {
retrait du texte : -10 000 px ;
image d'arrière-plan : url (image.png);
débordement : caché ;
}
}