CSS Hacks

Have you ever tried to enforce some consistency checks using CSS. Today I learned how to test if I or any developer has left “alt” attribute blank.

If we see below line of code, there is no “alt” attribute in the image element and there is no way to check it until or unless you do it manually or have some code to test.

 css

Below image is output of above code.
before

To overcome this I found a simple hack using below code lines which will render red dotted line for all the images which are missing “alt” attributes

img[alt=""],img:not([alt]){
    border: 5px dashed red;
}

sfter

I hope this will be useful for someone.

Advertisements