CODEWITHSUNDEEP
cssmedia-queriescss-calc
AndSmith
AndSmith

Reputation: 821

calc() not working within media queries

@media screen and (max-width: calc(2000px-1px)) { 
  .col { width: 200px; }
}

The value after subtraction should be 1999px, however it does not seem to be working. If I manually change it to 1999px it works fine, so I know it's not a problem with my CSS. Is calc not supported within media queries, or am I doing something wrong?

Upvotes: 62

Views: 29880

Answers (5)

R Menke
R Menke

Reputation: 8411

There are two specifications relevant to this feature :

The media queries specifications states that some conditions (e.g. width) can have a number value.

From the values specification :

A math function represents a numeric value and can be used wherever such a value would be valid.

These two combined definitely make it required that browsers implement calc() and others in media feature values.

This is also tracked by MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility

MDN support data for calc in media queries

Today all browsers support calc.

Some sub features however can have poor support. For example aspect-ratio has mixed support for calc() because it's underlying type doesn't support float values. Weirdness like this can make it seem that calc() is flaky even when something else is causing issues.

Upvotes: 3

Alex
Alex

Reputation: 11255

ANSWER EDITED AGAIN 21.03.2022:

In the current version of the spec, using calc (or var) in media queries is NOT supported by the spec (as TylerH pointed out below).

Properties sometimes accept complex values, e.g., calculations that involve several other values. Media features* only accept single values: one keyword, one number, etc.

* Media features include (max-width: ...) (or (... < width < ...)).

Old specs back to 2012 also explicitly mention no calc.

The OP question would definitely have been broken because calc needs whitespace between operators calc(2000px - 1px), but even with whitespace you shouldn't expect or trust it to work reliably.

Browsers that support calc are not actually following the spec.

ANSWER WAS EDITED 13.02.2018:

Using calc in media queries is supported by the spec, but support was only implemented by browsers recently (February 2018). Currently, calc in media queries is supported by Safari Technology Preview 49+, Chrome 66+, and Firefox 59+. See MDN's calc() page for the most up-to-date information.

Upvotes: 55

CSSBurner
CSSBurner

Reputation: 1991

Support for use of calc() in media queries is browser-dependent HOWEVER the use of mixed units (e.g. em and px at same time) have limited or no current support. Please take a look at this JSFiddle (which tests 4 current browsers - Chrome 80.0.3987.163, Opera 67.0.3575.115, Firefox 74.0.1, and Microsoft Edge 44.18362.449.0) to verify.

For example, these media queries are valid for certain browsers (Chrome 80.0.3987.163, Opera 67.0.3575.115, and Firefox 74.0.1 but NOT Microsoft Edge 44.18362.449.0)

@media (min-width:calc(2em - 1em)) { div { color: green } } // valid

@media (min-width:calc(2px - 1px)) { div { color: green } } // valid

whereas this media query is only valid in Firefox 74.0.1

@media (min-width:calc(1em - 1px)) { div { color: green } } // different units are "mixed" in same calc() -----> invalid except Firefox

UPDATE December 2020: Other functions within the calc() family of functions (that is, functions which perform an operation on one or more calc-sums) can also be used within a media query. This JSFiddle demonstrates the utility of the comparison functions max(), min(), and clamp(). These functions are currently supported within a media query by the browsers:

  1. Chrome 87
  2. Edge 87
  3. Firefox 82
  4. Opera 72

However, using mixed units within each comparison function is only supported by the following browsers (from the list above):

  1. Firefox 82

Upvotes: 14

Ido Ayal
Ido Ayal

Reputation: 111

There is no support for media queries with calc() in IE11 (Up to October 2020).

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Media query</title>
    <style>
        body {
            background-color: powderblue;
        }

        @media screen and (min-width: calc(700px + 1px)) {
            body {
                background-color: yellow;
            }
        }
    </style>
    
</head>

<body>
</body>

</html>

Upvotes: 0

Gavin
Gavin

Reputation: 7976

Pinal's answer is great, but your CSS wouldn't work anyways. You need spaces separating your units. In CSS 2000px-1px would be considered a single value, which obviously isn't a valid unit. It should be 2000px - 1px.

I'm currently using Chrome 66 and calc works fine in media queries.

Upvotes: 8

Related Questions