DEV Community

Akash Varma
Akash Varma

Posted on

1

CSS: How to apply media print styles in the browser?

In this article, we are going to witness applying media print styles in the browser.

Small Introduction about media print

Usually, we have different types of media queries

  • all
  • print
  • screen
  • speech

All is used for all media type devices
Print is used for print devices
Screen is used for Computer Screens, Tablets, Smart Phones etc
Speech is used for screenreaders

Styles written in @media print will apply only to printers.
We can't see it in browsers. But using developer tools we can render media print styles in the browser.

Here is the solution

Open Chrome Dev Tools -> Click on options (before 'X' icon, top right)
-> More Tools -> Rendering -> Emulate CSS Media Type -> Change Dropdown from 'No emulation' to 'print'

We can also Emulate CSS media feature prefers-color-scheme and prefers-reduced-motion by using the same tool.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (3)

Collapse
 
jkenlooper profile image
Jake Hickenlooper •

Thanks for the tip. Is there any way to emulate the prefers-color-scheme using the browser dev tools? Maybe they will add that in the future.
developer.mozilla.org/en-US/docs/W...

Collapse
 
akashvarma9 profile image
Akash Varma • • Edited

Hi Jake! It's there below CSS media type.

Collapse
 
jkenlooper profile image
Jake Hickenlooper •

Oh, that's great. I must have last looked on an older version of the browser. Looks like they added it in chrome 79.