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

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.

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:

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>:

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.

Przy okazji kończenia prac nad Estelionem znalazłem w starych materiałach jeszcze jeden screen ukazujący kolejny błąd interpretacji reguł CSS przez Safari. W tym przypadku to:

oraz to:

abstrahując od MACowskiej niebieskiej ramki w Safari 2.0.4 tak oto się wyświetla.

Ostanio, podczas pracy nad kodem do Esteliona zauważłem bardzo ciekawą rzecz, która - nie ukrywając - przysporzyła mnie samemu troche dodatkowej pracy, oraz całej grupie kilka dni zastanawiania się, co tak naprawdę jest w kodzie niepoprawne.

Z racji, iżpowyższy projekt ma być w pełni kompatybilny z każdą możliwą przegladarka, duży nacisk kładziony jest teżi na zgodność z MACiem i ichnią, niby to taką super, przeglądarką Safari.

Safari, jako jedna z pierwszych i nielicznych nadal jeszcze przeglądarek, od kwietnia 2005 roku przechodzi test ACID 2. No i niby wszystko super, tyle tylko, że na poniższym kodzie... Safari tak jakby nie do końca działało zgodnie ze specyfikacją CSS:

<div style="height: 100px; background: #FFF !important; background: #000; border: solid 1px #F00;"></div><div style="height: 100px; background: #000; background: #FFF !important; border: solid 1px #F00;"></div><div style="height: 100px; background: #000; background: #FFF; border: solid 1px #F00;"></div>

Według specyfikacji winniśmy otrzymać 3 prostokąty z białym tłem i czerwoną ramką, jednak w Safari 2.0.4 reguła !important jest ignorowana(!?) i otrzymujemy w rezultacie takie oto coś.