In building a new version of this website (yes, exciting I know!) I was looking for an easy way to see which current breakpoint was being used in the responsive layout. The quickest and easiest way before testing on specific devices is to just resize the browser. So I wanted a way to see when a certain breakpoint would take effect.

Turns out, there’s a pretty simple way to do this purely in CSS. Just use the after pseudo-element and the content property on some element in page to provide the text for whatever name you’ve given to your breakpoint. Since I’m using WordPress, the obvious candidate is the admin bar. Not only is it persistent at the top of every page, it only shows up when I’m logged in, allowing me to leave it there for debugging in production if I choose to (though you do suffer a few extra bytes of file size.)

Since I’m using SASS, bourbon and neat, defining breakpoints is really straightforward and looks like this:

$desktop: new-breakpoint(min-width 960px);
$tablet: new-breakpoint(min-width 768px max-width 959px);
$mobile-landscape: new-breakpoint(min-width 480px max-width 767px);
$mobile-portrait: new-breakpoint(max-width 767px);

And here is the simple SCSS that will give me the name of the current breakpoint in my WordPress admin bar:

#wpadminbar #wp-admin-bar-site-name a.ab-item:after{
  @include media($desktop){
    content: ' at desktop';
  }
  @include media($tablet){
    content: ' at tablet';
  }
  @include media($mobile-portrait){
    content: ' at mobile-portrait';
  }
  @include media($mobile-landscape){
    content: ' at mobile-landscape';
  }
}

Now depending on the current browser window size, my admin bar looks like one of these:

You don’t need to use WordPress, SASS, bourbon or neat though. This works on any element using pure CSS alone. You can also do something like this with your manually defined CSS breakpoints:

@media screen and (min-width: 960px){
  body:before{
    content: ' at desktop';
  }
}
@media screen and (min-width: 768px) and (max-width:959px){
  body:before{
    content: ' at tablet';
  }
}
@media screen and (max-width: 767px){
  body:before{
    content: ' at mobile-portrait';
  }
}
@media screen and (min-width: 480px) and (max-width:767px){
  body:before{
    content: ' at mobile-landscape';
  }
}

This version will add the debug text at the beginning of the body element. Obviously you want to remove this code before your site is live but I think it illustrates how you can use this method without any of the tools I’m using and just CSS alone.