Recently I wanted to check out the state of CSS implementation in
console.log method. After few minutes of fiddling with the code I’ve came up with an error handler* that displays a popular reaction GIF from the Friday movie:
The code behind the
damnHandler function was eventually something like this:
According to the spec, there are plenty of formatters that can be used to improve the look of
console.log‘s output. One of them is
%c which applies CSS styling to the given text. The formatter has to appear before the formatted text.
So what we actually do is printing a 1px large dot, which uses
padding properties in order to create a box with desired dimensions (the size of the image is 250px by 140px). We cannot simply use
width altogether with
display: block because these properties seem to be ignored. Eventually we set the
background to point to the GIF image hosted at Giphy.
Sadly it seems to work on Chrome only. Firefox, Internet Explorer 11 and Edge ignore the
background property and interpret
padding combination differently than Chrome while used in
* Technically speaking, it’s not even a proper handler since it simply rethrows the error given. But you know, it’s for the science… ;)