accessing pseudo-element property values through getComputedStyle in dart

Question

I wish to detect what media query is active - I'm using Bootjack, so hence I am using the default breakpoints

I expected to be able to use getComputedStyle() to get hold of the value of the 'content' property in the example below - but I don't seem to get the syntax correct. I can happily get the value of an element - say the font-famly on the body, but not pseudo-elements...

Here's what I am doing:

Given this css..

/* tablets */
@media(min-width:768px){
     body::after {
        content: 'tablet';
        display: none;
    }

}

@media(min-width:992px){
     body::after {
        content: 'desktop';
        display: none;
    }

}
@media(min-width:1200px){
   body::after {
        content: 'large-screen';
        display: none;
    }
 } 

I have this in my dart file:

String activeMediaQuery = document.body.getComputedStyle('::after').getPropertyValue('content');

but activeMediaQuery is always empty.

I've tried ('after') and (':after') and anything else weird and wonderful but to no avail.

String activeMediaQuery = document.body.getComputedStyle().getPropertyValue('font-family');

sets the variable activeMediaQuery to the value of the font-family that I am using (not much use to me though!)

What should I be doing?

Answer 1

You can also subscribe to MediaQuery change events

for more details see https://github.com/bwu-dart/polymer_elements/blob/master/lib/polymer_media_query/polymer_media_query.dart

There is a bug in Dart and the workaround uses dart-js-interop.

This is the code from the polymer-media-query element. I don't know if the comments not suppored in Dart yet are still valid. It's a few months since I tried it.

Here is an example page that shows how to use the element. https://github.com/bwu-dart/polymer_elements/blob/master/example/polymer_media_query.html

  var _mqHandler;
  var _mq;

  init() {
    this._mqHandler = queryHandler;
    mqueryChanged(null);

    if (_mq != null) {
      if(context['matchMedia'] != null) {
        _mq.callMethod('removeListener', [_mqHandler]);
      }
      // TODO not supported in Dart yet (#84)
      //this._mq.removeListener(this._mqHandler);
    }

    if (mquery == null || mquery.isEmpty) {
      return;
    }

    if(context['matchMedia'] != null) {
      _mq = context.callMethod('matchMedia', ['(${mquery})']);
      _mq.callMethod('addListener', [_mqHandler]);
      queryHandler(this._mq);
    }
    // TODO not supported in Dart yet (#84)
    // Listener hast to be as MediaQueryListListener but this is and abstract 
    // class and therefor it's not possible to create a listner
    // _mq = window.matchMedia(q);
    // _mq.addListener(queryHandler);
    // queryHandler(this._mq);
  }

  void queryHandler(mq) {
    queryMatches = mq['matches'];
    //fire('polymer-mediachange', detail: mq);
  }

This worked for me with the CSS you provided in your question but only when the window was wider than 768 px. You might miss a rule with max-width: 768px

import 'dart:html' as dom;

void main () {
  dom.window.onResize.listen((e) {
    var gcs = dom.document.body.getComputedStyle('::after');
    print(gcs.content);
  });
}