mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): css variables quiz (#58370)
This commit is contained in:
Tom
+129
-106
@@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
|
||||
|
||||
#### --text--
|
||||
|
||||
If you've declared a custom property for animation speed using `@property`, and a user adjusts their settings for animations in their browser, how would that affect your custom property? Would they be able to see the changes, or does it stick to the value you've set?
|
||||
Which of the following is NOT a valid descriptor in the `@property` rule?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The animations will run slower regardless of user settings
|
||||
`syntax`
|
||||
|
||||
---
|
||||
|
||||
The user's settings override your defined speed
|
||||
`inherits`
|
||||
|
||||
---
|
||||
|
||||
The animations will completely stop if the user disables them
|
||||
`initial-value`
|
||||
|
||||
#### --answer--
|
||||
|
||||
The user's preferences will take priority, and they can adjust how the animations play out
|
||||
`animation`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
In the following code, which value will color have if `--main-color` is not defined?
|
||||
In the following code, which value will `color` have if `--main-color` is not defined?
|
||||
|
||||
```css
|
||||
p {
|
||||
@@ -49,19 +49,19 @@ p {
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Undefined
|
||||
`Undefined`
|
||||
|
||||
---
|
||||
|
||||
No color will be applied
|
||||
No color will be applied.
|
||||
|
||||
---
|
||||
|
||||
main-color
|
||||
`--main-color`
|
||||
|
||||
#### --answer--
|
||||
|
||||
pink
|
||||
`pink`
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -75,7 +75,7 @@ Which of the following is a valid way to declare a custom property in CSS?
|
||||
|
||||
---
|
||||
|
||||
`custom-variable: #333;`
|
||||
`@property: #333`
|
||||
|
||||
---
|
||||
|
||||
@@ -93,47 +93,47 @@ What is the main purpose of using custom properties in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To change the DOM structure
|
||||
To change the DOM structure.
|
||||
|
||||
---
|
||||
|
||||
To create dynamic selectors
|
||||
To create dynamic selectors.
|
||||
|
||||
---
|
||||
|
||||
To improve accessibility
|
||||
To improve accessibility.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To define reusable styles across a project
|
||||
To define reusable styles.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Custom properties defined in the `:root` selector are considered as?
|
||||
What does the `:root` selector represent?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Locally scoped
|
||||
The first child element of the `body`.
|
||||
|
||||
---
|
||||
|
||||
Non-inheritable
|
||||
The parent element of all `header` elements.
|
||||
|
||||
---
|
||||
|
||||
Element-specific
|
||||
The first child of the `html` tag.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Globally scoped
|
||||
The highest-level element in the DOM tree.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How do you apply a previously defined custom property `--foreground` in CSS?
|
||||
How do you apply a `--foreground` custom property as the `color` in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
@@ -155,67 +155,67 @@ How do you apply a previously defined custom property `--foreground` in CSS?
|
||||
|
||||
#### --text--
|
||||
|
||||
What happens if you use a custom property that is not defined in the current scope?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It results in an error
|
||||
|
||||
---
|
||||
|
||||
It uses the value `inherit`
|
||||
|
||||
---
|
||||
|
||||
The property is ignored
|
||||
|
||||
#### --answer--
|
||||
|
||||
The browser applies the default value, if provided
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the purpose of the `@property` rule in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To define a media query
|
||||
To define a media query.
|
||||
|
||||
---
|
||||
|
||||
To control CSS animations
|
||||
To control CSS animations and their timing.
|
||||
|
||||
---
|
||||
|
||||
To group CSS properties
|
||||
To group CSS properties into one rule.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To define how custom properties behave
|
||||
To define how custom properties behave.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What should you be cautious of when using custom properties in terms of browser compatibility?
|
||||
When declaring a custom `@property`, what is the purpose of the `syntax` in its definition?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Custom properties are automatically converted to `px` units
|
||||
It specifies the default value of the custom property.
|
||||
|
||||
---
|
||||
|
||||
Custom properties always override inline styles
|
||||
It determines whether the property can be inherited by child elements.
|
||||
|
||||
---
|
||||
|
||||
Custom properties can cause layout shifts
|
||||
It defines whether the property is applied to all elements.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Older browsers may not support custom properties
|
||||
It enforces a specific data type or value pattern for the custom property.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What should you be cautious of when using custom properties?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Custom properties are automatically converted to `px` units.
|
||||
|
||||
---
|
||||
|
||||
Custom properties always override inline styles.
|
||||
|
||||
---
|
||||
|
||||
Custom properties cannot be used to set font values.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Custom properties may not be supported in older browsers.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -225,19 +225,19 @@ What is the purpose of providing a fallback value in the `var()` function for CS
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To reduce the amount of CSS code
|
||||
To reduce the amount of CSS code.
|
||||
|
||||
---
|
||||
|
||||
To improve performance in modern browsers
|
||||
To improve performance in modern browsers.
|
||||
|
||||
---
|
||||
|
||||
To optimize rendering time on slow networks
|
||||
To optimize rendering time on slow networks.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To ensure a valid value is applied if the custom property is undefined
|
||||
To ensure a valid value is applied if the custom property is undefined.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -247,215 +247,238 @@ When defining a variable `--foreground` inside a media query, what happens when
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The custom property is preserved and continues to apply
|
||||
The custom property is preserved and continues to apply.
|
||||
|
||||
---
|
||||
|
||||
The custom property reverts to its initial value
|
||||
The custom property reverts to its initial value.
|
||||
|
||||
---
|
||||
|
||||
The custom property is recalculated based on the viewport
|
||||
The custom property is recalculated based on the viewport.
|
||||
|
||||
#### --answer--
|
||||
|
||||
The custom property is no longer available as it is scoped to the media query
|
||||
The custom property is no longer available as it is scoped to the media query.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is not true when defining custom properties?
|
||||
How would the following declaration behave?
|
||||
|
||||
```css
|
||||
color: var(--main-color, var(--fallback-color, #000));
|
||||
```
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Custom properties can be inherited by child elements
|
||||
It will apply `--main-color` even if it is not defined, defaulting to that value.
|
||||
|
||||
---
|
||||
|
||||
Custom properties can be defined at any level in the DOM hierarchy
|
||||
It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors.
|
||||
|
||||
---
|
||||
|
||||
Custom properties can be updated dynamically using JavaScript
|
||||
It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Custom properties can override user agent styles by default
|
||||
It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000`.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How would the following declaration behave: `color: var(--main-color, var(--fallback-color, #000));`?
|
||||
What is one benefit of using `@property` in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It will apply `--main-color` even if it is not defined, defaulting to that value
|
||||
It improves performance by precomputing custom property values.
|
||||
|
||||
---
|
||||
|
||||
It will apply `--main-color` and `--fallback-color` simultaneously, resulting in a blend of the two colors
|
||||
It automatically prefixes custom properties for better browser support.
|
||||
|
||||
---
|
||||
|
||||
It will always default to `#000`, regardless of whether `--main-color` or `--fallback-color` is defined
|
||||
It restricts the use of custom properties to specific elements.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It applies `--main-color` if defined; otherwise, checks `--fallback-color;` and if both are undefined, it uses `#000`
|
||||
It allows for animations of custom properties.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the primary use case for the `@property` rule when working with CSS animations?
|
||||
What does the `inherits` property in a custom `@property` declaration control?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To modify keyframe sequences based on variable values
|
||||
Whether the custom property will have an initial value.
|
||||
|
||||
---
|
||||
|
||||
To control custom property inheritance during animation
|
||||
Whether the property can have a shorthand version.
|
||||
|
||||
---
|
||||
|
||||
To ensure that custom properties maintain compatibility with media queries
|
||||
Whether the property accepts fallback values.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To define which custom properties are allowed to animate and set their initial values
|
||||
Whether the custom property's value is passed to child elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which CSS pseudo-class can be used to detect if a custom property (CSS Variable) is defined or not?
|
||||
In the declaration of a custom `@property`, what does the `initial-value` specify?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`:defined`
|
||||
The acceptable values the property can accept.
|
||||
|
||||
---
|
||||
|
||||
`:not(--var)`
|
||||
The priority of the property in the cascade.
|
||||
|
||||
---
|
||||
|
||||
`:is-var`
|
||||
The type of value the property must have.
|
||||
|
||||
#### --answer--
|
||||
|
||||
None of the above
|
||||
The fallback value for the property.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
In which scenario might defining a custom property in a media query cause unexpected behavior?
|
||||
Given the following HTML and CSS code, what will be the value of the `color` property for the `.box` element?
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="box">Text</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--main-color: red;
|
||||
}
|
||||
|
||||
.container {
|
||||
--main-color: blue;
|
||||
}
|
||||
|
||||
.box {
|
||||
color: var(--main-color, black);
|
||||
}
|
||||
```
|
||||
|
||||
#### --distractors--
|
||||
|
||||
When the property is defined using a `px` unit
|
||||
`black`
|
||||
|
||||
---
|
||||
|
||||
When the property is defined outside of the `:root`
|
||||
`red`
|
||||
|
||||
---
|
||||
|
||||
When the property is defined at the bottom of the stylesheet
|
||||
`green`
|
||||
|
||||
#### --answer--
|
||||
|
||||
When the media query condition no longer applies, and the custom property is no longer valid
|
||||
`blue`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the advantage of using CSS variables over traditional hard-coded values in a stylesheet?
|
||||
Which property should a CSS gradient be applied to?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
CSS variables reduce the size of the HTML file
|
||||
`color`
|
||||
|
||||
---
|
||||
|
||||
CSS variables are automatically minified by the browser
|
||||
`border-radius`
|
||||
|
||||
---
|
||||
|
||||
CSS variables only work for colors, not other properties
|
||||
`box-shadow`
|
||||
|
||||
#### --answer--
|
||||
|
||||
CSS variables allow for dynamic changes via JavaScript, making the code more flexible
|
||||
`background`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
When using custom properties with CSS Grid or Flexbox, what should you be cautious about?
|
||||
What is the purpose of color stops in CSS gradients?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Custom properties override grid or flex properties by default
|
||||
To define the transparency level of the gradient.
|
||||
|
||||
---
|
||||
|
||||
Flexbox and Grid ignore custom properties during layout calculations
|
||||
To specify the direction of the gradient.
|
||||
|
||||
---
|
||||
|
||||
Custom properties can cause layout shifts when recalculated
|
||||
To repeat the gradient in a fixed pattern.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Custom properties should be managed carefully, as they are recalculated with each layout pass, potentially impacting performance
|
||||
To define the specific points where colors change in the gradient.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
When using a custom property (CSS variable) with the `calc()` function, which of the following is a correct way to apply it to set the `width` of an element?
|
||||
What happens if no angle or direction is specified in a CSS linear gradient?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`width: calc(--main-width + 20px);`
|
||||
The gradient defaults to a diagonal direction.
|
||||
|
||||
---
|
||||
|
||||
`width: var(--main-width) calc(20px);`
|
||||
The gradient defaults to moving from bottom to top.
|
||||
|
||||
---
|
||||
|
||||
`width: var(calc(--main-width) + 20px);`
|
||||
The gradient defaults to moving from left to right.
|
||||
|
||||
#### --answer--
|
||||
|
||||
`width: calc(var(--main-width) + 20px);`
|
||||
The gradient defaults to moving from top to bottom.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is the correct way to define a fallback value for a CSS variable when the custom property is not available?
|
||||
Which CSS gradient function allows you to create a gradient that radiates outward from a central point?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`color: var(--primary-color && inherit);`
|
||||
`linear-gradient()`
|
||||
|
||||
---
|
||||
|
||||
`color: var(--primary-color || inherit);`
|
||||
`conic-gradient()`
|
||||
|
||||
---
|
||||
|
||||
`color: fallback(var(--primary-color), inherit);`
|
||||
`repeating-linear-gradient()`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`color: var(--primary-color, inherit);`
|
||||
|
||||
`radial-gradient()`
|
||||
|
||||
Reference in New Issue
Block a user