Wait, CSS can do that now?

By Chen Hui Jing / @hj_chen

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🦊 🥑 🧗 🏳️‍🌈
Chen Hui Jing
Jing
@hj_chen

CSS solutions for…

  1. Responsive text
  2. Scroll snap
  3. Sticky elements
  4. Masonry layout
  5. Container queries

Responsive text

Try it in your browser

Data on support for the css-math-functions feature across the major browsers from caniuse.com

Scroll snap

Try it in your browser

Data on support for the css-snappoints feature across the major browsers from caniuse.com

Sticky elements

Try it in your browser

Data on support for the css-sticky feature across the major browsers from caniuse.com

Masonry layout

Try it in your browser

This feature is only implemented in Firefox, and can be enabled by setting the flag layout.css.grid-template-masonry-value.enabled to true, in order to allow testing and providing of feedback.

Container queries

Try it in your browser

This feature is only implemented in Chrome Canary, and can be enabled with the "Enable CSS Container Queries" feature flag under chrome://flags, in order to allow testing and providing of feedback.

There is no one right way to do things.
Context is everything.

Further reading and references

Thank you :)

Websitehttps://chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font is GFS Artemisia by Takis Katsoulidis.