Combining Print and Screen CSS
This post is more than 18 months old. Since technology changes too rapidly, this content may be out of date (but
that's not always the case). Please remember to verify any technical or programming information with the current
release.
When running YSlow the other day, I was reminded that I was loading 2 stylesheets when only one would suffice. So, let this be a reminder to you - and a quick excerpt at my own solution:
Combine your Print and Screen stylesheets using the @media tag.
For example, in my print stylesheet, I wanted all input boxes with class userinfo to be hidden. Instead of doing that, I now have one stylesheet with this excerpt:
input.userinfo {
border: 1px solid #000
}
@media print {
input.userinfo {
display: none;
}
}
The style is to put a solid border on that particular input. However, when media type is print, just don’t show it at all. No more double requests for stylesheets.