CSS Sprites

This website uses CSS sprites for the logos that appear on the top left of each page. There are several different logos, each with a different picture. Rather than having each logo in a separate file, all seven are in a single file. Each page's HTML has a container for the logo, and CSS is used to display the correct logo (the "sprite") for the page. The benefits for this approach are:

• Caching. When possible, browsers cache the images they download and subsequently reuse them from the cache rather than downloading them again. So, once the logo file is downloaded the first time, all logos are now in cache and can be retrieved extremely quickly. For this site, caching is the main advantage of using CSS sprites for the logo.
• Fewer HTTP Requests. Browsers are throttled by the number of simultaneous HTTP requests they can make. When many HTTP requests are needed for a page, this throttling increases the time it takes to download the page. This issue is not a major concern for this site, but it is for some sites.
• Smaller File Sizes. One multi-image file can often be smaller in size than several individual-image files, which helps download speed. For this site, about 10k was saved by using a multi-image file—that's not much but is better than nothing.

Here's the image in the logo sprite file:

(The red border around the image is added with CSS to show the bounds of the image. It is not part of the image.)

The dimensions of each logo are 305 pixels by 110 pixels. A one pixel line of whitespace separates the logos, so the overall image is 305x776. This separator isn't necessary for CSS sprites but it makes the master image more human readable and thus more maintainable over time.

The logo container in the page's HTML is the same height as a logo, and CSS is used to display the overall image as a background image in the container. By correctly positioning the overall image in the container, the desired logo appears in the container while the rest of the image is outside the container and is not seen. The upper left corner of the overall image is the origin (x=0,y=0). So, displaying a desired logo just requires specifying its origin: the top logo is x=0,y=0 while the bottom logo is x=0,y=-666.

Finally, the HTML container for the image is actually wider than the width of a logo (in case I create an extra-wide logo someday). CSS will by default repeat the background image to fill the available space. I don't want this, so I specify no-repeat. Here's the CSS resulting CSS:

div#logo {
  background-image: url('media/logos/jma_logos_sprite.png');
  background-position: 0px -555px;
  background-repeat: no-repeat;
}

And this is the logo that is displayed:

In the above box, the background color initially is set to gold to match the logo's base color, and the background repeat initially is set to be non-repeating. (The background color is set in the CSS but not in div#logo, in case you're wondering why it's not in the code listing above.) Press the Toggle Background Color button to toggle it between gold and white. Press the Toggle Repeat On/Off to see how repeat works.

There are ways to further reduce the file size of the image for this demo. The text part of each logo is always the same and in the same position. It is possible to construct each logo from two images: an icon image and a text image. That way, the text would only have to be present once in the master image. Further, since each logo is on the same gold color, the white separator and some gold edging could be deleted, so that the gold edge area on the bottom of one logo could also be used as the gold edge area on the top of the next logo. That is, rather than the top logo starting at x=0,y=0 and the second logo at x=0,y=-111, the second logo could start at perhaps x=0,y=-100. Note, however, that this will make the master image harder to maintain over time, as each logo would no longer be evident at a glance.

CSS3 Demos

These demos show examples of the utility of CSS3. The CSS3 for the demos and the JavaScript/jQuery code that manipulates the CSS is in the page's HTML file (rather than in separately loaded files), so that you can just look at the page's source to see everything of importance.

• Styling with Pseudo-Classes
  CSS uses pseudo-classes to allow styles to be applied to items based on information that is not present in the DOM. A well-known use of pseudo-classes is to style hyperlinks based on their state. For example, applying the :hover pseudo-class to a link has its style invoked when the user hovers the mouse over the link.
• CSS3 has a number of pseudo-classes that greatly help with context-based styling, such as coloring every other row in a table to make it easier to read. Before CSS3, this was possible with CSS by manually assigning every other row a class with a background color different from the other rows. This, however, is difficult to maintain over time. If you add or remove rows, you need to make sure the classes are still assigned correctly. This could be automated to some degree (by running a script that uses regular expressions to check and correct the classes), but now you have to write and maintain the script. With CSS3, all you have to do is use :nth-of-type(even) to style every even-numbered row. Let's see this (and more)!

• Beings of Middle Earth

  Table Description

  Each column lists a type of being of Middle Earth, with several example names. The final row in each column allows you to add a name to the column.

  Elf	Human	Dwarf	Hobbit	Wizards	Ents
  Galadriel	Aragorn	Thorin	Bilbo	Saruman	Treebeard
  Celeborn	Faramir	Balin	Frodo	Gandalf	Skinbark
  Elrond	Theoden	Dwalin	Sam	Radagast	Beechbone
  Cirdan	Eomer	Gloin	Meriadoc	Alatar	Quickbeam
  Arwen	Eowyn	Gimli	Peregrin	Pallando	Leaflock
  Add your own	Add your own	Add your own	Add your own	Add your own	Add your own

  The above table is styled with minimal CSS (no CSS3). Use the Remove Basic CSS button to see what it'd look like with bare-bones, unstyled HTML. Use the other buttons to see what CSS3 can do.
  
  
  
• :before, :after, and content Pseudo-Elements
  The :before and :after pseudo-elements can insert content before and after elements they are applied to. The actual content to be inserted can be specified with the content property, which a static string or other values like a counter, the contents of an attribute of the selector, an url to an image, and so on.
• One simple example would be to assign :before and :after for every hyperlink (anchor tag), with :before's having content: "Hyperlink: " and :after's having content: " (" attr(href) ")". This would result in "Hyperlink: " being displayed before the hyperlink and the value of the hyperlink's href attribute, enclosed in parentheses, after the link.

  This link doesn't use :before and :after:
  Some random link.

  This link does use :before and :after:
  Yet another random link.

  (JavaScript prevents both links from actually navigating anywhere.)

• This may not be too exciting, as you could just do it in the plain HTML. However, you can set things up so that the :before and :after are used contextually, such as only when the web page is printed. Many hyperlink names don't actually indicate where they navigate to, which can make them a bit cryptic when the page is printed. Also, many hyperlinks are styled in ways that don't make them apparent that they are links when printed. In these cases, noting that the link is indeed a link and showing it actual navigation is useful in the printed output.
• Another useful application of :before and :after is to add GUI icons to certain HTML elements. Want every link to have a link symbol next to it? Just apply one :after specifying the icon you want for all hyperlinks. See Nicolas Gallagher's GUI icons blog for more details.
• Another application is to add your own hover-help (aka tooltip) text to HTML elements.

  Hover the mouse over the following link to see its hover-help text:
  Again another random link.

• The hover-help text is contained in a custom data-help attribute in the link. (The demo does not use a title attribute for this text, as any browser that natively displays the contents of a title attribute on mouse hover could clash with the :after implementation of hover-help text.)
• Columns
  CSS is used to layout a web page, but some common and very useful layouts are difficult to achieve with CSS2. CSS3 add more layout abilities, like multiple columns. (However, unaided CSS3 can only do columns that all use the same width; variable-width columns still need scripting.) While CSS3 columns are possible, browser support isn't all it needs to be yet (no support at all in IE9 and propriety prefixes are required for some other browsers). Further, there are gotchas like Chrome accepting column settings for content in CSS tables but Firefox ignoring these settings. Still, let there be a demo!
  

  Port harmonic system femtosecond infrared, bus or, encapsulated encapsulated procedural hyperlinked potentiometer. Record read-only encapsulated array patch reflective solution recognition infrared transistorized dithering femtosecond, metafile services read-only. Services array frequency, encapsulated encapsulated cache, logarithmic hyperlinked silicon in patch encapsulated scan.

  Broadband echo element log phaselock in coordinated transmission. Transmission generator bypass video logistically metafile generator video coordinated record procedural. Element floating-point ethernet transistorized prototype device procedural hyperlinked. Distributed, metafile high development led distributed, metafile echo dithering.

• Rounded Corners
  Rounded corners can make various items on web pages look quite attractive. Before CSS3, however, CSS alone couldn't handle roundness, and various laborious hacks were required. Now, it's easy! See the box below for an interactive demo.
  

  Use the buttons to change the roundness of the corners for this box.
• Gradients
  CSS3 gradients involve colors transitioning and blending from one to the other. Gradients have obvious artistic uses and can help improve the appearance of web pages. Before CSS3, however, gradients had to be hacked together outside the HTML/CSS code.
• The box below demonstrates a horizontal linear gradient with two colors.
  

   

• The box below demonstrates a vertical linear gradient with two colors.
  

   

• The box below demonstrates a vertical linear gradient with multiple colors using color stops.
  

   

• The box below demonstrates a radial gradient with two colors.
  

   

• Linear gradients don't have to be just horizotal or vertical. Instead, you can specify an angle for the gradient line. The box below demonstrates a 45-degree horizontal linear gradient with two colors.
  

   

• Some browsers were slow to support CSS3 gradients. IE9, which did implement some CSS3 features, does not support CSS3 gradients (IE10 does). So, for the time being, CSS3 gradients by themselves should not be used for anything crucial. At least insure that a single background color will work acceptably in place of a gradient.
• Drop Shadows
  The CSS3 box shadow ability let you put drop shadows on elements. Before, drop shadows could be present by baking them into images or kludging them in other ways, but CSS3 makes it simpler and easier.
  
  

  Use the buttons to change the box shadow.

  
  
• Transformations: Rotate, Scale, Skew, and Translate
  The topic's title says it all. (Well, "translate" means "change position," not "change language," in case you were wondering.) Let's go straight to the demos.
  
  
  
  

  
  

  
  

  
  
• Opacity and Transparency
  "Opacity and Transparency" isn't as catchy a title as "Sense and Sensibility," but CSS3 has the former and not the latter. CSS has an opacity setting that determines how opaque/transparent an element is. The opacity of an element, however, is inherited by all its children elements. Sometimes this is what you want, but sometimes it's like an incurable genetic disease. CSS3 also allows RGBA to be used, where the "A" stands for "alpha" or "alpha channel" and determines how transparent the color specified by the "RGB" part is. CSS3 RGBA can be used instead of opacity to avoid inheritance issues.

• Opacity Demo 1
  The inner box has the opacity setting. The outer box is the parent of the inner box and thus is not affected by the change in opacity.

  Opacity Demo 2
  The outer box has the opacity setting. The inner box is the child of the outer box and thus is affected by the change in its parent's opacity.

• Alpha Demo 1
  The inner box has the alpha setting, which is applied to the background color of the inner box. The parent outer box is not affected. (See Alpha Demo 3 if you want the inner box's border to also use the alpha setting.)

  Alpha Demo 2
  The outer box has the alpha setting, which is applied to the background color of the outer box. The child inner box is not affected, unlike how opacity works. (See Alpha Demo 4 if you want the outer box's border to also use the alpha setting.)

• Alpha Demo 3
  The inner box has the alpha setting, which is applied to the background color and border of the inner box. The parent outer box is not affected.

  Alpha Demo 4
  The outer box has the alpha setting, which is applied to the background color and border of the outer box. The child inner box is not affected, unlike how opacity works.
• Browser support for opacity is fairly good: IE7 and IE8 are non-standard but a proprietary filter can be easily added to make them behave exactly as if they could use opacity. Browser support for CSS RGBA is not quite as good, as IE7 and IE8 don't support it, although IE9+ does. (IE7, IE8, and IE9 all have opacity issues and bugs; see http://www.jacklmoore.com/notes/ie-opacity-inheritance/ for a succinct summary.)
• Transitions
  Normally, when CSS properties are changed (such as when placing the mouse on or off an element that uses the :hover pseudo-class), the change between CSS properties occurs immediately. CSS transitions allow time-based transitions to occur (although, if your browser doesn't support CSS transitions, the style changes still occur instantly). It's demo time:
  
  Move the mouse on the below box. When the transition is done, move the mouse off the box.
• When the mouse is moved on the box, its height decreases over the course of a second, its width increases (over 3 seconds), and its color changes (over 5 seconds). When the mouse is moved off the box, its height, width, and color all revert, at the same rate of change.
• Transitions can also have timing functions, which determine the rate of change (such as at a constant speed, or at a variable speed) for the transition over its duration. Further, transitions can have delay times, which is the time that elapses before the transition starts. The following demo delays the width change to start only after the height change has finished, and it also delays the color change to start only after the width change is done.
  
  Move the mouse on the below box. When the transition is done, move the mouse off the box.
• As always, browser support varies. The latest versions of all major web browsers support transitions, including IE10. IE8 and IE9 do not, so fallbacks will be needed if CSS transitions are used for anything crucial. Also, at present, there are a few minor omissions or issues with how some current browsers support transitions (like support for :before and :after pseudo-elements).
• @font-face: Downloadable Fonts
  @font-face allows a web page to specify fonts that can be downloaded from a server for use on the page. This gives websites the ability to use the precise fonts that it needs for its desired look. Without @font-face or a service like Google Web Fonts, a website needs to restrict its font use to "web safe" fonts: fonts that are likely available on all operating systems the website will be viewed on. The following demo uses the Alex Brush font, downloaded from the server:
  

  If your browser fully supports @font-face, this text uses the Alex Brush font.

  
  In case your browser doesn't fully support @font-face, here's a picture of what you should be seeing above:
  
• @font-face is not without issues, alas:
  • Some versions of Internet Explorer only support EOT fonts and not the full range of fonts types that are available. For example, the above demo will not use the Alex Brush font, an OTF font, in IE8 or earlier. Similarly, some versions of iOS Safari (v4 and earlier) only support SVG fonts.
  • Pages must be tested to see if the fonts display as intended on all target browsers. Alex Brush, for example, displays a bit differently (but acceptably for demo purposes) on Windows Safari 5 than it does in Chrome, Firefox, Internet Explorer, or Opera.
  • Firefox enforces the same-origin policy for fonts downloaded by @font-face. This requires that the fonts be hosted on the same domain as the website that uses them, or else they won't be downloaded.
  • The worst problem, however, is font licenses. Many font owners require websites to purchase licenses to use the fonts via @font-face, which is impractical for many websites. Some fonts allow free @font-face use (the font used here does), but the burden is on the website developer to examine a font's licensing scheme for its @font-face permissions.
• Flexboxes
  The flexbox (formally, CSS Flexible Box Layout) will revolutionize CSS layout once it is implemented by the major browsers and in widespread distribution. According to the W3C's flexbox abstract, the flexbox is "a CSS box model optimized for user interface design." Which is a polite way of saying that the pre-flexbox CSS box model was not optimized for user interface design. One key ability flexboxes have is that children elements in a flexbox container can automatically flex their sizes, growing to fill unused space or shrinking to avoid overflowing the parent container. Although the older box model could do certain things well, this flex ability was very difficult to achieve using CSS even when enhanced with JavaScript. Now, it'll be easy!
• The flexbox also has other useful features, such as strong control over the content's flow direction, display order, and alignment. See the W3C's flexbox overview for more details.
• The flexbox recommendation has changed a lot since it was first introduced in 2009, which is why browser support for the most recent version isn't yet robust. However, the flexbox is now a "Candidate Recommendation" ready for implementation by "everybody" and is unlikely to change substantially in the future. So, browsers are rapidly adding support for this flexbox version. Personally, I can hardly wait!
• Grid Layout
  In addition to flexboxes, the W3C has a Grid Layout Draft that discusses how a grid-based layout system could work. Grid layout, like flexboxes, would revolutionize CSS layout by again making something that is very useful but hard to achieve with CSS/JavaScript into something that is easy to achieve with CSS alone. See the draft for more details. Unfortunately, grid layout is just experimental at present and not at recommendation stage, so it be a while before CSS grid layout becomes available.
• @supports: Feature Queries
  @supports allows CSS feature detection in the CSS code itself rather than having to use JavaScript. When a page loads, @supports statements in the CSS are executed, check whether the browser supports specified CSS features (the "support conditions"), and cause conditional CSS styles to be applied based on the outcome of the check. Example:
    @supports (display: inline-flex) {
    div.example { display: inline-flex; }
  }
  This example checks if the browser supports inline flexboxes. If it does, the inline flexbox display style is applied to all divisions assigned the example class. Logical operators not, and, and or can be used with @supports support conditions to create versatile checks.
• If a browser does not support @supports itself, it just ignore all the CSS associated with the @supports statement. So, the basic CSS could define the styles that are used by default, while @supports could refine the styles for browsers that understand @supports.
• @supports unfortunately is not yet widely supported by the major browsers, although Chrome, Firefox, and Opera have or will soon have support. Internet Explorer and Safari do not support @supports, so JavaScript CSS feature detection will still be necessary for some time to come.
• Background Clipping
  Background clipping allows you to specify the extent of coverage for an element's background image or color. The background can be clipped to the content box, padding box, or border box.
  

  Press a button to clip the background.