Responsive CSS and Pseudo-elements — Allowed

This gauge covers Chapter 11 after CSS Grid.

Learning goal

Adapt layouts at content-driven breakpoints, keep images usable at changing widths, crop images deliberately, serve resolution- and format-appropriate sources, add decorative generated boxes, and create a native responsive navigation disclosure without moving essential content out of the HTML.

Inherited tools

Everything allowed through ../grid/allowed.md remains available.

details
summary
aria-label="Menu" on an icon-only summary
list-style: none on summary
summary::-webkit-details-marker with display: none

Use them together for a native disclosure menu. The optional open attribute may set its initial state, but responsive navigation should normally begin closed.

Media queries

@media with width features: min-width, max-width, and Media Queries Level 4 range syntax such as (width >= 48rem) or (width < 48rem)
Breakpoint values may use inherited length units
Start with a usable narrow layout, then use min-width or equivalent range enhancements when practical

Responsive images

max-width: 100%
width: 100%
height: auto
object-fit: cover, contain
aspect-ratio with positive ratios such as 16 / 9, 4 / 3, and 1 / 1
Intrinsic width and height attributes on <img> (CLS prevention)
srcset and sizes on <img>
<picture> with <source> (srcset, type, media) and a fallback <img>
loading="lazy" / loading="eager" and decoding="async" on <img>

Pseudo-elements

::before
::after
content with an empty string or short decorative text

Pseudo-elements accept inherited presentation and layout properties. A positioned pseudo-element needs the same containing-block reasoning as any other positioned box.

Learning rules

Choose a breakpoint where the content needs a different layout, not from a device-name list.
Keep the base rules usable before adding a media query.
Put media-query overrides after the base declarations they change.
max-width: 100% prevents an image from exceeding its container; height: auto preserves its intrinsic proportions.
Use aspect-ratio when the layout needs a predictable image slot.
object-fit: cover fills that slot and may crop; contain shows the whole image and may leave empty space.
Pair intrinsic width/height with responsive CSS so the browser reserves space before the file loads.
Use srcset/sizes when one image has multiple resolutions; use <picture> when art direction or format (type="image/webp") must change.
Prefer loading="lazy" for below-the-fold images; keep the LCP candidate eager.
::before and ::after create generated child boxes. Their content property is required for them to appear.
Keep essential words, instructions, status, and controls in HTML. Generated content is presentation, not a reliable replacement for document content.
Use details and summary for a simple no-JavaScript disclosure instead of disguising a checkbox as a menu control.
Prefer a visible Menu label. If the control must show only the hamburger, give summary the accessible name aria-label="Menu" and hide its native marker without changing its disclosure behavior.
At the chosen breakpoint, expose either the desktop links or the disclosure menu so duplicate navigation is not presented simultaneously.
CSS alone does not close the disclosure after navigation or an outside click. Add JavaScript later only if those behaviors become requirements.

Not allowed

JavaScript
Container queries and other conditional at-rules (see Chapter 25)
Media features other than width (min-width, max-width, and width range comparisons) in this chapter — prefers-* arrives in Variables / Container Queries follow-ons
Essential content available only through content
Inline styles
Any HTML tag or CSS property not inherited or listed above

Rules to lean on

Rules 2, 15–19, 33, 39, 54–59, 72–80, 89–98, 99–110, and the performance / image rules added for Core Web Vitals.