Met de quoteseigenschap in CSS kun je specificeren welke soorten aanhalingstekens worden gebruikt wanneer aanhalingstekens worden toegevoegd via de regels content: open-quote;of content: close-quote;. Hier is hoe het te gebruiken:
q ( quotes: "“" "”" "‘" "’"; ) q::before ( content: open-quote; ) q::after ( content: close-quote; )In het bovenstaande voorbeeld worden vier waarden toegevoegd. Een set dubbele slimme aanhalingstekens en een paar enkele slimme aanhalingstekens. Het is enigszins verwarrend omdat elk citaat tussen aanhalingstekens is gewikkeld - maar dat zijn slechts programmatische aanhalingstekens (kan dubbel (") of enkel (') zijn), zoals overal in CSS. De aanhalingstekens erin zijn wat er op de pagina wordt gebruikt.
Er zijn vier waarden voor de eigenschap content die betrekking hebben op de quoteseigenschap: open-quote, close-quote, no-open-quote, en no-close-quote.
Het eerste paar aanhalingstekens in de waarde zijn de aanhalingstekens voor openen en sluiten. Het tweede paar zijn de openings- en sluitingsaanhalingstekens voor aanhalingstekens die een niveau diep zijn genest in andere aanhalingstekens die ook de quoteseigenschap gebruiken. Bijv. Een element binnen een element.
Enkele voorbeelden:
Dubbele aanhalingstekens op het eerste aanhalingsteken, enkele aanhalingstekens op het tweede.
Een quote met Franse quotes.
U kunt zoveel paren aanhalingstekens in de quoteseigenschap plaatsen als u wilt. Maar je hoeft er niet meer dan twee in te voeren, want voor elk extra citaat worden de quoteswaarden gewoon vanaf het begin herhaald .
De no-open-quoteen no-close-quotewaarden stoppen met de citaten uit het weergeven, maar ze blijven het citaat diepte te verhogen.
Meer informatie
- Gebruik het
element niet tenzij u iemand citeert. In alle andere gevallen (ironie, sarcasme of waar je ook aanhalingstekens voor gebruikt) gebruik je gewoon de aanhalingstekens zelf (zoals deze: ""). - Dit is niet alleen voor het
element, het zou ook kunnen zijnook of iets anders. - Quotes & accenten
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 11+ | Ieder | 1.5+ | 4+ | 8+ | Ieder | Ieder |