Istnieją dwie techniki sprite graficzne. Wersja "klasyczna" używa właściwości tła i tła css. (jak tutaj opisano http://www.alistapart.com/articles/sprites)Techniki CSS Sprite, tło css lub klip Img
"Druga" wersja używa znacznika obrazu i jego właściwości css klipu. (http://css-tricks.com/css-sprites-with-inline-images/)
Moje pytanie brzmi, czy są zalety używania "drugiej" wersji w stosunku do "klasycznej" wersji?
dzięki i najlepiej, Viktor
Różnica wynika głównie w dół do semantyki dokumentu: jeszcze tylko stosowanie tła dla dekoracyjnych i układ grafiki i należy używać tylko tagi graficzne do grafiki, które są częścią treść Twojej strony.
Pamiętaj, że strony powinny być przydatne i użyteczne bez żadnego CSS: z drugą techniką oznaczałoby to, że twoja cała mapa-sprite byłaby widoczna (nie dostałabyś żadnego obcinania) wszędzie, gdzie używałeś duszka - bardzo mylące!
Pierwsza technika nie pokazałaby żadnych duszków, ale też nie byłaby zła lub myląca.
Niezależnie od tego, czy grafika jest treścią, czy dekoracja staje się nieco skomplikowana, gdy bierze się pod uwagę takie ikony jak ikony - gdzie techniki sprite są naprawdę przydatne. Osobiście wolę używać obrazów tła dla ikon, ponieważ dodają informacje do innego elementu (np. Link lub kontrolka przycisku), a nie elementy same w sobie.
Krótko mówiąc, sprite oparte na tagach graficznych to trochę zepsuta technika - nie użyłbym tego.
+1, zauważ także, że drugi sposób jest o wiele nudniejszy i trudniejszy do odtworzenia ładnie we wszystkich przeglądarkach. – Aren
Jeśli określisz atrybuty 'width =" 0 "' i 'height =" 1 "' na obrazie jako wartości zastępcze, możesz spowodować, że technika odcinania nie będzie bardziej myląca niż technika tła, gdy CSS jest wyłączony. – vpiTriumph
W takim przypadku twoja przeglądarka zażąda mapy sprite-map bez żadnego powodu - ponieważ byłaby ona faktycznie niewidoczna. Odkryłem również, że określenie szerokości i wysokości atrybutów na obrazach jest bolesne, jeśli chodzi o responsywny design - na przykład trudno skalować obraz proporcjonalnie do rozmiaru tekstu. – Beejamin
Istnieje przypadek użycia, gdy chcesz wydrukować stronę z ikonami (na przykład wizytówką organizacji z telefonem/skype/etc). Więc masz dwie opcje:
- use separate img elements - use sprite via pseudo(:after) elements with 'content' and 'clip' property
Pamiętaj, aby podać wymiary w znaczniku img też przy użyciu drugiej metody (CLIP), tak że cała sprite nie będą wyświetlane, nawet jeśli CSS jest wyłączona. Zaletą tej metody jest to, że z klipem obrazy są wyświetlane nawet wtedy, gdy motywy o dużym kontraście są włączone w systemie Windows, co nie ma miejsca w przypadku obrazów tła.
Zaznacz to dwa artykuły o więcej informacji:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
użycie sprite przez pseudo (: po) Elementy z 'zawartością' i 'klip' mienia
Nie polecam tego meto re. Może nie być problemem, jeśli chcesz wyświetlać tylko małą liczbę obrazów, ale jest bardzo powolny, jeśli zastosujesz go do setek elementów (pseudo elementy CSS są złe dla ogólnej wydajności), szczególnie na wolniejszych komputerach (smartfonach itd.).) lub starszych przeglądarkach takich jak IE8.
Istnieje również trzecia metoda z '![]()
' zilustrowana przez Soh Tanaka: [CSS Sprites w/out Korzystanie z obrazów tła] (http: //www.sohtanaka.com/web-design/css-sprites-wout-background-images /) –
MikeM