Search code examples
htmlcssmedia-queries

CSS Not Clause for media queries - as in a catchall?

I have a media query, for my CSS, where it displays a block for a certain media type - but I want to display a position:fixed set if CSS rules for all other possibilities,

header {
    position:fixed;
    padding: 0px;
    clear: both;
    width: 100%;
    max-width:960px;
    margin-top: 0px auto 4px auto;
    height: 200px;
}

@media only screen 
and (max-device-width : 480px) 
and (orientation : landscape) {
    header {
        position:static;
        height: 100px;
    }

So What I'm asking is -- can I set a clause for "all other cases that don't fit this media query, like an else statement, or do I have to set the query in the HTML link reference and then have two separate stylesheets?

If my clauses are not in this query they're in the open and read by all media cases, but I would have to i) put the default actions in a CSS rule inside this query ad ii) then put this media query at the bottom of the CSS page to then "overwrite" the pre-set "fixed" rules.

The rules are not yet written, but I have the header, but I will have about 5 other parts of the site - nav / main / footer which will behave differently, and would like one set for this media query and then another set for the ELSE, clause. Any suggestions?

Update:

@media only not screen(max-device-width : 480px) and (orientation : landscape)

or

@media not only screen(max-device-width : 480px) and (orientation : landscape)

Does not work for viewing on laptop in landscape mode... hmm.

Solution

  • This is a complex question, so let's tackle it in three parts:

    1.

    Straight to the point, consider this snippet:

    <!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<style type="text/css">

header {
    /* ideally, red should be here, as default */
    background-color: blue;
}

@media only screen and (max-width: 480px) {
    header {
        background-color: yellow;
    }
}
/* the "else" clause you seek: */
@media not screen and (max-width: 480px) {
    header {
        background-color: red;
    }
}
</style>
<body>
    <header>
        test header
    </header>
</body>
</html>

    Ideally, you'd want "global" default styles to be first, then specifics would override what they need. In ideal world, there would be no need for "else" scenario because that would fall upon that "global".

    For example, in the snippet above, blue is rendered useless because "else"-style media query with "not" overrides everything what not falls upon yellow.

    But I understand, there are different cases and world is not ideal, so let's move on to...

    2.

    can I set a clause for "all other cases that don't fit this media query, like an else statement?

    Yes, using not like in example above. Guys suggested it already in the comments but your snippet is wrong

    @media only not screen(max-device-width : 480px) and (orientation : landscape)

    You probably meant:

    @media only not screen and (max-device-width : 480px) and (orientation : landscape)

    but that would be wrong as well because CSS spec says:

    https://www.w3.org/TR/mediaqueries-4/#media-query-modifier https://www.w3.org/TR/mediaqueries-4/#media-query-modifier

    As you see, it's either not or only (or nothing), but never both.

    Let's assemble from scratch: type is screen, condition is max-device-width. We put brackets around condition only:

    @media not screen

    @media not screen and (max-device-width : 480px)

    @media not screen and (max-device-width : 480px) and (orientation : landscape)

    You can always use CSSTree validator, it might miss some errors but at least we can make sure our code does not trigger any issues known to its algorithm.

    3.

    For posterity, things have changed since 2014 a little spec-wise; now in 2020 the device-width (and its counterparts min-device-width and max-device-width) are deprecated. But orientation is still cool.