HTML and CSS Reference
In-Depth Information
Finally, this code would be required to link to a tablet-specific style sheet:
<link href=”../styles/tablet.css” rel=”style sheet” type=”text/css” media=”only
screen and (min-width: 321px) and (max-width: 768px)” />
Though swapping entire style sheets is definitely the best practice for most websites, it's possible that
you may need to modify only one or two CSS rules. In this situation, rather than use
@import
or
<link>
, you would use the
@media
declaration. Say the only changes you desire are a smaller back-
ground logo image in the header and an overall width change when rendered on a phone. The
@media
declaration is the perfect approach to take under these circumstances:
@media screen and (max-width:320px) {
#header {
background-image: url(images/logo_small.jpg);
}
#outerWrapper {
width: 318px;
}
}
Note how the CSS rules are nested within the
@media
declaration. Although there's no limit to
the number of rules that can be included, if you find yourself including a good many you probably
would be better off importing or linking to an external style sheet.
Looking at the maximum and minimum display width is just the very tip of what
you can do with media queries. You can also change CSS based on the device's
resolution, orientation, and even color depth.
drawinG wiTH <canVas>
V
as>
V
Graphics on the Web have long been the sole creation of image programs like Adobe Photoshop,
Adobe Fireworks, and Corel Paint Shop Pro — but now it's time for them to share the stage.
HTML5 introduces the
<canvas>
tag, which declares a space on your web page — a blank canvas,
if you will — that you can draw on with JavaScript.
Why does the Web need a real-time graphics tool when the existing software has evolved to such
sophisticated heights? The
<canvas>
tag and associated JavaScript API are not intended to replace
your copy of Photoshop (although some designers will inevitably try). Rather, the
<canvas>
tag is
intended to handle simple graphic tasks, like generating smooth gradients, and open the door to
dynamically drawing charts and other page elements.
understanding <canvas> basics
Adding a
<canvas>
tag to your page is extremely straightforward:
<canvas id=”myCanvas” width=”300” height=”225”></canvas>
