Using pointer-events with Media Queries

By  on  

We all know that there are a number of ways we can modify layout based on CSS media queries -- hell, we can even animate properties between media queries. One bit of outside the box thinking with media queries is deals with pointer-events. Using the pointer-events property, we can also enable and disable some functionality with CSS based on media query state!

The scenario is one that's present in the current implementation of the MDN redesign. On the left you see article content, on the right you see a table of contents:

MDN Redesign Desktop

When pushed into the tablet media query, the table of contents should move above the content:

MDN Redesign Tablet

When on desktop, the table of contents should not be toggleable when the title is clicked. On tablet or other mobile device, however, the table of contents should toggle (slide up) when clicked to free up critical space, so as to avoid (possibly) loads of scrolling. I didn't want to use JavaScript to enable/disable the toggler, because...well...that would be inefficient. Instead I paired the pointer-events property with the tablet media query:

/* disable by default */
#toc .heading {
	pointer-events: none;
}
#toc i {
	display: none;
}

/* enable for tablet! */
@media only screen and (max-width: 760px) {
	#toc .heading {
		pointer-events: auto;
	}
	#toc i {
		display: block;
	}	
}

I absolutely adore pointer-events because it even prevents click events from firing, thus the JavaScript I use to trigger the slide up/down doesn't occur. While I wouldn't say what I've done is overly clever, I would like to say that you should think about modifying more than just layout within different media queries. Oh, and also, pointer-events is awesome!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

Discussion

  1. I like the theory in this! ,
    but I can’t see myself being able to be so gung-ho about IE11+ CSS properties in
    my professional life, haha… but it did spark a thought for me… a way of doing
    this kind of thing without writing “if/else” into every event…

    (function(){
    
      var tablet = 800, $win = $(window);
    
      $win.on("resize.binds", function() {
        if( $win.width() > tablet ) { responsiveUnbinds(); } else { responsiveBinds(); }
      });
    
      function responsiveUnbinds() {
        $('.el').off(".responsive");
      }
    
      function responsiveBinds() { 
        $('.el').on("click.responsive", function() { /* ... */ });
        // loads of fun events that should only work on > tablet
      }
    
      $win.trigger("resize.binds");
    
    })();
    
    

    I’m sure you could optimize that even more! but it should avoid all the hassle
    of events firing and then logic’ing

  2. Seems to me like you’re using CSS for functionality instead of style. Of course this has been growing more and more (transitions and animation), but something like this seems shouldn’t be that hard to do without it. Interesting usage though.

  3. SachaMPS

    Haha, i found pointer events also interesting until i figured out IE9 doesnt support it. And in real live you still have to support this browser unfortunately. It’s already hard to explain even some bigger companies that IE8 times should really be finally over now. And I also think twice before i try to implement stuff like this via javascript…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!