Is there any way to store data in a media query condition?

Question

I have a case where I need to exclude media queries unless they match a specific element or elements.

Is there any way to specify data in the media query that will be ignored by query but retrievable?

var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules!=null ? rules.length : 0;

// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
  var rule = rules[i];

  if (rule.media!=null) {
      console.log(rule.conditionText);
  }
}

@media (min-width: 500px) {
  .hideOnMobile {
    display: none !important;
  }
}

I'd like to do something like:

@media (min-width: 500px) or (device: myElementName) {
  .hideOnMobile {
    display: none !important;
  }
}

I've looked at the properties page but it doesn't look like anythings available.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

I don't think I'm understanding what you mean by 'matching an element' here - could you explain a bit more? — A Haworth, Jul 26 '21 at 19:49
@AHaworth Let's say i have 100 media queries on a page and someone else may add more. and i want to ignore all of them except the ones that i made. so i want to label them specifically. example, — 1.21 gigawatts, Jul 26 '21 at 19:54
Sounds like an [XY problem](https://xyproblem.info). By which I mean, you’re asking to store data in the media query when what you need to do is associate data with an element that is then read by CSS within the media query. — Heretic Monkey, Jul 26 '21 at 20:17
Media queries match, well, media, not elements. Once the media are matched, subsequent rules match elements… if you want to “disable media queries”, don’t include the CSS code that defines them. — Heretic Monkey, Jul 26 '21 at 20:22
@HereticMonkey there's specific set of problems i can avoid by giving the media queries a bit more information. i'm already associating the style rules. the problems have arisen when other developers are asking their own. that's where this question comes in. — 1.21 gigawatts, Jul 26 '21 at 20:26

user3682770 · Answer 1 · 2021-07-27T19:51:49.467

2

Media queries sintax are described at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#formal_syntax

"Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords."

You can use window.matchMedia() function to determine if the document matches the media query string in JavaScript or you can set the rule directly using .media.mediaText

If you need a set of identifiers for developers on media queries there Is the ident field specified in the sintax of media query: developer.mozilla.org/en-US/docs/Web/CSS/ident

edited Jul 27 '21 at 19:51

answered Jul 26 '21 at 20:09

user3682770

125
1
1
7

You're saying there isn't an OR option? – 1.21 gigawatts Jul 26 '21 at 20:14
1

OR (Comma-separated lists): https://stackoverflow.com/questions/11404744/css-media-queries-max-width-or-max-height – user3682770 Jul 26 '21 at 20:24
If you need an element selector you can use the function addRule() of StyleSheetList.item() function that returns CSSStyleSheet object: https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList "addRule() Adds a new rule to the stylesheet given the selector to which the style applies and the style block to apply to the matching elements" Or insertRule(): https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/addRule – user3682770 Jul 26 '21 at 20:26
i read the ident link but it did not have any examples. is it new? – 1.21 gigawatts Jul 28 '21 at 00:32

score 2 · Accepted Answer · answered Jul 26 '21 at 20:33

I don't know how to do this just by looking at the media query 'line' without potentially upsetting some validator as, afaik, you can't for example use css variables there willy nilly.

But you can use CSS variables in a setting within the media query. It seems a bit hacky but it works. This snippet looks for the 'oneofmine' string in the settings within a media query and if it's not there (at the moment) just tells you to get rid of this rule. [I don't know what method you will be using to get rid of the rule].

var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules != null ? rules.length : 0;

// loop through rules and hide media queries except selected
for (var i = 0; i < numberOfRules; i++) {
  var rule = rules[i];

  if ((rule.media != null) && (rule.cssText.match('oneofmine')) == null) {
    //hide this rule
    console.log('You should hide this rule: ' + rule.cssText);
  }
}

body {
  width: 100vw;
  height: 100vh;
  background: yellow;
}

@media (min-width: 1024px) {
  body {
    --oneofmine: 1;
    background: blue;
  }
}

@media (min-width: 1024px) {
  body {
    background: red !important;
  }
}

That match is the RegExp match not the Style Rule match correct? — 1.21 gigawatts, Jul 26 '21 at 22:09
I just used the JS match function yes. A bit lazy not to convert the substring I suppose, but the system does it for you [link]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match — A Haworth, Jul 26 '21 at 22:15
So the answer to this question is "No, you cannot specify data in a media query selector but here is an alternative." but this will work for my case for now. — 1.21 gigawatts, Jul 27 '21 at 00:20
Well, as far as I know that's right - it would be good if someone could tell us we could do it in the media selector - but I'm glad you have a workaround for now. — A Haworth, Jul 27 '21 at 06:23

Is there any way to store data in a media query condition?

2 Answers2