What is this? An small set of CSS rules targeting typically hidden html elements
This is a toy project exploring the power of unexpected uses of CSS. It reveals and allows you to visually inspect typically hidden html elements. The inspector styles targets any of the following HTML elements:
<html><head><body><title><meta><link><script><style>
Once injected, the inspector styles make these elements visible and also displays useful information about its attributes, such as links' href or scripts' source file. Revealed elements are bright colored and super high z-indexed in order to stand out in most of website designs.
Usage How to use it?
This is not meant to be used as part of any website project. This is meant to be used as an injectable CSS plugin from client side. In order to provide an easy way of plug and unplug the styles on any website you can use one of the following approaches:
Bookmarklet
By using the bookmarlet it will create and inject a new <link> in the current page linking to the latest styles version. By clicking the bookmarlet twice it will remove any previously injected styles, this way you can use the bookmarlet as an inspect toogle button.
To "install" the bookmarlet you can drag and drop the button below to your browser's bookmarks toolbar.
The Google Chrome™ extension
There is also a Google Chrome™ extension, it does exactly the same as the bookmarlet but in a more elegant and integrated way. Unfortunately the extension is not published in the chrome store, so if you want to use it you have to follow these steps:
- Download or clone the repository from github.
- Navigate with your chrome browser to
chrome://extensions/ - Activate the
developer mode - Press the
Load unpacked extensionbutton - Select the
chrome-extensionfolder inside the downloaded package
And violá! You got now an easy to use button next to your browser's address bar. Click for toogling the inspector styles on any website you visit.
Motivation Why did you created this?
This is just a tiny toy project, it started as an experiment in codepen while I was exploring unexpected uses of CSS. I later decided to create the github repository and share it with the world as an open source.
But... we already have dev tools... so... wtf!? This does not pretend to be as as useful as a full featured developer tools suite, this is just a toy and you can have fun using it (maybe not...), this is what it is and you can use it as you like.
Open source Get involved!
I would love to hear what you think about it. It's a work in progress and I would welcome any suggestions or code contributions, did you found a bug or have a fun improvement? You can fork the project on Github. Please note this is just css toy so do not take it too serious ;)