Learn

Sometimes there are reasons why a given variable may be invalid when the webpage renders. For example, the variable could have been set improperly—a variable with a value of 20px could mistakenly be set as the value of the background-color property. Fallback values prevent these types of errors from happening.

Fallback values can be provided as the second and optional argument of the var() function. As the name suggests, they will be used if the variable given as the first argument is invalid.

An example of declaring a fallback value is as follows:

body { background: var(--main-background-color, #F3F3F3); }

If a value of --main-background-color hasn’t been explicitly defined in the stylesheet or returns a non-color value, then the fallback value of #F3F3F3 is used.

The fallback value may also be a CSS variable, in which case it must be passed using another var() function. Also, note that the var() function accepts a maximum of two arguments.

body { /* --favorite-orange if --main-color is invalid and red if --favorite-orange is invalid */ font-color: var(--main-color, var(--favorite-orange, red));

In the above code, we set --favorite-orange as the fallback value of the --main-color variable and red as the fallback value of the --favorite-orange variable. We could continue with this pattern and provide yet another CSS variable in place of the red fallback value.

body { /* --favorite-orange if --main-color is invalid and red if --favorite-orange is invalid and --favorite-yellow if --favorite-orange is invalid */ font-color: var(--main-color, var(--favorite-orange, var(--favorite-yellow, yellow))); }

Fallback values are optional, but they ensure that the specified styles will be applied to the web page in the case of an error.

An important last note on fallback values is that they are not used to fix browser compatibility issues. If the browser being used does not support CSS variables, as is the case with Internet Explorer, fallback variables will not ensure all elements are rendered properly. Thankfully most modern browsers support CSS variables—we will talk about these types of issues in the Browser Compatibility lesson!

Instructions

1.

In the body selector ruleset, create a variable called --main-font-type and give it a value of 'Roboto'. Assign --main-font-type as the value of the font-family property in the body selector. Finally, set a fallback value of 'Helvetica Neue' on the variable.

2.

Create two new variables in the :root pseudo-class. The first variable’s name should be backup-color-1 and the second should be --backup-color-2. Set the value of --backup-color-1 to be cadetblue, and a value of gray for --backup-color-2.

Set each of the variables as fallback values on the background property in the .artist:nth-child(even) selector rules. The --backup-color-1 variable should be the first fallback value and --backup-color-2 should be the second fallback value.

3.

Comment out the --group-two-background-color variable declaration, defined in the :root selector ruleset, and the --main-font-type variable in the body selector ruleset. Notice what happens to both the font and the alternating artist release backgrounds.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?