Revisiting styling techniques in 2021

By Chen Hui Jing / @hj_chen

The web changes quickly

Common frontend scenarios

1. Scroll snap
2. SVG icons
3. Masonry layout
4. Container queries

Scroll snap

Try it in your browser

SVG icons

Try it in your browser

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

• Practical CSS Scroll Snapping
• SVG use with External Reference, Take 2
• The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
• CSS filter generator to convert from black to target hex color
• Native CSS Masonry Layout In CSS Grid
• Container Query Proposal & Explainer

շնորհակալություն

https://chenhuijing.com

@hj_chen

@huijing

@huijing

Fonts are The Neue Black by Tré Seals & Tofino Pro by Alanna Munro.