Posts Tagged ‘design’

Czy Webdeweloper może ignorować IE — może!

28 września 2009

Wprowadzenie

Oglądałem ostatnio zdjęcia w serwisie Flickr.

Przyglądałem się funkcji komentowania zdjęć i zauważyłem zaokrąglone rogi przycisków Preview i Save Comment oraz okna z wyjaśnieniami How do I format my comment?

Jako człek ciekawy, sprawdziłem jakiej to metody użyli programiści Flickr.com, aby uzyskać efekt zaokrąglonych rogów…

Zaokrąglone rogi w serwisie Flickr.com

Jest wiele metod (bazujących na miksie tabel i obrazków) uzyskania efektu zaokrąglonych rogów — większość to, moim zdaniem, doskonałe przykłady przerostu formy nad treścią.

Programiści Flickr.com zrobili to, moim zdaniem, niezwykle elegancko. Użyli styli CSS -moz-border-radius, które działają we wszystkich nowoczesnych przeglądarkach (Firefox, Chrome, Safari, Opera) poza…, a jakże, Internet Explorer-em — każdym :(.

flickr.com

Zaokrąglone rogi w serwisie Flickr.com

Podsumowanie

Dzięki prostemu rozwiązaniu działającemu w oparciu o style CSS, można osiągnąć ten miły dla oka i mózgu efekt niewielkim nakładem pracy i — co o wiele ważniejsze — bez rozdmuchiwania kodu HTML i rozmiaru przesyłanej strony.

Flickr.com i Yahoo pokazały też, że można zignorować niedostatki przeglądarki Internet Explorer, dzięki czemu zyskują:

  1. Użytkownicy innych przeglądarek — bo strony ładują im się szybciej,
  2. Programiści — bo mają kod prostszy do napisania i utrzymania,
  3. Testerzy — bo przyciski są standardowe i standardowo działają (fokus, zatwierdzanie klawiszem Enter i Spacja).