Upload
phungduong
View
212
Download
0
Embed Size (px)
Citation preview
Technologia CSS w aplikacjach pocztowych Wytyczne dla projektantów newsletterów
Raport FreshMail
Maj 2010
2
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Spis treści
Wstęp 03
Metodologia badao 04
Wyniki badao 07
21 praktycznych rad dla Front End Developerów 11
Przepis na idealny mailing 13
Kod przykładowego mailingu 14
Przydatne Linki 21
Możliwości FreshMail 22
Zapraszamy do współpracy / kontakt 24
Dodatek: szczegółowe wyniki badania 25
3
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Wstęp Kaskadowe arkusze stylów CSS to technologia pozwalająca w swobodny sposób manipulowad warstwą
prezentacyjną dokumentów (X)HTML. Technologia ta powstała pod koniec 1996 roku, wraz z rozwojem branży
internetowej stała się jednym z nieodzownych elementów nowoczesnych rozwiązao internetowych. Zastosowanie
CSS nie ominęło również e-marketingu, gdzie arkusze stylów wyznaczyły nowe trendy w projektowaniu szablonów
mailingowych.
Dziś, rozwój technologii CSS zdecydowanie wyprzedza możliwości klientów pocztowych, zarówno tych
desktopowych, jak również webowych. Jakośd i możliwości interpretacji właściwości CSS różnią się w zależności od
używanych narzędzi, których szeroko rozumiana kompatybilnośd pozostawia wiele do życzenia. Narzędzia do
obsługi poczty elektronicznej, mimo że obsługują określone właściwości CSS, często interpretują je w sposób
nieadekwatny do dokumentacji przygotowanej przez twórców kaskadowych arkuszy stylów.
Niniejsza publikacja jest przewodnikiem spełniającym dwa główne cele. Pierwszy i najważniejszy z nich to
prezentacja podstaw merytorycznych umożliwiających przygotowanie szablonu e-mailingu, którego wygląd w
poszczególnych klientach pocztowych i webmailach nie będzie różny od zamierzeo jego projektantów. Kolejne
zadanie to zaprezentowanie koderom oraz osobom związanych z e-marketingiem podstawowych błędów
popełnianych przy przygotowywaniu projektów mailingowych.
Całośd raportu to także unikalna baza wiedzy na temat właściwości CSS obsługiwanych przez poszczególne
aplikacje pocztowe, która będzie znakomitym źródłem informacji i dobrych praktyk dla web developerów.
Jarosław Królewski
manager badania
Odwiedź blog oraz bazę wiedzy FreshMail na http://freshmail.pl
3
4
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Metodologia badao Badania nad technologią CSS w aplikacjach pocztowych rozpoczęła analiza dostępnej obecnie na rynku literatury. Niepodważalnym źródłem inspiracji
były raporty, które dla potrzeb klientów przygotowane zostały przez specjalistów z CampaignMonitor. Materiały te nie wyczerpują jednak do kooca
tematyki dotyczącej CSS w e-mail marketingu, w szczególności jeśli chodzi o aplikacje dostępne na polskim rynku.
W ramach badao nad technologią CSS wykonaliśmy szereg testów
opartych na specjalnie przygotowanych szablonach e-mailingowych, które
dostarczały informacji na temat interpretacji właściwości CSS
w poszczególnych narzędziach. Badaliśmy je także podczas codziennych
zmagao z szablonami, które przygotowujemy dla naszych klientów.
Już po pierwszych testach i weryfikacji właściwości CSS zdaliśmy sobie
sprawę, jak ważne jest projektowanie szablonów mailingowych oparte nie
tylko na najnowszych standardach kodowania, ale przede wszystkim na
doświadczeniu, które oznacza znajomośd najpopularniejszych dysfunkcji
narzędzi dostępnych na rynku. W celu pełnego przedstawienia wsparcia
CSS przez poszczególne aplikacje pocztowe prezentujemy wyniki badao
dla najpopularniejszych z nich, analizując dodatkowo wpływ silników
przeglądarek internetowych na sposób wyświetlania wiadomości e-mail.
Nie ulega wątpliwości, że badania nad zastosowaniem technologii CSS
w e-mail marketingu są nieco niewdzięczne. Ilośd wyjątków oraz różnego
rodzaju problemów, zależnych nawet od sposobu formatowania kodu
(np. problem białych znaków w kodzie po znaczniku <img>) sprawiają, że
bardzo trudno stworzyd dokument kompletny, który pozbawiony byłby
najmniejszych błędów. Nie mniej warto posiadad wiedzę przedstawioną w
raporcie i na bieżąco ją wzbogacad.
Sprzęt i oprogramowanie
Podczas badao nad zastosowaniem technologii CSS w e-mail marketingu
użyto następującego sprzętu, oprogramowania, przeglądarek
internetowych:
Komputer klasy PC
AMD Athlon ™ 64 X@ Dual Core Processor 4000+, 2.10 Ghz
2 GB Ram
32-bitowy system operacyjny Windows Vista Ultimate – Service
Pack 1
Apple MacBook Pro 15”
Intel Core 2 Duo 2.8 Ghz
4 GB Ram
5
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Aplikacje webowe
aol.pl
duno.pl
gazeta.pl
gery.pl
gmail.com
home.pl
hotmail.com
interia.pl
nazwa.pl
o2.pl
onet.pl
pino.pl
poczta.pl
prokonto.pl
vivapolskatv.pl
wp.pl
yahoo.com
Aplikacje desktopowe
Apple Mail 3.6
Microsoft Office Outlook 2003
Microsoft Office Outlook 2007
Microsoft Office Outlook 2010 (beta)
Mozilla Thunderbird 2
The Bat!
Windows Mail
Lotus 8.5
Lotus 6.5
Przeglądarki internetowe
Google Chrome 3.0
Internet Explorer 6.0
Internet Explorer 7.0
Internet Explorer 8.0
Mozilla Firefox 3.5
Mozilla Firefox 2.0
Opera 9.63
Safari 4.0
6
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Algorytm oceny aplikacji pocztowych
Podczas badao przetestowano 26 aplikacji pocztowych, z czego 9 to
programy desktopowe a pozostałe to aplikacje webowe. Przy
interpretacji wyników wzięto również pod uwagę wpływ 8
najpopularniejszych przeglądarek internetowych na sposób prezentacji
szablonów mailingowych.
Bardzo często dochodzi do sytuacji, w których klienci zastanawiają się
dlaczego e-mailingi przez nich zaprojektowane wyglądają różnie w
poszczególnych przeglądarkach, mimo, że np. dana aplikacja pocztowa
obsługuje określone właściwości CSS. Powodem takich rozbieżności są
silniki przeglądarek, wpływające na sposób prezentacji warstwy wizualnej
szablonu. Skala ocen, którą zastosowaliśmy do badania poszczególnych
aplikacji, została podzielona według skali 3-stopniowej, opartej na
poniższym wzorze:
współczynnik wsparcia CSS =
* najwyższy wynik wśród analizowanych przeglądarek dla danej aplikacji
pocztowej
Podczas analizy aplikacji webowych w zależności od przeglądarki,
określono ryzyko stosowania danej właściwości CSS, które (w oparciu o
aktualny udział przeglądarek w rynku internetowym) informuje nas jaki
potencjalny odsetek użytkowników narażony jest na niepoprawne
wyświetlenie się wiadomości e-mail w danej aplikacji pocztowej. Badane
przez nas przeglądarki pocztowe stanowią obecnie około 92% polskiego
rynku (ranking.pl – 7.01.2009). Liczba ta oznacza w naszym przypadku
maksymalny poziom ryzyka podczas używania określonej właściwości CSS.
Współczynnik wsparcia właściwości CSS w aplikacjach pocztowych
opis procent
wysokie powyżej 50%
średnie 30-50%
niskie poniżej 30%
Liczba wspieranych właściwości CSS *
Liczba badanych właściwości CSS (69)
x 100
7
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Wyniki badao Sposób interpretacji CSS jest różny w poszczególnych aplikacjach pocztowych. Na poniższych stronach przedstawiamy zestawienie wsparcia
własności CSS dla 26 najpopularniejszych w Polsce aplikacji pocztowych.
Badania aplikacji pocztowych potwierdziły, jak bardzo różnorodne są
narzędzia obecnie dostępne na rynku. Wśród aplikacji desktopowych
zdecydowanie prym wiedzie Mozilla Thunderbird, która niemal
bezbłędnie interpretuje dostępne właściwości CSS. Niewiele gorzej
wypada Apple Mail, plasując się na drugim miejscu. Rozczarowują
natomiast mało popularny The Bat oraz powszechnie używany Microsoft
Outlook 2007, który - co ciekawe – radzi sobie gorzej z interpretacją CSS
niż jego poprzednik - Outlook 2003.
Wśród aplikacji webowych, najgorzej wypadają skrzynki pocztowe
korzystające z systemu Google (gmail.com, gazeta.pl, viva-polska.tv),
które niemal połowę właściwości CSS kompletnie pomijają. Biorąc pod
uwagę liczbę użytkowników korzystających z tych aplikacji nie można ich
ignorowad podczas tworzenia kampanii mailingowej.
Zwród uwagę na ostatnią kolumnę tabeli o nazwie Ryzyko stosowania.
Pozwoli ci ona szybko podjąd decyzję o tym czy można bezpiecznie
korzystad z danej właściwości CSS (wyniki na zielonym tle), czy lepiej z niej
zrezygnowad (wynik czerwoną czcionką). Atrybuty oznaczone czarną
czcionką niosą za sobą ryzyko nieprawidłowej interpretacji, jednak w
drodze wyjątku można z nich w miarę bezpiecznie korzystad.
Porada: FreshMail posiada funkcjonalnośd pozwalającą na
określenie z jakich klientów pocztowych korzystają
subskrybenci (Raporty > Klienci pocztowi). Wiedza
uzyskana z systemu FreshMail połączona z poniższą tabelą
pozwoli lepiej dostosowad newsletter do grupy Twoich
odbiorców.
8
Raport FreshMail Technologia CSS w aplikacjach pocztowych
aplikacje desktopowe aplikacje webowe
KOD
własnośd CSS
Ap
ple
Mai
l 3.6
Win
do
ws
Mai
l
Thu
nd
erb
ird
2
Ou
tlo
ok
20
07
Ou
tlo
ok
20
03
The
Bat
Ou
tlo
ok
20
10
bet
a
Lotu
s 6
.5
Lotu
s 8
.5
On
et.p
l
Wp
.pl
Gm
ail.
com
Gaz
eta.
pl
Viv
aPo
lsk
aTv
Po
czta
.pl
Naz
wa
.pl
Ho
tmai
l.co
m
Du
no
.pl
Ger
y.p
l
Yah
oo
.co
m
Pro
kon
to.p
l
Pin
o.p
l
o2
.pl
AO
L.p
l
Ho
me.
pl
Inte
ria.
pl
Ryz
yko
sto
sow
ania
I style element I - A <style></style> w sekcji <head> + + + + + + + - + + + - - - + + + - + + + - + + + + 23,08%
I - B <style></style> w sekcji <body> + + + + + + + - + - + - - - + + + - + + + - + + + + 26,92% II link element II - A <link></link> w sekcji <head> + + + + + - + + + - + - - - + - + - + + - - - - + - 46,15%
II - B <link></link> w sekcji <body> + + + + + - + - + - + - - - + - + - + + - - - - + - 50,00% III selektory III - A e + + + + + - + - + + + - - - + + + - + + + - + + + + 26,92% III - B * + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62%
III - C e > f + - + - - - - - - - - - - - - - - - - - - - - - - - 92,31% III - D e:link + + + + + - + - + + + - - - + + + - + + + - + + + + 26,92% III - E e:active + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62%
III - F e:hover + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62% III - G e:focus + - + - - - - - - - - - - - - - - - - - - - - - - - 92,31% III - H e+f + - + - - - - - - - - - - - - - - - - - - - - - - - 92,31% III - I e[foo] + - + - - - - - - - - - - - - - - - + - - - - + - - 84,62%
III - J e.className + + + + + - + - + + + - - - + + + - + + + - + + + + 26,92% III - K e#id + + + + + - + - + + - - - - + + - - + + + - + + + + 34,62% III - L e:first-line + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62% III - M e:first-letter + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62%
1 właściwości tła 1A background-color + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 1B background-image + + + - + + - - - + + - - - + + - + + + + + + + + + 30,77%
1C background-repeat + + + - + + - - - + + - - - + + - + + + + + + + + + 30,77% 1D background-position + + + - + + - - - + + - - - + + - + + + + + + + + + 30,77% 2 właściwości obramowania 2A border + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%
2B border-[position]-color + + + + + - + - + + + + + + + + + + + + + + + + + - 11,54% 2C border-collapse + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%
9
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2D border-spacing - - + - - + - - - - - - - - - - - - - - - - - - - + 88,46% 2E border-style + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 2F border-width + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 3 listy
3A list-style-image + + + - + - - - - + + - - - + + - + + + + + + + + + 34,62% 3B list-style-position + + + - + - - - - + + + + + + + + + + + + + + + + + 19,23% 3C list-style-type + + + + + - + + + + + + + + + + + + + + + + + + + + 3,85%
4 czcionki 4A font-family + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 4B font-size + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 4C font-style + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00%
4D font-variant + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 4E font-weight + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 5 marginesy i wcięcia 5A margin + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69%
5B padding + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 6 własciwości tekstu 6A color + + + + + - + + + + + + + + + + + + + + + + + + + + 3,85%
6B direction + + + + + - + - + + + + + + + + + + + + + + + + + - 11,54% 6C letter-spacing + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69% 6D line-height + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 6E text-align + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00%
6F text-decoration + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 6G text-indent + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69% 6H text-transform + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69%
6I word-spacing + - + - - - - - + + + + + + + + + + + + + + + + + + 23,08% 6J white-space + - + + - + + - - -+ -+ -+ -+ -+ - + -+ -+ -+ -+ - -+ - -+ -+ -+ 26,92% 7 pozycjonowanie 7A bottom + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31%
7B caption-side + - + + - - + - - + + + + + + + + + + + + + + + + + 19,23% 7C clear + + + - + + - - + + + + + + + + + + + + + + + + + + 11,54% 7D clip + + + - + - - - - + + - - - + - - - - - + + + + + - 53,85% 7E display + + + - + - - + + + + + + + + + + + + + + + + + + + 11,54%
7F float + + + - + - - + + + + + + + + + + + + + + + + + + + 11,54% 7G left + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 7H position + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31%
7I right + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 7J top + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 7K vertical-align + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%
10
Raport FreshMail Technologia CSS w aplikacjach pocztowych
7L z-index + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 8 rozmiar 8A height + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 8B width + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%
8C min-height - - + - - - - - + -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ - 30,77% 8D min-width + - - - - - - - + - - - - - - - - - - - - - - - - - 92,31% 9 inne właściwości
9A cursor + + + - + + - - + + + - - - + + + + + + + + + + + - 26,92% 9B empty-cells + + + + - + + - - + + + + + + + + + + + + + + + + + 11,54% 9C opacity + - + - - - - - - - - - - - - - - - - - - + - - - - 88,46% 9D overflow + + + - + - - - - + + + + + + + + - + + + + + + + - 26,92%
9E table-layout + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 9F visibil ity + + + - + - - - - + + - - - + + + + + + + + + + + - 34,62%
KOD
aplikacja pocztowa A
pp
le M
ail 3
.6
Win
do
ws
Mai
l
Thu
nd
erb
ird
2
Ou
tlo
ok
20
07
Ou
tlo
ok
20
03
The
Bat
Ou
tlo
ok
20
10
Lotu
s 6
.5
Lotu
s 8
.5
On
et.p
l
Wp
.pl
Gm
ail.
com
Gaz
eta.
pl
Viv
aPo
lsk
aTv
Po
czta
.pl
Naz
wa
.pl
Ho
tmai
l.co
m
Du
no
.pl
Ger
y.p
l
Yah
oo
.co
m
Pro
kon
to.p
l
Pin
o.p
l
o2
.pl
AO
L.p
l
Ho
me.
pl
Inte
ria.
pl
R
yzy
ko s
toso
wan
ia
wsparcie CSS przez aplikację 97
%
84
%
99
%
54
%
83
%
41
%
54
%
16
%
75
%
83
%
86
%
49
%
49
%
49
%
87
%
75
%
70
%
65
%
87
%
77
%
84
%
70
%
84
%
86
%
87
%
68
%
11
Raport FreshMail Technologia CSS w aplikacjach pocztowych
21 praktycznych porad dla Front End Developerów W codziennej pracy nauczyliśmy się kilku trików podnoszących szanse dostarczenia wiadomości e -mail do skrzynki adresata w niezmienionej
formie. Poniżej dzielimy się tą praktyczną wiedzą i zachęcamy do jej stosowania.
1. Podstawą dla tworzenia szablonów mailingowych jest
stosowanie kodowania: ISO-8859-2 lub UTF-8.
2. Przygotowany szablon powinien w całości opierad się na
formie tabelarycznej, odpowiednio sformatowanej przy
pomocy technologii CSS.
3. Stosowanie styli umieszczanych w kodzie metodą inline jest
znacznie bardziej bezpieczne niż umieszczenie ich zarówno
w sekcji <head> lub <body> przy pomocy elementu <link>.
4. Optymalna szerokośd maila nie powinna przekraczad 650px.
5. Internet Explorer wspiera właściwośd min-height tylko dla
znacznika <td>.
6. Przy załączaniu w wiadomości e-mail elementów graficznych
warto stosowad atrybutu alt, wraz z treścią przekonywującą
do pobrania grafiki (np. Pobierz grafikę i zobacz jaką
atrakcyjną ofertę przygotowaliśmy specjalnie dla Ciebie).
7. Stosowanie popularnych skrótów dla właściwości CSS, nie jest
mile widziane w niektórych klientach pocztowych. W związku
z tym warto z nich zrezygnowad stosując pełne definiowanie
właściwości (przykładowo: padding-left:0px; padding-
right:10px;padding-top:0px;padding-bottom:20px stosujemy
zamiast padding:0 10px 20px 0px).
8. Należy pamiętad, aby każdy link w newsletterze posiadał swój
atrybut title, krótko opisujący stronę do której kieruje.
9. Wiadomośd e-mail powinna posiadad link rezygnacji
pozwalajacy na łatwe wypisanie się z subskrypcji. W
przypadku FreshMaila, aby stworzyd link rezygnacji wystarczy
w stopce dokumentu zamieścid znacznik $$resignlink$$ lub
zapisad dowolny tekst pomiędzy znacznikami <resignlink> i
</resignlink>.
10. Wszystkie bloki dokumentu zawierające kod powiązany z
zastosowaniem Javascript lub Flash w newsletterze są
przeważnie pomijane przez programy pocztowe.
11. Fakt, że dany klient pocztowy obsługuje określone właściwości
CSS, nie oznacza, że zawsze robi to w ten sam sposób
(kompatybilny z innymi klientami) jak jego konkurencja.
12. Architektura informacja to podstawa dobrego komunikatu
emailowego. Należy pamiętad o prawach i regułach
prezentowania najważniejszych informacji.
12
Raport FreshMail Technologia CSS w aplikacjach pocztowych
13. Warto pamiętad o atrybucie _blank dla linków. Jest on bardzo
ważny, gdyż jego nieobecnośd może zakooczyd się
zawieszeniem aplikacji desktopowej obsługującej pocztę
elektroniczną.
14. Wszelkiego rodzaju elementy obrazkowe używane podczas
tworzenia wiadomości emailowej powinny byd pobierane z
absolutnych adresów URL.
15. Wiadomości e-mail powinny posiadad zarówno swój HTML-
owy jak również tekstowy odpowiednik. Dzięki temu możemy
byd pewni, że komunikat dotrze do adresata.
16. Każdy projekt należy przetestowad w jak największej liczbie
programów pocztowych, aby zyskad pewnośd, że subskrybent
zobaczy wiadomośd w sposób, w jaki sobie życzysz. Z
FreshMailem możesz to robid automatycznie bez konieczności
instalowania jakichkolwiek aplikacji.
17. Ważne jest, aby unikad newsletterów będących jednym
wielkim obrazkiem. Taka wiadomośd ma spore szansę trafid
do skrzynki spamowej Twoich odbiorców.
18. Wszystkie znaczniki języka HTML, typu: table, td, tr, img itd.
muszą byd domknięte.
19. Należy unikad krzykliwych czcionek mogących sugerowad
filtrom antyspamowym, że e-mail jest wiadomością
niepożądaną. We FreshMailu istnieje możliwośd sprawdzenia
przed wysłaniem wiadomości, czy e-mail nie zostanie
potraktowany jako spam.
20. Filtry antyspamowe analizują składnię każdej wiadomości.
Należy unikad stosowania słów sugerujących, że Twoja
wiadomośd ma charakter testowy (np. Lorem ipsum).
21. Większośd programów pocztowych usuwa z kodu szablonu
zawartośd sekcji <head>. W związku z tym wszystko co jest
ich częścią możemy traktowad jako zbyteczne.
13
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Przepis na idealny mailing Email marketing od wielu lat jest w ścisłej czołówce najskuteczniejszych form marketingu interaktywnego. Jednym z ważniejszych składników
wpływających na skutecznośd mailingu jest jego kreacja wizualna. Niestety z powodu niedopracowania technologicznego klientów pocztowych,
z których korzystają użytkownicy, należy znaleźd „złoty środek”, który będzie łączył cechy wyrafinowania graficznego z wyrachowaniem
technologicznym. Dzięki temu, przygotowana kreacja u każdego z użytkowników będzie wyglądad identycznie, gwarantując poprawnośd prezentacji.
Od czego zacząd? Na bazie wiedzy na temat technologii CSS w aplikacjach
pocztowych sugerujemy przyjąd następujący schemat przygotowania
projektu e-mailowego.
Rozpoczynamy standardowo, tworząc szkic makiety naszego szablonu,
który będzie zrozumiały i atrakcyjny dla subskrybenta. Następnie nasz
projekt trafia do grafika, wraz z wytycznymi dotyczącym standardów
kodowania szablonów, przy czym stale nadzorujemy pracę kreacji
i konsultujemy poszczególne odsłony szablonu, aby na koniec przystąpid
do jego kodowania. Jeśli poprawnie przygotowujemy etap I i II, kodowanie
będzie łatwe i przyjemne, gdyż już na początku pozbędziemy się
elementów wymagających użycia „zabronionych”, nietolerowanych
właściwości CSS.
1. Przygotowanie makiety (architektury informacji) szablonu
2. Graficzna wizualizacja szablonu
3. Kodowanie szablonu (CSS + HTML)
14
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Kod przykładowego mailingu Na kilku kolejnych stronach przedstawiamy kod przykładowego, prawidłowo skodowanego mailingu. Skorzystamy z wcześniejszych rad i dorzucimy
kilka nowych.
1. Budowa sekcji <head>
<!-- Element DOCTYPE jes t przeważnie konwertowany lub usuwany przez większośd klientów pocztowych, w związku z tym może byd pominięty -->
<html>
<head>
<!-- Definicja CSS -->
<style type="text/css" >
a {
<!-- Właściwości -->
}
body{
<!-- Właściwości -->
}
<!-- Inne deklaracje -->
</style>
<!-- Koniec definicji CSS -->
</head>
Porada: Definicja stylów CSS pomiędzy znacznikami <head> sprawia, że zostają one pominięte w niektórych aplikacjach takich jak Gmail czy
też Interia.pl. Zalecam jednak stosowanie tej metody jeśli równocześnie definicję stylów powtórzymy w sekcji <body>.
15
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2. Budowa sekcji głównej szablonu <body>
Szablon e-mailingu powinien składad się z czterech podstawowych
elementów:
element pozycjonujący (wrapper)
nagłówek (header)
główna zawartośd dokumentu (main body)
stopka (footer)
Dla poniższego przykładu stosujemy następujące założenia:
mailing jest wyśrodkowany w stosunku do obszaru okna
szerokośd dokumentu wynosi 610px
<html>
<body>
<!-- WRAPPER – TABELA POZYCJONUJACA DOKUMENT-->
<table width="610" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- HEADER (nagłówek) -->
<!-- MAIN BODY (główna zawartośd dokumentu) -->
<!-- FOOTER (s topka) -->
<!-- EOF MAIN BODY (koniec zawartości głównej dokumentu) -->
</td>
</tr>
</table>
</body>
</html>
16
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2a. nagłówek (header)
<!-- HEADER (początek nagłówka) -->
<!-- w tym przykładzie s tosujemy tabelę dla nagłówka wypełnioną jednym elementem graficznym (układ jednokolumnowy)-->
<table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<img s tyle=”display:block” s rc="link do elementu graficznego" al t="alt" width="610" height="40" border="0">
</td>
</tr>
</table>
<!-- EOF HEADER (koniec nagłówka) -->
Porada: Własnośd {display:block} dla atrybutu img zabezpiecza przed problemem „pustych obszarów” podczas umieszczania elementów
graficznych wewnątrz tabeli.
Porada: Kod dokumentu powinien byd oparty na tabelarycznej strukturze (table, tr, td). Dla poprawnego zastosowania właściwości CSS
doradzam stosowanie tzw. stylów inline.
Przykładowe poprawne użycie wygląda tak: <td style="font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 14px">
17
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2b. główna zawartośd dokumentu (main body)
<!-- MAIN BODY CONTENT (zawartośd główna dokumentu) -->
<table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td style="font-family:Tahoma, Verdana , sans-serif; font-size : 11px" valign="top">
<!-- COLUMNS (kolumny) -->
<table border="0" cellpadding="0" cellspacing="0" width="610">
<tr>
<!-- LEFT COLUMN (lewa kolumna) -->
<td valign="top" align="left" width="305" style="font-family:Tahoma , Verdana , sans-serif; font-size :11px;”>
<!-- wypełnienie kolumny lewej-->
</td>
<!-- EOF LEFT COLUMN (koniec lewej kolumny) -->
<!-- RIGHT COLUMN (prawa kolumna) -->
<td valign="top" align="left" width="305" s tyle="font-family:Tahoma, Verdana, sans-serif; font-size :11px;">
<!-- wypełnienie kolumny prawej -->
</td>
<!-- EOF RIGHT COLUMN (koniec prawej kolumny) -->
</tr>
</table>
<!-- EOF COLUMNS (koniec tabeli zawierającej kolumny) -->
<!-- FOOTER (s topka) -->
<!-- EOF MAIN BODY CONTENT (koniec zawartości głównej dokumentu) -->
</td>
</tr>
</table>
18
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2c. stopka (footer)
<!-- FOOTER (s topka) -->
<table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<p style=”font-size:10px”>
<resignlink> Link rezygnacji </resignlink>
</p>
</td>
</tr>
</table>
<!-- EOF FOOTER (s topka) -->
19
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Przykładowy kod
<html>
<body>
<!-- WRAPPER – TABELA POZYCJONUJACA DOKUMENT-->
<table width="610" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>
<td> <!-- HEADER (początek nagłówka) --> <!-- w tym przykładzie s tosujemy tabelę dla nagłówka wypełnioną jednym elementem graficznym (układ jednokolumnowy)-->
<table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center"> <img s tyle=”display:block” s rc="link do elementu graficznego" al t="alt" width="610" height="40" border="0">
</td> </tr> </table> <!-- EOF HEADER (koniec nagłówka) -->
!-- MAIN BODY CONTENT (zawartośd główna dokumentu) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td style="font-family:Tahoma, Verdana , sans-serif; font-size : 11px" valign="top"> <!-- COLUMNS (kolumny) -->
<table border="0" cellpadding="0" cellspacing="0" width="610"> <tr>
<!-- LEFT COLUMN (lewa kolumna) -->
<td valign="top" align="left" width="305" style="font-family:Tahoma , Verdana , sans-serif; font-size :11px;”> <!-- wypełnienie kolumny lewej-->
</td>
<!-- EOF LEFT COLUMN (koniec lewej kolumny) -->
<!-- RIGHT COLUMN (prawa kolumna) --> <td valign="top" align="left" width="305" style="font-family:Tahoma , Verdana , sans-serif; font-size :11px;"> <!-- wypełnienie kolumny prawej --> </td>
20
Raport FreshMail Technologia CSS w aplikacjach pocztowych
<!-- EOF RIGHT COLUMN (koniec prawej kolumny) -->
</tr>
</table>
<!-- EOF COLUMNS (koniec tabeli zawierającej kolumny) --> <!-- FOOTER (s topka) -->
<table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr>
<td align="center"> <p style=”font-size:10px”> <resignlink> Link rezygnacji </resignlink> </p>
</td> </tr> </table>
<!-- EOF FOOTER (s topka) -->
</td> </tr> </table> <!-- EOF MAIN BODY CONTENT (koniec zawartości głównej dokumentu) -->
</td>
</tr> </table>
</body>
</html>
21
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Przydatne linki Poniżej linki, które mogą okazad się pomocne wszystkim Front End Developerom zmagającym się z kodowaniem malingów.
http://www.webdepot.umn.edu/email/coding.php
http://www.benchmarkemail.com/help-FAQ/answer/Common-HTML-Email-Coding-Mistakes
http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html
http://www.email-standards.org
http://www.sitepoint.com/article/code-html-email-newsletters
http://interaktywnie.com/newsy/1/e-mail-marketing
http://www.freshmail.pl/blog
http://www.marketing-news.pl/message.php?cat=45
http://www.email-standards.org
http://www.emaillabs.com/email_marketing_articles
http://www.alistapart.com
http://www.b2bemailmarketing.com
http://www.clickz.com/showPage.html?page=experts/em_mkt
http://www.emailsherpa.com
http://www.sitepoint.com/article/principles-beautiful-html-email
http://www.marketingsherpa.com/sample.cfm?contentID=2776#
http://www.email-marketing-reports.com
http://www.campaigner.com/education.php
http://www.quirksmode.org/css
22
Raport FreshMail Technologia CSS w aplikacjach pocztowych
O systemie FreshMail FreshMail posiada wiele niezwykłych funkcjonalności, które pozwolą Ci w profesjonalny sposób zarządzad swoją
komunikacją e-mail marketingową. Średnio co 2 tygodnie wprowadzamy nową funkcjonalnośd jednocześnie jesteśmy
otwarci na sugestie, jak jeszcze ulepszyd FreshMail. Jeżeli masz ciekawy pomysł - wdrożymy go za darmo:-)
FreshMail pozwala na wykorzystanie wielu narzędzi zwiększających efektywnośd Twoich kampanii, m.in.:
SpamTest - pozwoli sprawdzid, czy Twój mail wygląda jak spam, a jeżeli tak jest, podpowie jak go poprawid.
Testy A/B - dzięki którym sprawdzisz, jaki temat wiadomości czy kreację graficzną preferują Twoi odbiorcy.
ScreenTest - daje możliwośd zobaczenia jak wyświetli się Twoja wiadomośd u poszczególnych klientów
pocztowych (Outlook, Gmail, itd.) i pozwoli ustrzec się tzw "rozsypanej wysyłki".
Targetowanie behawioralne - polegające na tworzeniu grup odbiorców w oparciu o ich zachowanie we
wcześniejszych kampaniach (np. możesz stworzyd grupę, która otworzyła daną kampanię i kliknęła
w konkretny link).
Personalizacja - pozwala wykorzystad informacje jakie przechowujesz w bazie do personalizacji tematu
wiadomości, treści oraz linków (np. zwrócisz się po imieniu odmienionym przez odpowiedni przypadek do
swoich odbiorców).
….i wiele innych, które możesz dokładnie poznad na naszej stronie.
Co warto podkreślid, nie wymagamy żadnych opłat abonamentowych. Płacisz tylko za wysłane kampanie. Bardzo łatwo
możesz obliczyd koszty korzystając z cennika na naszej stronie WWW, a jeśli w danym miesiącu nie wysyłasz mailingu,
to po prostu nie płacisz nic. Jeżeli taki sposób rozliczenia nie jest dla Ciebie odpowiedni (przykładowo planujesz duże
lub częste kampanie) skontaktuj się z nami, a zaoferujemy Ci atrakcyjny system rabatów.
Przetestuj wszystkie funkcjonalności FreshMail za darmo. Załóż konto na http://freshmail.pl .
22
23
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Usługi z zakresu e-mail marketingu FreshMail to nie tylko samo narzędzie do wysyłki maili, to także zespół ludzi z doświadczeniem w zakresie
e-marketingu. Co możemy Ci zaproponowad?
Strategia komunikacji e-mail marketingowej – przeanalizujemy Twoją komunikację w Internecie,
zoptymalizujemy sposoby pozyskiwania informacji o Klientach, a także zaproponujemy nowe. Skrupulatnie
przyjrzymy się Twoim produktom i konsumentom oraz zasugerujemy segmentację grup komunikacji
marketingowej.
Budowanie bazy adresowej – powiedz tylko jakie dane chcesz zbierad, a my zaproponujemy ci efektywną
strategię pozyskania adresów do Twojej bazy.
Planowanie kampanii – jeżeli nie masz własnej bazy, zaproponujemy Ci kampanię e-mail marketingową
przy użyciu zewnętrznych dostawców baz danych
Kreacja – czy wiesz, jak wielkie znaczenie ma dobrze dobrany komunikat i właściwie skrojona kreacja?
Dobrze zaprojektowany mailing może oznaczad kilkukrotnie wyższą efektywnośd jeśli chodzi o klikalnośd,
ale przede wszystkim wyższy stopieo zapamiętania samego przekazu zawartego w newsletterze.
e-CRM – jeśli prowadzisz sklep internetowy lub jesteś właścicielem dużego portalu, powiemy Ci jak
wykorzystad wiedzę o zachowaniach konsumentów do jeszcze skuteczniejszej komunikacji. Dzięki
e-CRMowi dotrzesz do konsumenta z przekazem stargetowanym na podstawie jego zachowao na stronie
internetowej (np. klienci którzy w sklepie online kupili aparat fotograficzny z niewielką kartą pamięci,
otrzymają mailem atrakcyjna ofertę bardziej pojemnych kart).
Ale to dopiero początek naszej współpracy. Skuteczne działania e- marketingowe to proces ciągłej, długookresowej
komunikacji z klientem.
Przetestuj wszystkie funkcjonalności FreshMail za darmo. Załóż konto na http://freshmail.pl .
23
24
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Zapraszamy do współpracy Przetestuj wszystkie funkcjonalności FreshMaila za darmo na: http://freshmail.pl
Osoba kontaktowa Rafał Pantula
key account manager
tel.: 12 252 37 44
gsm: 502 714 784
Pomóż w rozwoju raportu Raport ma na celu pomóc w codziennym zmaganiach z projektowaniem i wdrażaniem szablonów emailowych. Wszelkie konstruktywne uwagi, informacje o błędach oraz spostrzeżenia czytelników są mile widziane i z pewnością pomogą nam wyeliminowad wszystkie potencjalne błędy. Zapraszamy wszystkich zainteresowanych Front End Developerów do współpracy przy tworzeniu kolejnych jego wersji.
25
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Dodatek: szczegółowe wyniki badania Onet.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> - - - - - - - - 91,86%
II link element II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory
III - A e + + + + + + + + 0,00% III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71%
III - H e+f - - - + + + + + 32,59% III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00%
III - L e:first-line + + + + + + + + 0,00% III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00%
2 właściwości obramowania 2A border + + + + + + + + 0,00%
26
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59% 2E border-style + + + + + + + + 0,00%
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00%
3B list-style-position + + + + + - + + 3,88% 3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00%
6 własciwości tekstu 6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00%
6G text-indent + + + + + + + + 0,00% 6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + - - - - - 59,27% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00%
7G left + + + + + + + + 0,00% 7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00%
27
Raport FreshMail Technologia CSS w aplikacjach pocztowych
7J top + + + + + + + + 0,00% 7K vertical-align + + + + + + + + 0,00% 7L z-index + - - - - - - - 83,91% 8 rozmiar
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64%
8D min-width - - - - + + + + 34,44% 9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,64 łącznie dla przeglądarki 83% 83% 86% 90% 93% 91% 93% 93%
28
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Wp.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> + + + + + + + + 0,00% II - B <link></link> w sekcji <body> + + + + + + + + 0,00% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id - - + + + + + + 23,71% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - + + + + + + 23,71%
2E border-style + + + + + + + + 0,00%
29
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
30
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64% 8D min-width - - - - + + + + 34,44%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
5,00 łącznie dla przeglądarki 86% 87% 93% 97% 100% 99% 100% 100%
31
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Gmail
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> - - - - - - - - 91,86% I - B <style></style> w sekcji <body> - - - - - - - - 91,86% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e - - - - - - - - 91,86%
III - B * - - - - - - - - 91,86% III - C e > f - - - - - - - - 91,86% III - D e:link - - - - - - - - 91,86%
III - E e:active - - - - - - - - 91,86% III - F e:hover - - - - - - - - 91,86% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - - - - - - 91,86% III - J e.className - - - - - - - - 91,86% III - K e#id - - - - - - - - 91,86% III - L e:first-line - - - - - - - - 91,86%
III - M e:first-letter - - - - - - - - 91,86% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image - - - - - - - - 91,86% 1C background-repeat - - - - - - - - 91,86% 1D background-position - - - - - - - - 91,86% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
32
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image - - - - - - - - 91,86% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + - + 0,37%
7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%
7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
33
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%
9 inne właściwości 9A cursor - - - - - - - - 91,86% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity - - - - - - - - 91,86%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
2,75 łącznie dla przeglądarki 49% 49% 54% 52% 55% 54% 54% 55%
34
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Gazeta.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> - - - - - - - - 91,86% I - B <style></style> w sekcji <body> - - - - - - - - 91,86% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e - - - - - - - - 91,86%
III - B * - - - - - - - - 91,86% III - C e > f - - - - - - - - 91,86% III - D e:link - - - - - - - - 91,86%
III - E e:active - - - - - - - - 91,86% III - F e:hover - - - - - - - - 91,86% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - - - - - - 91,86% III - J e.className - - - - - - - - 91,86% III - K e#id - - - - - - - - 91,86% III - L e:first-line - - - - - - - - 91,86%
III - M e:first-letter - - - - - - - - 91,86% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image - - - - - - - - 91,86% 1C background-repeat - - - - - - - - 91,86% 1D background-position - - - - - - - - 91,86% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
35
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image - - - - - - - - 91,86% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + - + 0,37%
7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%
7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
36
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%
9 inne właściwości 9A cursor - - - - - - - - 91,86% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity - - - - - - - - 91,86%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
2,75 łącznie dla przeglądarki 49% 49% 54% 52% 55% 54% 54% 55%
37
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Viva-polska.tv
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> - - - - - - - - 91,86% I - B <style></style> w sekcji <body> - - - - - - - - 91,86% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e - - - - - - - - 91,86%
III - B * - - - - - - - - 91,86% III - C e > f - - - - - - - - 91,86% III - D e:link - - - - - - - - 91,86%
III - E e:active - - - - - - - - 91,86% III - F e:hover - - - - - - - - 91,86% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - - - - - - 91,86% III - J e.className - - - - - - - - 91,86% III - K e#id - - - - - - - - 91,86% III - L e:first-line - - - - - - - - 91,86%
III - M e:first-letter - - - - - - - - 91,86% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image - - - - - - - - 91,86% 1C background-repeat - - - - - - - - 91,86% 1D background-position - - - - - - - - 91,86% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
38
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image - - - - - - - - 91,86% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + - + 0,37%
7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%
7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
39
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%
9 inne właściwości 9A cursor - - - - - - - - 91,86% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity - - - - - - - - 91,86%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
2,75 łącznie dla przeglądarki 49% 49% 54% 52% 55% 54% 54% 55%
40
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Poczta.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> + + + + + + + + 0,00% II - B <link></link> w sekcji <body> + + + + + + + + 0,00% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
41
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space - - - - - - - - 91,86%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
42
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64% 8D min-width - - - + + + + + 32,59%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,92 łącznie dla przeglądarki 87% 88% 90% 99% 99% 97% 99% 99%
43
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Nazwa.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%
III - I e[foo] - - + + + + + + 23,71% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - + + + + + + 23,71%
2E border-style + + + + + + + + 0,00%
44
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space + + + + + + + + 0,00%
7 pozycjonowanie 7A bottom - - + + + + + + 23,71% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - + + + + + + 23,71%
7H position - - + + + + + + 23,71% 7I right - - + + + + + + 23,71% 7J top - - + + + + + + 23,71%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
45
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,71 łącznie dla przeglądarki 75% 77% 91% 93% 94% 93% 94% 94%
46
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Hotmail.com
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - - - - - - - - 91,86% III - D e:link + + + + + + + - 3,33%
III - E e:active + + + + + + + - 3,33% III - F e:hover + + + + + + + - 3,33% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - - - - - - 91,86% III - J e.className + + + + + + + + 0,00% III - K e#id - - - - - - - - 91,86% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image - - - - - - - - 91,86% 1C background-repeat - - - - - - - - 91,86% 1D background-position - - - - - - - - 91,86% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + - - - 40,17%
2E border-style + + + + + + + + 0,00%
47
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image - - - - - - - - 91,86% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%
7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
48
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64% 8D min-width - - - - - - - - 91,86%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
3,55 łącznie dla przeglądarki 67% 67% 68% 70% 71% 68% 70% 65%
49
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Duno.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> - - - - - - - - 91,86% I - B <style></style> w sekcji <body> - - - - - - - - 91,86% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e - - - - - - - - 91,86%
III - B * - - - - - - - - 91,86% III - C e > f - - - - - - - - 91,86% III - D e:link - - - - - - - - 91,86%
III - E e:active - - - - - - - - 91,86% III - F e:hover - - - - - - - - 91,86% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - - - - - - 91,86% III - J e.className - - - - - - - - 91,86% III - K e#id - - - - - - - - 91,86% III - L e:first-line - - - - - - - - 91,86%
III - M e:first-letter - - - - - - - - 91,86% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - + + + + + + + 7,95%
2E border-style + + + + + + + + 0,00%
50
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
51
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow - - - - - - - - 91,86% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
3,62 łącznie dla przeglądarki 65% 67% 71% 70% 72% 71% 72% 72%
52
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Gery.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> + + + + + + + + 0,00% II - B <link></link> w sekcji <body> + + + + + + + + 0,00% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%
III - I e[foo] + + + + + + + + 0,00% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - + + + + + + 23,71%
2E border-style + + + + + + + + 0,00%
53
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - + + + + + + 23,71% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
54
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
5,00 łącznie dla przeglądarki 87% 88% 97% 97% 100% 99% 100% 100%
55
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Yahoo.com
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> + + + + + + + + 0,00% II - B <link></link> w sekcji <body> + + + + + + + + 0,00% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
56
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%
7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
57
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - + + + + + 32,59%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,35 łącznie dla przeglądarki 77% 78% 83% 86% 87% 86% 87% 87%
58
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Prokonto.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
59
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space - - - - - - - - 91,86%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
60
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - - + + + + 34,44%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,64 łącznie dla przeglądarki 84% 86% 88% 91% 93% 91% 93% 93%
61
Raport FreshMail Technologia CSS w aplikacjach pocztowych
O2.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
62
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space - - - - - - - - 91,86%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
63
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - - + + + + 34,44%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,64 łącznie dla przeglądarki 84% 86% 88% 91% 93% 91% 93% 93%
64
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Pino.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> - - - + + + + + 32,59% I - B <style></style> w sekcji <body> - - - + + + + + 32,59% II link element
II - A <link></link> w sekcji <head> - - - + + + + + 32,59% II - B <link></link> w sekcji <body> - - - + + + + + 32,59% III selektory III - A e - - - + + + + + 32,59%
III - B * - - - + + + + + 32,59% III - C e > f - + + + + + + + 7,95% III - D e:link - - - + + + + + 32,59%
III - E e:active - - - + + + + + 32,59% III - F e:hover - - - + + + + + 32,59% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%
III - I e[foo] - - - + + + + + 32,59% III - J e.className - - - + + + + + 32,59% III - K e#id - - - + + + + + 32,59% III - L e:first-line - - - + + + + + 32,59%
III - M e:first-letter - - - + + + + + 32,59% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
65
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - - + 4,25%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + - - - 7,58% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + - - - 7,58% 8 rozmiar
66
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - - + + + + 34,44%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity + + + + + + + + 0,00% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
5,00 łącznie dla przeglądarki 70% 71% 75% 97% 100% 96% 96% 97%
67
Raport FreshMail Technologia CSS w aplikacjach pocztowych
AOL
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - - - - - - - - 91,86% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - - - - - - 91,86%
III - I e[foo] + + + + + + + + 0,00% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
68
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + + + + 0,00%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
69
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - - + + + + 34,44%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
4,71 łącznie dla przeglądarki 86% 86% 90% 91% 94% 94% 94% 94%
70
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Home.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> + + + + + + + + 0,00% II - B <link></link> w sekcji <body> + + + + + + + + 0,00% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%
2E border-style + + + + + + + + 0,00%
71
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + + + + 0,00%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%
7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%
7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar
72
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - - + + + + 34,44%
9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
5,00 łącznie dla przeglądarki 87% 88% 93% 97% 100% 100% 100% 100%
73
Raport FreshMail Technologia CSS w aplikacjach pocztowych
Interia.pl
KOD
przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0 ryzyko użytkowania udział przeglądarki w rynku
według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33%
I style element
I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element
II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%
III - B * + + + + + + + + 0,00% III - C e > f - - - - - - - - 91,86% III - D e:link + + + + + + + + 0,00%
III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%
III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%
III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%
1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania
2A border + + + + + + + + 0,00% 2B border-[position]-color - - - - - - - - 91,86% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing + + + + + + + + 0,00%
2E border-style + + + + + + + + 0,00%
74
Raport FreshMail Technologia CSS w aplikacjach pocztowych
2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + + + + 0,00%
3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%
4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%
5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu
6A color + + + + + + + + 0,00% 6B direction - - - - - - - - 91,86% 6C letter-spacing + + + + + + + + 0,00%
6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%
6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%
7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%
7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%
7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%
7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar
75
Raport FreshMail Technologia CSS w aplikacjach pocztowych
8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height - - - - - - - - 91,86% 8D min-width - - - - - - - - 91,86%
9 inne właściwości 9A cursor - - - - - - - - 91,86% 9B empty-cells + + + + + + + + 0,00%
9C opacity - - - - - - - - 91,86% 9D overflow - - - - - - - - 91,86% 9E table-layout + + + + + + + + 0,00% 9F visibil ity - - - - - - - - 91,86%
Ocena wsparcia CSS
KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari 3.2.1 Chrome 3.0
3,55 łącznie dla przeglądarki 68% 68% 70% 70% 71% 71% 71% 71%