Entwickler, die mit CSS vertraut sind, müssen die Bildersetzungstechnologie und ihre Bedeutung kennen. In einem seiner Artikel analysiert Dave Shea alle vorhandenen Methoden Es wird eine neue Methode mit dem Namen „State Method“ vorgeschlagen. In diesem Artikel wird das Prinzip dieser Methode ausführlich vorgestellt:
Nachteile bestehender Methoden:
Neue Methode zum Ersetzen von Bildern:
Die neue Bildersetzungstechnologie muss mit Hilfe von js implementiert werden, ist aber einfach zu implementieren. Sie müssen nur einen kleinen Teil von js in den Kopf einführen. Sobald js ausgeführt wird, wird „.image-on“ an die Antwortregel angehängt, solange das Bild des Clients nicht deaktiviert ist. Die folgende Anweisung wird auf die „Statusfeldmethode“ von h1 angewendet.
Die erste Regel greift immer, die zweite nur, wenn das Bild nicht deaktiviert ist. „text-indent“ versetzt den Text außerhalb des Bildschirms. „overflow:hidden“ wird hauptsächlich verwendet, um den Ankerpunkt unter FF zu platzieren, sodass sein Fokus beim Klicken außerhalb des Bildschirms verschoben wird.
Die zweite Regel ist in @media screen eingebettet und wird hauptsächlich verwendet, um sicherzustellen, dass die Bildersetzung nur im Bildschirmlesegerät und nicht im Druckzustand erfolgt. Wenn dies nicht geschieht, sehen die meisten Benutzer beim Drucken der Seite eine große Lücke anstelle von aussagekräftigem Text.
Die Technologie ist schnell einsatzbereit. Da der Text vom Bildschirm abgesetzt ist, kann das Bild transparente Elemente enthalten, sodass Sie durch das Bild selbst keinen Text sehen können. Die Ausführung von Js erfolgt sehr schnell, nahezu augenblicklich und nutzt die Eigenschaften des Browsers selbst voll aus.
Methodenanalyse
Die „Statusfeldmethode“ ist eine Methode, um CSS-Regeln schnell in einem angenommenen Zustand wirksam werden zu lassen, wobei der Kontexthintergrund das Dokument ist und so verhindert wird, dass der Browser den DOM-Baum durchläuft. Es gibt zwei Gründe für die Anwendung des „State-Domain-Ansatzes“:
Die „Statusfeldmethode“ hängt mithilfe des folgenden Skripts eine Klasse an den HTML-Code an.
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 "), "");
};
Es gibt ein kleines Problem mit diesem js. Die Umschaltfunktion wird auf der Beispielseite nicht wirksam. Der Code lautet wie folgt:
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);
};
Die oben genannten Methoden „hasClass“, „addClass“ und „removeClass“ leihen sich Methoden aus, die von „Pro JavaScript Techniques“ bereitgestellt werden. Wenn Sie jquery verwendet haben, ist die Methode einfacher.
Das „Statusfeld“ kann über die folgenden Methoden umgeschaltet werden:
if (condition == true) {
document.enableStateScope("myScope", true);
}
Wenn „Statusfeld“ auf „Ein“ gesetzt ist, wird der Name des Statusfelds an den Selektor der Regel angehängt. Die folgende Regel ändert die Farbe des Ankers in Blau, wenn die Bedingung erfüllt ist.
a { color: red; }
.myScope a { color: blue; }
Wie zu erwarten ist, überprüft die State-Domain-Image-Ersetzungstechnik, ob das Image deaktiviert ist. Wenn es nicht deaktiviert ist, wird das Statusfeld „Bild ein“ aktiviert, was unkompliziert ist.
h1 {
Breite: 100px;
Höhe: 50px;
}
@media-Bildschirm {
.images-on h1 {
Texteinzug: -10000px;
Hintergrundbild: url(image.png);
Überlauf: versteckt;
}
}