[AI Help] Question: can i use css variables in media queries?

[elaffen]

What is the issue with the answer?

The answer is wrong. Correct answer is found in a Note box on the page https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Note: Variables do not work inside media queries and container queries. The var() function can be used in place of any part of a value in any property on an element. The var() function cannot be used as property names, selectors, or anything else besides property values. So, we can't use it in a media query or container query.

How would you categorize this issue?

• The answer is harmful / unsafe.
• The answer is not correct.
• The answer is not helpful.
• The answer is outdated.

What did you ask?

1. can i use css variables in media queries?

What did AI Help answer?

Yes, you can use CSS variables in media queries. CSS variables, also known as custom properties, can be used to store values that can be reused throughout your CSS code. They can be particularly useful when defining breakpoints in media queries.

Here's an example of how you can use CSS variables in media queries:

:root {
  --breakpoint: 1024px;
}

@media (max-width: var(--breakpoint)) {
  /* Styles for screens below the defined breakpoint */
  .aside, .main {
    width: 100%;
  }
}

In the example above, the --breakpoint CSS variable is defined at the :root level, making it accessible throughout the document. The media query then uses the var() function to reference the value of the --breakpoint variable. This allows you to easily update the breakpoint value in one place, making it more maintainable.

By setting the width of both the .aside and .main elements to 100% within the media query, you ensure that they take up the full width of the viewport when the screen width is below the defined breakpoint.

Remember to define the CSS variables before using them in media queries or any other part of your CSS code.

What MDN pages did AI Help consult?

• Beginner's guide to media queries
• Responsive design
• Using media queries
• Using media queries for accessibility

[caugner]

Thanks for raising this issue! 👍

Although the note on the Using CSS custom properties (variables) page mentions that CSS variables do not work inside media queries and container queries, AI Help falsely states that CSS variables can be used in media queries and provides an incorrect example.

Unfortunately, AI Help didn't consult that page, and the Using media queries page doesn't mention this limitation.

We're looking into improvements to avoid this issue.

[caugner]

@elaffen Thanks again for reporting this issue. 👍

As we're working on an iteration, I would like to share with you what AI Help 2.0 might answer.

Can you please check how the following answer performs with regard to the issue you reported above? 🙏

can i use css variables in media queries?

Yes, you can use CSS custom properties (also known as CSS variables) in media queries, but with some limitations. While you can use CSS variables within the blocks of a media query to define styles that will apply when the media query is true, you cannot use CSS variables as the values of the media query features themselves.

For example, you can do this:

:root {
  --mobile-breakpoint: 600px;
}

@media (min-width: 600px) {
  body {
    /* Using a CSS variable inside the media query block */
    font-size: var(--large-font-size);
  }
}

However, you cannot do this:

:root {
  --mobile-breakpoint: 600px;
}

/* This will not work because you cannot use CSS variables for the media query values */
@media (min-width: var(--mobile-breakpoint)) {
  body {
    font-size: 1.2em;
  }
}

The reason for this limitation is that media queries are evaluated by the browser before any DOM is constructed, and CSS variables are resolved based on the DOM tree, which means that the values of CSS variables are not available when the browser determines which media queries apply.

For more information on CSS custom properties and how to use them, you can refer to the MDN documentation on Using CSS custom properties (variables).

For more information on media queries, you can refer to the MDN documentation on Using media queries.

[elaffen]

Perfect. Thanks for the update

[caugner]

Thanks for the review, much appreciated.