Rob Tarr and I worked to develop our own solution. First off, which CSS property could be used to test this theory? The property needs to accept any value thrown at it. The
content property seemed like a great fit. Why not test the value of
content from inside a throwaway
Things are going well so far, but we still needed this to fire on an event of some kind. Paul Hayes’ previously mentioned solution had the answer: transition events!
We created a mashup of these two ideas by checking for
content on transition instead of media query size. We used “small,” “medium,” and “large” as the
transitionend event never fired when transitioning in elements with a
content property defined.
Here’s the gist, so you can see it for yourself. Also, play around on this jsFiddle with your console open. The irony of this solution is that it actually has better browser support than matchMedia! The only caveat is that IE 9 falls between the cracks. IE 9 supports media queries, but it does not support the
transitionend event, which this solution depends on. So, IE 9 will need a fallback.
Is this hacky? Yes.
Keep in mind, it's just a proof of concept, but we think it has some legs. We also made a simple demo for you here. Enjoy.
The gist in its entirety:
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70|| |