Aspas no CSS: a propriedade quotes, o q e blockquotes estilizados
Guia de aspas no CSS
Propriedade quotes do CSS: q, open-quote e aspas por idioma
Como funcionam a propriedade quotes do CSS, o elemento q e open-quote / close-quote, com um seletor de idioma ao vivo, níveis de aspas aninhadas e padrões de blockquote estilizados.
A propriedade quotes do CSS escolhe quais aspas o navegador desenha para o elemento q e para content: open-quote e close-quote. quotes: auto escolhe aspas adequadas ao atributo lang, uma lista de pares de strings define as suas próprias aspas por nível de aninhamento e quotes: none as remove. Um blockquote não recebe aspas a menos que você as adicione.
Valores de quotes
Valor
Efeito
Aspas adequadas ao idioma do elemento (definido com lang)
open-quote e close-quote não desenham nada
Um par, usado em todos os níveis de aninhamento
Par externo e depois par interno para aspas aninhadas
Aspas são um detalhe tipográfico que a maioria dos sites erra: aspas retas digitadas nos templates, aspas erradas para francês ou alemão, ou um sinal decorativo de blockquote que os leitores de tela leem em voz alta. Aqui a propriedade quotes aparece ao vivo em vários idiomas, junto com padrões limpos para citações em destaque e depoimentos.
Escolha um idioma no seletor. O exemplo usa quotes: auto, então o seu navegador escolhe as aspas a partir do lang.
Mude para aspas personalizadas e digite o seu próprio par externo e interno para ver o aninhamento funcionar.
Copie a regra quotes gerada.
Use os padrões de blockquote abaixo para depoimentos e citações em destaque.
Defina lang no elemento html, e em qualquer trecho em outro idioma, para que as aspas automáticas combinem com o texto.
Use o elemento q para citações curtas dentro do texto e blockquote para trechos mais longos que formam um bloco próprio.
Quando o aninhamento passa da quantidade de pares da sua lista, o último par é reutilizado.
Use no-open-quote e no-close-quote para manter os níveis de aninhamento equilibrados sem desenhar aspas, por exemplo ao longo de vários parágrafos.
Perguntas frequentes
Como removo as aspas de um elemento q?
Defina q { quotes: none; }. As aspas vêm do content padrão de ::before e ::after do navegador, open-quote e close-quote, e none faz com que eles não desenhem nada, mantendo o significado do elemento.
Por que o blockquote não mostra aspas?
Os navegadores só adicionam aspas automaticamente ao q. Um blockquote vem recuado por padrão, mas sem aspas. Adicione blockquote::before { content: open-quote; } e um ::after correspondente, ou um sinal decorativo, se o seu design pedir.
Como uso aspas curvas no CSS?
Escreva os caracteres diretamente em uma folha de estilo UTF-8, quotes: "“" "”" "‘" "’";, ou como escapes, por exemplo "\201C" e "\201D". Os escapes são úteis quando um editor ou uma etapa de build estraga caracteres não ASCII.
As aspas geradas pelo CSS são lidas pelos leitores de tela?
Conteúdo gerado pode ser anunciado pelas tecnologias assistivas, então trate as aspas como texto. Um sinal decorativo enorme fica melhor desenhado com uma imagem de fundo, um SVG com aria-hidden ou content com texto alternativo vazio: content: "“" / "";.
Como funcionam os níveis de aninhamento
Cada open-quote aumenta em um a profundidade de aninhamento e cada close-quote a diminui. A profundidade zero usa o primeiro par de quotes, a profundidade um usa o segundo, e assim por diante. É por isso que um q dentro de outro q passa automaticamente de aspas duplas para simples em inglês.
Como a profundidade é acompanhada no documento inteiro, um open-quote sem par deixa todas as citações seguintes um nível mais fundo do que deveriam. Faça os pares com cuidado nos pseudo-elementos ou use as variantes no- para ajustar a profundidade sem desenhar nada.
Aspas retas versus aspas tipográficas
As " e ' do teclado são sinais de máquina de escrever. O texto impresso usa aspas curvas que apontam para a citação: “ e ” para as duplas, ‘ e ’ para as simples. Gerar as aspas com CSS as mantém consistentes mesmo quando quem edita o conteúdo digita aspas retas.
Outros idiomas usam formas e posições diferentes: aspas angulares « » em francês, baixa e alta „ “ em alemão, colchetes de canto 「 」 em japonês. quotes: auto com o lang certo resolve isso para o q sem CSS específico por idioma.
Caracteres de aspas e os seus escapes CSS
Aspas comuns com os seus code points Unicode
Sinal
Nome
Escape CSS
Aspas duplas de abertura e fechamento
Aspas simples de abertura e fechamento
Aspas angulares duplas (guillemets)
\AB \BB
Aspas angulares simples
Aspas duplas baixas (low-9)
Colchetes de canto
Aspas personalizadas para citações aninhadas
Dois níveis com escapes
O q externo usa aspas duplas, o q dentro dele usa aspas simples. Os escapes produzem aspas curvas.
Padrões de blockquote estilizados
Citação em destaque com sinal decorativo e legenda
O sinal grande usa texto alternativo vazio, então não é lido em voz alta. figure e figcaption ligam a citação à sua fonte. Navegadores sem a sintaxe de texto alternativo ignoram essa regra e não desenham o sinal.
Blockquote que desenha aspas reais de abertura e fechamento
open-quote e close-quote participam do aninhamento, então um q dentro deste blockquote recebe as aspas internas.