W3C home > Mailing lists > Public > www-style@w3.org > February 2012

CSS Hierarchies + @media queries

From: Chris Eppstein <chris@eppsteins.net>
Date: Wed, 29 Feb 2012 15:42:45 -0800
Message-ID: <CANyEp6WuYzfe47wpBYT7JdfBEPSxFuNmAQzLd4nd-W5wDVeF_w@mail.gmail.com>
To: www-style@w3.org
I was reading through http://dev.w3.org/csswg/css3-hierarchies/ and noticed
that there was no provision for nesting an @media directive inside a
hierarchical selector context.

In Sass we let @media be nested in any selector and then "bubble" that
@media query to the top level.

For example:

.context {
  & .module {
    float: left;
    width: 50%;
    @media all and (max-device-width: 500px) {
      float: none;
      width: auto;
    }
  }
  & p {
    color: #333;
  }
}

Would be translated to:

.context .module { float: left; width: 50%; }
@media all and (max-device-width: 500px) { .context .module { float: none;
width: auto; } }
.context p { color: #333; }

similarly, selectors are transparent across the @media boundary:

.context {
  @media all and (max-device-width: 500px) {
    & .nested {
      color: red;
    }
  }
}

becomes:

@media all and (max-device-width: 500px) { .context .nested { color: red; }
}

I think it would be great to amend this spec to make @media (and other
at-rules?) valid inside a hierarchical selector context.

Chris Eppstein
Received on Wednesday, 29 February 2012 23:43:15 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:51 GMT