Catégories
Astuces et Design

Styliser le code dans et hors des blocs

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 block

le

 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 a  tag involved too. But , 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 cadrage balise de sorte qu'elle n'obtienne pas certains styles lorsqu'elle se trouve dans des éléments spécifiques, car le

 tag being the primary concern.

I have lots code blocks on this site, so I try to be a bit extra protective. I specifically style the elements that within

 tags 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.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *