Responsive media query width info with just CSS

After a long time with no post I decided to write about some neat development tool I just discovered ( ;-) not really a discovery like columbus but nevertheless I thought about it and after testing it actually works !!!)

Well when working on responsive design which is really a must for at last 2-3 years one needs to know the width of the media queries to decide the changes to make to CSS according to them.  So for my needs I wanted to get the width displayed for each media query.  For this you need an HTML element that stands out of the rest and is positions in a fixed position you know where it is at all times.  But with the newest CSS implementation you don't need to actually create the HTML element and put it in your source code, css can create it for you. So without much more discussion here it is

body:after{
  padding: 4px;
  background: white;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 10000000;
}


/* Really small screens and up */
@media only screen and (min-width:220px) {
  body:after{
    content: '>220px';
  }
}

/* Smartphones and up */
@media only screen and (min-width:320px) {
  body:after{
    content: '>320px';
  }
}

/* Tablets and up */
@media only screen and (min-width:768px) {
  body:after{
    content: '>768px';
  }
}

/* Desktops/laptops and up */
@media only screen and (min-width:1025px) {
  body:after{
    content: '>1025px';
  }
}

To get some other standard media queries by people that do more research than me you can visit Chris Coyier article .

Mind you this little trick above can be done with jquery or html and css and probably other ways or it can even be done with firefox plugin.