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