Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Combine Your CSS Media Styles Into One File

DZone's Guide to

Combine Your CSS Media Styles Into One File

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

When a user comments on one of my blog posts, and they provide a website URL, I always visit the site. I appreciate the time a visitor takes to comment on a post, so I return the favor by checking out the user's website…and the source code.

Often I see the following:

<link href="styles/main.css" rel="stylesheet" type="text/css" media="all" />
<link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />

The above code requests two separate stylesheets, one for global media styles (screen, print, handheld, tv…) and one for print only. There's nothing wrong with the above, but if load time is an issue you could save yourself a server request by combining your CSS files:

/*  all media  */
@media all
{
body { color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }
}

@media print
{
body { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }
}

You address each media by using "@media [media] { /* css here */ }". I also use a single CSS file to make editing easier — no switching buffers, and how often do you set specific styles for print and screen per a CSS class?

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}