Wokół najnowszej przeglądarki Microsoftu nagromadziło się wiele mitów i legend. Niektórzy powiadają, że jak chłop zainstaluje tę przeglądarkę u siebie na komputerze, to krowy przestaną mu mleko dawać, ptactwo zdechnie, a córka zostanie starą panną. Ponieważ premiera finalnej wersji IE9 jest tuż tuż, warto przyjrzeć się dokładniej możliwościom przez nią oferowanym. Odrobina czasu poświęconego na sprawdzenie co w trawie piszczy, pozwoli nam zaoszczędzić jego wielokrotność w przyszłości.

Najnowsze wydanie Internet Explorera przenosi przeglądarkę ze średniowiecza do czasów współczesnych. Zarówno pod względem wyglądu jak i implementacji obowiązujących standardów. Samo działanie przeglądarki również zostało znacznie usprawnione i w przeciwieństwie do IE8, który sprawiał wrażenie, że dobrze działa, IE9 nie sprawia takiego wrażania. IE9 po prostu dobrze działa.

Czego zatem możemy spodziewać się po IE9? Z najbardziej brakujących funkcjonalności, które zostały wprowadzone, można wymienić:

• zaokrąglone rogi dzięki CSS
• obsługa RGBA
• obsługa przeźroczystości (opacity)
• transformacje CSS
• obsługa selektorów CSS3

Na fali rosnącej popularności HTML5, IE9 został uzbrojony w:

• obsługę znacznika canvas
• obsługę znaczników audio oraz wideo
• obsługę SVG
• obsługę geolokalizacji

Do tego wszystkiego należy dodać jeszcze rewelacyjne narzędzia deweloperskie, które niewiele ustępują liderowi w tej dziedzinie Firebugowi, a czasami nawet go wyprzedzają.

Z “miękkich” dodatków warto znać Pinned Sites, czyli mechanizm pozwalający na przypinanie konkretnych zakładek do paska zadań. Tak przypięta zakładka ma możliwość korzystania z Jump List oraz w ograniczonym zakresie zmieniać ikonę na pasku zadań.

A co z naszą prywatnością i wszędobylskimi reklamami? Tutaj dostaliśmy do dyspozycji narzędzie o wszystko mówiącej nazwie – Ochrona przed śledzeniem. Działa ono na zasadzie list dozwolonych i zablokowanych elementów. Wprawdzie nie jest ono tak wygodne w użyciu jak AdBlock znany z Firefoxa, niemniej zadanie swoje spełnia.

Niestety Internet Explorer 9 nie doczekał się sprawdzania pisowni oraz rozszerzeń. Nie są to może najpoważniejsze wady tej przeglądarki, ale skutecznie zniechęcają do przesiadki. Pozostaje jedynie mieć nadzieję, że w końcu się pojawią.

Jeśli chcielibyście dokładniej zapoznać się ze zmianami, polecam:

• Internet Explorer 9 Guide for Developers
• Pinned Sites w Internet Explorer 9
• IE9 Test Drive
• Internet Explorer Developer Center
• CSS Compatibility and Internet Explorer

Czym jest cheet sheat raczej tłumaczyć nie trzeba. Niejednokrotnie zerkałem na tablicę korkową/ścianę karton-gips naszpikowaną licznymi zadrukowanymi kartkami w celu znalezienia tej jednej jedynej, zawierającej odpowiedź na moje pytanie. Ściągawki są szybsze nawet od Google – zawsze pod ręką, nie wymagają do działa dostępu do Internetu (bez prądu też doskonale sobie radzą), zazwyczaj wystarczy rzut oka, by znaleźć rozwiązanie problemu.

Kilka dni temu Wookieb podesłał do mnie linka prowadzącego do strony zatytułowanej 100 + Must Have Cheat Sheets and Quick References For Web Designers and Developers. Nazwa mówi sama za siebie. Setka (a nawet więcej) obowiązkowych ściągawek, bez których żywot developera to droga przez mękę.

Nie przejrzałem wszystkich ściągawek, jednak po sprawdzeniu kilku najbardziej mnie interesujących, śmiało mogę napisać, iż tytuł nie został napisany na wyrost.

Co ciekawego znajdziemy na ściągawkach? Oto lista najciekawszych zagadnień:

• CSS3
• HTML5
• WordPress
• PHP
• jQuery
• czcionki
• Adobe AIR

Miłej lektury.

Wycinaliście kiedyś layout, w którym grafik przesadził z cieniami? Zero przyjemności. Dłubanie się z obrazkami imitującymi cień, stosowanie fixów i hacków JavaScript i efekt końcowy daleki od zamierzonego. Wraz z pojawieniem się na rynku IE9, wreszcie możemy skorzystać z dobrodziejstw CSS, działających na wszystkich nowych(!) przeglądarkach.

Cała tajemnica tkwi w pseudo-elementach zastosowanych na elemencie, do którego chcemy dodać cień oraz transformacjom CSS, umożliwiającym dowolne kształtowanie cienia. Mamy możliwość wygięcia cienia w łuk, stworzenie imitacji perspektywy, czy też dodanie cienia do obróconych elementów.

Dokładny opis tej techniki wraz z kodem CSS znajdziecie na stronie http://nicolasgallagher.com/css-drop-shadows-without-images/. Obowiązkową pozycją jest również demo.

Miłej zabawy.

Ostatnio natknąłem się na bardzo fajną rzecz – możliwość wysyłania pliku CSS w nagłówku HTTP. Daje to bardzo łatwą możliwość ukrycia swoich stylów CSS przed niedoświadczonymi developerami, niepożądanymi i wścibskimi oczami. Oczywiście tak przesłane style CSS do strony nie stanowią większego problemu do obejścia dla doświadczonego developera (Firebug), niemniej nie każdemu będzie chciało się analizować [...]

Related posts

• The Small Calendar (0)
• Info (0)
• CSS minify – combine: zmniejszanie i łączenie plików css w jeden (1)
• The Small Calendar – Windows gadżet (3)
• The Small Calendar – jQuery + PHP w praktyce (5)

Pamiętacie jeszcze czasy, w których nie było Firebuga? Jak wtedy debugowało się skrypty Javascript? Jak sprawdzało się zawartość ciasteczek, prędkość ładowania się poszczególnych elementów, czy też przeglądało drzewo DOM? Aż włos się na głowie jeży.

Na szczęście czasy te dawno już minęły, a nas w tych wszystkich niewdzięcznych zajęciach wspomaga Firebug – niedoścignione narzędzie dla web developerów i jeden z głównych powodów, dla których Firefox jest najpopularniejszą przeglądarką. Sam Firebug oferuje szereg funkcjonalności, jednak czasami okazuje się, że przydałoby się coś jeszcze. W tym momencie na scenę wkraczają dodatki do Firebuga, których jest nie mało, i które uzupełniają braki.

Warto poznać najciekawsze z nich, powodujące że Firebug jest jeszcze bardziej pomocny w codziennej pracy. Należą do nich:

• Firecookie – dodatek pozwalający na zarządzanie ciasteczkami z poziomu Firebuga.
• FirePHP – nie lada gratka dla programistów PHP. Dodatek ten pozwala na wysyłanie komunikatów do konsoli Firebuga z poziomu PHP, co znacznie ułatwia pracę nad aplikacjami korzystającymi z AJAXa.
• Page Speed – dodatek od Google’a dostarczający szeregu informacji na temat wydajności naszej strony.
• FireQuery – obowiązkowa pozycja dla wszystkich korzystających w swoich projektach z biblioteki jQuery
• FireRainbow – kolorowanie składni w Firebugu
• Firepicker – możliwość wyboru koloru dla atrybutu CSS (np. color) z palety.

Uzbrojeni w taki zestaw narzędzi, możemy bez większych problemów przystąpić do tworzenia oraz testowania aplikacji opartych o HTML, CSS i Javascript.

Mieliście kiedyś do pocięcia layout, który był “bogaty” w gradienty? Jeśli tak, to szczerze współczuję. Jest to niewdzięczna robota,  której i tak nikt nie doceni, a przy okazji zmiany identyfikacji graficznej strony trzeba będzie robić wszystko od nowa. Tak się składa, że ostatnio mam dużo cięcia i postanowiłem coś z tym zrobić. W końcu zmniejszenie ilości grafik ładowanych na stronie wyjdzie serwisowi na dobre. Co więcej, do szerszego grona zaczynają docierać takie terminy jak graceful degradation oraz progressive enhancement. IE6 również nie ma łatwego i powoli dokonuje swojego żywota w korporacyjnych gabinetach i bardzo starych komputerach kupionych na komunię.

Na takim właśnie podłożu wykiełkowała we mnie myśl “Może warto w końcu przenieść ciężar prezentacji danych z grafiki na CSS? Przecież po to właśnie powstały.” I w ten oto sposób duży serwis składa się jedynie z około dziesięciu plików graficznych (w tym jeden css sprite) i całkiem zgrabnego pliku CSS. Ale do rzeczy. Styl, dzięki któremu można uzyskać gradient na stronie (również w IE6 – a co tam, niech mają) jest stosunkowo prosty i nie działa jedynie w Operze. Podobno Opera 11 miała już wspierać gradienty, jednak nie udało mi się znaleźć żadnej informacji na ten temat.

Kompletny kod CSS wygląda następująco:

background: #ffffff;
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#ffffff));
background: -moz-linear-gradient(left top, #000000, #ffffff);
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#FF000000, EndColorStr=#FFffffff, GradientType=1);

Pierwszy wiersz to tzw. fallback cololr, czyli kolor jaki zostanie zastosowany w przeglądarce nieobsługującej gradientów.

Drugim wierszem zadowolimy wszystkie przeglądarki oparte o webkit. W pierwszym parametrze przekazujemy informację o rodzaju gradientu. Następnie musimy zdefiniować pozycję z jakiego miejsca, do jakiego miejsca będzie przechodził gradient. Na sam koniec podajemy kolor początkowy oraz docelowy. Nie są jedyne możliwości webkita, niestety jeśli chcemy zadowolić użytkowników IE nie możemy z nich skorzystać.

Trzeci wiersz działa prawie identycznie jak drugi, z tą różnicą, że dla Firefoxa definiujemy rodzaj gradientu już w nazwie. Następnie podajemy jedynie kolor początkowy i końcowy.

Ostatnim wierszem dodajemy gradienty w IE (testowane na IE6, IE8 oraz IE9). Tutaj nie trzeba raczej tłumaczyć kolejnych parametrów. Wyjaśnienia wymaga jedynie GradientType. Ustawiony na 1 oznacza gradient poziomy, na 0 lub wcale – pionowy.

W przypadku przeglądarek IE warto jeszcze mieć na uwadze, jeden drobny szkopuł. Aby gradient się wyświetlił wymagają ustawienia wysokości.