Es gibt ein <code>-Tag in HTML. Ich habe es gerade verwendet, um dieses Tag im vorherigen Satz zu umschließen – so meta. Es ist ein standardmäßig inline-Element, das jede Art von Code kennzeichnet. Es hat Standard- (User-Agent-) Stile, die eine Monospace-Schriftfamilie anwenden, was eine gute Standardeinstellung zu sein scheint (da die meisten Codes tatsächlich in Monospace angezeigt werden).
/* User agent styles in all browsers */
code {
font-family: monospace;
}Es ist wahrscheinlich etwas, das Sie auch *mit dem Tag selbst* in Ihren Stylesheets gestalten werden. Es ist nur eines dieser Elemente, bei denen es weitaus natürlicher erscheint, es einfach roh zu verwenden, anstatt es auf keine Stile zurückzusetzen und sich für Stile mit einer Klasse zu entscheiden.
/* You'll probably do this: */
code {
/* custom styles */
}
/* Or maybe scope it to something like: */
article code {
}
/* It seems less common and more annoying to do this: */
code {
/* reset styles */
}
code.some-class {
/* opt-in styles */
}Auf dieser Website (v18) wende ich einige moderate Stile an und scope einige davon innerhalb von Textelementen
/* For all <code> */
code {
font-family: MyFancyCustomFont, monospace;
font-size: inherit;
}
/* Code in text */
p > code,
li > code,
dd > code,
td > code {
background: #ffeff0;
word-wrap: break-word;
box-decoration-break: clone;
padding: .1rem .3rem .2rem;
border-radius: .2rem;
}Eine Sache, bei der dies hilft, ist zum Beispiel dies
<h3>The <code>.cool</code> Class</h3>Meine Stile werden dies immer noch zu einer schönen Monospace-Schriftart machen, es auf die gleiche Größe wie die Überschrift setzen, aber die Hintergrundfarbe und den Polsterungs-Kram, den ich für Code in Text mag, *nicht* anwenden.
Das größere Problem, wenn es um gescoped Stile für <code> geht, ist jedoch dieser sehr übliche Markup
<pre><code>
example code block
</code></pre>Das <pre>-Tag ist wichtig für die Anzeige von Codeblöcken, da es Leerzeichen im HTML berücksichtigt. Aber semantisch bedeutet es einfach „vorformatierter Text“. Wenn es sich um einen Codeblock handelt, sollte auch ein <code>-Tag beteiligt sein. Aber <code> ist, denken Sie daran, ein Inline-Element. Außerdem ist es sehr wahrscheinlich, dass die Darstellung innerhalb eines Satzes ganz anders ist als die Darstellung in einem Block.
Jason hat neulich darüber getwittert
Es gab einen Moment der Verwirrung im Thread, wo
/* this was working */
.post :not(pre) code {
}
/* and this was not */
:not(pre) code {
}Das Problem mit dem zweiten „at the root“-Selektor ist, dass :not(pre) Dinge (wie das <body>) antrifft und somit diese Stile anwendet. Innerhalb des Posts (das erste Beispiel) wählt es nur Elemente aus – wie Absatz-Tags und Bilder und dergleichen – und verhält sich somit erwartungsgemäßer. Ich denke, das ist ein guter Ansatz. Es ist nur eine alternative Möglichkeit, das Scoping auf diesem <code>-Tag vorzunehmen, sodass es keine bestimmten Stile erhält, wenn es sich innerhalb spezifischer Elemente befindet, da der <pre>-Tag das Hauptanliegen ist.
Ich habe viele Codeblöcke auf dieser Website, daher versuche ich, etwas extra vorsichtig zu sein. Ich style die <code>-Elemente, die sich innerhalb von <pre>-Tags befinden, gezielt mit vielen Stilen, um sie so zu gestalten, wie ich sie möchte, und um potenziell unerwünschte Stile zu bekämpfen. Dinge wie
pre code {
display: block;
background: none;
white-space: pre;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
max-width: 100%;
min-width: 100px;
padding: 0;
}Meine tatsächlichen Stile sind sogar etwas ausführlicher als die. An diesem Snippet ist nichts Raffiniertes. Ich weise nur darauf hin, dass ich eine ziemlich große Menge an Stilen auf Codeblöcke anwende, um sicherzustellen, dass sie richtig dargestellt werden.
Ich finde es interessant, wie das <code>-Element in Bezug auf die unterschiedliche Art und Weise, wie wir es je nach Kontext stylen, etwas einzigartig ist.
Der
:not(pre) code-Selektor, der<body>trifft, kann leicht mit:not(pre) > codebehoben werden. Dies zielt auf<code>-Blöcke ab, die keinen<pre>-Tag als unmittelbaren Elternteil haben, was die CSS von der Anforderung eines.post-Vorfahren entkoppelt. Natürlich funktioniert dasselbe fürpre > code, um<code>-Tags direkt innerhalb von<pre>-Tags zu treffen, unabhängig davon, wo sie sich befinden. Praktisch zum Einrichten gängiger Stileinstellungen wie dem Block am Ende Ihres Posts.Wenn ich
precodesehe, denke ich sofort an Filme aus den 1920er und 30er Jahren, die sogenannten Pre-Code-Jahre, bevor der Hays Code in Kraft trat.