Il y a un balise en HTML. Je l'ai littéralement utilisé pour envelopper cette balise dans la phrase précédente - donc méta. C'est un élément en ligne par défaut qui désigne toute sorte de code. Il a des styles par défaut (agent utilisateur) qui appliquent une famille de polices monospace, ce qui ressemble à une bonne valeur par défaut (comme c'est vrai, la plupart du code est regardé en monospace).
/* User agent styles in all browsers */
code {
font-family: monospace;
}C'est probablement quelque chose que vous allez style avec le tag lui-même ainsi que dans vos feuilles de style. C'est juste l'un de ces éléments où il semble beaucoup plus naturel de l'utiliser uniquement brut, par opposition à le réinitialiser à aucun style et à choisir des styles avec une classe.
/* 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 */
}Sur ce site en ce moment (v18), j'applique quelques styles modestes et j'en étale certains dans des éléments textuels:
/* For all */
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;
}Une chose avec laquelle cela aide est, disons, ceci:
The .cool Class
Mes styles en feront toujours une belle police à espacement fixe, taillez-la de la même manière que l'en-tête, mais ne pas appliquer la couleur d'arrière-plan et les éléments de remplissage que j'aime pour le code dans le texte.
Le plus gros problème en matière de styles à portée bien que ce balisage très courant:
example code blockle
tag is important for displaying code blocks, as it respects whitespace in the HTML. But semantically, it just means “pre-formatted text.” If it’s a code block, there should be atag involved too. Buttag being the primary concern., remember, is an inline element. Plus, it’s highly likely that how you want it to look within a sentence is quite different from how you want it to look in a block.Jason was tweeting about this the other day:
There was a moment of confusion in the thread where:
/* this was working */ .post :not(pre) code { } /* and this was not */ :not(pre) code { }Le problème avec le deuxième sélecteur «à la racine» est que
:not(pre)correspondra à des choses (comme le) et appliquez ainsi ces styles. Dans le message (le premier exemple), il ne va sélectionner que des éléments - comme des balises de paragraphe, des images et autres - et donc se comporter de manière plus attendue. Je pense que c’est une bonne approche. Il s’agit simplement d’une autre façon d’effectuer le cadragebalise de sorte qu'elle n'obtienne pas certains styles lorsqu'elle se trouve dans des éléments spécifiques, car leI have lots code blocks on this site, so I try to be a bit extra protective. I specifically style the
elements that withintags with a lot of styles to get them how I want, and potentially fight against any other undesirable styles they may have. Stuff like:pre code { display: block; background: none; white-space: pre; -webkit-overflow-scrolling: touch; overflow-x: scroll; max-width: 100%; min-width: 100px; padding: 0; }Mes styles actuels sont un peu plus verbeux, même que cela. Il n'y a rien d'intelligent dans cet extrait. Je fais juste remarquer que j'applique un assez bon tas de styles aux blocs de code pour m'assurer qu'ils sortent correctement.
Je trouve intéressant comment le
élément est quelque peu unique dans la façon dont nous avons tendance à le styliser différemment en fonction du contexte.