Ditch the

Media Queries

Modern CSS Replacements �for Better Responsive Code

Hello!

I’m Kathryn Grayson Nanz (@kathryngrayson)

​

• Developer Advocate at Progress.
• Front-end specialist focused on �UI, React, and accessibility.
• Started with an art degree, �somehow ended up here.
• Massive Star Trek fan (please talk to me about the last season of Picard).

​

Slides for this talk: https://rb.gy/wrkum

​

​

​

Transcript for this talk: https://rb.gy/1w9ld�

​

​

Both are also linked in the Stir Trek Discord #modern-css channel:�https://discord.gg/aDJJBhNUc6

Hot take: writing CSS is the best �part of web development

Everything new in CSS in 2022

What’s coming soon

Screenshot from State of CSS 2022:

https://web.dev/state-of-css-2022

​

The end of an era

Responsive Design Approaches

Device-based Breakpoints

Using media queries to serve entirely different versions of your site to people based on their device.

Content-based Breakpoints

Using media queries to adjust the layout when the content no longer fit comfortably on the page.

Fluid Design

Using modern CSS to set the size and layout of elements proportionally in relation to the width of the screen.

The Big Picture

01.

Using CSS Grid and Flexbox �for layout structuring

​

Comparing CSS Grid and Flexbox

CSS Grid

• Best for creating layouts with multiple rows and columns (full page layouts, dashboards, galleries, etc.) �
• Full modern browser support as of 2017 �
• Can create subgrids, nest grids within other grids, or used together with Flexbox

​

Flexbox

• Best for creating layouts for a single row or column (section layouts, nav menus, sidebars, etc.) �
• Full modern browser support as of 2013�
• Can nest flex elements within other flex elements, or use together with CSS Grid

The Grid

Grid and Margin

Margin

Grid

Columns, Rows, and Modules

Row

Column

Module

Spatial Zones

Spatial Zones

Gaps

Row Gaps

Column Gaps

CSS Grid Example

.grid-item-1 { � grid-column: 2 / span 4; � grid-row: 3 / span 2; �}

CSS Grid Example

.grid { � display: grid; � grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); �}��<div class="grid"> � <div></div> � <div></div> � <div></div> �</div>

CSS Grid Resources

• A Complete Guide to Grid, which offers a fantastic breakdown of all the ways you can customize your grid – including creating columns of varying widths, setting template areas, setting the gap between grid cells, and so much more. https://css-tricks.com/snippets/css/complete-guide-grid/�
• Grid By Example is my favorite place to start when I'm looking for a jumping-off point on creating a new grid structure.�https://gridbyexample.com/examples/�

All complaints and jokes �about how hard it is to �center elements in CSS �are now strictly forbidden

.vert-horiz-center { � display: flex; � justify-content: center; � align-items: center; �}

Flexbox Example

.flex { � display: flex; � flex-wrap: wrap; �}

.flex > div { � width: 300px �}��<div class="flex"> � <div></div> � <div></div> � <div></div> �</div>

Flexbox Resources

• Flexbox Froggy: a fun game to help you master what all the different properties do using some adorable frog illustrations.�https://flexboxfroggy.com/�
• FLEX: a simple, visual cheatsheet for you to reference as you work!�https://flexbox.malven.co/

​

The Middle Man

02.

CSS properties for responsive �elements on your page

​

Container Queries

A brand new way to apply conditional styles based on the size of a specific container element on the page.

Image from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Unnamed container example

<section class="about">� <h2>About Us</h2>� <div class=”flex”>� <img src=”X” alt=”X”/>� <p>Lorem ipsum...</p>� </div>�</section>

​

​

img { max-width: 80% }�h2 {font-size: 3rem; }�.flex { display: flex }�.about {� container-type: size; �}

@container(max-width: 600px){� img { max-width: 50%; }� h2 { font-size: 2rem; }� .flex { flex-wrap: wrap;}�}

HTML CSS

Container Types

• size: Based on both the inline and block dimensions of the container
• inline-size: Based only on the inline dimensions of the container
• normal: Not based on dimensions, but styles. This is laying the groundwork for style queries – which are not supported yet, so don’t worry about this one right now!

.about {� container-type: size [or] inline-size; �}

The container-type property can be set to one of three options:

Style queries are simply none of our business…yet

Named container example

<section class="about">� <h2>About Us</h2>� <div class=”flex”>� <img src=”X” alt=”X”/>� <p>Lorem ipsum...</p>� </div>�</section>

​

​

img { max-width: 80% }�h2 {font-size: 3rem; }�.flex { � container-type: size; � container-name: flex;� display: flex; �}�.about {� container-name: about; � container-type: size;�}

@container about (max-width: 600px){� h2 { font-size: 2rem; }�}

.about {� container: about / size;�}

HTML CSS

Or, use the shorthand:

New container query units

• cqw: 1% of a query container's width
• cqh: 1% of a query container's height
• cqi: 1% of a query container's inline size
• cqb: 1% of a query container's block size
• cqmin: The smaller of either cqi or cqb
• cqmax: The larger of either cqi or cqb

@container(max-width: 600px){� p { font-size: clamp(1rem, 1.5cqi, 2rem); }�}

​

There are new units designed specifically for use relative to containers:

aspect-ratio

.video-wrapper { aspect-ratio: 16/9; }

Did you know that there's a CSS property specifically designed for aspect ratios? �https://css-tricks.com/almanac/properties/a/aspect-ratio/

min and max-height, min and max-width

.img { � width: 100%; � max-width: 50%; � min-width: 200px; �}

You can often use clamp() instead, but these are still good tools to know!

Fully Functional

03.

Using the new(ish) math functions� to do the heavy lifting

​

clamp()

.img { � /* the format is `clamp(min value, base value, max value)` */ width: clamp(200px, 100%, 50%); �}

• Allows us to set a base value for a property, along with upper and lower caps to contain it as it adjusts. �
• One of our best tools to ditch the media queries, as it allows us to set responsive limits without needing to define specific breakpoints!

calc()

.child { � width: calc(100vw / 3); �}

• Allows us to do simple arithmetic with CSS units, right in the stylesheet. �
• Great for when you need to base something off a unit that's not absolute. �
• Supports CSS variables, for extra flexibility!

min() and max()

.img1 { � width: min(30%, 200px) �}

.img2 { � width: max(50vh, 800px) �}

• Works similarly to clamp(), but rather than setting a range in both directions, it focuses on just one at a time, allowing us to set the smallest (or largest) value depending on how the math works out.

All the Small Things

04.

Switching fixed units for responsive units

​

Absolute values: not even once

Viewport Units

.page-wrapper { � height: 100vh; � width: 100vw; �}

• Stands for ‘viewport width’ and ‘viewport height’. �
• A type of percentage-based unit: 1vw is 1% of the viewport width.�
• Updates automatically as the user resizes the screen.

Viewport Units

h1 { � font-size: 20vmin; �}

• A combo of vh/vw and min()/max()�
• Takes vh and vw measurements and returns the smallest or largest.�
• Updates automatically as the user resizes the screen.

Huzzah!

Small, Large, and Dynamic Viewport Units

body {� height: 100dvh;�}

​

Fine-tuned and specific viewport units for every situation you could ever encounter:�

• Large Viewport: lvh / lvw / lvmin / lvmax
• Small Viewport: svh / svw / svmin / svmax
• Dynamic Viewport: dvh / dvw / dvmin / dvmax

​

rem and em

.h2 { font-size: 2.5em }

p { font-size: clamp(1rem, 2.5vw, 2rem); }

• Ways of defining your font sizes relative to the size of other units
• For em, the size is relative to the font size of the parent element
• For rem, the size is relative to the root font size

You can combine vw with rem and clamp() to create a fluid typography system for your application.

ch and ex

sup { � line-height: 0; � position: relative; � vertical-align: baseline; � bottom: 1ex; �}

input { � width: 4ch; �}

• Ways of defining your font sizes relative to the size of other units
• For ex, the size is relative to the x-height of the first available font
• For ch, the size is relative to the width of the ‘0’ character in first available font. �

Percentages

.container { � width: 25%; �}

• Not new and exciting, but still a crucial tool for responsive layouts. �
• Should always be used over fixed units (like pixels) whenever possible.

Exceptions

05.

Cases when media queries are �still useful and worth considering

User Preference Media Features

@media (prefers-color-scheme: dark) {� .day.dark-scheme { � background: #333; � color: white; � }� .night.dark-scheme { � background: black; � color: #ddd; � }�}

​

• Allows us to adjust our content based on the user’s system-level settings.

Changing How Elements Work

@media only screen and (min-width: 600px) {� .nav-icon {� display: none;� }�}

• Still needed to hide/show elements on the page, change how elements work, etc.

Formatting for Print

@media print { � #header, #footer, #nav { � display: none; � } �}

​

• Allows us to specify print and remove or adjust styling so content will still look good on paper without impacting how it looks on screens.

Happy Coding!

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik

​

​