new: snippet quotes

This commit is contained in:
Felipe da Silva
2018-03-23 11:45:46 -03:00
parent 92f67e78fe
commit 7225aadb00

43
quotes.md Normal file
View File

@ -0,0 +1,43 @@
### Quotes
With more sophisticated CSS you can greatly enhance your websites typography, an aspect that lots of people overlook. For instance, did you know that the quotation marks you are writing in your code are actually “primes” which are used for measurements and coordinates? When using “q” tags in HTML for quotations, you can automatically insert proper quotation marks (so-called smart quotes) before and after the quotation.
#### HTML
```html
<q> CSS is awesome! </q>
```
#### CSS
```css
q {
quotes: "“" "”";
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__sinppet-quotes">
<q> CSS is amazing! </q>
</div>
</div>
<style>
q {
quotes: "“" "”";
}
</style>
#### Explanation
1. `quotes: "“" "”";` quotes CSS property indicates how user agents should render quotation marks.
#### Browser support
<span class="snippet__support-note">94.5%<</span>
* http://smartquotesforsmartpeople.com/
<!-- tags: animation -->