Lesser known properties: quotes

Welcome to the first part of the hopefully several part series about lesser known CSS properties. Let's start the series with one of only a small handful of properties described in the Generated Content Module of the CSS Spec: quotes.

The <q> element

Per default, when you use the <q>-element, which is the inline equivalent of the much better known <blockquote>-element, the browser uses the language appropriate quotation marks, depending on the lang-attribute somewhere in the DOM-tree.

If you didn't know that, don't worry! Learn from your mistakes. Or, as the Japanese proverb goes, 七転び八起き, which means Fall down seven times, stand up eight. As you can see, the Japanese quote automatically used kagi-kakko, or hook-brackets, as marks. Whereas the English translation used the English double-quotes.

It can even do layered quotes, quotes-within-quotes. For example, to quote Lin-Manuel Miranda in Hamilton: Congress writes: George, attack the British forces!. As you can see, the appropriate second-level quotation marks are used.

For more about the appropriate use of the <q>-Element and also the cite-attribute, I can recommend this HTML5-Doctor article.

The quotes property

Now, here's an example of the quotes property:

.bracket-quotes{
    quotes: "(" ")" "[" "]" "{" "}"
}

This is a Quote with three levels, nested into each other . As you can see, you can change the quotations marks which are being used by each level with this property. Instead of class you could, of course, also use the lang-attribute as a selector, just like any other CSS-property. From a technical standpoint, each quote is being inserted using the ::before and ::after pseudo-elements, respectively.

As for why you would do that: For example, if you are displaying quotes in a German-language document, you might want to use « and » as the quotation marks, rather than the default German-language double quotes („ “). But, in any case, it is always good to know your tool belt as a frontend developer.