Autor: JunChen 24.5.2005 9:56:57
Originaltext: http://www.sovavsiti.cz/css/abbr.html
Übersetzung: JunChen
Copyright: Übersetzer JunChen. Bitte kontaktieren Sie den Übersetzer für den Nachdruck.
Einführung
wird verwendet, um entsprechende Abkürzungen auf Webseiten hinzuzufügen (Anmerkung des Übersetzers: Hier werden Abkürzungen und Abkürzungen separat betrachtet. Der Umfang von Abkürzungen ist größer als bei Abkürzungen. Verwenden Sie den Tag für den ersten Buchstaben von die Abkürzung). Markierte XHTML-Tags, der Windows IE-Browser unterstützt derzeit nicht das Im IE können Sie CSS auf das -Tag anwenden, aber nicht auf das -Tag.
Dieser IE-Fehler (oder diese Funktion) lässt einige Website-Mitarbeiter denken, dass das -Tag überhaupt nutzlos ist, und das ist offensichtlich falsch. Dieses Tag wird in Mozilla und Opera immer noch korrekt behandelt und ist für die Lesbarkeit und Semantik von Webinhalten sehr wichtig. Deshalb habe ich immer wieder nach einer Lösung gesucht und sie schließlich gefunden.
Lösung
Diese Methode basiert auf einer einfachen Tatsache: Auch wenn der IE das -Tag ignoriert, sind andere im -Tag verschachtelte Tags immer noch normal. Also habe ich ein -Tag in eingebettet, die Titel- und Klassenattribute von festgelegt und dann wurde mit dem -Tag identisch.
Codebeispiel
Sehen Sie sich den folgenden Code an, der ein einfaches Beispiel für eine Abkürzung ist:
CSSVergleichen Sie nun den geänderten Code:
CSS
Automatische Aktionen
Das manuelle Einbetten von in jedes -Tag ist offensichtlich unmöglich – sowohl langweilig als auch unnötig für Mozilla und Opera. Glücklicherweise gibt es jetzt eine automatisierte, clientseitige, skriptbasierte Problemumgehung.
Möglicherweise ist Ihnen aufgefallen, dass die abgekürzten Wörter auf dieser Seite (Anmerkung des Übersetzers: die Seite des ursprünglichen Autors) auch im IE angezeigt werden und CSS-Stile hinzugefügt werden (gepunktete Unterstreichung und ein fragezeichenförmiger Mauszeiger). Wenn Sie sich jedoch den Quellcode ansehen, werden Sie das oben erwähnte -Tag nicht finden. Dies ist einem einfachen JavaScript zu verdanken, das diese Seite lädt:
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = / ]*)>([^<]*)/g;
newBodyText = oldBodyText.replace(reg, ' $2');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};
isIE = (document.all) ? true:false;
Dieses Skript überprüft den Client-Browser und ersetzt alle -Tags durch die geänderte Version (eingebetteter ). Beachten Sie, dass wir reguläre Ausdrücke und innerHTML-Attribute anstelle der Standard-DOM-Methode verwenden müssen, da IE das -Attribut nicht über das DOM erhalten kann.
Stilisiert
Schauen Sie sich abschließend noch das auf dieser Seite verwendete CSS an. Ganz einfach:
abbr, acronym, span.abbr {
Cursor: Hilfe;
Rand unten: 1 Pixel gestrichelt #000;
}
Mozilla und Opera verwenden Abbr- und Akronym-Attributselektoren, IE verwendet Use Akronym und span.abbr. Unabhängig davon werden sowohl als auch
Andere
1. Vielen Dank an Michael Kusyn für die Bereitstellung einer JavaScript-Lösung.
2. Weitere Informationen zu , und dem Unterschied zwischen den beiden finden Sie in Craig Sailas HTML is not an acronym... (Evolt.org)
Willkommen zum Austausch von Meinungen und Kommentaren. Sie können eine E-Mail an marek@sovavsiti.cz senden.