0

Do I still need this in 2021?

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

Can I get an explanation for what these do?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Oxin
  • 63
  • 6
  • A reset removes browser default styling of blockquotes (block element) and quote (inline quote) tags. A great explanation of what these are here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q. I think you still need them, but a better answer is here: https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do – Nathaniel Flick Mar 15 '21 at 02:30
  • I know what a CSS Reset is... I need to know what those specific rules do... – Oxin Mar 15 '21 at 02:37
  • Try them in a codepen, you'll see they remove any extra space around the blockquote and q tags. – Nathaniel Flick Mar 15 '21 at 02:41

1 Answers1

0

That's only if you're looking to reset the CSS so those elements will inherit parent styles -- potentially up to body and html. Semantically, blockquote and q elements are used when citing another source according to W3schools.com.

From a user standpoint, you would want to style these as a recognizable quote but to answer the question of purpose: the code is to remove the indent and ensure the default browser styles are removed, your html page may include additional styling that particular code is removing.

See the unstyled blockquote and q below:

<blockquote>This is a blockquote element</blockquote>
<q>This is a q element</q>

A further breakdown of the CSS:

blockquote, q {
  quotes: none;
}

quotes is removing quote styling and

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

is removing pseudo elements :before and :after content.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
franklylately
  • 1,112
  • 10
  • 12
  • Why would I need to add quotes: none; ?? – Oxin Mar 15 '21 at 02:39
  • See the link https://developer.mozilla.org/en-US/docs/Web/CSS/quotes -- you can use `quotes` to change the automatically applied quote styling. Some devs may prefer adding their own quotes to the text `"This is a famous line"` versus `This is a famous line` (with quotation marks applied automatically) – franklylately Mar 15 '21 at 02:41
  • So if I understand correctly, semantically speaking, blockquote and q elements are used to cite another source. Whenever I am citing another source I should use the element. When I use the element, by default it has quotes that get added. So by using quotes: none; I am removing those quotes that are added by default. – Oxin Mar 15 '21 at 02:59
  • @Oxin `` is for inline quoting -- `

    The president commented, Please don't quote me on this.

    ` while `
    ` is a 'stand alone' element in between other elements.
     – franklylately Mar 15 '21 at 03:01
  • But why would it be in a CSS reset? – Oxin Mar 15 '21 at 03:13
  • Is it because each browser adds different types of quotes so by using quotes: none; I can remove those quotes added by default by the browser and from there I can add them manually? – Oxin Mar 15 '21 at 03:16
  • Essentially, yes. You'd want to 'reset' the CSS (also known as normalize) as it's a guarantee to create similar experiences though I'm not certain how much deviation is within contemporary browsers (Chrome [blink], Edge[blink], Firefox [gecko], Safari[webkit]) if any at all. Since it's part of a CSS reset though, there is probably data/experiences behind its use for older generation browsers (IE11 and lower). Depending on audience, 1-10% of users are still using IE11 and far less using lower. You may still require it to address them. https://gs.statcounter.com/browser-market-share – franklylately Mar 15 '21 at 03:57