Technical Reading + Quiz

DUE Thursday, Sep 30 – 4 points
(Friday NOON deadline)

We looked at image formats, and this week we’ll be looking at some advanced CSS techniques that use background images to achieve various effects. You won’t be expected to come to class and write this advanced CSS, but it is important that you understand the issues these specific techniques attempt to solve and how the web development community in general goes about solving such issues. (Most of these articles are more than six years old, but they come from the good ol’ days of innovation around CSS2: I still use these techniques on a regular basis in my work.)

  • Image Replacement: Fonts on the web are tricky business — and we’ll be talking more about the status of that business in a future class — so many techniques were developed to replace text with images of the text rendered in a nice font.

    • Using background-image to replace text by Douglas Bowman
      This image replace technique laid the groundwork for all future techniques. No one uses this specific technique because it hides the text from screen readers, but this fully lays out all the issues involved. (Read from the beginning down through “Example 1,” but you do not need to read “Example 2″ or beyond.)

    • Revised Image Replacement by Dave Shea
      This article picks up where the previous one left off, looking at a number of better techniques. (I use the Phark Revisited technique in nearly every project I work on. It inspired a T-shirt from ALA Store for geeks that I really, really wanted; sadly, it sold out and was never reprinted. )

  • Faux Columns
    This article explores how to create two floated columns with background colors. You might think you could do this without images, but Dan shows the problem with the “vertical stretch” and shows how to cheat it with a background image.

  • Sliding Doors
    This article blew people’s minds (including mine) when it was first published more than six years, showing how to create fancy tabbed navigation using a very clever trick with layered background images. (Since writing this article, Douglas Bowman went to work for Google as a visual designer; he is now the Creative Director at Twitter.)

  • What Are CSS Sprites?
    This article discusses a popular technique for putting multiple images in a single image file and changing what gets displayed by changing only the background position.

Once you have completed the reading, you will need to take a quiz of ten true-false questions. (These questions will be randomly selected from the questions below. You can retake the quiz up to five times. Don’t stress about getting 100% on these quizzes: if you get 80% or better, you will be ready to proceed to the next activity and I will give you full credit.)

All questions should be prefaced with an understood, “According to the author of the material … “:

  1. T/F? Image replacement techniques replace HTML text with images; this gives the designer greater control over fonts, kerning, etc. than does CSS.
  2. T/F? “FIR” stands for “Font Image Replacement.”
  3. T/F? In 2003, Douglas Bowman said that CSS font downloading wouldn’t be perfected and reliable for many years.
  4. T/F? In 2003, Douglas Bowman added an ID of “t-portfolio” to the <h1> element on his portfolio page.
  5. T/F? The “Classic FIR” technique fails because many screen readers ignore text set to — display: none — on the screen.
  6. T/F? The “Phark” image replacement technique uses a large positive value for the padding-top property to push the HTML text off the screen.
  7. T/F? The “Gilder/Levin” image replace technique does not allow transparency in the background image.
  8. T/F? Most of the image replacement techniques Dave Shea mentions fail in the rare case that the user has CSS enabled but images disabled in their browser.
  9. T/F? In HTML/CSS layouts, elements by default only expand horizontally to be as wide as they need to be to contain the content within them.
  10. T/F? The “simple secret” Dan Cederholm uses in his “Faux Columns” technique is a vertically tiled background image to create the illusion of colored columns.
  11. T/F? The “Faux Columns” technique does not work with floated columns, only with absolutely positioned columns.
  12. T/F? Using — background-position: 50% 0 — will center the background image from left to right, aligning the middle of the image with the middle of the element.
  13. T/F? In the “Sliding Doors” technique, Douglas Bowman puts background images on nested HTML elements to layer them.
  14. T/F? In the “Sliding Doors” technique, Douglas Bowman uses two images for each tab: a sliver for the left side of the tab and an excessively wide image for the right side of the tab.
  15. T/F? In the “Sliding Doors” technique, Douglas Bowman recommends setting the list item elements to — display: inline — to get them to line up next to each other horizontally.
  16. T/F? Wherever two nested HTML elements exist in the markup, CSS can be used to layer background images for various effects.
  17. T/F? The “CSS Sprites” technique aims to speed up the rendering of a web page by decreasing the number of calls to the server made by the browser.
  18. T/F? The “CSS Sprites” technique aims to speed up the rendering of a web page by decreasing the file size of the background images.
  19. T/F? Using negative values for the y-coordinate in the background position causes the background images to be slid upwards.
  20. T/F? The “CSS Sprites” technique works with image patterns that simultaneously tile vertically and horizontally.

DUE Thursday, Sep 30 – 4 points
(Friday NOON deadline)