<div>
  <lockquote>
    Citation sur la distribution de cupcake d'un article
  </lockquote>
  <cite> L'article </cite>
</div>

NB Si vous Google sur ce problème, vous pouvez rencontrer un article de médecin HTML5 de 2013 qui contredit une grande partie de ce qui est présenté ici. Cela dit, chaque fois qu'il est lié aux documents pour le soutien, les documents sont d'accord avec l'article que vous lisez actuellement plut?t que l'article HTML5 Doctor. Très probablement, les documents ont changé depuis que cet article a été écrit.

Hé, qu'en est-il de l'élément de figure?

Une fa?on de marquer une citation - et d'une manière qui pla?t aux divinités de code sémantique - est de mettre le blockquote dans un élément de figure. Ensuite, mettez l'élément CITE et toute autre information d'auteur ou de citation dans une FigCaption.

 <figure>
  <lockquote>
    Mais les navigateurs Web ne sont pas comme des serveurs Web. Si votre code back-end devient si grand qu'il commence à s'exécuter sensiblement lentement, vous pouvez y jeter plus d'alimentation informatique en augmentant votre serveur. Ce n'est pas une option sur le frontal où vous n'avez pas vraiment <em>un</em> environnement d'exécution - vos utilisateurs finaux ont leur propre environnement d'exécution avec ses propres contraintes autour de la puissance de calcul <strong>et</strong> de la connectivité réseau.
  </lockquote>
  <figcaption>
    & mdash; Jeremy Keith, <cite> Modèles mentaux </cite>
   figCaption>
 figure></figcaption></figure>

Bien que cela double le nombre d'éléments nécessaires, il y a plusieurs avantages:

1. Il est sémantiquement correct pour les quatre éléments.
2. Il vous permet à la fois d'inclure et d'encapsuler des informations sur l'auteur au-delà de la citation du nom de l'?uvre.
3. Il vous donne un moyen facile de coiffer la citation sans recourir à des divs, des portées ou une misère.

Rien de tout cela n'est pour le dialogue

Pas ! Ce sont des modaux qui attirent l'attention. Dialogue, comme dans les échanges de conversation entre les personnes qui s'expriment ou se tapent.

Ni ni ni ne doivent être utilisés pour le dialogue et les échanges similaires entre les haut-parleurs. Si vous marquez le dialogue, vous pouvez utiliser tout ce qui est le plus logique pour vous. Il n'y a pas de moyen sémantique de le faire. Cela dit, la spécification suggère des balises

et une ponctuation avec des balises ou pour désigner le haut-parleur et les balises pour marquer les directions de la scène.

Accessibilité des citations

D'après les recherches que j'ai faites, les lecteurs d'écran ne devraient pas avoir de problème pour comprendre les balises , ou approuvées par la désintégration sémantique.

Plus de ?fa?ons? de ?citer?

Vous pouvez ajouter des guillemets à un en utilisant les éléments PSS Pseudo. L'élément est livré avec des guillemets cuits afin qu'ils n'aient pas besoin d'être ajoutés, mais les ajoutant en tant que pseudo-éléments peuvent être une solution de contournement pour les navigateurs plus agés qui ne les ajoutent pas automatiquement. Comme c'est ainsi que les navigateurs modernes ajoutent les guillemets, il n'y a aucun danger d'ajouter des citations en double. Les nouveaux navigateurs écraseront les pseudo-éléments par défaut, et les navigateurs plus anciens qui prennent en charge les éléments pseudo ajouteront les citations.

Mais vous ne pouvez pas, comme moi, supposer que ce qui précède vous donnera toujours des devis d'ouverture et de fermeture intelligents. Même si la police prend en charge les citations intelligentes, les citations droites seront parfois affichées. Pour être en sécurité, il est préférable d'utiliser la propriété CSS Citations pour améliorer l'intelligence sur ces guillemets.

 Blockquote {
  citations: """ """ "'" "'";
} 

Citation à plusieurs niveaux

Voyons maintenant les niveaux de devis. La balise ajustera automatiquement les niveaux de devis.

Disons que vous êtes dans un domaine qui utilise la convention britannique d'utiliser des devis uniques. Vous pouvez utiliser la règle des citations CSS pour mettre la première et cl?turer les citations simples dans la liste. Voici un exemple des deux fa?ons:

Il n'y a pas de limite à la nidification. Ces éléments imbriqués pourraient même être dans un blockquote dans un Blockquote.

Si vous ajoutez des guillemets à un Blockquote, sachez que le Blockquote ne modifie pas le niveau de devis comme le fait une balise . Si vous vous attendez à avoir des devis dans un Blockquote, vous voudrez peut-être ajouter une règle de sélecteur descendant pour démarrer des éléments dans un Blockquote au niveau de devis unique (ou des devis doubles si vous suivez les conventions britanniques).

 Blockquote Q {
  citations: "'" "'" """ """;
}

Le dernier niveau de devis que vous réalisez se poursuivra à travers les niveaux ultérieurs de devis. Pour utiliser la convention double, simple, double, simple…, ajoutez plus de niveaux à la propriété CSS Quotes.

 q {
  citations: """ """ "'" "'" """ """ "'" "'" """ """;
}

Ponctuation suspendue

De nombreux experts de la typographie vous diront que suspendre les guillemets sur BlockQuotes semble mieux (et ils sont corrects). La ponctuation suspendue est, dans ce cas, des guillemets qui sont repoussés du texte afin que les caractères du texte s'alignent verticalement.

Une possibilité dans CSS consiste à utiliser une valeur légèrement négative sur la propriété Text-Indent. L'indentation négative exacte variera selon la police, alors assurez-vous de doubler l'espacement avec la police que vous finissez par utiliser.

 Blockquote {
  Texte-indent: -0,45em;
}

Il existe un moyen plus agréable de gérer cela en utilisant la propriété CSS de la Punctuation suspendue. Il n'est pris en charge que dans Safari au moment de la rédaction de cet article, nous devrons donc améliorer progressivement:

 /* Retomber */
Blockquote {
  Texte-indent: -0,45em;
}

/ * S'il y a une prise en charge, effacez le retrait et utilisez la propriété à la place * /
@Supports (pending-punctuation: d'abord) {
  Blockquote {
    Texte-indent: 0;
    suspension de suspension: premier;
  }
}

L'utilisation de la punctuation suspendue est meilleure car elle est moins délicate. Cela fonctionnera juste quand cela le pourra.

Pouvons-nous animer des guillemets?

Bien s?r, nous le pouvons.

Pourquoi vous auriez besoin de le faire, je ne suis pas totalement s?r, mais les guillemets dans une balise sont ajoutés sont des éléments pseudo dans la feuille de style UA, nous pouvons donc les sélectionner et les styliser - y compris l'animation - si nous en avons besoin.

Attendez, peut-être que nous avons simplement résolu le truc des citations d'air après tout.