Perfection or Vanity

W poprzednim poście opisałem expression() w teoretyczny sposób, skupiając się na składni, zasadach i ograniczeniach. Dzisiaj chciałbym pokazać jak niesamowicie przydatne są te małe kawałki kodu - na przykładzie poprawek paru najbardziej frustrujących błędów i braków implementacji CSS Explorera.

Expressions są rozszerzeniem Internet Explorera, dzięki któremu można wykonywać skrypty JS na zbiorze elementów. Ich działanie porównuje się do funkcji z Excela - gdy zawartość komórek się zmieni, formuła zwróci nowe dane. Microsoft zachwalał je jako przyjazne skryptowanie stron dla webmasterów, ale ja chciałym przybliżyć ich składnię i możliwości.

Teoretycznie można je dodawać do dokumentu zarówno w JS i CSS, ale tylko ten drugi sposób jest warty opisania. Tak bowiem aplikuję bardziej skomplikowane haki z poziomu arkusza stylów IE, kiedy wszystko inne zawodzi. Musimy jednak uważać na to co i jak robimy, bo expressions są w stanie łatwo zawiesić przeglądarkę.

Podczas projektowania strony często zdarza się tak, że niektóre jej fragmenty powtarzają się niezmiennie w paru dokumentach. Jeśli cenimy swój czas i przewidujemy możliwość edycji, nie chcemy kopiować HTML-a do każdego z nich. Najlepiej wtedy wczytać dane z pliku i wstawić je do poszczególnego dokumentu.

Można to zrobić korzystając z paru metod. Na początek warto rozgraniczyć dołączane dokumenty na dwa typy - pełne strony oraz ich wycinki. Zaletą pierwszych jest możliwość wyświetlenia poza dokumentem-matką - posiadają DOCTYPE, własne style, pliki JS i tak dalej. Zaletą drugich jest prostota w zainkludowaniu. Po prostu wklejamy zawartość pliku w jakimś miejscu.

Nie wiem jak w Waszej ulubionej przeglądarce zachowuje się alert(), ale w moim Firefoksie nie dość, że jest modalny to jeszcze zabiera fokus jakiemukolwiek innemu tabowi. Do tego plugin Flasha przestaje płynnie odtwarzać filmy gdy nad oknem wisi sobie ten dialog (YouTube). Po prostu gra mi na nerwach.

Wyobraźmy sobie, że budujemy listę odnośników (dajmy na to menu), której wypunktowania są obrazkami. Po najechaniu myszką na link obrazek zmienia się na inny, dodając interaktywności stronie.

Pokazanie obrazka tła w CSS dla stanu :hover występuje z opóźnieniem, ponieważ przeglądarka nie ściąga tych, które nie są używane. Co przekłada się na zniknięcie jakiejkolwiek ikonki. Wygląda to według mnie nieprofesjonalnie. Co więcej - istnieje kilka sposobów, aby podobnego zachowania uniknąć.

Mappet jest moim narzędziem pozwalającym na bardzo proste tworzenie map obrazków w CSS. Powstał przy użyciu wspaniałej biblioteki jQuery, której się przy okazji trochę poduczyłem na tym projekcie.