How to declare print styles in 2014

[digitalvaldosta]

I was hoping to see what everyone’s opinion is on declaring print styles. In the past I have always seen them declared as a separate css file. However, lately I have been seeing them declared with @media print {} in the primary style sheet.

My question is , “Does it matter which way that you declare the print styles or is it best to use the latter form of declaration?”

I could see using @media print being better because it would be one less http request. Just curious what everyone thinks.

Also, when declaring print styles with @media print, do I need to declare everything else with @media screen? Or does that default to that? I’ve seen that both ways as well.

The other reason I ask that is because I was trying to set a bottom border to rows in a table when the page is printed. I applied zebra striping and it is removed since it is a background color. But I can’t seem to get the print preview to show the bottom border when it’s declared in @media print as shown:

http://codepen.io/digitalvaldosta/pen/JAdBp

[shaneisme]

Yes, I definitely use @media print, as you pointed out, it’s one less round trip to the server.

You don’t need to declare @media screen or anything else for your defaults.

As for your example, you’re not nixing out your background-color, and it’s the same color as your border-bottom. I bet it is rendering, but it’s just one more pixel on the background.

[Author]

Posts