Responsive CSS: Czy mogę wymusić renderowanie tekstu alternatywnego?

Question

Łączę trochę responsywnych arkuszy CSS dla witryny, którą buduję. Ciekawi mnie, czy mogę użyć CSS do wymuszenia na obrazach renderowania jako tekstu zastępczego zamiast obrazów. Wyświetlamy logo cosponsorów, ale ze względu na ich zmienny rozmiar trudno jest je pewnie dopasować do responsywnego projektu. Z tego powodu chcielibyśmy zapisać nazwę firmy jako tekst alternatywny i renderować ją zamiast tego. Oczywiście możemy umieścić nazwę w osobnym elemencie i przełączać widoczność za pomocą CSS, ale użycie tekstu alt wydaje się DRYER.

Answer 1

Mogłeś zapisać, że w danych atrybut zamiast tekstu alt, a następnie zrobić coś 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; 
    } 
} 

Powód nie można to zrobić tylko z CSS i znacznik img że img oznacza, że ​​są one replaced elements, co oznacza, że ​​pseudo nie działa z nimi, a zatem używanie :before nie działa z nimi.

Innym podejściem, biorąc pod uwagę to byłoby 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; 
    } 
} 

Jeśli pytasz mnie, lubię drugie podejście o wiele więcej.

Answer 2

Wybraliśmy się z:

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

Za pomocą CSS, aby przełączać widoczność img lub „sponsora” na podstawie reagujących pułapki.

Oba podejścia Nico wyglądają dobrze. Jedynym ograniczeniem jest to, że te logotypy cosponsor zostaną dodane za pomocą CMS, więc chcę oderwać się od każdego rozwiązania wykorzystującego CSS w poszczególnych przypadkach (: before lub background-image). Przez wzgląd na czas opracowałem powyższą strategię dwóch elementów.

Answer 3

(odpowiedział za wszystkich innych szukających roztwór)

Ważne bok: Pamiętaj cel alt: wyświetlanie istotnych informacji Alternatywny (jeśli obraz nie ładuje). - w związku z tym każda implementacja nie powinna się zepsuć ... (zła pod względem dostępności, SEO2).

To powiedziawszy ... Jeśli obraz się nie załaduje, zostanie wyświetlony alt. Tak (untested), ale możesz spróbować zepsuć atrybut src przez javascript ... powinno to spowodować wyświetlanie przez przeglądarkę alt, ponieważ obraz się nie załaduje. - może ci się przydać takie podejście wraz z lazyload.

również zauważyć: złamany img nie zachowują się jak obraz, dzięki czemu można zastosować IMG: zanim reguły css (i wykorzystać w ciekawy zawartość: (alt))