7 CSS Features You Have Not Heard Of

In this video CJ shows 7 new and old CSS features that you might not of heard of.

00:00 Intro
00:30 hyphens
02:48 overflow-wrap
03:14 ::first-letter
03:53 image-rendering: pixelated
04:33 column-count
06:19 aspect-ratio
07:38 scroll-snap
08:51 Ask your questions!
09:03 Brought to you by Sentry
09:21 Thanks!

Syntax Episode 784 | https://syntax.fm/show/784/logging-blogging-testing-freelancing

hyphens Example | https://codepen.io/w3cj/pen/JjqLbZB?editors=1100 Can I Use Hyphens | https://caniuse.com/?search=hyphens

overflow-wrap Example | https://codepen.io/w3cj/pen/QWRmGVK?editors=1100 Can I Use wordwrap | https://caniuse.com/wordwrap

::first-letter example | https://codepen.io/w3cj/pen/yLWKVzg?editors=1100 Can I Use first-letter | https://caniuse.com/css-first-letter

image-rendering example | https://codepen.io/w3cj/pen/vYwRaqy MDN: image-rendering | https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering Can I Use image-rendering | https://caniuse.com/css-crisp-edges

columns example | https://codepen.io/w3cj/pen/QWRmBaO?editors=1100 MDN: columns | https://developer.mozilla.org/en-US/docs/Web/CSS/column-count Can I Use columns | https://caniuse.com/mdn-css_properties_columns

aspect-ratio example | https://codepen.io/w3cj/pen/ExzEpEM?editors=1100 MDN: aspect-ratio | https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio Can I Use aspect-ratio | https://caniuse.com/mdn-css_properties_aspect-ratio

scroll-snap example | https://codepen.io/w3cj/pen/PovRdoJ?editors=1100 Can I Use scroll-snap | https://caniuse.com/?search=scroll-snap

Correction: 5:25 Every column is rendered top to bottom.