Po raz kolejny w pracy padło ciekawe pytanie - czy da się zrobić tak, by kolor przekreślenia tekstu był inny niż sam tekst - była to cena w sklepie i tak lepiej wyglądało grafikowi. Dać się da, ale jeden haczyk - wszystko powinno dać się edytować za pomocą edytora WYSIWYG i klient nie ma nigdzie widzieć HTML. Oczywiście im mniej roboty dla Java Script / preg_replace tym lepiej.

Pierwszy pomysł jaki przyszedł mi do głowy ("Podejście 2") to zmniejszenie wysokości kontenera tekstu i zastosowanie overflow: visible. Oczywiście, o ile problem rozwiązany w 5 sekund w Firefox i innych nowych przeglądarkach, o tyle w Internet Explorer 6 dalej nic. Postanowiłem pójść dalej tym tropem - kilka expression w CSS później i rozwiązanie działa też w IE6. Niestety - poza zwiększeniem wykorzystania CPU przez przeglądarkę - ma też inne błędy (opisane w przykładach).

Kolejne rozwiązanie ("Podejście 1") - mogło by wydawać się oczywiste - to osadzenie w tagu <del> dodatkowego <span>, nadanie odpowiednich kolorów odpowiednim znacznikom i gotowe. Niestety, jak już wspomniałem, klient nie będzie oglądał HTML a jedynie wprowadzał go poprzez FCK Editor - więc zostaje albo JS (który można wyłączyć) albo przepisywanie HTML przed wyświetleniem (a wtedy w czasie edycji nie będzie widać przekreślenia).

W ten sposób doszliśmy do kolejnego podejścia ("Podejście 3") - tym razem satysfakcjonującego moje potrzeby - mały GIF w tle. Proste? Można jeszcze prościej - zamiast GIFa w tle dajmy obrazek 1 pixelowy w CSS za pomocą zapisu data (ok, ok - nie działa pod IE6 więc zastajemy przy GIFie ;-))

Tok myślenia oraz ostateczne rozwiązanie można podejrzeć tutaj. Starałem się sprawdzić pod wszystkim co mam pod ręką (IE6, IE8, FF3, Opera 9, Chrome 2 i Safari 4) i wygląda, że działa poprawnie. Czego to Ci graficy nie wymyślą ;-)

Komentarze

1

Komentarz użytkownika Wasacz

14 07 2009

Tło się nadaje tylko dla speficznych kolorów lub cienkich linii. A co, jeśli zabraknie obrazka?

BTW, ciekawy jest sposób ze zmienianiem wysokości kontenera (w IE6 można przecież dorzucić dodatkowy span w expresssions, na przykład).

2

Komentarz użytkownika BTM

14 07 2009

Dlaczego tylko dla specyficznych kolorów albo cienkich linii? Przecież w tło możesz sobie wstawić jaki chcesz obrazek - 1px czy 5 px, jaki chcesz.

Właśnie "Podejście 2" wykorzystuje dodatkowy kontener dorzucany przez expression - patrzyłeś na przykłady? ;-)

3

Komentarz użytkownika Wasacz

14 07 2009

Oj tam ;-)

Ale jeśli wstawię grubsze przekreślenie to może być widać, że jest pod tekstem; o to mi raczej chodziło.

I zamiast sprawdzać, czy span już istnieje (bo tym zamrażasz CPU), można lepiej: http://perfectionorvanity.com/2007/01/12/podstawowe-informacje-o-expressions/ (sekcja „Wykonywanie”). I chyba rezygnacja z „this” w zapisie to też jakieś stracone ułamki milisekund.

4

Komentarz użytkownika BTM

14 07 2009

A - no niestety, tylko podejście 1 daje nam przekreślenie nad tekstem oraz takie, dodatkowo - tylko 1 i 2 widać domyślnie na wydruku ;-)

Dzięki za link do bloga Riddla - to było praktycznie moje pierwsze starcie z expression, przyda się.

5

Komentarz użytkownika Wasacz

14 07 2009

Czyli ta metoda z expressions wymaga jeszcze osobnego @media print w IE6, brr ;-)

Bo expressions na wydrukach nie działają, z tego co pamiętam (dobrze pamiętam?).

6

Komentarz użytkownika Bartosz "BTM" Szczec

14 07 2009

Raczej chodziło mi o to, że w każdej przeglądarce domyślnie nie jest drukowane tło, więc metoda 3 nie zadziała tak dobrze, jak metoda 2 - bordery są drukowane bez problemu.

7

Komentarz użytkownika Badzok

14 07 2009

tak apropos ostatniego zdania to fakt pomysły grafików są czasem przerażające