Embedded Files
Home > Chapter Review and Exercises > Chapter 19 - More CSS Techniques
Summary
Summary
This chapter is a collection of CSS techniques that are good to know but that didn’t quite fit into the previous chapter topics. If you are a beginner, it may be especially helpful to cover CSS resets (page 554) and Normalize.css (page 555) for clearing out browser default styles before writing the styles for your own web pages. It is confusing when a style rule you write doesn’t produce the expected result, and browser defaults are often the culprit. This is the last chapter in the book related to style sheets.
Takeaways
Takeaways
In Chapter 19, you will learn the following:
Tips and tricks for styling form elements, including adding styles to a sample sneaker order form.
Some table-specific properties that affect the spacing between cells (border-collapse and border-spacing), how the width is calculated (table-layout), where the caption appears (caption-side), and how empty cells are handled (empty-cells).
Using a CSS reset and normalizer to clear out browser default styles, creating a “clean slate” for our own style sheets.
Some image-replacement techniques for using images in place of text in a way that is accessible to screen readers and search engines.
A technique for combining images into one image file (a sprite) to reduce the number of HTTP requests to the server in order to improve performance.
Two methods (CSS Feature Queries and Modernizr) for testing whether a browser supports a newer CSS property so fallbacks can be provided.
CSS feature queries that test browser support for properties and values using an @supports rule. If the browser passes the test, the styles in the brackets are applied.
Modernizr, a JavaScript library that tests for HTML5 and CSS3 features when the page is loaded. It is more widely supported than feature queries, but will not work at all if JavaScript is not enabled on the browser.
Key Terms in Chapter 19
Key Terms in Chapter 19
cell padding
The amount of space within a cell, between the content and the cell edge.
cell spacing
The amount of space between cells.
CSS reset
A collection of style rules that overrides all user agent styles and creates a neutral starting point.
image replacement technique
A method for using an image in place of text (such as a logo) in a way that keeps the text accessible to screen readers and search engines. The image is added as a CSS background on the text element, and the text itself is shifted out of the way with a margin so it is not rendered on the page.
sprite
Combines multiple smaller images into a single image, resulting in fewer server requests and better performance. CSS width, height, and background position properties are used to position the sprite so only one portion is visible at a time.
feature detection
Testing for browser support for a specific CSS property or value. Supporting browsers are given the desired styles, and a fallback is provided to non-supporting browsers.
feature query
The @support rule that tests browser support for a particular property and value declaration (similar to a media query).
operators
Refines the feature query test by adding not, and, or or to the declaration or multiple declarations.
Modernizr
A lightweight JavaScript library that tests for a variety of HTML5 and CSS features when the page is loaded in the browser.
Exercises in Chapter 19
Exercises in Chapter 19
None.
Test Yourself
Test Yourself
1. What is the purpose of a CSS reset?
a. To override browser defaults.
b. To make presentation more predictable across browsers.
c. To prevent elements from inheriting unexpected styles.
d. All of the above.
2. What is the purpose of a CSS sprite?
a. To improve site performance.
b. To use small images in place of large ones, reducing file size.
c. To reduce the number of HTTP requests.
d. a and c.
e. All of the above.
3. What is the purpose of an image replacement technique?
a. To achieve really big text indents.
b. To use a decorative graphic in place of text.
c. To remove the text from the document and replace it with a decorative image.
d. To maintain the semantic content of the document.
e. b and d.
f. All of the above.
4. Name two approaches to aligning form controls and their respective labels without tables. A general description will do here.
5. Match the style rules on the left below (labeled a through e), with their respective tables, as shown to the right (labeled 1 to 5).
NOTE: Color #99f is
a. table { border-collapse: collapse;}
td { border: 2px black solid; }
b. table { border-collapse: separate; }
td { border: 2px black solid; }
c. table {
border-collapse: separate;
border-spacing: 2px 12px; }
td { border: 2px black solid; }
d. table {
border-collapse: separate;
border-spacing: 5px;
border: 2px black solid; }
td { background-color: #99f; }
e. table {
border-collapse: separate;
border-spacing: 5px; }
td { background-color: #99f;
border: 2px black solid; }
6. Using Modernizr to test for border-radius, say whether the div will display with rounded corners based on the following generated class results:
.border-radius div {
border: 1px solid green;
border-radius: .5em;
}
a. <html class="js .no-border-radius">
b. <html class="js .border-radius">
c. <html class="no-js">
7. As of this writing, what advantage does Modernizr have over CSS feature detection? What long-term advantage will CSS feature detection have over Modernizr?
Report abuse