Coding and Programming

Die Sache mit der doppelten Betonung | CSS-Tipps

Written by smirow

Ich hatte diesen Chef, der Liebe, Liebe, Liebe, Liebe um die Worte zu betonen. Das war lange bevor wir einen WYSIWYG-Editor verwendeten und ich diesen Mist von Hand programmieren musste.

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

(Lassen Sie uns nicht einmal auf die Farben eingehen, die er verwendet hat MOAR Akzent.)

Das Schreiben all dieser Markups hat noch nie Spaß gemacht. Der Aufwand spielt dabei natürlich keine Rolle. Aber ist es überhaupt eine gute Idee, überladene Inhalte mit dem Doppelten – oder mehr – hinzuzufügen? – Akzente?

Unterschiedliche Tags vermitteln unterschiedliche Schwerpunkte

Zu Beginn die <strong> Und <em> Tags sind für unterschiedliche Verwendungszwecke konzipiert. Wir haben sie in HTML5 wiederhergestellt, wo:

ALSO, <strong> verleiht dem Inhalt mehr Gewicht in dem Sinne, dass suggeriert wird, dass der darin enthaltene Inhalt wichtig oder dringend ist. Betrachten Sie eine Warnung:

Warnung: Der folgende Inhalt wurde als großartig gekennzeichnet.

Es könnte verlockend sein, dorthin zu gelangen <em> mach das selbe. Schließlich kann kursiver Text Aufmerksamkeit erregen. Tatsächlich ist es aber ein Hinweis darauf, den Inhalt stärker zu betonen. Hier sind zum Beispiel zwei Versionen desselben Satzes mit der Betonung an unterschiedlichen Stellen:

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

Beide Beispiele betonen Betonung, allerdings mit unterschiedlichen Worten. Und sie würden anders klingen, wenn man sie laut vorliest. Welches tut <em> eine großartige Möglichkeit, den Ton Ihres Schreibens auszudrücken. Dies verändert die Bedeutung des Satzes in einer Weise, die <strong> nicht.

Visueller Akzent vs. semantischer Akzent

Dies sind zwei Dinge, die Sie bei der Hervorhebung von Inhalten berücksichtigen müssen. Beispielsweise gibt es viele Fälle, in denen Sie Inhalte kursiv schreiben müssen, ohne die Bedeutung des Satzes zu beeinträchtigen. Aber diese können mit anderen Tags behandelt werden, die Kursivschrift machen:

  • <i>: Es ist der Klassiker! Vor HTML5 wurde dies zur Hervorhebung durchgehend mit Kursivschrift verwendet. Jetzt wird es nur noch verwendet, um Inhalte visuell kursiv zu formatieren, ohne ihre semantische Bedeutung zu ändern.
  • <cite>: Geben Sie die Quelle einer Tatsache oder Zahl an. (“Quelle: CSS-Tipps“)
  • <address>: Wird zum Markieren von Kontaktinformationen verwendet, nicht nur von physischen Adressen, sondern auch von E-Mail-Adressen und Telefonnummern. (
    [email protected]

    )

Mit wird es genauso sein <strong>. Anstatt damit Text zu formatieren, den Sie schwerer machen möchten, ist es besser, den klassischen Stil zu verwenden <b> Tag für Fettdruck, um zu vermeiden, dass Inhalten, die es nicht benötigen, zusätzliche Bedeutung beigemessen wird. Und denken Sie daran, dass einige Elemente wie Titel dank der Standardstile des Browsers bereits fett dargestellt sind. Es besteht kein Grund, weiter darauf zu bestehen.

Verwenden Sie Kursivschrift in unterstrichenem Inhalt (und umgekehrt)

Es gibt berechtigte Fälle, in denen Sie möglicherweise einen Teil einer bereits unterstrichenen Zeile kursiv schreiben müssen. Oder vielleicht einen Text hervorheben, der bereits kursiv geschrieben ist.

Ein Blockquote könnte ein gutes Beispiel sein. Ich habe oft gesehen, dass sie aus Stilgründen kursiv geschrieben wurden, obwohl die Standard-Browserstile dies nicht tun:

blockquote {
  font-style: italic;
}

Was wäre, wenn wir in diesem Zitat den Titel eines Films erwähnen würden? Dies sollte kursiv geschrieben werden. Es besteht kein Grund, sich mit Stress zu befassen, also a <i> Das Tag wird den Zweck erfüllen. Aber es ist immer noch seltsam, etwas kursiv zu schreiben, wenn es bereits so gerendert ist:

<blockquote>
  This movie’s opening weekend performance offers some insight in
  to its box office momentum as it fights to justify its enormous 
  budget. In its first weekend, <i>Avatar: The Way of Water</i> made 
  $134 million in North America alone and $435 million globally.
</blockquote>

In einer Situation, in der wir etwas in kursiv geschriebenen Inhalten wie diesem kursiv schreiben, sollten wir das auch tun Kursivschrift entfernen des verschachtelten Elements… <i> in diesem Fall.

blockquote i {
  font-style: normal;
}

Abfragen im Containerstil sind sehr nützlich, um alle diese Instanzen abzurufen, wenn wir sie erhalten:

blockquote {
  container-name: quote;
  font-style: italic;
}

@container quote (font-style: italic) {
  em, i, cite, address {
    font-style: normal;
  }
}

Dieser kleine Ausschnitt wertet das Zitat aus, um festzustellen, ob dies der Fall ist font-style ist eingestellt auf italic. Wenn ja, wird er dafür sorgen <em>, <i>, <cite>Und <address> Elemente werden als normaler Text gerendert, wobei die semantische Bedeutung, sofern vorhanden, erhalten bleibt.

Aber zurück zur Betonung der Betonung

Ich würde nicht nisten <strong> innen <em> so wie das:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

…oder Nest <em> innen <strong> stattdessen:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

Das Ergebnis ist gut! Dabei spielt es keine Rolle, in welcher Reihenfolge sie stehen … zumindest in modernen Browsern. Jennifer Kyrnin erwähnt, dass einige Browser nur das Tag anzeigen, das dem Text am nächsten liegt, aber ich habe dies in meinen begrenzten Tests nirgendwo festgestellt. Aber etwas, worauf man achten sollte!

Der Grund, warum ich eine Akzentform nicht in eine andere verschachteln würde, ist, dass es einfach nicht notwendig ist. Keine Grammatikregel erfordert dies. Wie bei Ausrufezeichen reicht eine Form der Hervorhebung aus, und Sie sollten diejenige verwenden, die Ihren Wünschen entspricht, sei es eine visuelle Hervorhebung, Gewichtung oder eine angekündigte Hervorhebung.

Und obwohl einige Screenreader in der Lage sind, hervorgehobene Inhalte anzukündigen, lesen sie das Markup nicht mit zusätzlicher Bedeutung oder Betonung. Soweit ich weiß, gibt es also auch keine zusätzlichen Vorteile hinsichtlich der Barrierefreiheit.

Aber ich möchte wirklich den ganzen Fokus haben!

Wenn Sie sich in einer Situation befinden, in der Ihr Chef wie meiner ist und will ALLE DER AkzentIch würde nach dem richtigen HTML-Tag für den Hervorhebungstyp suchen und dann die restlichen Stile mit einer Mischung aus Tags anwenden, die sich nicht auf die Semantik mit CSS auswirken, um alles zu berücksichtigen, was Browser-Stile nicht verarbeiten können.

<style>
  /* If `em` contains `b` or `u` tags */
  em:has(b, u) {
    color: #f8a100;
  }
</style>

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

Ich könnte es sogar mit dem machen <strong> Tag auch als Abwehrmaßnahme:

/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) {
  color: #f8a100;
}

Solange wir uns verteidigen, können wir Fehler identifizieren, bei denen Akzente in Akzenten verschachtelt sind, indem wir sie rot hervorheben oder so etwas:

/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) {
  background: hsl(0deg 50% 50% / .25);
  border: 1px dashed hsl(0deg 50% 50% / .25);
}

Dann würde ich wahrscheinlich dieses Snippet aus dem letzten Abschnitt verwenden, das den Standardkursivstil aus einem Element entfernt, wenn es in einem anderen kursiv geschriebenen Element verschachtelt ist.

Nichts anderes?

Vielleicht :

About the author

smirow

Leave a Comment