HTML and CSS Reference
In-Depth Information
And then in your style sheet, you include the following styles:
body.aboutus { background-color: black; }
body.news { background-color: grey; }
The same rule applies to JavaScript, too. If you use unobtrusive JavaScript, discussed in
Lesson 15, “Using JavaScript in Your Pages,” you can often put all the JavaScript for a
site in a single file.
TIP
If possible, you will want to keep the size of your external CSS and
JavaScript files under 25k. Apple's iPhone does not cache files
larger than 25k, so it's better to split external files up as neces-
sary if they are larger than that.
Location Matters
HTML 4, XHTML 1.0, and HTML5 all require links to external style sheets and the
<style>
tag to reside within the
<head>
element. You should be sure to follow this rule,
because placing style sheets elsewhere in your document can cause your pages to take
longer to display. By the same token, whenever possible, it's best to put
<script>
tags at
the bottom of your document. When browsers are downloading an external script file,
they don't try to download any other page elements. This can slow down overall page
loading time. Putting the scripts last on the page enables it to download everything else
on the page in parallel before it gets to the scripts. It can make your pages load a bit
more quickly.
18
Shrink Your CSS and JavaScript
When you finish with your CSS and JavaScript, it's a good idea to compress them so that
they download more quickly. Yahoo! has created a tool called the YUI Compressor that
shrinks JavaScript and CSS to the smallest size possible. The resulting files aren't read-
able by humans, but browsers understand them just fine. You'll work on your files in the
human-readable form, but shrink them before putting them on the server. Shrinking these
files can save on download time. This shrinking is sometimes referred to as
minifying
.
If you use third-party libraries like jQuery, be sure to deploy the minified versions.
Your JavaScript files and style sheets might not be big, but these libraries can be quite
large. For example, the regular version of jQuery 1.4.2 is 160k, and the minified version
is 70.5k. Most JavaScript libraries can be downloaded in either the regular or minified
form.
