Check @media rule with javascript by detecting css rule

Question

I know about matchMedia.js but I was thinking I could detect the current @media rule with something as easy as this. However, it's not working in firefox – (which usually means it's not correct in the first place...) Looking at it now, shouldn't the content be on an :after pseudo element? Any advice? I have a CodePen HERE:

CSS

#test {
  content:  "small"
}

@media only screen and (min-width: $bp1) {
  #test {
    content: "medium"
  }
}

jQuery

var sizeCheck = function() {
  
  if ( $("#test").css('content') === 'small') {
    
    $('.proof').text('jQuery knows this page is SMALL from reading the CSS @media rules.');

  } else if ( $("#test").css('content') === 'medium') {
    
    $('.proof').text('jQuery knows this page is MEDIUM from reading the CSS @media rules.');

  }
    
};

// run the function on document ready
$(document).ready(sizeCheck);

// AND run the function on window resize event
$(window).resize(sizeCheck);

Take a look at this article: css-tricks.com/…

MayThrow
– MayThrow

2014-04-22 23:04:59 +00:00
Commented Apr 22, 2014 at 23:04 — MayThrow
– MayThrow, Commented Apr 22, 2014 at 23:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You've got quite an interesting test there!

To answer your question: yes, content can only be used with :after and :before pseudo classes.

Applies to ::before and ::after pseudo-elements

Source: content - CSS | MDN

EDIT #1

I found something for you; looks like it is possible to get the content of :after 'after all' :)

var content = window.getComputedStyle(
    document.querySelector('#test'), ':after'
).getPropertyValue('content');

Source: Get Pseudo-Element Properties with JavaScript

I'm not used to CodePen, so created a jsfiddle.

EDIT #2

Looks like FireFox adds a double code to the actual value, so in the console it appeared like this: ""string"".

A way around this could be to test against both like this:

if (content == '"small"' || content == 'small') {
    // ...
}

I updated the fiddle here.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 22, 2014 at 20:53

benomatis

5,6537 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sheriffderek Over a year ago

Well, that adds :after but the jQuery isn't actually seeing it because it can't check after. I wonder is there is a property like content that can be descriptive AND be read by both. Otherwise I'll have to use display:none or something to detect.

sheriffderek Over a year ago

Looks great, but still no dice in FireFox. Mysterious.

benomatis Over a year ago

interesting, 'cause when i console.log(content) the value of content is there, but for some reason it's enclosed in two double quotes, like this: ""medium"" - have you seen that?

benomatis Over a year ago

well, found a way around it (see my edit #2 above)... not sure if it's the perfect solution, but it definitely is one ;)

sheriffderek Over a year ago

Hmmm. Great. I'll check back in after my day. I wonder if it makes a difference if you use single 'quotes' in the CSS.

|

Collectives™ on Stack Overflow

Check @media rule with javascript by detecting css rule

CSS

jQuery

1 Answer 1

EDIT #1

EDIT #2

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

CSS

jQuery

1 Answer 1

EDIT #1

EDIT #2

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related