Learn modern, advanced techniques for creating responsive user interfaces

Unleashing the Power of CSS

Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces

Preface

Many new and improved features have landed in CSS over the past few years, and a cross-browser effort to improve compatibility has made the language more stable than ever! Let’s review these enhancements to layout, responsive design, element styling, properties, and selectors, and also peek at upcoming features.

What You've Missed in CSS Land

Heralded as “the parent selector”, the :has() pseudo-class has far greater range than just styling an element’s ancestor. With its availability in Safari 15.4+ and Chromium 105+, and behind a flag in Firefox , now is a great time to become familiar with :has() and its use cases.

Using the CSS :has() Selector for Scaling Reusable Components

Practical Uses of Container Queries

Broadly speaking, the classic methodology of “responsive design” is focused around specific device breakpoints. That is, layouts are designed to adjust principally to fit nicely into the viewports of mobile, tablet and desktop devices.

Community Questions