Border-style: dotted a przeglądarki
27 stycznia 2006
Składając strony internetowe na podstawie przygotowanych plików graficznych (mówi się: tnąc je) często dochodzi się do wniosku, że danego efektu nie można osiągnąć przez CSS, bądź nie wszędzie. Styl linii border-style: dotted jest jednym z nich. Do tego różni się znacznie w trzech głównych przeglądarkach co jeszcze bardziej pogarsza sprawę.
Szerokość obramowania 1px, kolor #666 dla pojemnika na tle #EFEFEF o automatycznej szerokości i wysokości ustawionej przez parę <br/>:
Jak widać Firefox traktuje serio grubość i gęstość - linia złożona jest z jednopikselowych kropek występujących z jednopikselową przerwą pomiędzy nimi. Explorer pomylił się straszliwie i pokazał coś w rodzaju kresek. Opera za to obliczyła inaczej odległości między pojedynczymi pikselami i całość jest bardziej rozciągnięta.
Teraz zróbmy ten sam test, ale szerokość linii zwiększmy do 10px:
Explorer tym razem bardzo serio definicję dotted i pokazał kropki. Firefox dalej twardo się trzyma i renderuje „kwadratowe piksele” powiększone 10x. Opera robi podobnie, ale w przykładzie odległość w poziomych liniach między kropkami to 8px a w pionowych 11px. Z tych uciętych obrazków może wynikać, że najładniej wygląda to w Operze. No dobrze, ale zmniejszmy pojemnik do 40px na 40px i pokażmy zrzut:
Firefox stara się znormalizować nachodzenie na siebie lini sąsiadujących przez wycięcie koloru nachodzących kropek na rogach. Tworzą się prostokątne ubytki. Opera natomiast ucina zaś, z mojego punktu widzenia, dziwacznie - czasem pod skos, czasem prostokątnie. Oczyma projektanta Opera psuje wygląd stron w tym miejscu.
A jak jest na Explorerze?
Tło wyskoczyło spod linii. Czemu? Bo takie działanie tła wykazują elementy z hasLayout = true. Obiekt dostał layout bo zaaplikowaliśmy mu wymiary (szerokość i wysokość). Da się to obejść, ale należy popsuć sobie kod dodatkowymi znacznikami.
Otoczyłem element div'em i nadałem mu wymiary zamiast temu z obramowaniem. hasLayout nie jest dziedziczne, więc podziałało. Jednak teraz zawartość decyduje o wysokości i szerokości pojemnika w środku. Należy więc wstawić jeszcze jeden <div/> i też nadać mu wymiary. Mamy więc element otoczony z dwóch stron pancerzem. Warte wysiłku tylko w niektórych przypadkach.
Jako projektanta martwi mnie kreskowanie zamiast kropkowania w IE, więc postanowiłem użyć niedoskonałości oka w przypadku 1px obramowania. Skoro Firefox co drugi piksel opuszcza, to tworząc linię ciągłą o kolorze 2 razy mniej nasyconym (#AAA) uda się odwzorować wrażenie lekkości. Nie jest to identyczny efekt, ale może się przydać:
A może Wy też macie jakieś sztuczki i hacki na różnice w renderowaniu obramowań między przeglądarkami?
Smoothguy 1
27 stycznia 2006, 20:02