Do tej pory zawsze wszystkie czcionki ładowałem do jednego pliku CSS i robiłem ich wersje normalną i dla IE, o tak:

@font-face {
    font-family: Czcionka1;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.ttf);
}
@font-face {
    font-family: Czcionka2;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka2.ttf);
}
@font-face {
    font-family: Czcionka1IE;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.eot);
}
@font-face {
    font-family: Czcionka2IE;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka2.eot);
}

A następnie używałem ich przez definiowanie najpierw normalnej, a potem IE czcionki:

elem{
    font-family: Czcionka1,Czcionka1IE, Verdana;
}

Do tej pory nie wiem dlaczego tylko pod Operą powodowało to błędy, ale przyniosło to takie usprawnienia, że przestałem ładować EOTy do każdej przeglądarki, oraz to, że mogłem zacząć definiować czcionki tylko jedną nazwą, gdyż w stylach tylko dla IE, nadpisuje tylko nazwę:

<link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
<!--[if IE ]>
<link rel="stylesheet" href="/fonts/fontsIE.css" type="text/css" />
<![endif]-->

/*** PLIK fontsIE.css ***/

@font-face {
    font-family: Czcionka1;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.eot);
}

/*** Stosowanie(tylko jedna nazwa czcionki, zadnych dubli IE) ***/

elem{
    font-family: Czcionka1, Verdana;
}

To już jakieś usprawnienie!:-) Jednak doszedłem do wniosku, że lepiej stosować coś innego. Z uwagi, że to co odtwarzają przeglądarki z osadzanych czcionek, nie zawsze jest takie jakbyśmy chcieli, postanowiłem najpierw próbować załączyć oryginalną czcionkę a dopiero potem osadzaną.

/*** PLIK fonts.css ***/

@font-face {
    font-family: CzcionkaWEB;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.ttf);
}

/*** PLIK fontsIE.css ***/

@font-face {
    font-family: CzcionkaWEB;
    font-style:  normal;
    font-weight: bold;
    src: url(czcionka.eot);
}

/***  Stosowanie - 'Czcionka' to oryginalna nazwa czcionki w systemie ***/
elem{
    font-family: Czcionka, CzcionkaWEB, Verdana;
}

Jak widać nawet błędy Opery się do czegoś przydają:-) Obyście jak najmniej utykali!

Ostatnio robię dość duży projekt składający się z ponad 30 różnych podstron, więc możliwości walki z IE7 mam aż nadto. Oczywiście byłem na to gotowy więc od razu zaopatrzyłem się w wpis z warunkowym komentarzem:

<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

Znając magiczne właściwości zoom: 1; konsekwentnie ją dodawałem (w stylach dla IE) dla elementów, które się sypały i osiągnąłem coś takiego:

.box, box > div, .actionBar,div.singleRes .result,
div.forum .buttons, .action, .result,
.collection, .borders3{
    zoom: 1;
}

Gdy dziś w połowie projektu odkryłem, że na hoverach cała strona tańczy pod IE 7, to troszkę się zirytowałem. Mimo, że konsekwentnie testowałem każdą podstronę, to takie coś wyszło nagle. Miałem już kiedyś ochotę to zrobić, ale trochę się obawiałem. Tym razem jednak nic mnie nie powstrzymało i dodałem:

*{
    zoom: 1;
}

Efekt? Jak ręką odjął :-) Wszystko działa doskonale!

Co robi zoom: 1; ?

zoom: 1; powoduje, że elementy dostają legendarne hasLayout co automatycznie sprawia, że IE zaczyna poprawnie wyliczać wszelkie wartości naszych ostylowanych elementów. Dzięki temu nie ma wszelakich podwójnych paddingów, marginesów, żadnych efektów peek a boo(znikającego contentu, borderów), źle wyliczanych pozycji absolutnych… Ogólnie masa błędów automatycznie znika :-) Zostają jeszcze problemy z błędną implementacją float (flotowanie w prawo w elemencie floatującym w lewo ;-) ), ale to są rzeczy które zawsze można załatwić na kilka sposobów i to dość łatwych.

Dlaczego bałem się stosować zoom: 1 z gwiazdką?

Obawiałem się może naprawić za dużo :-) Póki co nie stwierdziłem efektów ubocznych tej magicznej pigułki, ale używajcie tego na własną odpowiedzialność, bo nie było jeszcze testowane na ludziach:-) W razie problemów można zastosować wyjątki od reguły w następujący sposób

*{
    zoom: 1;
}
dl dd{
    zoom: 0;
}

Miłego kodowania!

text-shadow pozwala realizować prosto te sprawy, które od dawna szykowali graficy, a których implementacja na stronie, wymagała użycia grafik, bądź też rozwiązań javascriptowych, albo dublowania tekstu wraz z użyciem przemyślnego(no dobra, prostego) stylu opartego na pozycjonowaniu absolutnym. Czyli mowa o cieniu pod tekstem. Ponieważ jednak, sam cień w sobie nie ma wartości informacyjnych a estetyczne, był on też po prostu często ignorowany przez koderów. Obecnie jednak rynek przeglądarek wygląda tak, że większość userów może zobaczyć już cienie dodawane z poziomu CSS, a reszta będzie mogła je podziwiać niedługo wraz z premierą IE 9( choć patrząc na tabelę obsługiwanych właściwości, zapis przy text-shadow nie nastraja optymistycznie). Wydaje mi się, że można więc porzucić wszelkie zastępcze techniki i zacząć stosować najzwyklejsze w świecie text-shadow.

Jak to działa ?

Kod CSS:

span{
 text-shadow: 1px 2px 3px #fff;
}

Pierwszy parametr(1px) to przesunięcie cienia względem tekstu po osi X, drugi(2px) po osi Y, trzeci(3px) to rozmycie(blur), a czwarty(#fff) to kolor cienia. O ile inne są dość zrozumiałe, to z blurem trzeba poeksperymentować, żeby zobaczyć jakie efekty można uzyskać.

Kolejną możliwością są tak zwane multi cienie(Multiple shadows), czyli definiowanie kilku cieni dla jednego elementu. Tu posłużę się przykładem z css3.info :

Kod CSS:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

Prawda, że piękne i genialne ? I jakie proste. Jedna sprawa odnośnie multi cieni: najbardziej na wierzchu jest cień zdefiniowany jako pierwszy, każdy kolejny ma niższy priorytet, czy jak kto woli z-index.
Teraz mały przykład odnośnie pseudoklasy :hover i cienia:

Chyba nie o to nam chodziło, ale i tak kod CSS:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33;
}
span:hover{
 text-shadow: -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

Żadne dopisywanie cieni na :hover nie ma miejsca. Normalnie trzeba zapisać całą linię dla text-shadow od nowa, czyli tak:

span{
 font-size: 20px;
 color: #fff;
 text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33;
}
span:hover{
 text-shadow:  0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

aby uzyskać:

Animowanie i jQuery a text-shadow

Mówiąc krótko nie ma obsługi dla animowania text-shadow w jQuery. Możliwe, że jest to spowodowane tym, że właściwość text-shadow dopuszcza definiowanie wielu cieni, albo nie jest to coś co powinno być obsługiwane domyślnie. Problemem jest też niemożność rozczłonkowania text-shadow na poszczególne składowe(text-shadow-blur, text-shadow-x, text-shadow-y, text-shadow-color), ale to ponownie wiąże się z multi cieniami, bo jakby to wtedy miałoby być zapisane? Jakkolwiek framework UIZE poradził sobie z tym zadaniem całkiem ładnie, co można sprawdzić tu.

Co jednak w tym temacie ma do powiedzenia jQuery?

Wraz z jQuery 1.4.3 pojawiły się cssHooks. Co to i jak to działa to sprawa na osobny artykuł, ważne że umożliwia rozbudowywanie funkcjonalności dostępnych przez .css() i.animate() poprzez napisanie odpowiednich pluginów. Tak się szczęśliwie składa, że znalazła się ekipa, która takie pluginy już szykuje. Na tej stronie dostępne są ich najnowsze pluginy umożliwiające animacje wielu właściwości css, w tym właśnie text-shadow. Przykład poniżej:

aby ten przykład zadziałał tak jak działa, potrzebne są pluginy color.js i textshadow.js (muszą być załączane w tej kolejności) z ww. strony oraz poniższy kod:

$("#ex5 span").click(function(){
  $(this)
  .animate({ textShadowX: 88 }, 1000)
  .animate({ textShadowY: 18 }, 1000)
  .animate({ textShadowColor: 'rgb(255, 0, 0)' }, 1000)
  .animate({ textShadowBlur: 13 }, 300);
 });

Niestety, nie działa to multi cienie, ale może coś jeszcze zmieni się w tej kwestii. Co do animacji pojedynczego cienia, to oczywiście można wykonywać wszystkie ruchy naraz, o tak:

Kod do tego:

$("#ex6 span").click(function(){
 $(this)
  .animate({ 	textShadowX: 88,
   textShadowY: 18,
   textShadowColor: 'rgb(255, 0, 0)',
   textShadowBlur: 13  }
  , 1000);
});

Hura! Czyli udało nam się animować text-shadow w jQuery. Wielkie propsy dla pulgino twórców ;-)

PS. To, że cały wpis nie wywiera wrażenia na IE to zrozumiałe, ale nie bardzo rozumiem dlaczego Opera 10.63 ma problemy i z multi cieniami i z animacją. Tajemnicza sprawa.

Gdzie jest lepiej?

Analizując globalne statystki używanych przeglądarek, możemy zauważyć, że są jeszcze wspanialsze miejsca, np.

• Niemcy FF 3.x prawie 60%, IE 7 nieco ponad 9% oraz IE 6 na poziomie 3,21% !!
• Austria ma podobną sytuację jak my tyle, że IE 8 ma już 20% rynku a IE 6 poniżej 5%;
• Ukraina zawsze była dla mnie dość ciekawym przypadkiem. Tam od dawna rządzi Opera(do tej pory nie wiem dlaczego tak jest), choć obecnie FF 3.x ją powoli dogania. Co do IE 6, gemius mówi o 8,5% a StatCounter o 5,9%;
• Islandia IE 6 1,3% – Magia!!

Analizując dalej dane ze StatCounter można zauważyć, że w porównaniu do innych krajów Europy Zachodniej, jesteśmy anty IE 8. Co prawda powoli  wykres IE 8 idzie do góry i wypiera swoich poprzedników, jednak nie jest to tak jak np. w Wielkiej Brytanii gdzie IE 8 posiada już ponad 30% rynku. Moim zdaniem winny jest strach przed aktualizacjami(które to mogą ujawnić naszą nielegalną kopie systemu), użytkowników z lewymi Windowsami XP.

Kto jeszcze w Polsce posiada IE 6?

Swój wywód będę opierał o dane jakie dostarcza strona ranking.pl odnośnie systemów operacyjnych i przeglądarek.

Pomijając web-developerów i tych ,którzy świadomie zostają przy IE 6 bo po prostu kochają tą przeglądarkę, weźmy się za sprawę tak na zdrowy rozum plus troszkę z doświadczenia. Jeśli założymy nawet, że 50% użytkowników me lewe Windowsy XP, to i tak większość z nich zainstalowało sobie nowe wersje IE lub inne przeglądarki. Popatrzmy na pozostałych.

Windowsy lubią się syfić i zwalniać z po kilku miesiącach użytkowania, toteż wypadało by najpóźniej po 3 latach odświeżyć, tzn. przeinstalować system. Uważam, że jeśli ktoś radzi sobie z przeinstalowaniem systemu, poradzi sobie też z zainstalowaniem innej przeglądarki, bądź włączeniem ręcznych aktualizacji Windowsa. Jeśli nie, zrobi to za niego znajomy, które przyjdzie pomóc przy odświeżeniu systemu(bądź jego wymianie na nowszy co całkowicie eliminuje problem). Czyli liczba klientów IE 6 maleje proporcjonalnie do wzrostu zasyfienia Windowsa – good! Wystarczy jeden solidniejszy wirus plus dobre info na onecie o tym jak wirus wszedł przez stare IE 6 i mamy kolejne procenty z głowy ;).

Podczas mojej podróży badawczej do artykułu „Jak to jest brać kredyt dziś” dowiedziałem się gdzie to są procentowe resztki obecności IE 6. Okazało się, że główne oblężenie IE 6 znajduje się w Bankach! Do którego banku nie wszedłem, prawie zawsze widziałem pracowników banków śmigających w IE 6. Najciekawiej było gdy Pani z db kredyt chciała zdobyć numer telefonu do firmy, w której pracowałem. Zamiast prawidłowej strony przywitała ją informacją o tym, że używa archaicznej przeglądarki i, że czas na zmianę :D. Obserwowałem jej minę z zaciekawieniem, i czekałem tylko kiedy mi powie, że chyba coś ściemniam. Na szczęście udało się jej odnaleźć przycisk wpuszczający na stronę mimo wszystko.

Niestety w innych publicznych instytucjach jest podobnie i może się to nie zmienić, aż do następnej modernizacji sprzętu. Dziwię się jednak, że administratorzy banków pozwalają sobie na ryzyko posiadania IE 6 na maszynach klienckich. Otwiera to drzwi hackerom, którzy znają “wejściowy” potencjał IE 6.

Czy dalej robić strony pod IE 6?

Jeśli chodzi o strony na rynek krajowy, to uważam, że nie ma sensu bawić się w to aby strona wyglądała identycznie w IE 6 i FF 3.5. Za to na pewno trzeba zachować czytelność stron w IE 6 do czasu, aż popularność tej przeglądarki nie spadnie poniżej 1%.

Osobiście olałem wszelakie PNG fixy dla IE 6 i ładuje pliki PNG wszędzie gdzie mogą się przydać. Nadal jednak staram się unikać wszelakich konstrukcji CSS, których IE 6 nie łyknie, jak position: fixed czy display: inline-block, jeśli użycie ich miało by zepsuć czytelność strony pod tą przeglądarką.

Liczę na to, że do końca roku IE 6 osiągnie upragnione 0.99% ;)