Custom debugger/checker for your webpage view

Custom debugger for your webpage view

It is quite normal that we miss out on entering the alt, title or dimensions for the img tags. And similartly for the other tags. What if we had a checker which marked the tag elements where certain attributes were not defined by mistake.

First we will give an example on how to set up the checker for img tags using CSS alone.

<img src="img_1.png" />
<img src="img_2" alt="" />
<img src="img_3.png" alt="" title="" />
<img src="img_4.png" alt="alt" title="title"/>

If you notice the tags above, some does not have certain attributes or they are blank. Now we will define the CSS to mark them accordingly.

To define a checker to see if alt attribute is missing

img:not([alt]) {border: 3px solid red;}

this will highlight that img tag with a red border around it.

And to see if the alt attribute is having a blank value

img[alt=""] {border: 3px solid yellow;}

And similarly to check the title attribute

img:not([title]) {outline: 3px solid grey;}
img[title=""] {outline: 3px dotted fuchsia;}

And likewise we will try for the anchor tag

a[href]:not([title]) {border: 3px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lightblue;}
a[href=""] {background: lightgrey;}

You can also check if a tag has no content in it

div:empty{background: yellow;}

And this way you can try the same for the other tags as well

Leave a Reply

Your email address will not be published.