CSS Wizarding World

A presentation at MozKopdarJKT Dec 2018 in in Jakarta, Indonesia by Chen Hui Jing

Modern CSS allows us to do things we couldn’t before without hacking a whole bunch of extra code, or god forbid, Javascript. Those days were interesting, frustrating, and challenging for the frontend designers and developers of the world. But our lives just got easier, because these newer properties are almost like magic.

With the help of Firefox DevTools, it’s not only easier to debug layouts, we can make use of them to better understand and visualise how these newer properties behave as the viewport changes.


The following resources were mentioned during the presentation or are useful additional information.

  • CSS layout use-cases

    Examples and use-cases that demonstrate the behaviour of Flexbox, Grid and CSS shapes, and how Firefox DevTools can be used with them.

Buzz and feedback

Here’s what was said about this presentation on Twitter.