CSS 38 💻 monochrome and orientation media features

a - monochrome media feature
monochrome media feature is used to test the numbers of bits per pixel
Typically on devices that cannot handle color accurately
You can also use  min-monochrome and max-monochrome
@media (monochrome) { }→ applies styles to any monochrome device
@media (monochrome: 0) { }→ applies styles to non-monochrome device 
@media (min-monochrome: 1) { } → applies styles specific to monochrome devices with at least 1 bits per pixel (bpp)
@media (min-monochrome: 8) { } → applies styles specific to monochrome devices with maximum 8 bits per pixel (bpp)

b - orientation media feature
orientation media feature allows you to apply different styles based on user's screen orientation
This is useful for creating responsive designs that adapt to how the context is being viewed
values: portrait → the height is greater or equal to the width
landscape → the width is greater than the height
@media screen and (orientation: portrait) { } → applies styles for portrait orientation 
@media screen and (orientation: landscape) { }  → applies styles for landscape orientation

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!