CSS - Performance & Accessibility

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 15–20 minutes

Ensure your CSS performs well and remains accessible across devices and user needs.

Learning Objectives

• Optimize animations and paints; use contain and will-change judiciously.
• Respect motion and color preferences; maintain visible focus.

Details & Examples

• Prefer transform/opacity animations; avoid layout-triggering properties.
• contain limits layout/paint scope; will-change hints upcoming changes (use sparingly).
• Use @media (prefers-reduced-motion: reduce) to disable nonessential motion.

.tile{ contain: content; }
.btn:hover{ will-change: transform; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

Checks for Understanding

1. Which CSS properties are safest to animate?

Exercises

1. Refactor an animation to use transform instead of changing top/left.
2. Add a reduced-motion media query that disables nonessential motion.