Jak to działa?

Dla usera - po prostu banalnie. Całość ogranicza się do dopisania linijki (załączenie skryptu) oraz dopisania class="niceform". Dodatkowo jeżeli chcemy zmienić wygląd formatek należy zedytować pliczek psd załączony do archiwum i zapisać obrazki.

Pod maską już się dzieje o wiele więcej rzeczy. Najprościej mówiąc wszystko działa na zasadzie ukrycia pola formularza, utworzenia nowego obiektu, który służy głównie do wyglądania oraz przekazywania wartości wpisywanej/wyklikiwanej w nasz nowy twór do ukrytego już pola.

Taki niestety urok stylowania formularzy i stąd tak kombinacje.

Prosty formularzyk

Najpierw będziemy bazować na tym co otrzymujemy z Niceforms.

Nasz formularzyk będzie banalnym polem do wpisania jakiegoś słowa.

Po pierwsze pobieramy Niceforms ze strony autora: www.emblematiq.com.

W sekcji head dopisujemy:

Następnie w body piszemy już formularz właściwy:

Najważniejsze jest to class="niceform". I tak oto wygląda najprostsza wersja naszego formularza.

Załączone demo prezentujące wszystkie uroki Niceforms wygląda zaś następująco.

A gdybyśmy chcieli zmienić grafikę?

Potrzebować będziemy Photoshopa by otworzyć pliczek nf-standard-blue.psd. W nim zawarte są wszystkie grafiki związane z formularzem. Dodatkowo przygotowane są linie do cięcia, więc wystarczy wybrać zapisz dla web i zapisać same grafiki. Oczywiście można to zrobić po swojemu, tylko wtedy będzie troszkę więcej zabawy ze stylem. W sumie zabawy z PSem zostawiam Wam.

Opiszę teraz które klasy są używane do których elementów formularzy.

input type="text" - NFText(robi za kontener w którym trzymane są kolejne elementy oraz to właśnie nim stylujemy tekst, który wpisujemy), NFTextCenter(odpowiada za rozciągającą się część tła - czyli środkową). NFTextLeft(odpowiada za lewą krawędź inputa), NFTextRight(odpowiada za prawą krawędź inputa)

input type="checkbox" - NFCheck(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="radio" - NFRadio(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="button" - NFButton(środkowa część przycisku, rozszerzająca się w zależności od ilości tekstu), NFButtonLeft(lewa krawędź przycisku), NFButtonRight(prawa krawędź przycisku)

input type="file" - NFFileButton(fragment udający guzik w file), NFFileNew(nowy input który udaje funkcjonalność lewej części file) dodadkowo wykorzystywane są tutaj NFText oraz NFTextLeft

textarea - NFTextarea(tu wklepujemy zawartość), NFTextareaTop, NFTextareaBottom, NFTextareaTopLeft, NFTextareaTopRight, NFTextareaBottomLeft, NFTextareaBottomRight(poszczególne krawędzie pola), NFTextareaTopH, NFTextareaBottomH, NFTextareaTopLeftH, NFTextareaTopRightH, NFTextareaBottomLeftH, NFTextareaBottomRightH(poszczególne krawędzie po najeździe)

select - NFSelect(kontener dla kolejnych elementów), NFSelectLeft(lewa część selecta - warto się przyjrzeć obrazkom, że zrozumieć jak to jest konstruowane), NFSelectRight(prawa część selecta), NFSelectOptions(czyli to co się pojawia po pliknięciu w selecta - tak naprawdę jest to ul)

select multiple="multiple" - w sumie jest to prawie to co textarea, tylko nazwy zamiast NFTextarea mają na początku NFMultiSelect

Poza tymi klasami mamy kilka dodatkowych, których w większości przypadków ruszać nie należy:
NFfocused - są nadawane elementom na których obecnie jest focus
NFh - przesuwa tło by nadać mu pozycję 0 100% (używane w większości formatek)
NFhr - przesuwa tło by nadać mu pozycję 100% 100% (używane przy select)
NFhidden - ukrywa elementy, ale w taki sposób, że dalej są one funkcjonale (poprzez nadanie pełnej przezroczystości)

Mając opis klas, psd oraz gotowy wzór pozostaje tylko troszkę cierpliwości i powinno się udać.

Jeżeli nie będziecie zmieniać rozmiarów podmiana obrazków będzie bardzo szybkim procesem. W przeciwnym razie będzie trzeba troszkę podrasować arkusz stylu.

Podsumowanie

Jak widzicie stworzenie wymarzonych formularzy dzięki Niceforms jest w sumie prostym i w miarę przyjemnym procesem. Szkoda, że do osiągnięcia takich efektów potrzebne jest sporo tricków dziejących się pod maską. Pozostaję nam więc starać się edukować grafików ze szczególnie ułańską fantazją, żeby akurat przy formularzach troszkę odpuścili.

Jednak któregoś dnia szlag mnie trafił i postanowiłem coś w końcu zrobić, bo efekt mieszania php i HTML'a na dłuższą metę jest tragiczny. Człowiek się gubi gdzie się pętle zaczynają, gdzie kończą i ogólnie jest bajzel. Okazało się, że ktoś był na tyle miły, żeby przeportować HAMLa na php i tak oto powstał pHAML. W porównaniu z oryginałem są pewne różnice, jednak to co najważniejsze zostało zachowane.

Pierwsze starcie

Dzięki pHAML kod ulega dość imponującemu skróceniu. Dla przykładu zobaczmy różnicę między w 'Hello world':

Przeanalizujmy linijka po linijce.
!!! Strict to nic innego jak doctype (koniec kopiowania tego cholerstwa za każdym razem)
%html %head etc - po prostu tagi, tyle że zamiast ich zamykać używamy wcięć.

Na pierwszy rzut wygląda to dziwnie, ale chwila wprawy i zaczyna być fajnie.

Parametry

Przekazywanie parametrów odbywać się może na kilka sposobów. Najbardziej uniwersalnym jest:

Jak się zapewne domyślacie w rezultacie otrzymamy:

Klasy i idy możemy jednak przekazywać w troszkę krótszej formie:

Po prostu po kropkach wymieniamy klasy a po # id.

Pewnym wyjątkiem jest div, gdzie nie trzeba pisać nazwy taga:

jest równoznaczne z:

Kilka przykładów na potwierdzenie, że HAML fajny jest

Do myków, które mi się strasznie podobają należą na pewno listy:

W końcu wygląda to czytelnie, szczególnie zagnieżdżenia.

Bardzo przyjemnie wyglądają też tabele:

Znaki specjalne

\ - wyświetla wiersz dosłownie taki jaki jest.
<<< oraz >>> - wyświetla zawartość dokładnie taką jaką jest znajdującą się między tymi znakami
/ - zamienia wiersz na typowy htmlowy komentarz
// - komentarz, ale niewidzoczny w htmlu

A jak tu php wrzucić?

Najprościej mówiąc - za pomocą myślnika:

to nic innego jak:

Jednak różnica jeśli chodzi o czytelność dość spora.

Wywoływanie

Pokazałem już jak pisanie w HAMLu wygląda, teraz czas to jakoś uruchomić. Najpierw pobieramy ze strony twórcy odpowiednie archiwum. Następny krok to rozpakowanie zipa.

Kiedy już wszystko mamy przygotowane tworzymy sobie plik np test.php a w nim piszemy:

Całą treść przypisujemy sobie do jakiejś zmiennej a potem przekazujemy jako parametry dla render i renderPHP.

Jeżeli uzywamy tylko htmla, nie jest potrzebna linijka $content = $pHAML->renderPHP($content);.

Zachęcam do zabawy, bo wywoływanie tego można zrobić na wiele wygodniejszych sposobów.

Drobne bugi

Wersja dostępna na phaml.sourceforge.net ma w sumie dwie wady. Jedna to taka, że wszystkie tagi traktuje jako podwójne, a druga, że stosuje notację htmlową, a nie xhtmlową.

Na szybko poprawiłem te dwie rzeczy i tagi pojedyncze zamyka poprawnie, a kwestię html/xhtml rozwiązałem poprzez dopisanie zmiennej $is_xhtml. Uprzedzam, że były to poprawki na szybko lecz nie zauważyłem żeby coś nie działało/działało źle. Plik do pobrania stąd.

Podsumowanie

Muszą przyznać, że (p)HAML jest fajnym wynalazkiem. Strasznie upraszcza widok HTMLa. Szkoda jednak, że pod PHP nie ukazała się żadna porządna i ciągle rozwijana implementacja (ta prezentowana tutaj nie sprawia już wrażenie rozwijanej) Pod tym względem muszę przyznać, że jest to coś czego programistom od Ruby'ego można pozazdrościć.

A Wy jakie znacie i polecacie substytuty zwykłego (x)HTML'a?

CSS Scaffold, jak opisuje autor, jest CSSowym frameworkiem napisanym w PHP. Tyle, że w przeciwieństwie do innych CSSowych frameworków (960, Blueprint) zmiast ograniczać rozszerza możliwości styli. Brzmi fajnie? Ba - jest fajne, jest po prostu bardzo fajne.

Wymagania i instalacja

Jedyne czego będziemy potrzebować to PHP 5+.

Instalacja może być dla niektórych troszkę upierdliwa. W sumie jednak ogranicza się do pobrania najnowszej wersji ze strony, rozpakowania oraz przekopiowania z archiwum katalogu (katalogu, a nie zawartości) scaffold do katalogu w którym będziemy trzymać arkusze stylu. Czasem(zależne od serwera) trzeba katalogom cache i logs nadać prawa 777.

W praktyce układ katalogów powinien wyglądać następująco:

Osoby które chcą, żeby adresy do CSSów wyglądały normalnie muszą jeszcze w katalogu w którym trzymają CSS utworzyć plik .htaccess a w nim wkleić

Żeby zrobić próbę czy wszystko działa należy w naszym katalogu z CSSami (dla przykładu będzie to katalog css) utworzyć plik test.css a w nim napisać (zagnieżdzenie jest poprawne - dojdziemy do tego):

i wywołać w przeglądarce albo adres_strony/css/scaffold/index.php?f=css/test.css albo, jeżeli użyliśmy regułki w .htaccess, adres_strony/css/test.css. Jeżeli przywita Was komunikat, że nie może znaleźć pliku pomajstrujcie przy ścieżce.

Jeżeli jednak wszystko zadziałało ok to powinniście zobaczyć następujący styl:

Bazując na naszym obrazku i zakładając, że nasz adres to test.pl ścieżką do stylu będzie albo http://test.pl/css/scaffold/index.php?f=css/style.css lub http://test.pl/css/style.css.

Jeżeli wszystko działa na naszej stronie wklejamy:

lub

Jeżeli wolicie możecie użyć ścieżek absolutnych.

Na koniec drobne ale. Jeżeli nie używacie .htaccess i planujecie używać pierwszej wersji to w przypadku gdy nasza strona znajduje się na tym test.pl w katalogu moja_stronka to ścieżka do stylu będzie wyglądać następująco http://test.pl/moja_stronka/css/scaffold/index.php?f=moja_stronka/css/style.css

Zagnieżdżenia

Jak już zauważyliście w poprzednim przykładzie możemy zagnieżdżać kolejne regułki. Dla przykładu kod na listę nieuporządkowaną z linkami i bez kropek.

wypluje to nam oczywiście:

Stałe

To jest jedna z tych funkcji za które bardzo polubiłem CSS Scaffold. Bardzo często się zdarza, że klient sobie wymyśli, że kolor czcionki, który to użyliśmy w wielu miejscach jest jednak do bani i chce inny. Znajdź/zastąp i jedziemy, ale tu mozna prościej. Jeżeli używamy jednego koloru to zdefinijmy go jako stałą i najwyżej poprawiajmy w jednym miejscu.

Wystarczy w naszym CSS napisać:

a następnie gdy chcemy skorzystać:

Mixins

Czasem zamiast jednego koloru byśmy chcieli wstawiać pewne stałe fragmenty kodu. Nic trudnego:

Żeby teraz ten kod wkleić wystarczy do jakiejś naszej regułki dopisać:

W rezultacie otrzymamy:

Prawdziwa siła tkwi jednak w mozliwości parametryzacji. Jeżeli na stronie wszystkie nasze bordery są tego samego stylu i wielkości a tylko kolor się różni to wystarczy nam:

A wywołamy to następująco:

W rezultacie otrzymamy:

Możlwe jest jeszcze ustalenie wartości domyślnej:

Wtedy wywołanie bez parametru spowoduje automatycnze użycie czarnego.

Liczenie

Ta funkcjonalność jest może troszkę mniej szpanerska, ale czasem bardzo przydatna. Jeżeli mamy div o szerokości 100px i zaczynamy dodawać padding to musimy ciągle poprawiać szerokość (width+padding=100). Scaffold policzy to za nas:

Nic nie szkodzi nam na przeszkodzie, żeby użyć w środku stałych, czy użyć parametru.

Jeżeli...

Na koniec jeszcze jedna ciekawa zabawka czyli instrukcja if. Piszemy mixin (jak ktoś ma pomysł na odpowiednik to bardzo zachęcam) o nazwie default_div który ma tam sobie jakieś właściwości oraz parametr round, który przyjmuje true lub false. W zależności od round doklejamy kilka regułek lub nie:

border-radius to już taki gotowy mixin, który zajmuje się zaokrągleniami.

Cache

Kiedy już skończymy tworzenie naszego stylu pozostaje nam włączyć cache (bo po ciągle ma być generowany na nowo ten sam plik) - żeby to zrobić wystarczy otworzyć plik config.php i przestawić define('SCAFFOLD_PRODUCTION',false); na define('SCAFFOLD_PRODUCTION',true);.

Czy to wszystko?

Nie. Oczywiście, że nie. CSS Scaffold posiada także sporo ciekawych opcji a'propos gridów, wiele ciekawych mixinów, flagi, zastępowanie tekstu obrazkami (bardzo fajnie zrobiona funkcja) oraz wiele innych. Do tego mamy jeszcze możliwość dopisywania własnych rzeczy.

Oczywiście trzeba sobie zdawać sprawę, że takie podejście do styli ma swoje wady - każdy nasz plik ze stylem jest obrabiany pzez PHP, wystarczy, że admin nam zrobi prezent w postaci niespodziewanego upgrade'u do wersji w której CSS Scaffold przestanie działać.

Dodatkowo osoba, której przekażemy taką stronę może się zdziwić jak zobaczy co jest w arkuszu.

Zawsze też istnieje możliwość olania projektu przez autora. W obecnej chwili wszystko zdaje się działać stabilnie jednak, jak już wspominałem, przy nowych wersjach PHP teoretycznie mogą się zacząć dziać cuda.

Jest to też pewne dodatkowe obciążenie po stronie serwera, jednak sprawnie działający cache zapewnie rozwiązuje ten problem (przyznaję, iż nie testowałem na stronie o dużym ruchu).

Mimo wszystko polecam spróbować - dla mnie jest to ogromne ułatwienia.

HTML

Stronka, którą przygotowałam w celu zademonstrowania Wam tej techniki ma bardzo prostą konstrukcję HTML. Najważniejsze divy to te oznaczone klasą box. To właśnie one ustawione są na naszej stronie jeden za drugim, narzuconą mają określoną szerokość oraz margin z prawej strony aby zachować między nimi odpowiednią odległość.

Ogólna struktura przedstawia się następująco:

To co zamieścimy w divach box zależy tylko i wyłącznie od nas. Jak widać ze wersji demo ja postanowiłam podzielić stronkę na kilka działów, ale nie koniecznie trzeba tak robić.

CSS

Najważniejszą kwestią w stylowaniu naszej poziomej strony jest nadanie <body> odpowiedniej szerokości (takiej, w której zmieści się cała zawartość strony) - niestety jest to technika "na sztywno", ale połączeniu z wyfloatowanymi divami o klasie box sprawia, że wszystko układa się w płaszczyźnie horyzontalnej.
W naszym przypadku <body> ma nadaną szerokość 5650px.

Oto wszystkie najbardziej kluczowe elementy w CSS:

Pozostałe ostylowane elementy htmla można podejrzeć w pliku style.css.

Przewiń do... czyli zastosowanie Horizontal Tiny Scrolling

Dla ułatwienia przewijania naszej strony zastosowałam skrypt Horizontal Tiny Scrolling. Pozwala on automatycznie przewinąć stronę do boxa dzięki kliknięciu w odpowiedni link w menu.
Jak to działa?
Cały plugin składa się tylko z jednego pliku thw.js i nie wymaga żadnej konfiguracji z naszej strony.
Jedyną sprawą o jakiej musimy pamiętać to forma linków w menu oraz id divów do których te linki będą nas kierować. Należy pamiętać, że w href="" oraz w id="" diva do które będzie kierować musi znaleźć się taka sama wartość. Na przykładzie niżej jest to #oferta.
Przykład:
Tak wygląda link w menu

Div do którego będzie nas przenosił:

Jest to cała filozofia korzystania z Tiny Scrolling, ponadto skrypt ten zapewnia bezproblemowe przewijanie strony za pomocą scrolla w myszy komputerowej.

Na koniec... trochę inspiracji

Na czym to polega? Każdy element wczytuje tylko fragment obrazka – tego samego. Dlatego raz załadowany plik jest ciągle "przesuwany".

Zacznijmy od przygotowania pliku graficznego. Będzie on się składał z "potrójnego menu", mianowicie: tworzymy nowy plik o wysokości trzykrotnie większej niż docelowe menu. Na samej górze umiejscowiłem samo tło, bez napisów. Niżej znajdują się linkami(napisy), a na samym dole
- hovery (napis + podkreślenie). Efekt:

HTML

Nasz kod oprzemy na liście. W tym celu tworzymy następującą strukturę:

Dodatkowo każdy element listy będzie posiadał inaczej przesunięte tło, dlatego dodajemy do każdego li classę:

Nasz html jest gotowy, przejdźmy więc do CSS który jest tutaj kluczowym elementem.

CSS

Osobiście często na samym początku dodaję kilka właściwości, które później ułatwiają pisanie kodu:

Samemu menu dodamy standardowe style:

Jak widać, nie ma nic specjalnego, poza tym, iż ustaliłem ogólne wartości dla każdego elementu listy oraz linków. Menu otrzymało jako tło obrazek bez żadnych parametrów przesunięcia, ponieważ domyślnie nie jest on wcale przesunięty. Czas na ustawienie tła i przypisanie go do poszczególnych class.

Musimy wyświetlić tylko zaznaczony na obrazku fragment pliku:

Dlatego, podajemy w CSS, do a w elemencie o id menu i class .menu1:

• szerokość fragmentu
• obrazek, który będzie tłem
• przesunięcie obrazka

*opcjonalnie można dodać inne parametry, w moim przypadku jest to prawy margines

Krótkie wyjaśnienie: background-position określa, o ile tło ma być przesunięte względem lewej i górnej krawędzi, czyli w lewo i w dół. U nas natomiast, musimy zrobić na odwrót – obrazek przemieszczamy w górę i w prawo – stąd podajemy wartości ujemne. Atrybuty dla tła, możemy także zapisać w skróconej formie:
background: url('../images/menu.png') -25px -45px;

Podobnie postępujemy w wypadku hovera, którym jest fragment niżej:

Nasz kod wygląda tak:

Nie musimy tutaj określać już nic, poza przesunięciem i obrazkiem tła. Analogicznie postępujemy z każdym kolejnym linkiem, tworząc taki oto kod css:

Pozostają nam 2 problemy. Dodaliśmy tekst w kodzie html, i jest on wyświetlany na naszych obrazkach. Ukryjemy go, dodając do li wcięcie – o dowolnej wartości. Ja na wszelki wypadek podaję bardzo duże, w tym przypadku będzie to -30000px.
text-indent: -30000px;

Natomiast drugim problemem są nieładnie wyglądające ramki tworzące się wokół linków podczas kliknięcia i przytrzymania odnośnika. Niektórzy posługujący się samą klawiaturą do przeglądania stron widzą dzięki nim gdzie się znajdują – tutaj jednak psują one całe piękno menu. Usuniemy je zatem, za pomocą
outline: none;

Dodatkowo, jeśli chcemy, aby zaznaczyć użytkownikowi przeglądającemu stronę, gdzie się znajduje, możemy dodać classę odpowiedzialną za to. W kodzie html wygląda to tak:

W CSS musimy tylko dodać do każdej definicji hovera dopisać #menu classa a.active, np.

#menu .men1 a:hover, #menu men1 a.active

W rezultacie czego otrzymujemy gotowe menu. Całość:

HTML:

CSS:

Efekt końcowy: http://paderewski.prz-emo.com

Sam sposób można zastosować w wielu przypadkach, np. jeśli mamy linki którymi są ikonki. Podobny sposób stosuje np. Allegro, ale to zostawiam Wam samym do sprawdzenia
Dziękuję za uwagę i życzę miłego kodowania .

Krok 1 - Struktura html naszej rozwijanej listy

Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.

Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:

Wygląd:

Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.

Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:

Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).

Upiększanie menu, czyli struktura CSS

Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.

Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.

Odrobina CSS3

CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:

• Firefox (od wersji 3 w górę)
• Google Chrome
• Safari
• Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)

W menu akordeonowym zostały wykorzystane takie efekty jak:
1. Cień pod napisem

2. Zaokrąglone rogi

Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo

jQuery

Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
W sekcji należy zamieścić odnośnik do jQuery:

oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.

Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:

gdzie:

Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.

Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.

Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.

Więcej o fade'ach przeczytać możecie w artykule: "FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu".

Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js'a

podmienić click na hover:

Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.

Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.

Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:

W taki sposób przestawia się tworzenie akoreonowego menu,
mamy nadzieje, że artykuł ten okaże się dla Was pomocny.

Wielu z Was ma już zapewne dość ‘użerania się’ z ie6, który mimo upływu czasu, aktualizacji i nowych lepszych wersji nie odszedł wcale w zapomnienie. Według Ranking.pl aż 31.6% polskich internautów wciąż korzysta z Internet Explorer 6.

Osobiście postanowiłem zerwać stosunki z wyżej wymienionym delikwentem i zmusić odwiedzających moją stronę do zmiany przeglądarki na nowszą, lepsza (niepotrzebne skreślić).

Zrobiłem to w bardzo prosty sposób

Każdą osobę posiadającą Internet Explorer 6 w momencie wejścia na moją stronę spotka miła niespodzianka...

I takim sposobem internauta musi (jeżeli oczywiście chce obejrzeć moją stronę) uaktualnić lub zmienić przeglądarkę.

Jak to wygląda od strony kodu?

1. Pierwszym krokiem jest umieszczenie w źródle naszej strony odpowiednich komentarzy warunkowych.

Poniższy kod umieszczamy w sekcji <head> i co ważne koniecznie poniżej stylu naszej strony!

Poniższy kod umieszczamy przed tuż przed zamknięciem </body>.

2. Drugim naszym krokiem jest umieszczenie w stylu (w body) naszej strony kodu - wymuszającego w Internet Explorer 6 odpowiednie tło - w naszym przypadku będzie to kolor biały, a więc:

Znak '_' przed background tyczy się tylko ie6 i tylko ta przeglądarka potrafi go odczytać (taki mały hack).
Pozostaje nam tylko umieścić grafikę na serwerze i oczekiwać spamu na swojej skrzynce mailowej z pretensjami od wiernych użytkowników ie6

Jeżeli nie posiadasz Internet Explorer 6 to możesz w prosty sposób sprawdzić działanie powyższego kodu używając IE Tester'a
- do pobrania tutaj.

Wtyczka jest darmowa oraz wygodna. Można ją pobrać z https://addons.mozilla.org/pl/firefox/addon/179.

Tworzymy dokument html

Aby zacząć parce z EditCss, należy najpierw stworzyć „fundament” strony, czyli tworzyć pewien układ strony, zrobimy to przy pomocy divów.

Div, inaczej blok – jest to zwykły prostokąt, któremu można nadać margines, kolor wypełnienia, obramowania, tło itd.

Głównym divem, w którym wszystko będzie się znajowało to Container, następnie stronę podzieliłem na pięć części, Top, Cytat, Content-left (treść w lewej kolumnie), Content-right (treść w prawej kolumnie) oraz Footer.

Struktura strony wygląda następująco:

css

Wszystko jest ukazane na filmie oraz w pliku źródłowym. Chciałbym jedynie wypisać kilka solucji na pewne problemy, które się dość często zdarzają przy opisywaniu divów.

• Na przykładzie footera (w filmie można zauważyć ten problem), gdy nasz footer idzie na górę ponad wszystkie inne divy, należy zastosować w nim parametr "clear: both".
• Jeśli jakiś element który znajduje się w divie wychodzi za jego granicę, stosujemy parametr "overflow: hidden", który ucina element za granicą diva.
• Aby wyśrodkować stronę należy głównemu blokowi (w naszym przypadku "container") przypisać "margin: 0 auto". Są oczywiście inne sposoby na to jednak ten mnie nigdy nie zawiódł.
• Pamiętaj aby nie ustawiać wysokości (height) dla bloków, które będą służyły jako treść, gdyż może być problem gdy zapełnimy diva zbyt dużą ilością tekstu.

Jednym z takich efektów jest możliwość stworzenia animowanego, graficznego podświetlenia pojawiającego się np. nad grafiką wywołującą animację. Interaktywność taka została opisana na NetTuts z wykorzystaniem MooTools. My osiągniemy taki wynik dzięki zastosowaniu jQuery (w jednym przykładzie) oraz dodatkowo także za pomocą Prototype wraz z Scriptaculous (w drugim przykładzie).

Oczekiwany efekt.

Krok 1: Za co się chwycić na początku...

Na początek musisz wiedzieć w jakim celu potrzebny jest Ci prezentowany w tym artykule efekt. Menu? Wyświetlanie dodatkowych informacji w graficznej liście produktów? Czy może szybki, animowany splash? Wybór jest Twój i podług niego będziesz musiał zaopatrzyć się w dodatkowe, niezbędne elementy do wykonania podświetlenia.

Chodzi tu mianowicie o grafiki, których musi być dwa razy więcej niż elementów podatnych na działanie mechanizmu. Powiedzmy, jeżeli chcemy w pięcioelementowym menu zastosować w każdym zdarzenie po najechaniu myszką zgodne z przesłaniem tego artykułu to potrzebujemy dziesięciu grafik. Pięć opisujących przyciski menu i drugie tyle będące "treścią" pojawiającą się po podświetleniu.

Po uporaniu się z wizualną częścią problemu oraz strony internetowej możemy ruszyć krok dalej.

Krok 2: Zaopatrujemy się w jQuery i/lub Prototype i Scriptaculous!

jQuery to aktualnie najpopularniejsza biblioteka. I najłatwiej ją skatalogować w czeluścia własnego projektu. Wystarczy ze strony głównej pobrać wersję 1.3.1 production/Minified i umieścić ją w obrębie plików tworzonego przez nas przykładu (niezbędny będzie tylko plik jquery-1.3.1.min.js).

Z Prototype sprawa jest ciut bardziej skomplikowana, bo prócz standardowego frameworka musimy pobrać także dodatkowy interfejs w postaci Scriptaculous, dzięki któremu uzyskamy dostęp do efektu pozwalającego na dynamiczne zmienianie właściwości CSS elementów strony. Ściągamy więc wersję 1.6.0.3 pierwszej biblioteki, oraz paczkę z wersją 1.8.2 drugiej. Z obydwu wyodrębniamy pliki i w ramach folderu tworzonego przez nas projektu umieszczamy tylko prototype.js oraz effects.js (z drugiego archiwum).

W przypadku tego artykułu umownie pliki związane z frameworkami będą znajdować się w podkatalogu javascript folderu głównego. Obydwa przykłady (dotyczące, jeden jQuery, a drugi Prototype z Scriptaculous) będą oczywiście wykonywane w osobnych plikach znajdujących się w dwóch różnych katalogach.

Przykładowe rozdzielenie implementacji przykładów na dwa katalogi. W naszym przypadku pliki .js znajdują się dodatkowo w podkatalogu javascript.

Krok 3: Tworzymy strukturę XHTML

Atutem naszego rozwiązania jest kompatybilność z serwowaniem dokumentu XHTML w postaci application/xhtml+xml, czego bardzo często brakuje w przypadku efektów opartych na bibliotekach JS. Z racji tego także, że i w przypadku Prototype i jQuery struktura strony pozostaje niezmienna to obojętnie który framework wykorzystujesz poniższe tłumaczenie i partie kodu będą prawidłowe.

Z powodu tego w jaki sposób będziemy wysyłać treść strony posłużymy się małą częścią kodu PHP, a co za tym idzie plik korzystający z naszego mechanizmu musi mieć też takie rozszerzenie (no chyba, że serwer jest inaczej skonfigurowany, ale to już problematyka do rozwiązania na inny temat).

Poniżej dodajemy uniwersalny układ strony. Ważnym ułatwieniem jest możliwość tworzenia odnośników z elementów graficznych podatnych mechanizmowi, a także fakt, że nie korzystamy w nim z tagów img, a efektu zbliżonego do sliding-doors w celu wyświetlania obrazów.

Krok 4: Stylizujemy strukturę strony za pomocą CSS

Posługując się metodami pozycjonowania elementów dostępnymi w kaskadowym arkuszu stylów możemy operując na elementach o identyfikatorach siteContainer, pageContainer, highlightsContainer oraz divach potomnych ułożyć i wystylizować wygląd, w tym położenie jak na wyżej zamieszczonym filmiku (screenie) obrazującym wykonanie zadania z tego artykułu.

Do wszystkich bloków kodu CSS odwołujących się do tagów zawierających identyfikatory grafik zostały dodane także właściwości background z adresem pliku tła.

W naszym przypadku poniższy kod zapisujemy do pliku stylesheet.css.

Krok 5a: Dodajemy jQuery do dokumentu

Tego, czego zabrakło dotychczasowo w naszym dokumencie to załączenie bibliotek oraz pliku .js w którym będzie znajdować się kod animujący pożądany przez nas efekt.

Dla jQuery w sekcji head należy dodać pliki jquery-1.3.1.min.js oraz product-highlighter.js (który umownie będzie zawierał dodatkowy kod).

Krok 5b: Dodajemy Prototype z Scriptaculous do dokumentu

Tym razem musimy dodać jeden plik więcej. Bibliotekę (prototype.js), jej dodatkowy interfejs, a dokładniej plik zawierający obiekt Effect (effects.js) oraz jak w powyższym przypadku plik z naszym kodem animacji (product-highlighter.js).

Krok 6a: Implementujemy kod animacji z użyciem jQuery

Jak to bywa w przypadku tego frameworka, aby jakieś zdarzenie działało poprawnie powinno się je umieszczać w funkcji $(document).ready(), której zawartość zostanie załadowana w momencie załadowania drzewa dokumentu.

W [kod] musimy przypisać (do tablicy) wg. klasy wszystkie grafiki wyświetlane podczas podświetlenia, ustawić parametry podstawowe CSS oraz stworzyć sprawdzanie w pętli, czy dana grafika o klasie .pages nie jest najechana przez kursor i w zależności o danego trybu (kursor na/kursor poza) wykonać pożądaną animacji (wyłonienie dodatkowego tła / zanikanie dodatkowego tła).

Poniższy kod umieszczamy w pliku product-highlighter.js.

Należy jeszcze wyjaśnić dokładniej w jaki sposób działa $(highlights[i]).animate(). Mianowicie przy każdej iteracji pętli $('.pages').each() przekazuje ona do parametru function(i) aktualny numer elementu na którym się znajduje. Ponieważ w id pageContainer znaczniki potomne muszą być posegregowane i musi być ich tyle samo co obiektów graficznych w highlightsContainer to jeżeli kursor znajduje się na pierwszym podatnym na efekt obrazie to w podświetleniu wyłania się także pierwsza grafika. Wszystko to dzięki wyłuskaniu jej z tablicy highlights poprzez parametr i.

Krok 6b: Implementujemy kod animacji z użyciem Prototype z Scriptaculous

Podobnie w Prototype obserwujemy zdarzenie, ale tym razem załadowania całej strony w celu późniejszej obserwacji aktywności kursora na wybranych elementach aktywnych. Można oczywiście podobnie jak w poprzednim podpunkcie wykonać obserwacje zdarzeń wraz z załadowanie DOM (drzewa dokumentu) poprzez użycie document.observe('dom:loaded', function() {}). To tylko kwestia osobistego wyboru.

Dalsze postępowanie jest adekwatne do tego opisanego w przypadku zastosowania jQuery. Z tymże, tablicę elementów o danej klasie pobiera się poprzez podwójny znak dolara ($$), a najechanie oraz zjechanie kursorem poza zadany obszar rozpoznaje się także poprzez obiekt Event i metodę observe(). Do animacji służy funkcja Morph instancji Effect z pliku effects.js interfejsu Scriptaculous.

Tym razem do funkcji w $$('.pages').each() przekazywane są dwa parametry: v i i. Pierwszy z nich jest odpowiednikiem this i wskazuje na aktualnie przetwarzany element tablicy znaczników o klasie .pages. Drugi to numer pokazujący który z kolei tag jest aktualnie sprawdzany. Inaczej pisząc jego zadanie jest równoznaczne do działania parametru i w przykładzie z jQuery.

Demonstracja wyników...

Stworzyłem dwa gotowe przykłady, których analiza pozwoli Wam jeszcze bardziej zrozumieć jak stworzyć ten efekt. Pierwszy, za pomocą jQuery. Drugi, za pomocą Prototype z Scriptaculous.

Jeżeli chcecie dowiedzieć się więcej o tych bibliotekach to zapraszam do ich dokumentacji (Prototype, jQuery).

copyright © 2008-2009, m1chu

udostępnione na licencji CC dla vivee.info i m1chu.eu

Dlaczego dyskryminuję IE?

Bo mam przez tą przeglądarkę więcej pracy. Pracy której by nie było, gdyby wielce wykształceni, po jeszcze większych pod względem stopnia prestiżu uczelniach programiści potrafili "sklepać" ten twór porządnie, wg. istniejących od wielu lat standardów. I nie tylko mi to przysparza nerwów. Wiem, wiem - za chwilę znajdzie się tutaj jakiś specjalista z ogromnej korporacji developerskiej który wytknie mi, że nie szanuję przez to swoich klientów. Ich akurat traktuję poważnie i poświęcam swój czas w takiej ilości, aby zrobić co ma być wykonane porządnie. W hobbistycznych projektach powiem dobitnie i szczerze... w pewnym stopniu lekceważę użytkowników tegoż browsera. Przynajmniej tych którzy świadomie go używają i co najmniej w wersjach niższych niż siódemka. Bo z całej serii chłamu którą wydała korporacja z Redmond tylko ostatnia, "stabilna" (z nazwy) wersja choć odrobinę pokrywa się z wyznaczonymi regułami. Użytkownikom wersji szóstej... współczuję, a ci którzy z premedytacją korzystają z jeszcze starszych odsłon nie zasługują nawet na to.

Żeby nie być gołosłownym wypadałoby podać kilka przyczyn moich ostrych słów.

• ilość wykrywanych luk i prędkość ich łatania jest niekiedy zastraszająco długa - przykładem są tutaj niektóre błędy opisane na Secunii (dla IE7 w tym przypadku).
• fakt braku wsparcia dla wersji niższych niż szósta tej przeglądarki, a co za tym idzie niełatanie dziur wykrywanych w nich (niemiło byłoby wstać kiedyś rano i zobaczyć, że konto bankowe z którego korzystaliśmy dzień wcześniej poprzez przeglądarkę z Redmond jest puste, prawda?).
• pomimo zrobienia kilku kroków w przód nadal MSIE jest jednym z wolniejszych tego typu rozwiązań.
• jest wiele alternatyw takich jak Firefox, Opera (recenzja Opery 9.6x), czy Safari. Są one proste w obsłudze, wręcz intuicyjne, a dzięki zaimplementowanym, dodatkowym modułom, czy wtyczkom potrafią w znaczny sposób pomóc w surfowaniu po sieci.
• alternatywne przeglądarki względnie poprawnie interpretują standardy sieciowe dotyczące wyświetlania stron przez co nigdy nie zobaczysz prawidłowo napisanej strony w niepoprawnie ułożonym stylu.

To tylko namiastka różnic. W sieci znajduje się wiele artykułów pokazujących wyższość przeglądarek, jeszcze kilka lat temu niszowych od tej promowanej przez amerykańskiego giganta. Dlatego nawracajcie swoich znajomych, bo w tym wypadku naprawdę "pozornie inne" znaczy lepsze...

Nie w jeden dzień Rzym zbudowano...

Pomimo kilku słów mojej dezaprobaty, i wielu przeszłych lat negatywnych opinii innych ludzi nie da się oczywiście z dnia na dzień nawrócić wszystkich "niewiernych" :] Dlatego meritum dzisiejszego wpisu będzie tematyka komentarzy warunkowych i haków dla "zbuntowanej" przeglądarki.

Różne typy komentarzy.

Ukryte komentarze warunkowe

Od wersji 5 Internet Explorer obsługuje ukryte (pozytywne) komentarze warunkowe (z angielskiego downlevel-hidden (positive) conditional comments). Obsługuje, ale tylko w wersji pod Windowsem (IE/Win), pod Macintoshem już nie (IE/Mac). W zależności od treści w nich zawartych są one widzialne lub nie przez daną przeglądarkę. Jest to szczególnie przydatne jeżeli dany element strony musimy inaczej opisać w IE, niż w jej zamiennikach. Za pewnie sami twórcy zorientowali się wtedy jaki dziki twór stworzyli i choć ciut chcieli się zrehabilitować pozwalając webmasterom chociażby w nadmiarowy sposób tworzyć strony zgodne z ich "dziełem".

Oto przykład najprostszego zastosowania komentarzy. Można ją wykorzystać np. w sekcji head w celu zaimportowania arkusza stylów wykorzystywanego przez produkt z Doliny Krzemowej.

Pierwszy komentarz można także stosownie modyfikować. Obowiązują tu elementy logiczne takie jak negacja, czy znane z systemów *nixowych operatory porównania. Ważnym jest także, aby wiedzieć, że komentarze te istnieją tylko w kodzie (X)HTML, więc jeśli posiadamy na stronie dla przykładu integralny arkusz stylów to nie możemy tychże warunków używać wewnątrz kodu CSS.

Jak można zobaczyć po czwartym przykładzie dozwolone jest używanie wartości "po przecinku". Jest to tzw. wektor wersji (z angielskiego version vector) i trzeba w nim użyć 4rech znaków. W praktyce nie używa się tego prócz wersji 5.500, gdyż różnice pomiędzy poszczególnymi, bardziej skrupulatnymi odsłonami są niewielkie.

Dozwolone są także łączenia warunków za pomocą znaku & lub | oraz określanie wersji przeglądarki poprzez użycie nawiasów.

Operatory porównania wraz z negacją.

Jest także jeszcze jedna konstrukcja ukrytych komentarzy która pozwala na wysyłanie partii kodu tylko do przeglądarek innych niż IE (a dokładniej ukrywa ona go przed Internet Explorerem). Początkowo miały to wykonywać komentarze odkryte (o których będzie w dalszej części artykułu), ponieważ jednak ingerują one w prawidłowość struktury HTML to można to zrobić poprzez następującą formę.

Posiłkując się ostatnim wersem możemy skonstruować kod który będzie wyświetlał różny tekst w zależności od rodzaju przeglądarki.

<body>
        <p>
                Używasz
                <!--[if !IE]><!-->
                diabelsko dobrej, alternatywnej przeglądarki!
                <!--<![endif]-->
                <!--[if lt IE 7]>
                archaicznego i dzurawego kodu insynującego miano przeglądarki
                <![endif]-->
                <!--[if IE 7]>
                przeglądarki która pretenduje do tego miana... z mizernym skutkiem :/
                <![endif]-->
        </p>
</body>

Co w rezultacie da (zauważ, że wynik będzie się różnił w zależności od używanej przez Ciebie przeglądarki):

Używasz: diabelsko dobrej, alternatywnej przeglądarki!

Ciekawostka w postaci odkrytych komentarzy warunkowych

Odkryte (negatywne) komentarze warunkowe (z angielskiego downlevel-revealed (negative) conditional comments) jak już wspomniałem miały służyć do ukrywania kodu bądź tekstu przed przeglądarkami IE lub przed ich konkretnymi wersjami (np. przed wersjami obsługującymi ukryte komentarze warunkowe, czyli >= 5.0). Ich użycie powoduje, że strona przestaje być prawidłowym dokumentem (X)HTML, dlatego nie zalecam ich stosowania.

Zaleca się jednak używanie alternatywnej, już wspomnianej w poprzednim paragrafie techniki "pozytywnych komentarzy".

Anglojęzyczne tłumaczenie specyfiki komentarzy warunkowych można zaczerpnąć z MSDN.

Elementarz komentarzy warunkowych w JavaScript / JScript!

Nie każdy wie, że od 4rtej odsłony MSIE także komentarze warunkowe dostępne są w kodzie Javascript / JScript.

W dyrektywę /*@cc_on i @*/ wstawiamy kod warunkowy. Pierwsza fraza pochodzi od angielskiego Conditional Compilation, czyli po polsku kompilacja warunkowa.

Same warunki opierają się o dyrektywy @if (jeżeli), @elif (inaczej jeżeli), @else (ostatecznie jeżeli) i @end (ostateczna wytyczna). Same użycie instrukcji warunkowych nie pozwoli nam na sprawdzenie jakiej przeglądarki używa użytkownik. Należy po danej nazwie dyrektywy dodać @*/ co spowoduje, że zostanie wykonana ona w przeglądarkach alternatywnych.

Nie umieściliśmy po pierwszym warunku podanego wyżej ciągu znaków, dlatego obydwa warunki zostaną wykonane w wypadku Internet Explorera. Można jednak zmusić skrypt do odniesienia się w przypadku @else tylko jeżeli nie korzystamy z IE.

W tym wypadku część document.write("Przeglądarka alternatywna, inny procesor"); została odkomentowana i zostanie wykonana w przypadku użycia alternatywnych browserów.

Można spytać w tym momencie: "w jaki sposób wykryć wersję Microsoftowskiej przeglądarki?". W dwóch wcześniejszych przykładach zawarłem warunki z argumentem tego typu: @_x86. Jest to jedna z wbudowanych, przedefiniowanych zmiennych których ogółem jest dwanaście (o tylu przynajmniej wiem, a jedną z nich celowo pominąłem z racji zwracania stałej wartości).

Predefiniowane zmienne kompilacji warunkowych.

Dla przykładu wykorzystując wiedzę o tym, że wersja JScript 3.x była zaimplementowana w IE4, wersja 4 do 5.5 w IE5+, a 5.6 w IE6 możemy poprzez użycie zmiennej @_jscript_version utworzyć odpowiednie komentarze warunkowe.

/*@cc_on
   /*@if (@_jscript_version < 4)
      document.write("Internet Explorer 4");
   @elif (@_jscript_version <= 5.5)
      document.write("Internet Explorer 5+");
   @elif (@_jscript_version == 5.6)
      document.write("Internet Explorer 6/7");
   @else @*/
      document.write("Alternatywa ");
   /*@end
@*/

Ostatecznie jeżeli będziemy mieć taką potrzebę możemy posiłkować się użyciem własnych zmiennych, definiując je poprzez dyrektywę @set.

/*@cc_on
   @set zmiennax = 4;
   @set zmiennay = @_jscript_version;
   /*@if (@zmiennay != @zmiennax)
      document.write("To nie jest IE4!")
   @else
      document.write("IE4 ");
   @end
@*/

Ciekawostka numer dwa - tag comment

Drugą ciekawostką dzisiejszego artykułu której nie powinno się stosować z tego samego powodu co poprzedniej jest tag comment. Nie jest to standardowy znacznik ani HTML-a, ani XHTML-a. IE potraktuje go jako zwykły komentarz. Inne przeglądarki powinny za to wyświetlić tekst znajdujący się w nim. Dodatkową różnicą jest fakt, że w tym wypadku i IE/Win, i IE/Mac tak samo wspierają tą "funkcjonalność", przez co tekst będzie niewidoczny w obydwu wersjach.

To nie jest MSIE.

Omijamy niedoskonałości interpretowania CSS przez MSIE (haki)

Haki CSS to konstrukcje zmieszania różnorodnych znaków z regułami dostępnymi standardowo w arkuszach stylów. Nowoczesne przeglądarki takie konstrukcje w zależności od formy pominą lub zmodyfikują do prawidłowego stylu. IE ich nie ignoruje, po prostu na nich operuje. Nawet w siódmej odsłonie...

Standardowym hakiem jest użycie * przed daną dyrektywą CSS. Zadziała ona we wszystkich wersjach tej przeglądarki, poczynając od piątki i patrząc wzwyż.

Krótko wyjaśniając. Wszystkim przeglądarkom obsługującym arkusze stylów zostanie przekazany biały kolor tła dla elementu p, z tymże dla Internet Explorera dodatkowo dyrektywa ta zostanie nadpisana tak, że w rezultacie kolor tego tła będzie w nim czarny (druga linijka).

Oto inny sposób użycia "gwiazdki". Sposób który działa tylko i wyłącznie na IE6.

Jak przypomniał _wsl z webhosting.pl, aby wyselekcjonować właściwości w selektorze tylko dla IE7 należy posłużyć się powyższa konstrukcją, która od poprzedniej różni się tylko plusem umieszczonym za znakiem gwiazdki. Obydwa powyższe przykłady są zgodne ze standardami CSS.

Jeśli na początku właściwości umieścimy znak _ to ograniczymy renderowanie dla wersji 5.5 i 6.0. Dodanie podkreślenia, bądź myślnika (co znane jest z używania rozszerzeń poszczególnych przeglądarek, opisywanych przeze mnie np. tutaj) jest dozwolone wg. specyfikacji co znaczy, że użycie takiej formy dyrektywy nie pozbywa nas walidacji dokumentu CSS.

W podobny sposób poprzez użycie backslasha () wewnątrz właściwości możemy ograniczyć jej działanie do przeglądarek (!IE) z numerkami innymi niż 5.x (czyli praktycznie zezwolić na działanie w każdej innej wersji i we wszystkich pozostałych browserach). Należy wiedzieć także, że hak ten nie zadziała jeżeli ukośnik wsteczny umieścimy na początku frazy.

Idąc za rozwiązaniem na Tantek.com możemy uzyskać powyższy wynik także poprzez następującą konstrukcję.

Podatne na ten błąd wersje możemy oczywiście zmusić w inny sposób do prawidłowej interpretacji arkusza.

Komuś może nasunąć się teraz pytanie, jak odróżnić już wspomniane przeze mnie tutaj wersje piątą na Macinthosha i Windowsa?

Oto konstrukcja którą należy użyć, aby zaaprobować styl pod IE/Mac.

A tak wyglądałoby to dla przeglądarek innych niż IE/Mac. Bardzo fajnie (w języku angielskim) jest to opisane na StopDesign.

Co mogliście zauważyć większość z tych metod pomija siódme wydanie Internet Explorera. Developerzy tej wersji już dawno na swoim blogu pisali, aby usunąć ze swoich stron haki. W najnowszej wersji przeglądarki został zastosowany tryb zbliżonej kompatybilności z standardami, pewnie stąd te zalecenia. Nie mniej jednak grupa konstrukcji związanych z własnościami pozostała i po części została rozszerzona.

Znakami które sprawiają, że IE7 zaczyna interpretować regułę są więc praktycznie wszystkie dostępne spoza polskiego alfabetu na standardowej klawiaturze użytkownika. Co ciekawsze można je w specyficzny sposób łączyć co daje efekt równoznaczny z pojedynczą linią ostatniego przykładu z tymże dla poprzednich odsłon browsera.

We wszystkich wersjach obsługujących haki prócz siódmej (jej niestabilne odsłony są jednak jeszcze podatne na ten błąd) możemy do właściwości dodać !important o wyższym priorytecie niż zwykła reguła i nieobsługiwanym w takim wypadku przez wcześniej wymienione przeglądarki.

No i na finiszu zarys rozszerzenia expressions

Kiedy każda z powyższych metod zawodzi z ostateczną pomocą (pomijając rozwiązania zewnętrzne) przychodzi nam metoda zaawansowanego użytkowania haków z poziomu CSS, czyli rozszerzenie expressions.

expressions (dynamiczne właściwości) - rozszerzenie przeglądarek IE (włącznie z siódmą odsłoną) pozwalające na używanie pseudokodu JavaScript (gdyż jest on ograniczony strukturą CSS, czego przykładem jest brak możliwości deklaracji zmiennych za pomocą var, czy używanie przecinków zamiast średników) na elementach arkusza stylów.

Składnia:

Nie przeprowadzę tu wykładu na temat JavaScript, którego znajomość jest niezbędna do operowania na expressions. Podam jednak kilka przykładów obrazujących co może być parametrem tego rozszerzenia.

Elementarnymi słowami kluczowymi są document (będący obiektem) oraz this (będący referencją do aktualnie przetwarzanego obiektu). W pierwszym wypadku używając odpowiednich właściwości możemy na przykład ustawić absolutną pozycję danego elementu względem rozmiarów okna przeglądarki, bądź nadać stronie maksymalną, dozwoloną szerokość względem rozdzielczości ekranu użytkownika (czego nie da się zrobić w starszych odsłonach Internet Explorera z powodu nie obsługiwania przez nie dyrektyw max-height, min-height, max-width i min-width). Przedstawiam dwa przykłady, które tylko i wyłącznie mają zobrazować możliwości operowania JS-em w kodzie CSS.

W wypadku zmiany koloru skorzystaliśmy z konstrukcji odniesienia się do rodzica elementu (parentNode), po czym do ostatniego potomka tegoż rodzica (lastChild), by na koniec po prostu nadać pożądany kolor (style.color).

W wypadku stylów możemy nadać wartość własności także poprzez setProperty() zalecane przez W3C.

Takich własności jest oczywiście więcej, a przykładami są:

• wspomniane parentNode - wskazuje na rodzica elementu w drzewie dokumentu,
• childNodes - tablica elementów potomnych, których istnienie można sprawdzić poprzez użycie metody .hasChildNodes() lub przez sprawdzenie jej długości argumentem .length. Do danych potomków odnosimy się jak do zwykłej tablicy, czyli np. 3ci element odczytywalibyśmy w formie element.childNodes[2];,
• firstChild - pierwszy element potomny,
• lastChild - ostatni element potomny,
• previousSibling - poprzedni element,
• nextSibling - następny element,
• nodeName - nazwa aktualnego elementu,
• nodeValue - wartość aktualnego elementu.

Własności DOM dla drzewa dokumentu.

Korzystając z tego rozszerzenia należy to robić z reguły w osobnym arkuszu przeznaczonym tylko dla MSIE. Jeżeli robimy to jednak w arkuszu ogólnodostępnym to zaleca się poprzedzanie właściwości ciągiem -ie (podobnie jak dla przeglądarek fundacji Mozilla stosuje się -moz).

I na koniec bardziej skomplikowany, finalny przykład. Pierwsza właściwość tworzy tag typu p i przenosi go na koniec zawartości rodzica. Ma on ukazać użycie przecinka zamiast średnika w wielolinijkowym kodzie. W -ie-witheval użyliśmy za to funkcji eval() dzięki której w jej parametrze mogą znajdować się wyrażenia zawierające takie elementy jak instrukcje warunkowe, czy wyłapywanie błędów. Nadal jednak niedozwolona jest deklaracja zmiennych z użyciem wyrażenia var oraz posługiwanie się średnikami w celu oddzielenia partii kodu.

Wspomniałeś coś o rozwiązaniach zewnętrznych, to znaczy?

Jednym z takich rozwiązań jest skrypt (o wielkości 1kB!) CSS Browser Selector który dzięki możliwości dodawania do właściwości nazw klasy określających przeglądarkę lub system ułatwia pisanie pod nie kodu arkusza stylów.

Powyższy kod ustawiony zostanie dla identyfikatora test i przeglądarki IE5 systemu Windows. Nadany zostanie oczywiście margines o szerokości pięciu pikseli.

Skrypt korzysta z JavaScriptu co może powodować, że nie zostanie on zaaplikowany każdemu użytkownikowi, albo zostanie to wykonane dopiero po załadowaniu DOM.

-----

Coś niezrozumiałego? Jakieś pytania? Zapraszam do komentowania.

copyright © 2008-2009, m1chu

udostępnione na licencji CC dla vivee.info i m1chu.eu