Swinging into spring.
Figure 7-2: A styled HTML 4-classed figure and figure caption.
If you compare the styles there to those found in the preceding section, you’ll see that the only difference is that the names figure and figcaption are preceded by periods — thus marking them as class names. The markup is a little different, of course, though it’s the same basic structure.
The advantage of this approach is that if you have these styles in place at the point when you decide you can convert to HTML 5, then all you need to do is change your markup to use HTML 5 elements instead of classed divs and then strip off the periods to turn the class selectors into element selectors. That’s it. Easy as cake!
Media QueriesThis could honestly be its own article, or possibly even its own book. Thus, what follows will necessarily be just a brief taste of the possibilities. You should definitely follow up with more research, because in a lot of ways this is the future of Web styling.
The point of media queries is to set up conditional blocks of styles that will apply in different media environments. For example, you could write one set of styles for portrait displays and another for landscape displays. You might change the colors based on the bit depth of the display. You could change the font based on the pixel density of display. You might even rearrange the page’s layout depending on the width or number of pixels available in the display.
Figure 7-3: A basic three-column layout.
How? Consider some basic layout styles for a three-column layout:
body {
background: #FFF;
color: #000;
font: small Arial, sans-serif;
}
.col {
position: relative;
margin: 3em 1%;
padding: 0.5em 1.5%;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
float: right;
width: 20%;
}
#two {
width: 40%;
}
#footer {
clear: both;
}
As nice as this might be (in a minimalist sort of way), it is likely to run into trouble on smaller—which is to say, narrower—displays. What if you could magically change to a two-column layout on such displays?
Well, you can. First, restrict the three-column layout to environments that are more than 800 pixels across. This is done by splitting the layout bits into their own declarations:
body {
background: #fff;
color: #000;
font: small Arial, sans-serif;
}
.col {
position: relative;
margin: 3em 1%;
padding: 0.5em 1.5%;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
}
#footer {
clear: both;
}
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
Then wrap those last two declarations in a media query:
@media all and (min-width: 800px) {
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
}
What that says is “the rules inside this curly-brace block apply in all media that have a minimum display width of 800 pixels.” Anything below that, no matter the medium, and the rules inside the block will be ignored. Note the parentheses around the min-width term and its value. These are necessary any time you have a term and value (which are referred to as an expression).
At this point, nothing will really change unless you shrink the browser window until it offers fewer than 800 pixels across to the document. At that point, the columns stop floating altogether.
Figure 7-4: What happens below 800 pixels.
What you can do at this point is write another media-query block of layout rules that apply in narrower conditions. Say you want a two-column layout between 500 and 800 pixels):
@media all and (min-width: 500px) and (max-width: 799px) {
.col {
float: left;
width: 20%;
}
#two {
float: right;
width: 69%;
}
#three {
clear: left;
margin-top: 0;
}
}
Figure 7-5: The reworked layout, which shows between 500 and 800 pixels.
And finally, you can apply some single-column styles for any medium with fewer than 500 pixels of display width:
@media all and (max-width: 499px) {
#one {
text-align: center;
}
#one li {
display: inline;
list-style: none;
padding: 0 0.5em;
border-right: 1px solid gray;
line-height: 1.66;
}
#one li:last-child {
border-right: 0;
}
#three {
display: none;
}
}
Figure 7-6: Single-column layout, which shows below 500 pixels.
Note that in all these queries, layout styles are defined in relation to the display area of the browser window. More generically, they are defined in relation to the display area available to the document in any medium in which it is rendered. That means that if a printer, for example, is used to print the document and it has an available display area 784 pixels wide, then the two-column layout will be for printing.
To restrict the column shifting to screen media only, alter the queries, like so:
@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
But what if you want the three-column layout used in some non-screen media, like print and TV displays? Then add in those media using commas, like so:
@media print, tv, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
The commas here act as logical ORs, so the first query reads “use these styles on print media OR TV media OR a display area on a screen medium where the display area is 800 pixels or more.”
And if you want the three-column layout used in all non-screen media? Add a statement to the first query using the not modifier saying “anything that isn’t screen.”
@media not screen, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
As before, the comma joins the two in an OR statement, so it reads as “anything not on a screen medium OR a display area on a screen medium where the display area is 800 pixels or more.”
There is also an only modifier, so that a query can say something like only print or only screen and (color). As of this writing, not and only are the only modifiers in media queries.
You aren’t restricted to pixels for the previous queries, by the way. You can use ems, centimeters, or any other valid length unit.
Table 7-1: The base media query terms
TermDescriptionwidthThe width of the display area (e.g., a browser window).heightThe height of the display area (e.g., a browser window).device-widthThe width of the device’s display area (e.g., a desktop monitor or mobile device display).device-heightThe height of the device’s display area.orientationThe way the display is oriented; the two values are portrait and landscape.aspect-ratioThe ratio of the display area’s width to its height. Values are two integers separated by a forward slash.device-aspect-ratioThe ratio of the device display’s width to its height. Values are two integers separated by a forward slash.colorThe color bit-depth of the display device. Values are unitless integers which refer to the bit depth. If no value is given, then any color display will match.color-indexThe number of colors maintained in the device’s “color lookup table.” Values are unitless integers.monochromeApplies to monochrome (or grayscale) devices.resolutionThe resolution of the device display. Values are expressed using units dpi or dpcm.scanThe scanning type of a “TV” media device; the two values are progressive and interlace.gridWhether the device uses a grid display (e.g., a TTY device). Values are 0 and 1.Table 7-1 shows all the query terms that can be used in constructing media queries. Note that almost all of these terms accept min- and max- prefixes (for example, device-height also has min-device-height and max-device-height cousins). The exceptions are orientation, scan, and grid.
Styling Occasional ChildrenThere are times when you may want to select every second, third, fifth, eighth, or thirteenth element in a series. The most obvious cases are list items in a long list or rows (or columns) in a table, but there are as many cases as there are combinations of elements.
Consider one of the less obvious cases. Suppose you have a lot of quotes that you want to float in a sort of grid. The usual problem in these cases is that quotes of varying length can really break up the grid.
A classic solution here is to add a class to every fourth div (because that is what encloses each quote) and then clear it. Rather than clutter up the markup with classes, though, why not select every fourth div?
.quotebox:nth-child(4n+1) {
clear: left;
}
Figure 7-7: The problem with floating variable-height elements.
Figure 7-8: Clearing every fourth child.
A quick explanation of the 4n+1 part:
4n means every element that can be described by the formula 4 times n, where n describes the series 0, 1, 2, 3, 4… .That yields elements number 0, 4, 8, 12, 16, and so on. (Similarly, 3n would yield the series 0, 3, 6, 9, 12… .)But there is no zeroth element; elements start with the first (that is, element number 1). So you have to add + 1 in order to select the first, fifth, ninth, and so forth elements.Yes, you read that right: the :nth-child() pattern starts counting from 0, but the elements start counting from 1. That’s why + 1 will be a feature of most :nth-child() selectors.
The great thing with this kind of selector is that if you want to change from selecting every fourth element to every third element, you need only change a single number.
.quotebox:nth-child(3n+1) {
clear: left;
}
Figure 7-9: Clearing every third child.
That might seem pretty nifty on its own, but it gets better. If you combine this approach with media queries, you get an adaptable grid-like layout.
@media all and (min-width: 75.51em) {
.quotebox:nth-child(5n+1) {
clear: left;
}
}
@media all and (min-width: 60.01em) and (max-width: 75em) {
.quotebox:nth-child(4n+1) {
clear: left;
}
}
@media all and (min-width: 45.51em) and (max-width: 60em) {
.quotebox:nth-child(3n+1) {
clear: left;
}
}
@media all and (min-width: 30.01em) and (max-width: 45.5em) {
.quotebox:nth-child(2n+1) {
clear: left;
}
}
@media all and (max-width: 30em) {
.quotebox {
float: none;
}
}
Figure 7-10: Two views of an adaptable floated grid.
Note that this particular set of queries is based on the width of the display area of the browser as measured in ems. That helps make the layout much more adaptable to changes of text size and browser window.
If you’re interested in selecting every other element — let’s say, every other table row — there are some more human alternatives to 2n+1. You can select even-numbered or odd-numbered children using :nth-child(even) and :nth-child(odd), as in this example.
tr:nth-child(odd) {
background: #eef;
}
Styling Occasional ColumnsIt’s easy enough to select alternate table rows for styling, but how about table columns? Actually, that’s just as easy, thanks to the :nth-child and :nth-of-type selectors.
In a simple table with rows consisting of nothing but data cells (those are td elements), you can select every other column like so:
td:nth-child(odd) {
background: #fed;
}
Figure 7-11: Styling the odd-numbered columns.
Want to fill in the alternate ones!
td:nth-child(odd) {
background: #fed;
}
td:nth-child(even) {
background: #def;
}
If you’re after every third, fourth, fifth, or similarly spaced-out interval, then you need the n+1 pattern.
td:nth-child(3n+1) {
background: #edf;
}
Figure 7-12: Styling both odd- and even-numbered columns.
Figure 7-13: Styling every third data column.
That’s all relatively straightforward. Now, what happens when you put a th at the beginning of each row? In one sense, nothing. The columns that are selected don’t change; you’re still selecting the first, fourth, seventh, and so on children of the tr elements. In another sense, the selected columns are shifted, because you’re no longer selecting the first, fourth, seventh, and so on data columns. You’re selecting the third, sixth, and so on data columns. The first column, which is composed of th element, doesn’t get selected at all because the selector only refers to td elements.
Figure 7-14: Disrupting the pattern with row headers.
To adjust, you could change the terms of the :nth-child selector:
td:nth-child(3n+2) {
background: #edf;
}
Alternatively, you could keep the original pattern and switch from using :nth-child to :nth-of-type:
td:nth-of-type(3n+1) {
background: #fde;
}
Figure 7-15: Restoring the pattern by adjusting the selection formula.
Figure 7-16: Restoring the pattern with :nth-of-type.
This works because it selects every nth element of a given type (in this case, td elements) that shares a parent element with the others. Think of it as :nth-child that also skips any elements that aren’t named in the :nth-child selector.
RGB Alpha ColorColor values are probably one of the most familiar things in all of CSS; some people are to the point of being able to estimate a color’s appearance based on its hexadecimal representation. (Go on, try it: #e07713.) It’s not quite as common to use the rgb() notation for colors, but they’re still pretty popular.
In CSS 3, the rgb() notation is joined by rgba() notation. The a part of the value is the alpha, as in alpha channel, as in transparency. Thus you can supply a color that is partly see-through:
.box1 {
background: rgb(255,255,255);
}
.box2 {
background: rgba(255,255,255,0.5);
}
Figure 7-17: Boxes with opaque and translucent RGB backgrounds.
You can also use the percentage form of RGB color values in RGBA:
.box1 {
background: rgb(100%,100%,100%);
}
.box2 {
background: rgba(100%,100%,100%,0.5);
}
The alpha value is always represented as a number between 0 and 1 inclusive, with 0 meaning “no opacity at all” and 1 meaning “fully opaque.” So half-opaque (and thus half-transparent) is 0.5. You can’t put a percentage in there for historical reasons that are too messy to get into here.
If you supply a number outside the 0 to 1 range, it will (in the words of the specification) be “clamped” to the allowed range. So if you give an alpha value of 4.2, the browser will treat it as if you’d written 1. Also, it isn’t clear what should happen when an alpha of 0 is used. Since the color is fully transparent, what will happen to, say, invisible text? Can you select it? If it’s used on a link, is the link clickable? Both are interesting questions with no definitive answers. So be careful.
RGBA colors can be used with any property that accepts a color value, such as color and background-color. To keep older browsers from puking on themselves, it’s advisable to supply a non-alpha color before the alpha color. That would take a form like so:
{
color: #000;
color: rgba(0,0,0,0.75);
}
The older browsers see the first value and know what to do with it. Then they see the second value and don’t know what to do with it, so they ignore it. That way, at least older browsers get black text. Modern browsers, on the other hand, understand both values and thanks to the cascade, override the first with the second.
Note that there is no hexadecimal form of RGBA colors. Thus, you cannot write #00000080 and expect half-opaque black.
HSL and HSL Alpha ColorA close cousin to RGBA values are the HSLA values, and an even closer cousin to them are HSL colors. These are new to CSS 3, and will be a delightful addition to many designers.
For those not familiar with HSL, the letters stand for Hue-Saturation-Lightness. Even if you didn’t know the name, you’ve probably worked with HSL colors in a color picker.
Figure 7-18: An HSL color picker.
The hue is represented as a unitless number corresponding to the hue angle on a color wheel. Saturation and lightness are both percentages, and alpha is (as with RGBA) a number between 0 and 1 inclusive. In practice, you can use HSL colors anywhere a color value is accepted. Consider the following rules, which create the equivalent effect.
.box1 {
background: hsl(0,0%,100%);
}
.box2 {
background: hsla(0,0%,100%,0.5);
}
Figure 7-19: Various HSL color tables.
Figure 7-20: Boxes with opaque and translucent HSL backgrounds.
You can do old-browser fallbacks with regular RGB values, though having to specify an RGB color and then HSL color does sort of detract from the point of using HSL in the first place. HSL allows you to get away from RGB altogether.
Shadowy StylesAh, drop shadows. Remember drop shadows? In the mid-90’s, everything had a drop shadow. Of course, back then the shadows were baked into images and constructed with tables even more tortuously convoluted than usual. Now you can relive the glory days with some fairly simple CSS. There are actually two properties available: text-shadow and box-shadow.
Take the former first. The following CSS will result:
h1 {
text-shadow: gray 0.33em 0.25em 0.1em;
}
The first length (0.33em) indicates a horizontal offset; the second (0.25em), a vertical offset. The third is a blur radius, which is the degree by which the shadow is blurred. These values can use any length unit, so if you want to do all your shadow offsets and blurs in pixels, go to town. Blurs can’t be negative, but offsets can: A negative horizontal offset will push the shadow to the left, and a negative vertical offset will go upward.
Figure 7-21: Dropping shadows from a heading.
You can even have multiple shadows! Of course, whether you should, is a matter of opinion.
h1 {
text-shadow: gray 0.33em 0.25em 0.1em, -10px 4px 7px blue;
}
Note that the color of a shadow can come before all the lengths or after them, whichever you prefer. Note also that the CSS 3 specification says that the first shadow is “on top,” which is closest to you. Shadows after that are placed successively further away from you as you look at the page. Thus, the gray shadow is placed over the top of the blue shadow. Now to shadow boxes. It’s pretty much the same drill, only with a different property name.
h1 {
box-shadow: gray 0.33em 0.25em 0.25em;
}
Figure 7-22: A heading with multiple shadows.
Figure 7-23: Shadowing the element box of a heading.
Even though there’s no obvious element box for the h1, a shadow is generated anyway. It’s also drawn only outside the element, which means that you can’t see it behind/beneath the element, even when the element has a transparent (or, with RGBA colors, semi-transparent) background. The shadows are drawn just beyond the border edge, so you’re probably better off putting a border or a visible background (or both) on any shadowed box.
You can have more than one box shadow, just like you can with text shadows:
h1 {
box-shadow: gray 0.33em 0.25em 0.25em, -10px 2px 6px blue;
}
Figure 7-24: Multiple shadows on the element box of a heading.
Here’s where I have to admit a small fib: The previous examples are the ideal cases. As of this writing, they wouldn’t actually work in browsers. As of mid-2010, to make the single-shadow example work, you’d actually need to say:
h1 {
-moz-box-shadow: gray 0.33em 0.25em 0.25em;
-webkit-box-shadow: gray 0.33em 0.25em 0.25em;
box-shadow: gray 0.33em 0.25em 0.25em;}
That will cover all modern browsers as of mid-2010. Over time, the need for the prefixed properties (-moz- and –webkit-) will fade and you’ll be able to just write the single box-shadow declaration. When exactly will that happen? It all depends on your design, your site’s visitors, and your own sense of comfort.
If you also want to get drop shadows on boxes in older versions of Internet Explorer, then you’ll need to add in the IE-only Shadow filter. Read here to find out more.
Multiple BackgroundsOne of the really nifty things in CSS 3 is its support for multiple background images on a given element. If you’ve ever nested multiple div elements just to get a bunch of background decorations to show up, this section is for you.
Take, for example, this simple set of styles and markup to present a quotation:
body {
background: #c0ffee;
font: 1em Georgia, serif;
padding: 1em 5%;
}
.quotebox {
font-size: 195%;
padding: 80px 80px 40px;
width: 16em;
margin: 2em auto;
border: 2px solid #8d7961;
background: #fff;
}
.quotebox span {
font-style: italic;
font-size: smaller;
display: block;
margin-top: 0.5em;
text-align: right;
}
One’s mind has a way of making itself up in the background, and it suddenly becomes clear what one means to do.
—Arthur Christopher Benson
Figure 7-25: Setting up the quotation’s box.
Now, adding a single background image is no big deal. Everyone has done it about a zillion times.
.quotebox {
background: url(bg01.png) top left no-repeat;
background-color: #fff;
}
Figure 7-26: Adding a single background.
But what if you want a little quarter-wheel in every corner? Previously, you would have nested a bunch of divs just inside the quotebox div. With CSS 3, just keep adding them to the background declaration:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat;
background-color: #fff;
}
Figure 7-27: Applying two backgrounds to the same element.
Commas separate each background value to get multiple backgrounds:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat;
background-color: #fff;
}
Figure 7-28: Applying four backgrounds to a single element.
The effect here is extremely similar to nesting a bunch of divs. It’s just that with CSS 3, you don’t have to bother any more.
That similarity extends into the way background are composited together. You may have noticed that I split out the background-color declaration in order to have a nice flat white behind all the images. But what if you wanted to fold it into the background declaration? Where would you put it? After all, each of these comma-separated values sets up its own background. Put the color in the wrong place, and one or more images will be overwritten by the color.
As it turns out, the answer is the last of the values:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
#fff url(bg04.png) bottom left no-repeat;
}
That’s because the multiple background go from “highest”—that is, closest to you as you look at the page—to “lowest”—furthest away from you. If you put the color on the first background, it would sit “above” all the others.
This also means that if you want some kind of patterned background behind all the others, it needs to come last and you need to make sure to shift any background color to it.
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat,
#fff url(bgparch.png) center repeat;
}
Figure 7-29: One element, five backgrounds.
Because of the possible complexities involved, I prefer to split any default background color into its own declaration, as shown earlier. Thus I’d write the preceding as:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat,
url(bgparch.png) center repeat;
background-color: #fff;
}
When you use the separate property, the color is placed behind all the images and you don’t have to worry about shifting it around if you reorder the images or add new images to the pile.
You can comma-separate the other background properties such as background-image. In fact, an alternate way of writing the preceding styles would be:
.quotebox {
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png), url(bgparch.png);
background-position: top left, top right, bottom right, bottom left, center;
background-color: #fff;
}
Different format, same result. This probably looks more verbose, and in this case it really is, but not always. If you drop the parchment background, then you could simplify the first declaration quite a bit:
.quotebox {
background-repeat: no-repeat;
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png);
background-position: top left, top right, bottom right, bottom left;
background-color: #fff;
}
Figure 7-30: Similar background, alternate syntax.
Given those styles, none of the background images would be repeated, because the single no-repeat is applied to all the backgrounds that are assigned to the element. The only reason you had to write out all the repeat values before was that the first four have one value and the fifth had another.
And if you were to write two values for background-repeat?
.quotebox {
background-repeat: no-repeat, repeat-y;
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png);
background-position: top left, top right, bottom right, bottom left;
background-color: #fff;
}
In that case, the first and third images would not be repeated, whereas the second and fourth images would be repeated along the y axis. With three repeat values, they would be applied to the first, second, and third images, respectively, whereas the fourth image would take the first repeat value.
2D TransformsIf you’ve ever wanted to rotate or skew an element, border, and text and all, then this section is definitely for you. First, though, a word of warning: In order to keep things legible, this section uses the unprefixed version of the transform property. As of this writing, doing transforms in a browser actually would require multiple prefixed declarations, like so:
-webkit-transform: …;
-moz-transform: …;
-o-transform: …;
-ms-transform: …;
transform: …;
That should cease to be necessary in a year or two (I hope!) but in the meantime, keep in mind as you read through this section that it’s been boiled down to the unprefixed version for clarity.
Time to get transforming! Possibly the simplest transform to understand is rotation:
.box1 {
-moz-transform: rotate(33.3deg);
}
.box2 {
-moz-transform: rotate(-90deg);
}
Figure 7-31: Rotated element boxes. The red dashes show the original placement of the elements before their rotation.
In a sense, transforming is a lot like relative positioning: The element is placed normally and then transformed. You can transform any element at all, and in the case of rotation can use any real-number amount of degrees, radians, or grads to specify the angle of rotation. If you’ve ever wanted to rotate your blog by e radians or 225 grads, well, now’s your chance.
As you no doubt noticed, the boxes in the preceding example were rotated around their centers. That’s because the default transformation origin is 50% 50%, or the center of the element. You can change the origin point using transform-origin:
.box1 {
transform: rotate(33.3deg);
transform-origin: bottom left;
}
.box2 {
transform: rotate(-90deg);
transform-origin: 75% 0;
}
Figure 7-32: Elements rotated around points other than their centers.
Two notes: First, negative angles can be equivalent to positive angles. Thus, 270deg is equivalent to –90deg in the final positioning of the element, just as 0deg and 360deg are the same. Second, you can specify angles greater than the apparent maximum value. If you declare 540deg, the element’s final rotation will look exactly the same as if you’d declared 180deg (as well as –180deg, 900deg, and so on). The interim result may be different if you also apply transitions (see next section), but the final “resting” state will be equivalent.
Almost as simple as rotation is scaling. As you no doubt expect, this scales an element up or down in size, making it larger or smaller. You can do this consistently along both axes, or to a different degree along each axis:
.box1 {
transform: scale(0.5);
}
.box2 {
transform: scale(0.75, 1.5);
}
Figure 7-33: Scaled elements.
One scale() value means the element will be scaled by that amount along both the x and y axes. If there are two values, the first specifies the horizontal (X) scaling, and the second, the vertical (Y) scaling. Thus, if you want to leave the horizontal axis the same and only scale on the y axis, do this:
.box1 {
transform: scale(0.5);
}
.box2 {
transform: scale(1, 1.5);
}
Alternatively, you can use the scaleY() value:
.box1 {
transform: scale(0.5);
}
.box2 {
transform: scaleY(1.5);
}
Along the same lines is the scaleX() value, which causes horizontal scaling without changing the vertical scaling.
.box1 {
transform: scaleX(0.5);
}
.box2 {
transform: scaleX(1.5);
}
Figure 7-34: Two scaled elements, one scaled only on the Y axis.
Figure 7-35: Two scaled elements, one scaled only on the X axis.
When writing CSS yourself, it seems most convenient to just stick with scale() and fill in a 0 for the horizontal any time you want a purely vertical scaling. If you’re programmatically changing the scaling via DOM scripting, it might be easier to manipulate scaleX() and scaleY() directly.
As with rotation, you can affect the origin point for scaling. This allows you, for example, to cause an element to scale toward its top-left corners instead of shrink down toward its center:
.box1 {
transform: scale(0.5);
transform-origin: top left;
}
.box2 {
transform: scale(1.5);
transform-origin: 100% 100%;
}
Figure 7-36: Two scaled elements, each with a different scaling origin.
Similarly simple is translation. In this case, it isn’t changing the language from one to another, but “translating” a shape from one point to another. It’s an offset by either one or two length values.
.box1 {
transform: translate(50px);
}
.box2 {
transform: translate(5em,10em);
}
Figure 7-37: Translated elements.
Again, this is very much like relative positioning. The elements are placed normally and then transformed as directed. When there’s only one length value in a translate() value, it specifies a horizontal movement and the vertical movement is assumed to be zero. If you just want to translate an element up or down, you have two choices. First is to simply give a length of 0 for the horizontal value.
.box1 {
transform: translate(0,50px);
}
.box2 {
transform: translate(5em,10em);
}
The other is to use the value pattern translateY():
.box1 {
transform: translateY(50px);
}
.box2 {
transform: translate(5em,10em);
}
There is also a translateX(), which does about what you’d expect: moves the element horizontally!
Figure 7-38: Two differently translated elements.
While you can declare a transform-origin in cases where you’re just translating, it doesn’t matter all that much whether you do so. After all, whether an element’s center or top-left corner is pushed 50 pixels to the right doesn’t really matter. The element will end up in the same place either way. But that’s only true if all you’re doing is translating. If you do anything else at the same time, like rotate or scale, then the origin will matter. (More on combining transforms in a bit.)
The last type of transformation, skewing, is slightly more complex, although the method of declaring it is no more difficult than you’ve seen so far.
Skewing an element distorts its shape along one or both axes:
.box1 {
transform: skew(23deg);
}
.box2 {
transform: skew(13deg,-45deg);
}
If you provide only a single value for skew(), then there is only horizontal (X) skew, and no vertical (Y) skew. As with translations and scaling, there are skewX() and skewY() values for those times you want to explicitly skew along only one axis:
.box1 {
transform: skewX(-23deg);
}
.box2 {
transform: skewY(45deg);
}
Figure 7-39: Two skewed elements.
Figure 7-40: Two elements, each one skewed along a different axis.
Here’s how skewing works: Imagine there are two bars running through the element, one along each of the X and Y axes. When you skew in the X direction, the Y axis is rotated by the skew angle. Yes, the Y (vertical) axis is the one that rotates in a skewX() operation. Positive angles are counterclockwise, and negative angles are clockwise. That’s why the first box in the preceding example appears to tilt rightward: The Y axis was tilted 33.3 degrees clockwise.
The same basic thing happens with skewY(): The X axis is tilted by the specified number of degrees, with positive angles tilting it counterclockwise and negative angles tilting clockwise.
The interesting part here is how the origin plays into it. If the origin is in the center and you provide a negative skewX(), then the top of the element will slide to the right of the origin point while the bottom will slide to the left. Change the origin to the bottom of the element, though, and the whole thing will tilt right from the bottom of the element.
.box1 {
transform: skewX(-23deg);
}
.box2 {
transform: skewY(-23deg);
transform-origin: bottom center;
}
Figure 7-41: Two skewed elements, each with a different skewing origin.
Similar effects happen with vertical skews.
So those are the types of transforms you can carry out. But what if you want to do more than one at a time? No problem! Just list them in the order you want them to happen.
.box1 {
transform: translateX(50px) rotate(23deg);
}
.box2 {
transform: scale(0.75) translate(25px,-2em);
}
Figure 7-42: Multiple transforms in action.
In every case, the transforms are executed one at a time, starting with the first. This can make a significant difference. Consider the differing outcomes of the same transforms in different orders.
.box1 {
transform: rotate(45deg) skew(-45deg);
}
.box2 {
transform: skew(-45deg) rotate(45deg);
}
There is one more transformation value type to cover: matrix(). This value type allows you to specify a transformation matrix in six parts, the last two of which define the translation. Here’s a code example:
.box1 {
transform: matrix(0.67,0.23,0,1,25px,10px);
}
.box2 {
transform: matrix(1,0.13,0.42,1,0,-25px);
}
Figure 7-43: The differences caused by transform value ordering.
Figure 7-44: Matrix transforms.
Basically, the first four numbers are a compact form of expressing the end result of rotating, skewing, and scaling an element, and the last two translate that end result. If you understand matrix-transformation math, then you’ll love this. If you don’t, don’t worry about it overmuch. You can get to the same place with the other transform values reviewed in this chapter.
If you’d like to learn about matrix transforms, here are two useful resources:
Examples of Linear Transformation MatricesCoordinate Transformation MatricesAbout the book
Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. This book is for developers who already have some experience with CSS and JavaScript and are ready for more advanced techniques.
(vf) (ik)
© Eric Meyer for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us Post tags: CSS, css3
]]>
The data-fullsrc is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.
The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.
This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.
Stop iPhone Simulator Image ResizingOne nice thing about the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.
There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.
(Image: Think Vitamin | Website referenced: 8 Faces)
Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:
Setting the initial-scale to 1 overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.Custom Layout StructureFor extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on.
For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.
If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout’s structure.
Here is the style.css (default) content:
/* Default styles that will carry to the child style sheet */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;
}
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}
Here is the mobile.css (child) content:
#wrapper{
width: 90%;
}
#content{
width: 100%;
}
#sidebar-left{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
#sidebar-right{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
Media QueriesCSS3 supports all of the same media types as CSS 2.1, such as screen, print and handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3.
In Ethan Marcotte’s article, we see an example of a media query in action:
This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.
New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The Orientation Media Query” for more information on setting and restricting widths based on these media query features.
One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Be sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a more thorough explanation.
Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
The code above is from a free template for multiple media queries between popular devices by Andy Clark. See the differences between this approach and including different style sheet files in the mark-up as shown in the post “Hardboiled CSS3 Media Queries.”
CSS3 Media QueriesAbove are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future.
The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.
Note in the examples below that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to be made for multiple style sheets.
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}
The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).
@media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both;
font-size: 1.3em;
}
}
Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower.
While the above min-width and max-width can apply to either screen size or browser width, sometimes we’d like a media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device. The min-device-width and max-device-width media query properties are great for targeting certain devices with set dimensions, without applying the same styles to other screen sizes in a browser that mimics the device’s size.
@media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}
@media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}
There are also other tricks with media queries to target specific devices. Thomas Maier has written two short snippets and explanations for targeting the iPhone and iPad only:
CSS for iPhone 4 (Retina display)How To: CSS for the iPadFor the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}
Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.
There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range.
@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}The above code in this media query applies only to screen and browser widths between 800 and 1200 pixels. A good use of this technique is to show certain content or entire sidebars in a layout depending on how much horizontal space is available.
Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine.
You might want, for example, to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientations. Placing a media query for both the horizontal and vertical orientations of the iPad in the same style sheet file would be far more efficient.
Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best.
Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:
JavaScriptAnother method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.
In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:
There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries, look at “Combining Media Queries and JavaScript.”Showing or Hiding ContentIt is possible to shrink things proportionally and rearrange elements as necessary to make everything fit (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of content from a large screen available on a smaller screen or mobile device isn’t always the best answer. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.
Responsive Web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!
display: none;
Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure altogether.
Note that we haven’t used visibility: hidden here; this just hides the content (although it is still there), whereas the display property gets rid of it altogether. For smaller devices, there is no need to keep the mark-up on the page — it just takes up resources and might even cause unnecessary scrolling or break the layout.
Here is our mark-up: