Geek asks and answers

Responsive CSS: can I force the alt text to render?

I am compiling some responsive CSS for the website I am creating, and I'm curious if I can use CSS to force images to display as alternate text instead of images. We show the logos of the cosponsors, but because of their variable size, it is difficult to confidently fit them into a responsive design. For this reason, we would like to keep the company name as alt text and do it instead. Of course, we could put the name in a separate element and switch the visibility using CSS, but using alt text seems to be DRYer.

+5
source share
3 answers

You can save this in the data attribute, not in 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 cannot do this with CSS and a tag imgis imgbecause the tags are replaced elements , which means that the pseudo doesn't work with them, so using :beforedoesn't work with them.

Another approach, given this, 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 much more.

+5
source

Went with:

<div class="cobranding">
    <span>Brought to you by</span>
    <span class="sponsor">Joe Shmoe Inc.</span>
    <img src="img/graphics/joe_shmoe_logo.jpg">
</div>

Use CSS to switch img or sponsor visibility based on sensitive breakpoints.

. , cosponsor CMS, , CSS (: ). .

0

( , )

: alt: ( ). - ... ( SEO).

That said ... If the image does not load, alt will be displayed . So, (untested), but you can try to corrupt the src attribute using javascript ... this should make the browser display alt as the image is not loading. - you can find this approach along with lazyload useful.

Also note: a broken img doesn't behave like an image, so you can apply the img: before css rule (and use content: attr (alt) )

0
source

More articles:


All Articles