Wstęp

Po lekturze rozdziałów Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana ułożenia menu nawigacyjnego z orientacji pionowej do poziomej ani przeniesienie całej kolumny nawigacyjnej z lewej na prawą stronę. Jest jednak jeden ważny element, na zawartość którego nie można wpływać za pomocą CSS - obrazki. Można co prawda zmieniać rozmiary grafiki, dodawać obramowanie, ustalać pozycję i marginesy, ale nie da się wyświetlić innego zdjęcia bez modyfikacji kodu HTML. Jednak czy to stanowi jakiś problem? W pewnych sytuacjach tak:

• Przygotowując kilka alternatywnych arkuszy CSS, możesz udostępnić użytkownikom możliwość wyboru skórki, która najbardziej im odpowiada. Problem w tym, że w ten sposób nie uda Ci się podmienić statycznie wstawionych obrazków, tworzących szablon graficzny - np. logo i inne elementy. W szczególności nie stworzysz szybko ładującej się skórki, pozbawionej zbędnych elementów graficznych.
• Coraz więcej użytkowników przegląda sieć za pomocą urządzeń mobilnych (smartfony, tablety). Dzięki obsłudze różnorodnych typów mediów, bez dużego wysiłku można przygotować specjalne wersje serwisu, które będą wygodniejsze do przeglądania na niewielkim ekranie. Niestety elementy graficzne, przygotowane dla podstawowej wersji witryny, zwykle będą zbyt wielkie, aby swobodnie zmieścić się na małym ekranie urządzenia mobilnego. Można co prawda je przeskalować, ale wtedy narażamy się na utratę jakości, a co najgorsze przeglądarka i tak musi pobrać sporej wagi pliki graficzne, co biorąc pod uwagę sposób naliczania kosztów połączeń np. w przypadku telefonii komórkowej, może być sporym obciążeniem finansowym, a już na pewno znacząco wydłuży ładowanie strony.
• Statyczne wstawianie obrazków, tworzących oprawę graficzną, jest niepoprawne semantycznie. Każdy znacznik IMG obowiązkowo musi posiadać atrybut alt="...", który jest przydatny np. dla osób niewidomych. Jednak w takim przypadku będzie on kompletnie pozbawiony sensu, ponieważ nie ułatwia, tylko utrudnia odbiór treści. Syntezator mowy, używany przez osobę niewidomą, odczyta wtedy masę niezwiązanych z właściwą treścią słów, jak np.: "Logo serwisu", "Element graficzny menu", "Obrazek tworzący poziomy odstęp", "Grafika stopki" albo co gorsze: "zielona linia biegnąca poziomo o wysokości 10 pikseli". To już lepiej wtedy wstawić pusty atrybut alt="", jednak to nie jest rozwiązanie, tylko obejście problemu.

Rozwiązanie tych problemów jest dość proste. Co prawda CSS nie pozwala podmieniać zawartości grafiki elementów IMG, ale umożliwia dodawanie tła graficznego niemal pod każdym elementem. Przestańmy zatem w ogóle używać znaczników <img src="..."> do tworzenia oprawy graficznej serwisu, a zamiast tego wszystkie takie elementy graficzne umieszczajmy jako tło obrazkowe! Dzięki temu każdy alternatywny arkusz CSS będzie miał zupełnie indywidualną oprawę graficzną.

Wstawianie tła graficznego pod tekstem jest dość proste i oczywiste. Często jednak trzeba osadzić elementy graficzne, nad którymi nie będzie widniał żaden tekst - np. przyciski, logo, ikony itp. W takim przypadku mogłoby się wydawać, że wystarczy wstawić pusty element do kodu HTML, jednak jest to bardzo zły pomysł. Takie rozwiązanie jest niepoprawne semantycznie. Staje się dużą przeszkodą dla osób niewidomych, ale również dla robotów indeksujących wyszukiwarek internetowych, co niekorzystanie odbije się na popularności witryny. Poza tym wstawienie pustego elementu uniemożliwia przygotowanie skórki, która w tym miejscu nie będzie miała żadnej grafiki, a jedynie zwykły tekst. Lepszym rozwiązaniem będzie wstawianie normalnego tekstu, a następnie ukrycie go i zastąpienie tłem graficznym. Technika ta nazywana jest zamiennikiem obrazkowym (ang. image replacement) i jest powszechnie stosowana przez profesjonalistów. Istnieje wiele sposobów realizacji tej techniki, różniących się stopniem skomplikowania, dostępnością i wygodą użycia. Nadają się do wykorzystania dla różnych elementów HTML, jednak dla uproszczenia w dalszej części tego rozdziału zostaną podane przykłady operujące na elementach DIV i SPAN.

Zamienniki obrazkowe nie nadają się do zastosowania w przypadku ilustracji osadzanych w treści artykułów. Zdjęcia takie, jako elementy publikowane redakcyjnie, nie zależą od arkusza CSS (skórki), a zatem należy je traktować jako treść, a nie oprawę graficzną.

W przypadku takich ilustracji należy używać tradycyjnych znaczników IMG, nie zapominając przy tym o właściwym wypełnieniu atrybutu alt="..." (opisującym, co znajduje się na zdjęciu). W przypadku ilustracji o pokaźnych rozmiarach, zaleca się umieścić w kodzie źródłowym miniaturki (fizycznie pomniejszone za pomocą dowolnego programu graficznego, a nie atrybutów HTML ani CSS) z odnośnikiem do pełnowymiarowej wersji. Dzięki temu użytkownicy urządzeń mobilnych nie będą zmuszeni do pobierania zbyt dużych zdjęć.

Fahrner

Jest to najbardziej podstawowy sposób, realizujący ideę zamiennika obrazkowego. Todd Fahrner jako jeden z pierwszych wpadł na ten pomysł i stąd wzięła się nazwa metody, którą zaproponował.

<div><span>Zamiennik obrazkowy</span></div>

div {
	background-image: url(obrazek.gif);
	width: 200px;
	height: 50px;
}

div span {
	display: none;
}

Wyjaśnienie:

• Najpierw pod zewnętrzny element podstawiamy obrazek tła
• Musimy ustalić rozmiary bloku na identycznie jak wymiary grafiki - inaczej otrzymalibyśmy element w szerokości całej strony i wysokości zależnej od zawartego w nim tekstu
• Na koniec po prostu ukrywamy tekst wpisany w środku, poprzez usunięcie wewnętrznego elementu

Oczywiście w rzeczywistym zastosowaniu zewnętrzny element blokowy można, a nawet należy, opatrzyć klasą lub identyfikatorem, aby nie naruszyć sposobu wyświetlania innych bloków na tej samej stronie.

• Konieczny dodatkowy element (SPAN)
• W przeglądarce Opera zastąpiony tekst nie jest kopiowany do schowka (Ctrl+C), po zaznaczeniu akapitu
• Syntezatory mowy nie odczytują zastąpionego tekstu
• Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka

Przykład

Tak wygląda czysty kod HTML bez zamiennika obrazkowego:

a w ten sposób już z podstawioną grafiką (zwróć uwagę, że ponad obrazkiem nie wyświetla się już żaden tekst):

Dwyer

Leon Dwyer opracował udoskonaloną wersję, która eliminuje problemy z kopiowaniem zaznaczonego tekstu oraz obsługą syntezatorów mowy, używanych przez osoby niewidome.

<div><span>Zamiennik obrazkowy</span></div>

div {
	background-image: url(obrazek.gif);
	width: 200px;
	height: 50px;
}

div span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

• Konieczny dodatkowy element (SPAN)
• Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka

Przykład

Phark

Obie przedstawione wcześniej metody do poprawnego działania wymagają dodatkowego elementu. Nie zawsze jednak mamy możliwość modyfikacji kodu źródłowego HTML, a nawet jeśli, wstawianie dodatkowych elementów niejako "na zapas" nie zawsze jest najrozsądniejszym rozwiązaniem.

<div>Zamiennik obrazkowy</div>

div {
	background-image: url(obrazek.gif);
	width: 200px;
	height: 50px;
	text-indent: -9999px;
}

Sztuczka polega na ustawienia ujemnego wcięcia - na tyle dużego, że tekst zostanie przesunięty w lewo całkiem poza krawędź ekranu. Wartość bezwzględna wcięcia nie może być zbyt mała, ponieważ inaczej posiadacze monitorów o dużej przekątnej ekranu mogliby zobaczyć część tekstu. Z uwagi na dużą wygodę, uniwersalność i kompatybilność, metoda ta jest obecnie bardzo chętnie stosowana przez webmasterów.

• W przeglądarce Firefox zastosowanie tej techniki do odnośników powoduje wyświetlenie rozciągniętej w lewo ramki obrysu; pewnym obejściem może być przypisanie stylu: "outline: 0"
• Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka

Jeśli mimo wszystko tekst nadal pojawia się ponad obrazkiem, przypisz do elementu styl: "text-align: left".

Przykład

Gilder/Levin

Czasami zdarza się, że użytkownicy wyłączają wyświetlanie grafiki - np. aby przyspieszyć ładowanie strony. Niestety żadna z powyższych metod sobie z tym nie radzi. W takiej sytuacji na ekranie nie widać ani obrazka ani tekstu. Jest to zwłaszcza irytujące w przypadku odnośników menu - ponieważ użytkownik ich nie widzi, nie wie w co może kliknąć.

<div><span></span>Zamiennik obrazkowy</div>

div {
	width: 200px;
	height: 50px;
	position: relative;
}

div span {
	background-image: url(obrazek.gif);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}

Koncepcja tego zamiennika obrazkowego polega na pozostawieniu tekstu bez zmian, a jedynie przykryciu go obrazkiem. Dzięki temu po wyłączeniu grafiki obrazek po prostu zniknie i odkryje tekst. Niestety sposób ten wymaga wprowadzenia pustego elementu, co kłóci się z zasadą semantyki, ponieważ rolą znaczników takich jak SPAN czy DIV jest obejmowanie jakiejś zawartości. Dodając pusty znacznik uzależniamy strukturę od konkretnego sposobu wyświetlania - jeśli kiedyś zrezygnowalibyśmy w tym miejscu z grafiki, w kodzie zostanie niewykorzystany element, który może powodować małe zamieszanie, ponieważ prawdopodobnie za jakiś czas zapomnimy, do czego był potrzebny. Niemniej Tom Gilder i Alexander Levin opracowali technikę, która ma spore zalety jeśli chodzi o dostępność, a przy tym jest kompatybilna z większością przeglądarek.

• Konieczny dodatkowy element (SPAN)
• Pusty element (SPAN) jest niepoprawny semantycznie
• Obrazek nie może zawierać obszarów przezroczystych

Przykład

Jefferies

CSS obsługuje pseudoelement :before, dzięki któremu można dynamicznie wstawić przed wybranym elementem tekst lub obrazek. Idąc dalej tym tropem, można uzyskać efekt analogiczny jak w poprzednim przykładzie, ale bez statycznego wstawiania do kodu źródłowego HTML żadnych dodatkowych znaczników. Przedstawiony poniżej przykład stanowi ulepszoną wersję metody Jefferies Image Replacement, dzięki czemu obrazek może zawierać obszary przezroczyste i nie występują żadne problemy w przeglądarce Opera po wyłączeniu wyświetlania grafiki. Gdyby nie kłopoty z kompatybilnością w starszych wersjach przeglądarki Internet Explorer, metoda ta byłaby niemal idealna.

<div>Zamiennik obrazkowy</div>

div {
	width: 200px;
	height: 50px;
	overflow: hidden;
}

div:before {
	content: url(obrazek.gif);
	float: right;
}

• Nie działa w MSIE 7

Internet Explorer obsługuję tę technikę dopiero od wersji 8.0 i tylko w trybie Standards Compliance.

Przykład

Zamienniki obrazkowe a Google

Stosowanie techniki Image replacement może teoretycznie budzić pewne kontrowersje, jeśli chodzi o wyszukiwarki internetowe takie jak np. Google. Większość internautów używa przeglądarek graficznych, w związku z czym na ekranie ich monitorów wyświetlają się wszystkie grafiki osadzone na stronie, podczas gdy roboty indeksujące wyszukiwarek czytają tylko tekst. Może zatem powstać pewien rozdźwięk: robot odczyta tekst ukryty metodą zamiennika obrazkowego, a użytkownik zobaczy grafikę. W ten sposób można by podsunąć robotom inną treść, która zawiera wiele popularnych słów kluczowych, dzięki czemu strona mogłaby znaleźć się wyżej w wynikach wyszukiwania, a normalni użytkownicy nie widzieli by tego sztucznie spreparowanego tekstu. Metody takie są uznawane za spam i stosując je narażamy się nie tylko na irytację ze strony czytelników, którzy wchodząc z wyszukiwarki nie odnajdują na stronie szukanych treści, ale taka strona może zostać za karę całkowicie usunięta z wyszukiwarki.

Chociaż nie ma jednoznacznej, oficjalnej odpowiedzi, czy zamienniki obrazkowe mogą być uznane przez wyszukiwarki za spam, doświadczenie wskazuje, że raczej nie ma się czego obawiać. Metody te od dawna są bardzo powszechnie stosowane na całym świecie. Trudno oczekiwać, że Google nagle zablokuje tak wiele serwisów. Jednak aby pewnego dnia nie napotkać przykrej niespodzianki, bezwzględnie trzymaj się prostej zasady:

Obrazek zamiennika musi zawierać dokładnie identyczny i nie gorzej widoczny napis, jak tekst który zastępuje!