Checkpoint: Responsive and Robust

Question 1 of 5

• The rem version scales with the user’s default font size and zoom; the px version locks the range to the designer’s settings.
• The px version doesn’t work in Safari.
• rem renders faster than px.
• You can’t add px and vw inside clamp().

Question 2 of 5

• left: 8px
• right: 8px
• top: 8px
• It has no effect in RTL.

Question 3 of 5

• background: hsl(from var(--brand) h 0% l);
• background: oklch(from var(--brand) l 0 h);
• background: color-mix(in srgb, var(--brand), grey);
• filter: grayscale(1);

Question 4 of 5

• @media (prefers-color-scheme: light) around the panel’s rules.
• data-theme="light" on the panel.
• color-scheme: light;
• filter: invert(1);

Question 5 of 5

• :focus-visible { outline-offset: 56px; }
• .cookie-bar { opacity: 0.9; }
• body { padding-top: 56px; }
• html { scroll-padding-bottom: 56px; }