Behebung von YUI Reset CSS Problemen: Wie Sie Ihr <em> kursiv und <strong> fett halten

Bei der Webentwicklung verwenden Sie möglicherweise YUI’s Reset CSS für einen konsistenten Ausgangspunkt über verschiedene Browser hinweg. Während dies von Vorteil sein kann, kann es auch zu unerwartetem Verhalten in Ihrer Textformatierung führen. Ein häufiges Problem entsteht, wie das Reset CSS die <em> und <strong> Tags ändert, sodass sie nicht wie beabsichtigt angezeigt werden.

Dieser Blogbeitrag wird Sie Schritt für Schritt durch das Problem führen und eine klare Lösung bieten, damit Sie Ihre Webinhalte scharf aussehen lassen können.

Verständnis des Problems

YUI’s Reset CSS überschreibt die standardmäßige Browserformatierung, was manchmal zu Komplikationen führen kann:

Was passiert?

Die spezifische Zeile im YUI Reset CSS, die Probleme verursacht, ist:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

Infolgedessen verlieren sowohl die <em> als auch die <strong> Tags ihre Standardformatierung:

• <em> Tags, die kursiv sein sollen, erscheinen als normaler Text.
• <strong> Tags, die fett sein sollen, werden ebenfalls in einer Standard-Schriftstärke angezeigt.

Der Konflikt

Während Sie die Formatierung für diese Tags in Ihrem eigenen Stylesheet manuell zurücksetzen können, indem Sie:

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

intensiviert sich das Problem, wenn Sie beide Tags zusammen verwenden. Zum Beispiel:

<strong>Das ist fett, <em>und das ist kursiv, aber nicht fett</em></strong>

Hier funktioniert zwar Ihre Stilregel für <strong>, aber die universelle Reset CSS-Regel setzt die <em> zurück und negiert den kursiven Effekt.

Die Lösung

Um sicherzustellen, dass Ihre benutzerdefinierten Stile Vorrang vor dem YUI Reset CSS haben, müssen Sie Ihre CSS-Regeln anpassen. So können Sie das tun:

Schritt 1: Mit Spezifität überschreiben

Sie können die Spezifität Ihrer Stilregeln wie folgt erhöhen:

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

Diese Änderung stellt sicher, dass nicht nur die <strong> und <b> Elemente angemessen gestylt werden, sondern auch alle verschachtelten Elemente darin den gleichen Stil haben.

Schritt 2: Stile mit !important erzwingen

Wenn Sie immer noch ältere Browser wie IE7 unterstützen, müssen Sie möglicherweise Ihre Stile mit !important erzwingen. Dies kann so gemacht werden:

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

Schritt 3: Testen Sie Ihre Stile

Sobald Sie diese Änderungen implementiert haben, stellen Sie sicher, dass Sie Ihre Stile sowohl in modernen als auch in älteren Browsern testen, um zu bestätigen, dass alles wie erwartet angezeigt wird.

Hier ist ein schnelles Beispiel, das Sie ausprobieren können:

Beispiel CSS

/* YUI Stile */
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

/* Ihre Stile */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

Beispiel HTML

<strong>Fett</strong> - <em>Kursiv</em> - <strong>Fett und <em>Kursiv</em></strong>

Fazit

Indem Sie die in diesem Blog beschriebenen Schritte befolgen, können Sie das Standardverhalten, das durch YUI’s Reset CSS eingeführt wurde, erfolgreich überschreiben und Ihre <em> und <strong> Tags korrekt stylen.

Wenn Sie in Zukunft auf ähnliche Probleme stoßen, denken Sie daran, dass Spezifität und die !important Direktive mächtige Werkzeuge in Ihrem CSS Styling Arsenal sein können.

Viel Spaß beim Codieren!