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

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

Select your answer

False

True

Question 2/15

Which preprocessor feature can CSS variables provide better flexibility than?

Select your answer

Mixin Declarations

Global Theming

JavaScript

Directive Syntax

Question 3/15

Which properties cannot utilize CSS variables?

Select your answer

All CSS properties can use variables.

Properties like

@media

queries.

Background colors and fonts.

CSS animation and keyframes.

Question 4/15

Can CSS variables be used within JavaScript?

Select your answer

Yes, but must be converted to SASS first.

Yes, using the

getComputedStyle()

method.

Yes, but only in ES6 environments.

No, CSS variables are only for CSS.

Question 5/15

Where can CSS custom properties be defined?

Select your answer

Only in HTML documents

Inside any CSS selector

Only inside the

:root

selector

Only in external stylesheets

Question 6/15

How would you set a default for a CSS variable within a class if it's not defined elsewhere?

Select your answer

color: default(--text-color, black);

color: if-set(--text-color, black);

color: @var --text-color, black;

color: var(--text-color, black);

Question 7/15

Which of these is NOT a valid fallback mechanism when using CSS variables?

Select your answer

Using

if (var(--color)) then #000;

Using JavaScript to set values dynamically.

Defining a default value with another CSS variable using

var(--unknown, var(--default-color))

Using

var(--primary-color, #000)

to provide a fallback value if the variable is undefined.

Question 8/15

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

Select your answer

They degrade CSS rendering performance significantly.

Overused variables may lead to complicate debugging.

They have larger file size overhead.

They are not recognized by any modern browsers.

Question 9/15

How does the cascade handle CSS variables?

Select your answer

CSS variables do not follow normal CSS specificity rules.

CSS variables cannot be overridden.

CSS variables from

:root

cannot be overridden anywhere.

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

Question 10/15

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

:root

Select your answer

It causes a syntax error.

It only redefines it for that context.

It redefines the variable globally.

Redefinition isn't possible.

Question 11/15

What is the scope of CSS variables declared inside a media query?

Select your answer

They have no scope and can't be used.

They are global and can be used anywhere.

They can be applied globally if redefined outside the media query.

They are only valid within that media query.

Question 12/15

What is the correct syntax for declaring a CSS variable?

Select your answer

--main-color: #333;

let --main-color = #333;

@var --main-color #333;

var(--main-color: #333);

Question 13/15

Can CSS custom properties be nested like SASS variables?

Select your answer

Yes, but only with special plugins.

No, CSS variables are flat by design.

Yes, using

var()

functions within other variable calls.

Yes, using

@nested

directive.

Question 14/15

Can CSS custom properties interact with hardware-accelerated transitions?

Select your answer

Only through indirectly referenced properties

Only with

@trans

keyword.

Yes, directly.

No, they never can.

Question 15/15

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

Select your answer

The property will default to unset.

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

initial

The property using the undefined variable will have no effect.

The browser will throw an error.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which preprocessor feature can CSS variables provide better flexibility than?

Available answers

Mixin Declarations

Global Theming

JavaScript

Directive Syntax

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

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which properties cannot utilize CSS variables?

Available answers

All CSS properties can use variables.

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

Background colors and fonts.

CSS animation and keyframes.

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

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can CSS variables be used within JavaScript?

Available answers

Yes, but must be converted to SASS first.

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

Yes, but only in ES6 environments.

No, CSS variables are only for CSS.

Using JavaScript's

getComputedStyle()

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

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Where can CSS custom properties be defined?

Available answers

Only in HTML documents

Inside any CSS selector

Only inside the <pre><code>:root</code></pre> selector

Only in external stylesheets

CSS custom properties can be defined within any CSS selector, including

:root

, id, class, or any other selector.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you set a default for a CSS variable within a class if it's not defined elsewhere?

Available answers

<pre><code>color: default(--text-color, black);</code></pre>

<pre><code>color: if-set(--text-color, black);</code></pre>

<pre><code>color: @var --text-color, black;</code></pre>

<pre><code>color: var(--text-color, black);</code></pre>

To set a fallback value for a CSS variable, use

var(--variable-name, default-value)

which applies the default if the variable is not set.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of these is NOT a valid fallback mechanism when using CSS variables?

Available answers

Using <pre><code>if (var(--color)) then #000;</code></pre>

Using JavaScript to set values dynamically.

Defining a default value with another CSS variable using <pre><code>var(--unknown, var(--default-color))</code></pre>

Using <pre><code>var(--primary-color, #000)</code></pre> to provide a fallback value if the variable is undefined.

The option

if (var(--color)) then #000;

is not valid CSS syntax. Instead, use the

var()

function with a fallback value.

Question 8/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 degrade CSS rendering performance significantly.

Overused variables may lead to complicate debugging.

They have larger file size overhead.

They are not recognized by any modern browsers.

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

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

How does the cascade handle CSS variables?

Available answers

CSS variables do not follow normal CSS specificity rules.

CSS variables cannot be overridden.

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

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

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 10/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 causes a syntax error.

It only redefines it for that context.

It redefines the variable globally.

Redefinition isn't possible.

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 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the scope of CSS variables declared inside a media query?

Available answers

They have no scope and can't be used.

They are global and can be used anywhere.

They can be applied globally if redefined outside the media query.

They are only valid within that media query.

CSS variables declared inside a media query are scoped to that media query and only affect styles within that media context.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the correct syntax for declaring a CSS variable?

Available answers

--main-color: #333;

let --main-color = #333;

@var --main-color #333;

var(--main-color: #333);

CSS variables, also known as custom properties, are declared with the syntax

--variable-name: value;

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can CSS custom properties be nested like SASS variables?

Available answers

Yes, but only with special plugins.

No, CSS variables are flat by design.

Yes, using <pre><code>var()</code></pre> functions within other variable calls.

Yes, using <pre><code>@nested</code></pre> directive.

CSS custom properties are always flat and cannot inherently support nesting as SASS does.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Can CSS custom properties interact with hardware-accelerated transitions?

Available answers

Only through indirectly referenced properties

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

Yes, directly.

No, they never can.

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

Question 15/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 property will default to unset.

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

The property using the undefined variable will have no effect.

The browser will throw an error.

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.