Developers who are familiar with CSS must know the image replacement technology and its significance. Dave Shea has made a detailed summary of this in one of his articles. See Dave Shea's excellent summary . Paul Young is analyzing all existing methods. After the advantages and disadvantages, a new method is proposed and named "The State Method". This article will introduce the principle of this method in detail:
Disadvantages of existing methods:
New image replacement method:
The new image replacement technology needs to be implemented with the help of js, but it is easy to implement. You only need to introduce a small piece of js into the head. Once js is executed, ".image-on" will be appended to the response rule. As long as the client's image is not disabled, the rule will take effect. The following is a statement applied to h1 "status field method":
The first rule always takes effect, the second only takes effect when the image is not disabled. "text-indent" makes the text offset outside the screen. "overflow:hidden" is mainly used to place the anchor point under FF so that its focus is offset outside the screen when it is clicked.
The second rule is wrapped in @media screen and is mainly used to ensure that image replacement only occurs in the screen reader and not in the printing state. If this is not done, when the page prints, most users will see a large gap instead of meaningful text.
The technology is fast to perform. Because the text is offset from the screen, the image can contain transparent elements so that you cannot see any text through the image itself. Js execution is very fast, almost instantaneous, and it makes full use of the characteristics of the browser itself.
Method analysis
The "state field method" is a method to quickly make CSS rules take effect in an assumed state, with the context background being the document, thus avoiding the browser from traversing the DOM tree. There are two reasons for applying the "state domain approach":
The "state field method" appends a class to the html by using the following 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 "), "");
};
There is a small problem with this js. The switching function does not take effect in the sample page. I revised it again. The code is as follows:
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);
};
The above hasClass, addClass, and removeClass methods borrow methods provided by "Pro JavaScript Techniques". If you have used jquery, the method will be simpler.
"Status field" can be switched through the following methods:
if (condition == true) {
document.enableStateScope("myScope", true);
}
If "state field" is "on", the name of the state field will be appended to the rule's selector. The following rule will change the color of the anchor to blue when the condition is true.
a { color: red; }
.myScope a { color: blue; }
As you might expect, the state-domain image replacement technique works by checking to see if the image is disabled. If not disabled, the "image-on" status field is activated, which is straightforward.
h1 {
width: 100px;
height: 50px;
}
@media screen {
.images-on h1 {
text-indent: -10000px;
background-image: url(image.png);
overflow: hidden;
}
}