1. Focus States
Focus states improve accessibility by providing visual feedback when users navigate via keyboard. Use :focus and :focus-visible for better control.
CSS Example
.btn {
padding: 10px 20px;
border: 2px solid #333;
background: white;
transition: all 0.3s;
}
.btn:focus {
outline: 3px solid orange;
}
.btn:focus-visible {
outline: 3px dashed blue;
}2. prefers-color-scheme (Dark Mode)
Detect user’s preferred color scheme and apply dark or light styles automatically.
CSS Example
body { background: white; color: black; }
@media (prefers-color-scheme: dark) {
body { background: #121212; color: #f0f0f0; }
a { color: #bb86fc; }
}3. High Contrast Media Queries
Detect when users prefer high contrast for better readability and adapt styles accordingly.
CSS Example
@media (prefers-contrast: more) {
body {
background: black;
color: yellow;
}
a { color: cyan; }
}4. CSS for Print (@media print)
Customize styles specifically for printing. Hide unnecessary elements, adjust fonts, and ensure readability.
CSS Example
body { font-family: Arial, sans-serif; }
.header, .footer, .btn { display: block; }
@media print {
.no-print { display: none; }
body { font-size: 12pt; color: black; background: white; }
a::after { content: " (" attr(href) ")"; }
}