Responsive CSS: Kann ich das Rendern von Alt-Text erzwingen?

Question

Ich erstelle ein Responsive CSS für eine Website, die ich erstelle, und ich bin neugierig, ob ich CSS verwenden kann, um Bilder als Alt-Text anstelle von Bildern zu rendern. Wir zeigen die Logos von Cosponsoren, aber aufgrund ihrer variablen Größe ist es schwierig, sie selbstbewusst in das Responsive Design zu integrieren. Aus diesem Grund möchten wir den Firmennamen als Alt-Text speichern und stattdessen rendern. Natürlich könnten wir den Namen in ein separates Element einfügen und die Sichtbarkeit mit CSS umschalten, aber die Verwendung von altem Text scheint DRYer zu sein.

Answer 1

könnten Sie speichern, dass in einem Daten-Attribut anstelle der Alt-Text, und dann like this etwas tun:

<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; 
    } 
} 

Der Grund, warum Sie das nicht nur mit CSS tun können, und ein img-Tag ist, dass img Tags ist, weil sie replaced elements sind, was bedeutet, Pseudo funktioniert nicht mit ihnen, und daher funktioniert die Verwendung :before nicht mit ihnen.

Ein anderer Ansatz wäre dies unter Berücksichtigung 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; 
    } 
} 

Wenn Sie mich fragen, wie ich den zweiten Ansatz viel mehr.

Answer 2

Went mit:

<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> 

CSS Mit der Sichtbarkeit des img oder der "Sponsor" auf ansprechende Haltepunkte basierend hin- und herzuschalten.

Beide Ansätze von Nico sehen gut aus. Der einzige Nachteil ist, dass diese Cosponsor-Logos über ein CMS hinzugefügt werden, so dass ich jede Lösung vermeiden möchte, die von Fall zu Fall CSS (: Vorher oder Hintergrundbild) betrifft. Um der Zeit willen ging ich mit der obigen Zwei-Elemente-Strategie weiter.

Answer 3

(für alle anderen beantwortet Suche nach einer Lösung)

Wichtige beiseite: den Zweck alt Denken Sie daran,: sinnvolle Alternative Informationen angezeigt werden (wenn das Bild nicht geladen wird). - so sollte jede Implementierung nicht brechen ... (schlecht für die Erreichbarkeit & SEO).

Das sagte ... Wenn das Bild nicht geladen wird, wird alt angezeigt. Also (ungeprüft), aber Sie könnten versuchen, das src-Attribut durch JavaScript zu vermasseln ... das sollte dazu führen, dass der Browser die alt anzeigt, da das Bild nicht geladen wird. - Sie könnten diesen Ansatz zusammen mit Lazyload nützlich finden.

Auch zu beachten: ein gebrochenes img wie ein Bild verhält sich nicht, so können Sie eine img anwenden: vor CSS-Regel (und verwenden Inhalt: attr (alt))