Podczas prac nad firmową stroną natrafiłem na ciekawy css-kwiatek w najnowszych przeglądarkach.
Idea: Paragraf tekstu z wyróżnioną w nim pierwszą literą oraz do tego obraz wyrównany do prawej krawędzi tegoż paragrafu. Poniższy przykład to lekko zmodyfikowany kod zaczerpnięty ze stron W3C.org
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt; border: solid 1px #000 }
P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left}
SPAN { text-transform: uppercase }
</STYLE>
<P><SPAN>The first</SPAN> few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.</P>
wygląda następująco:
The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.
Póki co ten sam efekt dostajemy we wszystkich przeglądarkach.
Przychodzi teraz pora na dodanie obrazka. Tag <IMG> ma być dorównywany do prawej krawędzi paragrafu, dlatego musimy dać go przed tekst w paragrafie i ustawić wartość float na right.
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt; border: solid 1px #000 }
P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left}
SPAN { text-transform: uppercase }
IMG { float: right }
</STYLE>
<P><IMG src="image.jpg" alt="image"><SPAN>The first</SPAN> few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.</P>
The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.
Obraz jest na właściwym miejscu, jednak w magiczny sposób w Firefox i Internet Explorer tracimy styl pierwszej litery paragrafu. W takim wypadku, skoro obraz musi być przed tekstem w paragrafie oraz skoro pseudo-element i tak ma wartość float ustawioną na left, tag <IMG> możnaby umieścić tuż za pierwszą literą paragrafu:
<P><SPAN>T<IMG src="image.jpg" alt="image">he first</SPAN> few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.</P>
i "odzyskać" w ten sposób styl pierwszej litery w Internet Explorer oraz Firefox:
The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.
Nie ma jednak na świecie tak dobrze. Teraz ujawnia się kolejny błąd parsowania CSS, tym razem w przeglądarce Opera, w której to dwie pierwsze litery są teraz wyróżnione.
Jak narazie, niestety, jedynym rozwiązaniem działającym identycznie zarówno w Opera, Firefox i Internet Explorer zdaje się być zrezygnowanie z pseudo-elemetu :first-letter i zastosowanie w zamian dwóch tagów <SPAN>:
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt; border: solid 1px #000 }
SPAN.capital { text-transform: uppercase }
SPAN.first { font-size: 200%; font-style: italic; font-weight: bold; float: left }
IMG { float: right }
</STYLE>
<P><IMG src="image.jpg" alt="image"><SPAN class="capital"><SPAN class="first">T</SPAN>he first</SPAN> few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.</P>The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist. The first few words of an article in The Economist.
A oto prezentacja błędu w poszczególnych przeglądarkach: Internet Explorer 6.0, Mozilla Firefox 2.0.0.3, Opera 9.10.
W pewnym filmie jeden z bohaterów, przeglądając poranną gazetę przy kuchennym stole podczas śniadania, powiedział coś, z czym ja po oglądnięciu poniższej... bajki(?!) coraz bardziej się zgadzam. I choć sama animacja nie pochodzi z tego samego kraju, który na mysli miał ów bohater, fakt że dostała ona nagrodę BAFTA w kategorii "best Childrens Short Form" w 2006 roku sprawia, iż zaczynam poważnie obawiać się o przyszłość.
"This country is going straight to hell"
Ostatnio podjąłem decyzję o tym, iż należałoby powoli, aczkolwiek sukcesywnie, zacząć korzystać z tzw. okazji i wykupywać, po niższych-niż-normalne cenach to, co bardzo mi się podoba. Dziś przybyła paczka z pierwszym zakupem: CD z muzyką z "about a boy" za jedyne 19pln. Abstrahując od (dziwnie niskiej jak na Polskę) ceny niepolskiego CD, nie mogę się powstrzymać i nie zamieścić zdjęcia wewnętrznej części okładki tego albumu.
