Loading... Login Loading... Register

CSS Variables and Custom Properties Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which properties cannot utilize CSS variables?

Select your answer

Background colors and fonts.

Properties like

@media

queries.

CSS animation and keyframes.

All CSS properties can use variables.

Question 2/15

Can CSS variables be used within JavaScript?

Select your answer

Yes, but only in ES6 environments.

No, CSS variables are only for CSS.

Yes, using the

getComputedStyle()

method.

Yes, but must be converted to SASS first.

Question 3/15

Which of these is a potential benefit of using CSS variables?

Select your answer

CSS variables cannot interact with JavaScript.

CSS variables can help manage theme changes more efficiently.

CSS variables consume more memory.

CSS variables increase specificity complexity.

Question 4/15

How does the cascade handle CSS variables?

Select your answer

CSS variables cannot be overridden.

CSS variables do not follow normal CSS specificity rules.

CSS variables from a more specific selector will override those from a less specific one.

CSS variables from

:root

cannot be overridden anywhere.

Question 5/15

Which preprocessor feature can CSS variables provide better flexibility than?

Select your answer

JavaScript

Mixin Declarations

Directive Syntax

Global Theming

Question 6/15

Can CSS custom properties interact with hardware-accelerated transitions?

Select your answer

No, they never can.

Only with

@trans

keyword.

Yes, directly.

Only through indirectly referenced properties

Question 7/15

How does the DOM element style attribute handle CSS variable declarations?

Select your answer

It supports declaring and overriding existing variables per element.

It requires an inline

@var

keyword.

It doesn't recognize CSS variables.

It mirrors variable definitions at the global level.

Question 8/15

CSS variables can be animated using CSS transitions. True or false?

Select your answer

False

True

Question 9/15

Which of the following actions could unintentionally unassign a CSS variable value?

Select your answer

Redefining it with an empty string in a selector.

Assigning a default behavior within a media query.

Using an

!important

override for styles.

Altering the

:root

without preserving defaults.

Question 10/15

What property would you use to declare a CSS variable for font size that could be adjusted based on screen size?

Select your answer

Set within a

@media

rule with

--font-size

included.

Inline JavaScript configuration from the HTML page.

Use

calc()

with viewport units but not a variable.

Only use static pixels as variables can't be adjusted.

Question 11/15

What happens if you use a CSS variable that has not been defined?

Select your answer

The browser will throw an error.

The property using the undefined variable will have no effect.

The property will use its fallback value if provided, otherwise it will be applied as

initial

The property will default to unset.

Question 12/15

What is a potential downside of heavily using CSS variables for every stylized element?

Select your answer

They are not recognized by any modern browsers.

They have larger file size overhead.

Overused variables may lead to complicate debugging.

They degrade CSS rendering performance significantly.

Question 13/15

What happens if a CSS variable is reassigned within a context under

:root

Select your answer

It only redefines it for that context.

Redefinition isn't possible.

It causes a syntax error.

It redefines the variable globally.

Question 14/15

In what type of CSS selector are you most likely to redefine CSS variables for adaptive designs?

Select your answer

In media queries

At file scope settings

Inside pseudo-elements

Within keyframe definitions

Question 15/15

Which of the following is true about the relationship between CSS variables and JavaScript?

Select your answer

JavaScript can modify CSS variables on the fly, enhancing dynamic styling.

CSS variables cannot be modified by JavaScript.

CSS and JavaScript variables must be declared in the same file.

JavaScript requires a library to read CSS variables.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which properties cannot utilize CSS variables?

Available answers

Background colors and fonts.

Properties like <pre><code>@media</code></pre> queries.

CSS animation and keyframes.

All CSS properties can use variables.

While CSS variables can be used for most properties, they cannot be employed within media queries as part of their value set.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can CSS variables be used within JavaScript?

Available answers

Yes, but only in ES6 environments.

No, CSS variables are only for CSS.

Yes, using the <pre><code>getComputedStyle()</code></pre> method.

Yes, but must be converted to SASS first.

Using JavaScript's

getComputedStyle()

method, you can retrieve the value of CSS properties, including custom properties.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of these is a potential benefit of using CSS variables?

Available answers

CSS variables cannot interact with JavaScript.

CSS variables can help manage theme changes more efficiently.

CSS variables consume more memory.

CSS variables increase specificity complexity.

CSS variables allow for theme changes and reusability in style definitions, making it easier to manage styles across large projects.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does the cascade handle CSS variables?

Available answers

CSS variables cannot be overridden.

CSS variables do not follow normal CSS specificity rules.

CSS variables from a more specific selector will override those from a less specific one.

CSS variables from <pre><code>:root</code></pre> cannot be overridden anywhere.

CSS variables follow the same specificity rules as other CSS properties. Variables defined in more specific selectors will override those defined in less specific ones.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which preprocessor feature can CSS variables provide better flexibility than?

Available answers

JavaScript

Mixin Declarations

Directive Syntax

Global Theming

CSS variables allow for dynamic changes, unlike static preprocessor variables, which are beneficial for global theming and runtime adjustments.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can CSS custom properties interact with hardware-accelerated transitions?

Available answers

No, they never can.

Only with <pre><code>@trans</code></pre> keyword.

Yes, directly.

Only through indirectly referenced properties

Custom properties themselves are not hardware-accelerated but properties referencing them can be transitioned which may use hardware acceleration if applicable.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does the DOM element style attribute handle CSS variable declarations?

Available answers

It supports declaring and overriding existing variables per element.

It requires an inline <pre><code>@var</code></pre> keyword.

It doesn't recognize CSS variables.

It mirrors variable definitions at the global level.

Inline styles through the

style

attribute can define and override CSS variables for that specific element.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

CSS variables can be animated using CSS transitions. True or false?

Available answers

False

True

CSS variables themselves cannot be directly animated. However, the properties using them can be transitioned if the variable changes during a transition context.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following actions could unintentionally unassign a CSS variable value?

Available answers

Redefining it with an empty string in a selector.

Assigning a default behavior within a media query.

Using an <pre><code>!important</code></pre> override for styles.

Altering the <pre><code>:root</code></pre> without preserving defaults.

Defining a CSS variable with an empty string overwrites the previous value, effectively making it undefined or 'unassigned' when it's read.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

What property would you use to declare a CSS variable for font size that could be adjusted based on screen size?

Available answers

Set within a <pre><code>@media</code></pre> rule with <pre><code>--font-size</code></pre> included.

Inline JavaScript configuration from the HTML page.

Use <pre><code>calc()</code></pre> with viewport units but not a variable.

Only use static pixels as variables can't be adjusted.

You can define a CSS variable that adjusts within a

@media

rule to change its value based on screen size.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens if you use a CSS variable that has not been defined?

Available answers

The browser will throw an error.

The property using the undefined variable will have no effect.

The property will use its fallback value if provided, otherwise it will be applied as <pre><code>initial</code></pre>.

The property will default to unset.

If a CSS variable is undefined and a fallback value is provided, the property will use that fallback value. Without a fallback, the property behaves as though it has the initial value.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is a potential downside of heavily using CSS variables for every stylized element?

Available answers

They are not recognized by any modern browsers.

They have larger file size overhead.

Overused variables may lead to complicate debugging.

They degrade CSS rendering performance significantly.

Widespread use of CSS variables can complicate debugging, as tracing variable values throughout a document can become complex if not well-organized.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens if a CSS variable is reassigned within a context under <pre><code>:root</code></pre>?

Available answers

It only redefines it for that context.

Redefinition isn't possible.

It causes a syntax error.

It redefines the variable globally.

Reassigning a custom property value inside

:root

within a context like a media query or smaller scope affects the property only within that context.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

In what type of CSS selector are you most likely to redefine CSS variables for adaptive designs?

Available answers

In media queries

At file scope settings

Inside pseudo-elements

Within keyframe definitions

Media queries are commonly used to redefine CSS variables to adjust the styles based on different screen sizes and resolutions.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following is true about the relationship between CSS variables and JavaScript?

Available answers

JavaScript can modify CSS variables on the fly, enhancing dynamic styling.

CSS variables cannot be modified by JavaScript.

CSS and JavaScript variables must be declared in the same file.

JavaScript requires a library to read CSS variables.

JavaScript can dynamically modify CSS variables, allowing for more dynamic and responsive styling operations based on events and conditions.