Responsive CSS: Can I force rendering of alt text?

Question

I'm putting together some Responsive CSS for a website I'm building and I'm curious if I can use CSS to force images to render as alt text instead of images. We are displaying the logos of cosponsors but because of their variable size it's hard to fit them confidently into the responsive design. For that reason we'd like to store the company name as alt text and render that instead. Of course we could place the name in a separate element and toggle the visibility using CSS but using alt text seems DRYer.

Answer 1

You could store that in a data-attribute rather than the alt text, and then do something like this:

<span class='responsive' data-alt='foo'>
    <img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>

@media only screen and (max-width: 300px) {
    .responsive:before {
        content: attr(data-alt);
    }
    .responsive img {
        display: none;
    }
}

The reason you can't do this just with CSS and an img tag is that img tags is because they are replaced elements, which means pseudo doesn't work with them, and therefore, using :before doesn't work with them.

Another approach, taking this into account would be the following:

<span class='responsive'>foo</span>

.responsive {
    background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
    text-indent: -9999em;
    overflow: hidden;
    width: 180px;
    height: 180px;
    display: block;
}

@media only screen and (max-width: 300px) {
    .responsive {
        background-image: none;
        text-indent: initial;
        overflow: initial;
    }
}

If you ask me, I like the second approach a lot more.