Serwisów oferujących przeglądanie zasobów multimedialnych nie brakuje w sieci. Do niedawna jednak wszystkie oparte były o wykorzystanie możliwości znaczników object lub niepoprawnego embed. Problem w tym, że rozwiązania te opierały się o wtyczki firm trzecich, takie jak QuickTime, czy Flash. HTML 5 standaryzuje osadzanie plików muzycznych i filmów.

Kwestia dźwiękowa: element AUDIO

Jedna z najbardziej, od dawna oczekiwanych możliwości w HTML 5. Pozwala na natywne odtwarzanie utworów muzycznych w przeglądarce. Określana znacznikiem audio.

Wg. specyfikacji może przyjmować pięć atrybutów:

• autoplay – określa czy odtwarzać automatycznie dźwięk, gdy zostanie on załadowany,
• controls – określa czy wyświetlić odtwarzacz w standardowym układzie,
• loop – określa czy powtarzać odtwarzanie,
• preload – wyznacza, czy załadować zasobów w trakcie ładowania strony,
• src – adres URL do pierwotnego, ładowanego źródła.

Korzystając z powyższych informacji możemy otrzymać następujący przykład:

<!-- domyślny układ, startuje automatycznie, jedno źródło -->
<audio src="test.ogg" controls autoplay></audio>

W praktyce pojawi się jednak problem, związany z implementacją różnych wersji kodeków w przeglądarkach (np. Vorbis, Advanced Audio Coding, MPEG-1 Audio Layer 3). Z tego powodu, trzeba aktualnie definiować dodatkowe zasoby w tagu source. Obsługuje on atrybuty:

• media – zdefiniowanie typu zasobu. Domyślnie odpowiada wszystkim typom mediów,
• src – adres URL do pierwotnego, ładowanego źródła,
• type – definiuje typ zasobu, pozwalając na określenie przeglądarce, czy może odtworzyć go, bez konieczności pobierania. Musi być pod postacią prawidłowego typu MIME. Opcjonalnie, wewnątrz niego można zdefiniować parametr codecs, określający jak zakodowany jest zasób.

<!-- domyślny układ, startuje automatycznie, wiele źródeł -->
<audio controls autoplay>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogg" type="audio/ogg; codecs=vorbis">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp3">
	<!-- Opera ge 10.5, Firefox ge 3.5 -->
	<source src="test.wav">
</audio>

Na wypadek niekompatybilnej przeglądarki można wewnątrz elementu audio wstawić alternatywną wiadomość, bądź plik Flash z autorskim odtwarzaczem.

<!-- domyślny układ, startuje automatycznie, wiele źródeł -->
<audio controls autoplay>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogg" type="audio/ogg; codecs=vorbis">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp3">
	<!-- Opera ge 10.5, Firefox ge 3.5 -->
	<source src="test.wav">
	<!-- alternatywny wynik -->
	Twoja przeglądarka nie obsługuje HTML 5.
</audio>

W rozwiązaniu powyższego problemu pomóc może także użycie możliwości JavaScriptu i metod/atrybutów/zdarzeń dostępnych w API. Pozwalają one na manipulację na obsługiwanych plikach. Niestety skorzystanie z możliwości obiektu Audio nie będzie możliwe w jakiejkolwiek wersji IE.

• buffered – określa ilość oraz początkowy i końcowy czas zbuforowanego zasobu,
• canPlayType(typ_MIME) – zwraca informacje na temat tego, czy dany typ obsługiwany jest przez klienta. Możliwe wyniki to: no, maybe, probably,
• currentTime – pozwala na ustawienie lub pobranie aktualnego czasu odtwarzania,
• duration – wyświetla czas trwania utworu. W wypadku nie załadowania go, zwraca NaN (Not a Number),
• ended – zwraca prawdę, jeżeli zakończono odtwarzanie (w przód),
• loop – wartość logiczna, pozwalająca na zapętlanie dźwięku,
• muted – zwraca lub ustawia, czy kanały audio są wyciszone,
• pause() – pauzuje odtwarzanie,
• paused – przetrzymuje informacje o tym, czy element jest spauzowany,
• play() – wznawia odtwarzanie,
• played – przetrzymuje informacje o odtwarzanym elemencie,
• volume – zwraca lub ustawia głośność dźwięku w zakresie od 0.0…0.1.

Przykład:

<p>
	<button type="button" onclick="stop();">Stop</button>
	<button type="button" onclick="lour();">Wycisz</button>
</p>

<script type="text/javascript">
var element = document.getElementById("audio"); /* pobranie elementu */
function stop() { /* funkcja zatrzymująca */
	if ( !!(element.canPlayType) != false ) {
		element.currentTime = 0; /* ustawienie czasu na początek */
		element.pause(); /* pauza */
	}
}
function lour() { /* funkcja wyciszająca */
	if ( !!(element.canPlayType) != false ) {
		element.volume = 0; /* głośność na zero */
	}
}
</script>

Przykład z użyciem new Audio():

var obj = new Audio('');
alert(!!(obj.canPlayType));

Kwestia filmowa: element VIDEO

Drugi, ważny element HTML 5. Oparty o znacznik video. Przyjmuje te same atrybuty co audio, a ponadto:

• height – określa wysokość okna playera,
• poster – adres URL alternatywnej grafiki, wyświetlanej jeżeli domyślny zasób nie będzie dostępny,
• width – określa szerokość okna odtwarzacza.

Tak oto możemy stworzyć podstawowy przykład użycia:

<!-- buforowanie zasobu w trakcie ładowania strony, jeden plik -->
<video src="test.mp4" preload></video>

Ponownie, w praktyce, powinno się zdefiniować kilka, różnych źródeł plików, w celu obsługi odtwarzacza przez większą ilość przeglądarek.

<!-- domyślny układ, buforuje przy ładowaniu, wiele źródeł -->
<video controls preload>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogv" type="audio/ogg; codecs='theora, vorbis'">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
	<!-- mobilne -->
	<source src="video.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
	<!-- alternatywny wynik -->
	Twoja przeglądarka nie obsługuje HTML 5.
</video>

W odtwarzaczu wyświetlane są dwa filmy (Elephants Dream, Big Buck Bunny) na licencji zezwalającej na rozprowadzanie kopii w trybie online.

Obróbka

Zarówno w przypadku jednego, jak i drugiego elementu możemy je stylować.

audio, video {
	width: 480px;
	height: 320px;
}

Kompatybilność

Jedni nie korzystają z nich wcale, niektórzy tylko po to aby zwiększyć funkcjonalność tworzonych przez siebie stron, a u jeszcze innych zauważalny jest przepych tego typu rozwiązań. Biblioteki programistyczne języka JavaScript, bo o ich wykorzystaniu tu mowa to źródło bardzo różnorodnych, nie tylko funkcjonalnych, ale także estetycznych efektów. Sieć aż kipi od dobrych i słabych, lepiej oraz słabiej wytłumaczonych przykładów użycia możliwości MooTools, jQuery, Prototype z Scriptaculous, czy innych mniej powszechnych frameworków.

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).

<?php
if ( stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') ) // jeżeli przeglądarka obsługuje application/xhtml+xml
{
	header("Content-Type: application/xhtml+xml; charset=utf-8"); // wysłanie odpowiednich nagłówków
	print '<?xml version="1.0" encoding="utf-8"?>'."\r\n";
	print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"'."\r\n";
	print '"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'."\r\n";
}
else // wysłanie dokumentu jako text/html dla przeglądarek nie obsługujących typu zawartości pliku z powyższego warunku, np. dla IE
{
	header("Content-Type: text/html; charset=utf-8");
	print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"'."\r\n";
	print '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\r\n";
}
?>

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.

<html lang="pl" xml:lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="<?php print ( stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') ? 'application/xhtml+xml' : 'text/html' ); // typ zawartości zależny do możliwości przeglądarki użytkownika ?>; charset=utf-8" />
  	<meta name="Description" content="Product highlighter - tworzenie dynamicznych opisów produktów - m1chu.eu" />
  	<meta name="Keywords" content="product, highlighter" />
	<title>Product highlighter</title>
	<style type="text/css">@import url('stylesheet.css');</style> <!-- arkusz stylów -->
</head>
<body>
	<div id="siteContainer">
		<div id="highlightsContainer"> <!-- zbiór grafik wyświetlanych przy najechaniu kursorem -->
			<div class="highlights" id="highlight1"></div>
			<div class="highlights" id="highlight2"></div>
			<div class="highlights" id="highlight3"></div>
		</div>

		<div id="pageContainer"> <!-- zbiór grafik podatnych na efekt -->
			<div class="pages" id="page1"><a href="http://m1chu.eu/"></a></div>
			<div class="pages" id="page2"><a href="http://vivee.info/"></a></div>
			<div class="pages" id="page3"><a href="http://utnij.eu/"></a></div>
		</div>
	</div>
</body>
</html>

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.

/* ustawienia domyślne dla ciała strony (w poprawnie wysyłanym XHTML jest to html+body, a nie tylko body) */
html, body {
	margin: 0px;
	padding: 0px;
	background: #000 url('bg.png') repeat-x;
}

#siteContainer {
	margin: 150px auto 0px auto; /* marginesy - wyśrodkowanie poziome */
	width: 573px;
	height: 345px;
	position: relative; /* relatywna pozycja, kontener */
	background: transparent url('container.png') no-repeat top left;
}
#pageContainer {
	position: absolute; /* pozycja względem #siteContainer */
	z-index: 5; /* ponad ciałem strony i pod #highlightsContainer */
	top: 128px;
	left: 0px;
}
#highlightsContainer {
	position: absolute; /* pozycja względem #siteContainer */
	z-index: 10; /* ponad pozostałymi elementami */
	left: 178px;
	top: 30px;
}
/* ustawienie w linii wraz z zmianą wyglądu kursora */
#pageContainer > div {
	float: left;
	cursor: pointer;
}
/* rozmiary klikalnych divów potomnych znajdujących się w kontenerze listy grafik podatnych na działanie mechanizmu */
#pageContainer > div a {
	width: 178px;
	height: 178px;
	display: block;
}
#page1 {
	margin-right: 19px; /* prawy margines - odstęp od kolejnego diva */
}
#page1 a {
	background: url('icon_1.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}
#page2 {
	margin-right: 20px; /* prawy margines - odstęp od kolejnego diva */
}
#page2 a {
	background: url('icon_2.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}
#page3 a {
	background: url('icon_3.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}

/* rozmiary wszystkich potomków typu div kontenera zawierającego podświetlenia */
#highlightsContainer > div {
	position: absolute;
	width: 222px;
	height: 101px;
	display: block;
}
/* pliki tła w pojawiających się podświetleniach */
#highlight1 {
	background: transparent url('highlights_1.png') no-repeat;
}
#highlight2 {
	background: transparent url('highlights_2.png') no-repeat;
}
#highlight3 {
	background: transparent url('highlights_3.png') no-repeat;
}

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).

	<script type="text/javascript" src="javascript/jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="javascript/product-highlighter.js"></script>

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).

		<script type="text/javascript" src="javascript/prototype.js"></script>
	<script type="text/javascript" src="javascript/effects.js"></script>
	<script type="text/javascript" src="javascript/product-highlighter.js"></script>

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.

$(document).ready(function() {
	[kod]
});

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.

$(document).ready(function() {
	// tablica elementów o klasie .highlights
	var highlights = $('.highlights');

	// ustawienie pełnej przezroczystości elementów pojawiających się w czasie najechania myszką na obiekty podatne efektowi oraz widzialności ich kontenera
	$('.highlights').css('opacity', 0);
	$('#highlightsContainer').css('visibility', 'visible');

	// sprawdzanie każdego elementu podatnego mechanizmowi
	$('.pages').each(function(i) {
		// jeżeli na danym elemencie znajduje się kursor
		$(this).mouseover(function() {
			// wykonanie animacji grafiki wyłanianej i przypisanej do najechanego elementu (margines o 15px w górę i brak przezroczystości w czasie 0,5 sekundy)
			$(highlights[i]).animate({
				opacity: 1,
				marginTop: '-15px'
			}, 500);
		}).mouseout(function(){ // jeżeli na danym elemencie nie znajduje się już kursor
			$(highlights[i]).animate({
				opacity: 0,
				marginTop: '-0px'
			}, 500);
		});
	});
});

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

<p id="test">Prototype</p>

Event.observe('test', 'click', function() {
	[kod]
});

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.

Event.observe(window, 'load', function() {
	[kod]
});

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.

Event.observe(window, 'load', function() {
	var highlights = $$('.highlights'); // utworzenie tablicy

	$$('.highlights').invoke('setStyle', { opacity: 0 }); // ustawienie stylu przezroczystości
	$$('#highlightsContainer').invoke('setStyle', { visibility: 'visible' }); // widzialność kontenera

	$$('.pages').each(function(v, i) { // pętla
		Event.observe(v, 'mouseover', function() { // zdarzenie wykonywane w momencie pojawienia się kursora na elemencie
			new Effect.Morph(highlights[i], { // animacja
				style: 'opacity: 1; margin-top: -15px;',
				duration: 0.5 // czas 0,5 sekundy
			});
		});
		Event.observe(v, 'mouseout', function() { // zdarzenie wykonywane w momencie wyjechania kursorem poza element
			new Effect.Morph(highlights[i], {
				style: 'opacity: 0; margin-top: 0px;',
				duration: 0.5
			});
		});
	});
});

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.

new Effect.Morph('div_id', {
	style: {
		background-color: '#000',
		color: '#fff'
	},
	duration: 0.5,
	transition: Effect.Transitions.spring
});

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).

Dla zwykłego użytkownika Internet Explorer to po prostu pierwsza linia dostępu do Internetu. Nie każdy z nich wie jednak, że jest to linia stosunkowo mało bezpieczna i niestabilna. Wiele mówi się o istniejących już od wielu lat i ciągle rozwijanych alternatywach. I pomimo, że sporo osób skusiło się już na wymianę używanej przeglądarki to rynek nie tylko najnowszej, ale i starszych odsłon IE jest nadal prężny. Zbyt prężny, co najbardziej odbija się na twórcach witryn internetowych. Niepodporządkowanie się standardom powoduje, że często aby praca wychodząca spod ich ręki była prawidłowo interpretowana przez przeglądarkę Microsoftu trzeba użyć pewnego typu zamienników…

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”.

<!--[if IE]>
kod pomiędzy tymi komentarzami zadziała tylko w odsłonach IE
<![endif]-->

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.

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

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.

<!-- dla IE 5: --> <!--[if IE 5]>
<!-- dla IE niższego niż 6: --> <!--[if lt IE 6]>
<!-- dla IE równego lub niższego od 7: --> <!--[if lte IE 7]>
<!-- dla IE innego niż 5.5: --> <!--[if !IE 5.500]>
<!-- dla IE równego lub wyższego niż 6: --> <!--[if gte IE 6]>
<!-- dla IE wyższego niż 5: --> <!--[if gt IE 5]>
<!-- dla IE różnego od 6: --> <!--[if !(IE 6)]>
<!-- dla IE 5: --> <!--[if (IE 5)]>
<!-- dla IE 6 i IE 7: --> <!--[if (gt IE 5)&(lte IE 7)]>
<!-- dla IE 5 lub IE 6: --> <!--[if (IE 5)|(IE 6)]>

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ę.

<!--[if !IE]><!-->
kod pomiędzy tymi komentarzami zadziała w przeglądarkach innych niż IE
<!--<![endif]-->

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.

<![if !IE]>
kod pomiędzy tymi komentarzami zadziała w przeglądarkach innych niż IE
<![endif]>

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

<!--[if !IE]><!-->
<script src="ie_javascript.js" type="text/javascript"></script>
<!--<![endif]-->

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.

<script type="text/javascript">
/*@cc_on
Kod warunkowy
@*/
</script>

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.

/*@cc_on
   @if (@_x86)
      document.write("Przeglądarka IE, 32bitowy procesor Intela")
   @else
      document.write("Przeglądarka IE, inny procesor");
   @end
@*/

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.

/*@cc_on
   /*@if (@_x86)
      document.write("Przeglądarka IE, 32bitowy procesor Intela")
   @else @*/
      document.write("Przeglądarka alternatywna, inny procesor");
   /*@end
@*/

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 :D");
   /*@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.

<p>To <comment>nie</comment> jest MSIE.</p>

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ż.

p {
	background-color: #fff;
	* background-color: #000; /* zadziala tylko w 8 > IE > 4 */
}

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).

* html #id {
	background-color: #ccc; /* nada elementowi o identyfikatorze id tło o odcieniu szarym */
}

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

*+html #id {
	background-color: #ccc; /* nada elementowi o identyfikatorze id tło o odcieniu szarym */
}

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.

div#special p {
	margin-left: 10px;
	_margin-left: 15px; /* styl zadziała tylko w IE5.5 i IE6 */
}

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.

#container {
	width: 250px;
	widt\h: 500px; /* tylko dla IE5.x szerokość nie zostanie nadpisana do 500px */
}

#withBorder {
	border: 1px solid #ccc;
	bor\der: 5px solid #ccc; /* tylko dla IE5.x szerokość krawędzi nie zostanie nadpisana do 5px */
}

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

.hack {
	height: 800px; /* dla IE5.x/Windows */
	voice-family: "\"}\""; /* selektor nie bedzie dalej przetwarzany dla powyzszego przykladu */
	voice-family: inherit;
	height: 640px; /* nadpisanie w alternatywach */
}

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

html>body .hack { /* bez spacji przy > */
  	height: 640px;
}

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

/* poczatek dla IE5/Mac \*/
#ieMac {
	height: 50px;
}
/* koniec */ 

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

/* poczatek dla innych niz IE5/Mac *//*/
#notIeMac {
	height: 150px;
}
/* */

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.

/* zbior hackow dla IE7 */
html {
	` background: #cdcdcd;
	~ background: #cdcdcd;
	! background: #cdcdcd;
	@ background: #cdcdcd;
	# background: #cdcdcd;
	$ background: #cdcdcd;
	% background: #cdcdcd;
	^ background: #cdcdcd;
	& background: #cdcdcd;
	* background: #cdcdcd;
	( background: #cdcdcd;
	) background: #cdcdcd;
	= background: #cdcdcd;
	+ background: #cdcdcd;
	[ background: #cdcdcd;
	] background: #cdcdcd;
	{ background: #cdcdcd;
	| background: #cdcdcd;
	, background: #cdcdcd;
	< background: #cdcdcd;
	. background: #cdcdcd;
	> background: #cdcdcd;
	/ background: #cdcdcd;
	? background: #cdcdcd;
}

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.

.zlaczone {
	`~!@#$%^&* background: #cdcdcd; /* < IE 7 */
}

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.

div#dzialanieImportant {
	width: 800px !important; /* inne */

	width: 640px; /* IE5.x / IE6.x / IE7beta */
}

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.

blok {
	własciwość: expression(JavaScript);
}

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.

div#container {
	max-width: 800px;
	/* ponizej mamy dwa przyklady tzw. wyrazenia dynamicznego */
	width: expression(document.body.clientWidth > 800 ? "800px" : "100%"); /* ustawi 800px szerokosci jezeli szerokosc klienta jest wieksza niz 800px, w przeciwnym wypadku nastąpi skalowanie do tej wartosci */
	min-height: 600px;
	height: expression(document.body.clientHeight < 600 ? "100%" : "600px"); /* ustawi 100% wysokosci jezeli wysokosc klienta jest mniejsza niz 600px, w przeciwnym wypadku nastąpi skalowanie do tej wartosci */
}

p#logo {
	position: absolute;
	left: expression((document.body.offsetWidth - 500) + "px"); /* ustalenie pozycji lewej wzgledem szerokosci okna przegladarki - dla XHTML nalezaloby posilkowac sie obiektem window */
	bottom: expression((document.body.offsetHeight - 200) + "px"); /* ustalenie pozycji dolnej wzgledem wysokosci okna przegladarki - dla XHTML nalezaloby posilkowac sie obiektem window */
	color: expression(this.parentNode.lastChild.style.color = '#f0f0f0'); /* ustalenie koloru czcionki ostatniego potomka rodzica przetwarzanego elementu DOM */
	width: 300px;
	height: 20px;
}

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.

color: expression(this.parentNode.lastChild.style.setProperty("color", "#f0f0f0", null)); /* forma preferowana 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).

div#practiceEval {
	-ie-noeval = expression(p = document.createElement("p"), this.parentNode.appendChild(p));
	-ie-witheval = expression(get_width = document.body.clientWidth,
		eval(if ( get_width > 800 ) {
			this.appendChild(document.createTextNode(get_width))
		})
	);
}

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.

.win.ie5 #test {
	margin: 5px
}

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.

Internet źródłem nieprawidłowego rozwiązania…

Pomimo tego, że treści dostępne w kanonach sieci są podatne na „proces edukacji” i powoli zmieniają swoją zawartość na coraz to bardziej prawidłową, to nadal można znaleźć wiele wyników wyszukiwań które są rozwiązaniami błędnymi. Tak jest także z tematyką poruszaną w tym wpisie.

<embed type="application/x-shockwave-flash"
	width="1024"
	height="768"
	src="flash.swf"
	quality="high"
	bgcolor="#ffffff">
	<noembed>
	Przeglądarka nie obsługuje znacznika "embed", animacja Flash nie zostanie wyświetlona!
	</noembed>
</embed>

Oto przykład jednej z nieprawidłowych solucji. Problemem jest tu znacznik embed który nie jest, ani częścią specyfikacji HTML4, ani XHTML1.x, a jedynie naleciałością wprowadzoną kiedyś przez programistów Netscape Navigatora. Ponieważ jednak jest on wspomagany także przez przeglądarki takie jak Opera, Firefox, Safari, czy Internet Explorer przyjęło się pospolicie użytkowanie powyższego, nieprawidłowego rozwiązania (a wszystko za sprawą nieszczęsnego, kapitalistycznego marketingu w postaci bezmyślnego kopiowania danego artykułu ze strony na stronę i czerpania z tego korzyści). Niekiedy można napotkać także poradę w której embed znajduje się w tagu object, które w takim połączeniu jest także błędne.

<embed src="stream.mp3" type="audio/mp3" style="width: 640px; height: 480px;">
	<noembed>
	Tekst dla przeglądarek nie obsługujących "embed".
	</noembed>
</embed>

W wyniku, po wykonaniu walidacji otrzymamy kilka błędów związanych z użyciem właśnie tego, nieprawidłowego tagu.

Osadźmy więc poprawnie…

Jeżeli chcemy kierować się zaleceniami specyfikacji to musimy skupić się jedynie na znacznikach object z zaaplikowanymi wewnątrz sparametryzowanymi tagami param (metoda nazwana Flash Satay). Od tego momentu embed przechodzi w niepamięć, bo tak naprawdę wszystko co dzięki niemu mogliśmy osiągnąć, będziemy mogli stworzyć także poprzez naszą nową formułę.

<!-- próba załadowania pliku MOV typu QuickTime -->
<object data="katalog/film.mov" type="video/quicktime" style="width: 640px; height: 480px;">
	<!-- jeżeli plik MOV nie będzie mógłbyć załadowany zostanie podjęta próba załadowania w jego miejsce grafiki o rozszerzeniu PNG -->
	<object data="katalog/alternatywa.png" type="image/png" style="width: 640px; height: 480px;">
 		<p>
  			Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.
 		</p>
	</object>
</object>

Tak więc, aby wkomponować w naszą stronę obiekt Flash musimy określić co najmniej typ tego obiektu (type), plik źródłowy (data) i ostylować jego wymiary (style). Z podanej listy typów MIME dostrzegamy, że pożądanym przez nas jest application/x-shockwave-flash. Należy zwrócić uwagę na fakt, że nie korzystamy w ostatnim przypadku bezpośrednio z parametrów height oraz width, a idąc z duchem czasu wykorzystujemy po prostu możliwości wewnętrznego arkusza stylów.

<!-- próba załadowania pliku MPG -->
<object data="katalog/film.mpg" type="video/mpeg" style="width: 640px; height: 480px;">
	<param name="autoplay" value="true" />
	<param name="pluginspage" value="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" />
	<!-- jeżeli plik MPG nie będzie mógłbyć załadowany zostanie podjęta próba załadowania w jego miejsce filmu w postaci MOV -->
	<object data="katalog/film.mov" type="video/quicktime" style="width: 640px; height: 480px;" title="Filmik alternatywny!">
		<param name="autoplay" value="true" />
		<param name="pluginspage" value="http://quicktime.apple.com/" />
	 	<p>
  			Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.
	 	</p>
	</object>
</object>

<!-- próba załadowania pliku MPG -->
<object data="katalog/film.mpg" type="video/mpeg" style="width: 640px; height: 480px;">
	<param name="autoplay" value="true">
	<param name="pluginspage" value="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/">
	<!-- jeżeli plik MPG nie będzie mógłbyć załadowany zostanie podjęta próba załadowania w jego miejsce filmu w postaci MOV -->
	<object data="katalog/film.mov" type="video/quicktime" style="width: 640px; height: 480px;" title="Filmik alternatywny!">
		<param name="autoplay" value="true">
		<param name="pluginspage" value="http://quicktime.apple.com/">
	 	<p>
  			Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.
	 	</p>
	</object>
</object>

Aby mieć pewność, że każda nowoczesna przeglądarka będzie poprawnie egzekwować tą metodą powinniśmy użyć dodatkowo kilku nazw parametrów. W naszym przypadku będą to kolejno ścieżka wraz z nazwą pliku animacji Flash (movie), a także jakość (quality). Nie są to oczywiście wszystkie dostępne własności. Przede wszystkim wśród nich możemy wyróżnić:

• play przyjmujące wartość true (domyślne) / false określające, czy animacja ma być odtwarzana wraz z załadowaniem strony.
• loop przyjmujące także wartość true (domyślne) / false określające, czy animacja ma być wyświetlana ponownie w pętli po zakończeniu poprzedniego odtwarzania.
• bgcolor przyjmujące wartość #rrggbb i określające (szesnastkowo) kolor tła.
• menu przyjmujące wartości true (menu z dodatkowymi funkcjami) / false.
• quality przyjmujące wartości best (najlepsza jakość wraz z Anti-Aliasingiem dla wszystkich elementów), high (występuje Anti-Aliasing, ale wygładzanie jest tylko w przypadku statyczności elementów), autohigh (w przypadku spadku wydajności usuwa Anti-Aliasing w celu zachowania poziomu szybkości animacji), medium (podobnie jak w poprzednim przypadku, ale bez wygładzania), low (najsłabsza jakość bez A-A) i autolow (Anti-Aliasing włączany jest dopiero w przypadku kiedy pozwalają na to zasoby w takim stopniu, aby nie pojawił się znaczy spadek poziomu prędkości działania animacji).
• scale przyjmujące wartości exactfit (klip dopasowany jest do podanych wymiarów), noborder (dopasowuje proporcjonalnie skalując animację do obszaru) i showall (wyświetla w podanym obszarze bez zmian w proporcjach).
• allowscriptaccess nadaje prawa do wykonywania skryptów od szóstej wersji Flasha. Mianowicie: always zezwala na wykonywanie wszystkich skryptów, never nie zezwala, a samedomain pozwala tylko na te dostępne w obrębie poruszanej się domeny.

Ponieważ, jak już pewnie zauważyliście wewnątrz najbardziej zagnieżdżonego znacznika object można (lecz oczywiście nie trzeba!) umieścić po jego parametrach alternatywnie wyświetlany kod to w naszym przykładzie wyświetlimy w takim wypadku grafikę o takich samych rozmiarach.

<object type="application/x-shockwave-flash"
	data="skompilowany_flash.swf"
	style="width: 1024px; height: 768px;">
	<param name="movie"
		value="skompilowany_flash.swf" />
	<param name="quality"
		value="best" />
	<img src="zastepcza_grafika.png"
		style="width: 1024px; height: 768px;"
		alt="Brak pluginu Flash" />
</object>

Powyższy przykład będzie poprawny dla kodu XHTML. Dla czystego HTML-a należy formę zminimalizowaną parametrów oraz opcjonalnej grafiki ( />) zamienić na tradycyjną, bądź w ogóle tych znaczników nie zamykać.

Zapraszam do przejrzenia przykładu implementacji metody.

Rozwiązanie problemów z ładowaniem dużych plików

W wypadku klipów o sporej wadze powyższa metoda ma jeden mankament. Dopóki plik nie zostanie w całości załadowany animacja nie zostanie odtworzona.

Można temu zapobiec tworząc prosty loader, także korzystając z Flasha. Tworząc nowy dokument (rozmiary mogą być minimalne, np. 10x10px) wystarczy w jego pierwszej klatce dodać następujący kod ActionScript:
[as]var fileName = _root.path;
if ( -1 == fileName.indexOf(„%25″) && fileName != „” )
{
_root.loadMovie(fileName + „.swf”, 0);
}[/as]
Przy eksporcie do pliku wymagane jest, aby dokonywać go korzystając z ActionScript 1.0 (AS), a w opcji Local playback security: należy wybrać Access local files only. Archiwum z plikiem źródłowym i wynikowym znajduje się tutaj.

Dla nowszych AS, na przykład trójki powyższy przykład nie zadziała. Należy posłużyć się za to klasą Loader.
[as]var path:String = new String();
path = ( root.loaderInfo.parameters.path ? root.loaderInfo.parameters.path : „” );
if ( -1 == path.indexOf(„%25″) && path != „” )
{
var loader:Loader = new Loader();
loader.load(new URLRequest(path + „.swf”));
addChild(loader);
}[/as]

Na koniec zostaje jeszcze jedna zmiana do wykonania. W znaczniku object oraz w jego parametrach należy zmienić ścieżki do pliku na loader.swf?path=skompilowany_flash (bez rozszerzenia). Oczywiście w tym wypadku obydwa pliki muszą znajdować się w jednym i tym samym katalogu.

<object type="application/x-shockwave-flash"
	data="loader.swf?path=skompilowany_flash"
	style="width: 1024px; height: 768px;">
	<param name="movie"
		value="loader.swf?path=skompilowany_flash" />
	<param name="quality"
		value="best" />
	<img src="zastepcza_grafika.png"
		style="width: 1024px; height: 768px;"
		alt="Brak pluginu Flash" />
</object>

Zastępcze sposoby oparte na JavaScriptcie i komentarzach warunkowych…

Jeżeli Twoim audytorium mają być osoby korzystające z czytników ekranowych (JAWS) to cały mój wywód poszedł na marne, bo po prostu nie zadziała. Nie zostawię Was jednak na lodzie. Wystarczy skorzystać z jednego z poniższych rozwiązań.

Pierwsze, SWFObject 2.1 ogranicza się do pobrania pliku klasy, wprowadzenia opcjonalnych zmiennych i wywołania metody wraz z argumentami która przypisze wynik do elementu o odpowiednim ID. Niestety wymaga włączonej obsługi JavaScript w przeglądarce użytkownika. Pełnej dokumentacji można zasięgnąć tutaj.

<head>
[...]
<script type="text/javascript" src="swfobject.js"></script>
<!-- parametry swfobject.embedSWF: plik, ID_bloku, szerokosc, wysokosc, minimalna_wersja_flasha [, odnośnik_do_ekspresowej_instalacji, zmienne_flasha, parametry, atrybuty ]; -->
<script type="text/javascript">
	var flashvars = false;
	var attributes = {
		id: "flashContent"
	}
	var params = {
		menu: "false",
		quality: "medium"
	};
	swfobject.embedSWF("skompilowany_flash.swf", "zawartosc", "640", "480", "8.0.0.0", false, flashvars, params, attributes);
</script>
[...]
</head>
<body>
<div id="zawartosc">
	Alternatywny tekst.
</div>
</body>

Na podobnej zasadzie działa Unobtrusive Flash Objects. Została ona jednak oficjalnie uznana za przestarzałą na rzecz wcześniej opisanego rozwiązania.

Drugi sposób zagnieżdżania oparty jest na ukrytych komentarzach warunkowych. Nested Objects, bo o nim mowa pozwala na określenie jakie przeglądarki nie powinny korzystać z kluczowego w tym wpisie sposobu. W przykładzie przeglądarki IE nie będą mogły używać rozwiązania opartego na Flash Satay.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
	style="width: 1024px; height: 768px;">
	<param name="movie" value="skompilowany_flash.swf" />
	<param name="quality" value="high" />
	<!-- poczatek: kod z tego bloku nie zostanie wykonany w przegladarkach IE -->
	<!--[if !IE]><!-->
	<object data="skompilowany_flash.swf"
		type="application/x-shockwave-flash"
		style="width: 1024px; height: 768px;">
	<param name="quality" value="high" />
	<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
	<!--<![endif]-->
	<!-- koniec -->
	<img src="zastepcza_grafika.png"
		style="width: 1024px; height: 768px;"
		alt="Brak pluginu Flash" />
	<!-- poczatek: kod z tego bloku nie zostanie wykonany w przegladarkach IE -->
	<!--[if !IE]><!-->
    	</object>
    	<!--<![endif]-->
    	<!-- koniec -->
</object>

Oczywiście odpowiednio modyfikując ujęte w kodzie komentarze warunkowe możemy manipulować tym która przeglądarka, które rozwiązanie będzie mogła stosować.

Podsumowując…

Na pewno buszując po otchłaniach Internetu spotkalibyście jeszcze kilka innych, mniej lub bardziej profesjonalnych rozwiązań. Pomimo, że te które tym razem zaprezentowałem działały bez większego zająknięcia na Operze 9.62, Firefoksie 3.0.4, Safari 3.2, a nawet na diabelnie niepokornym Internet Explorerze 7 to chociażby dla pogłębienia swojej wiedzy warto się zainteresować pozostałymi metodami.

Oczywiście wykorzystanie object i param nie musi tylko i wyłącznie służyć do obsługi Flasha. Operowanie na filmach, muzyce, czy grafice to tylko przykłady możliwości tych znaczników. Wystarczy poeksperymentować i zapamiętać jedną rzecz… embed od dziś odchodzi w niepamięć…

Mając do dyspozycji jQuery możemy dokonać wielu mniej lub bardziej oryginalnych modyfikacji dla urozmaicenia wyglądu tworzonej przez nas nawigacji na stronie. Funkcja animate() znakomicie nadaje się do kreowania animacji różnego typu relatywnie lub absolutnie pozycjonowanych elementów pozwalając na operowanie np. na ich szerokości, czy wysokości.

animate() – funkcja zezwalająca na wykonywanie animacji elementów strony. Pozwala na działanie na właściwościach stylów takich jak szerokość (width), wysokość (height), padding, margines (margin), krawędź (border), górny brzeg elementu (top), czy wielkość czcionki (font-size). Dozwolone są więc właściwości przyjmujące wartości numeryczne (bądź „toggle”, „show” lub „hide”), a zapis ich nazw musi być w formie CamelCase, czyli poprzez bikapitalizację pojęć złożonych (usunięcie spacji i zastąpienie pierwszych znaków kolejnych słów dużymi literami). Przykładowo odpowiednikiem margin-right będzie marginRight. Od wersji 1.2 jQuery pozwala je animować poprzez nadanie w.w. wartości także w postaci em i %. Wprowadzono w nim także krótkie zwiększanie („+=”, np. width: „+=5px”) i zmniejszanie („-=”, np. height: „-=”+value) wartości.

Przygotowanie grafiki…

Po przeczytaniu tego artykułu dowiesz się jak utworzyć dwa typy różnych menu oparty na frameworku jQuery, CSS-ie i (X)HTML-ie. Przykłady zastosowane w artykule będą przystosowane do XHTML-a/HTML-a wysyłanego jako text/html, a także do XHTML-a wysyłanego jako application/xhtml+xml.

Pierwszy z naszych efektów będzie opierał się na gotowych elementach graficzny oraz dla ukazania zwiększonych możliwości na jednej grafice będącej logiem konkretnego serwisu. Zastosujemy w tym przypadku opisywany już przeze mnie efekt sliding-doors (także wyjaśniany na vivee) dzięki któremu pozbędziemy się problemu związanego z nadmiernym ładowaniem grafik.

Potrzebne będzie nam sześć obrazków. Trzy z których będziemy korzystać dla wyświetlania w stanie nie najechania myszką, w stanie najechania i w stanie kliknięcia (bądź wyboru za pomocą tabulatora), oraz drugie trzy używane w takiej samej kolejności, ale które będą stworzone specjalnie dla przykładu użycia grafiki oddzielnego typu dla konkretnego przycisku. Należy pamiętać, aby realna wysokość grafiki była co najmniej tak duża, żeby spełniała potrzeby po, a nie przed pojawieniem się kursora nad nią. Tak więc, jeśli np. w normalnej pozycji ma ona 57px, a po rozszerzeniu o 10px więcej to szerokość jednego, pojedynczego obrazu nie powinna być mniejsza niż 67px.

Jak widać na wyżej załączonym screenie dzielimy przyciski na trzy kolumny – lewą, prawą i środek. Dwie pierwsze w naszym rozwiązaniu będą stałe, a środek będzie powielany w arkuszu stylów względem osi X (repeat-x). W przypadku wspomnianego już przycisku specjalnego ten podział nie istnieje (zapisujemy całość), gdyż szerokość generowanego w HTML-u rozwiązania będzie niezmienna.

I. Jumping navigation (nawigacja „podskakująca”): kod XHTML

Kod struktury menu oprę o znaczniki listowania które oczywiście należy wstawić w sekcję body.

<ul id="jumping-nav">
	<li><a href="#" title="#"><span class="left"></span>Link 1<span class="right"></span></a></li>
	<li><a href="#" title="#"><span class="left"></span>Link 2<span class="right"></span></a></li>
	<li><a href="http://m1chu.eu/" title="Programowanie, webdeveloping"><span class="left"></span>m1chu.eu<span class="right"></span></a></li>
	<li id="with-image"><a href="http://utnij.eu/" title="Prawdopodobnie najlepszy serwis do skracania linków"></a></li>
</ul>

Jak można zauważyć w trzech pierwszych odnośnikach nawigacji na stronie znajduje się tekst oraz znaczniki span. Odpowiadają one za wyświetlenie lewej oraz prawej krawędzi tła każdego z przycisków menu. W wypadku ostatniego linka nie jest to potrzebne, gdyż tło jest jednolitej szerokości, a tekst naniesiony jest bezpośrednio na nim. Specjalny element tej listy oznaczony jest ID with-image.

I. Jumping navigation: kod CSS

ul#jumping-nav
{
	position: relative;
	float: left; /* przemianowanie listy na szeregową */
	overflow: hidden;
	border-bottom: 1px solid #fff;
	padding: 0 10px;
	list-style: none;
	height: 4em; /* szerokosc przycisku */
}

ul#jumping-nav li, ul#jumping-nav li a
{
	position: relative;
	float: left; /* przemianowanie listy na szeregową */
} 

ul#jumping-nav li
{
	background: none;
	margin: 0;
	padding: 0;
	padding-left: 1px; /* 1-pikselowe rozdzielenie dwoch przyciskow od siebie */
	top: 15px; /* odleglosc od gornej krawedzi danej listy */
}

ul#jumping-nav li a
{
	display: block;
	background: url('srodkowa_czesc_grafiki.png') 0 0 repeat-x; /* adres do grafiki srodka przycisku powtarzany na osi X */
	padding: 0.9em 1.1em;
	text-decoration: none;
	color: #129397;
	height: 57px;
}

ul#jumping-nav li a span.left {
	display: block;
	/* pozycja absolutna */
	position: absolute;
	background: url('lewa_krawedz_grafiki.png') 0 0 no-repeat; /* adres do grafiki lewej krawedzi przycisku */
	height: 57px;
	width: 12px;
	/* ustawienie grafiki lewej krawedzi w pozycji lewego, gornego rogu elementu listy */
	left: 0;
	top: 0;
	z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
}

ul#jumping-nav li a span.right {
	display: block;
	/* pozycja absolutna */
	position: absolute;
	background: url('prawa_krawedz_grafiki.png') 0 0 no-repeat; /* adres do grafiki prawej krawedzi przycisku */
	height: 57px;
	width: 12px;
	/* ustawienie grafiki prawej krawedzi w pozycji prawego, gornego rogu elementu listy */
	right: 0;
	top: 0;
	z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
}

/* zmiany dokonywane przy najechaniu mysza na przycisk (grafika srodkowa + grafiki krawedzi) */
ul#jumping-nav li a:hover, ul#jumping-nav li a:hover span
{
	background-position: 0 -57px; /* przesuniecie pozycji tla o 57px w dol */
	color: #3f5f5a;
}

/* zmiany dokonywane przy kliknieciu mysza na przycisk lub po zaznaczeniu jej tabulatorem (grafika srodkowa + grafiki krawedzi) */
ul#jumping-nav li a:active, ul#jumping-nav li a:active span, ul#jumping-nav li a:focus, ul#jumping-nav li a:focus span
{
	background-position: 0 -114px; /* przesuniecie pozycji tla o 114px w dol */
	color: #333;
}

Stosowne komentarze pozostawiłem w kodzie. Wytłumaczyć należałoby za to dokładniej zastosowaną w bloku elementu listy odległość od górnej granicy tejże listy.

top: 15px; /* odleglosc od gornej krawedzi danej listy */

Odległość ta pozwala na ustalenie pozycji wyjściowej przycisków i będzie tak samo na stałe ustawiona w kodzie jQuery. Odejmując od niej otrzymamy pożądany przez nas efekt podniesienia przycisku po najechaniu na niego kursorem.

O czymś jednak pozornie zapomniałem w powyższym kodzie. Mianowicie o wspomnianym już przycisku specjalnym znajdującym się w tagu li o ID with-image. Sprawa jest prosta, a jej rozwiązanie będzie opierać się o dodanie kodu opartego na dwóch ostatnich blokach podanych w w.w. kodzie CSS.

ul#jumping-nav li#with-image a
{
	display: block;
	padding: 0.9em 1.1em;
	background: url('grafika_specjalna.png') 0 0 no-repeat; /* brak powtarzania w jakiejkolwiek osi */
	color: #333;
	text-decoration: none;
	height: 57px;
	width: 117px; /* okreslona na stale szerokosc przycisku */
}

/* zmiany dokonywane po najechaniu mysza na przycisk specjalny */
ul#jumping-nav li#with-image a:hover
{
	background-position: 0 -57px;
}

/* zmiany dokonywane przy kliknieciu mysza na przycisku specjalnym lub po zaznaczeniu jej tabulatorem */
ul#jumping-nav li#with-image a:active, ul#jumping-nav li#with-image a:focus
{
	background-position: 0 -114px;
}

I. Jumping navigation: animacja dzięki jQuery

$("div").animate({
      left: "15px", opacity: .5
}, 300, "easing", function(){alert("koniec!");});

Na początek należy ściągnąć i zaimportować na swoją stronę najnowszą wersję jQuery. Pobrać ją można np. stąd.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <!-- jeżeli biblioteka będzie znajdować się w głównym katalogu strony -->

Nasz kod będzie przeznaczony dla jednego tego typu menu na danej podstronie. Po załadowaniu DOM zostanie wywołane zdarzenie :hover jQuery, a w nim funkcje wykonywane kolejno po najechaniu i po usunięciu kursora myszy z danego przycisku.

$(document).ready(function() {
    $('ul#jumping-nav li').hover(function() {
    	$(this).animate({ top : "-=10px" }, 150); // przesuniecie krawedzi przycisku o 10px w gore w czasie 150ms
    }, function() {
    	$(this).animate({ top : "15px" }, 150); // przesuniecie krawedzi do pozycji wejsciowej w czasie 150ms
    });
});

I. Jumping navigation: rezultat!

Wynik jaki powinniście otrzymać po złożeniu tych części kodu w całość możecie podejrzeć tutaj.

II. Floating navigation (nawigacja pływająca): kod XHTML

Drugi przykład będzie ciut bardziej zaawansowany (pomysłodawcą i autorem efektu jest Bedrich Rios). Pod tym względem, że przedstawię użycie dwóch menu razem na stronie. Jednego poziomego i drugiego pionowego. Elementy graficzne obydwu będą opierać się tylko i wyłącznie o arkusz stylów.

Dla usystematyzowania położenia obydwu list odpowiedzialnych za wyświetlanie nawigacji na stronie wstawimy je w element blokowy div. Ponieważ będziemy chcieli, aby każde menu w trakcie wyświetlania aktywnego elementu podświetlane było na inny kolor to każdemu z nich nadamy odpowiedni identyfikator. Odpowiednio będą to yellow (gdzie tekst będzie podświetlany na odcień żółtego) i blue (gdzie tekst będzie podświetlany na odcień niebieskiego).

Ostatecznie naszym zamiarem jest dodanie także przy każdym menu tytułu. Aby jednak skrypt mógł rozróżnić go od normalnego pola z odnośnikiem musimy zastosować znacznik nagłówka. W naszym wypadku jest to h4.

<div id="nav-block">
	<ul class="floating-navigation" id="yellow">
		<li><h4>Menu główne!</h4></li> <!-- nagłówek menu poziomego -->
		<li><a href="#" title="#">Odnośnik 1</a></li>

		<li><a href="#" title="#">Odnośnik 2</a></li>
		<li><a href="http://thenet.pl/" title="Technologiczne spojrzenie na świat" onclick="this.target='_blank';">thenet.pl</a></li>
		<li><a href="http://after-all.eu/" title="Nowoczesny bash z cytatami z IRC" onclick="this.target='_blank';">after-all.eu</a></li>
	</ul>
	<ul class="floating-navigation" id="blue">
		<li><h4>Menu boczne!</h4></li> <!-- nagłówek menu pionowego -->
		<li><a href="#" title="#">Odnośnik 1</a></li>
		<li><a href="#" title="#">Odnośnik 2</a></li>
		<li><a href="http://m1chu.eu/" title="Another devblog - programowanie, webdeveloping" onclick="this.target='_blank';">m1chu.eu</a></li>
		<li><a href="http://utnij.eu/" title="Prawdopodobnie najlepszy serwis do skracania linków" onclick="this.target='_blank';">utnij.eu</a></li>
	</ul>
</div>

II. Floating navigation: kod CSS

ul.floating-navigation
{
	list-style-type: none;
	font-size: 12px;
	margin: 30px 0px; /* odleglosc od lewej i prawej krawedzi */
	padding-top: 10px;
	& padding-left: 30px; /* padding zastepujacy margines w IE */
	width: 985px; /* szerokosc wszystkich elementow poziomego menu + suma wymaganych szerokosci w efekcie "wjezdzania" (podawana w funkcji JS floatNav()) */
}

ul.floating-navigation li h4,
ul.floating-navigation li a
{
	display: block;
	width: 150px;
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 2px;
}

ul.floating-navigation li h4
{
	color: #fff;
	background: #333;
	border: 1px solid #1a1a1a;
	font-weight: normal;
	font-size: 12px;
}

ul.floating-navigation li a
{
	color: #999;
	border: 1px solid #1a1a1a;
	background: #222;
	text-decoration: none;
	opacity: .7; /* opcjonalna przezroczystosc elementow */
}

ul#yellow li
{
	float: left; /* ustawienie w szeregu elementow listy w menu glownym - utworzenie menu poziomego */
}

ul#yellow li a:hover
{
	color: #ffff66; /* kolor tekst gdy myszka jest na obiekcie w menu poziomym */
	background-color: #1e1e1e;
}

ul#blue li a:hover
{
	color: #006699; /* kolor tekst gdy myszka jest na obiekcie w menu pionowym */
	background-color: #1e1e1e;
}

Jedynym aspektem który należałoby wytłumaczyć jest magiczne & padding-left: 30px;. Jest to wartość która tylko i wyłącznie pozycjonuje rozmieszczenie elementów którymi się tutaj zajmujemy. Zastanawiacie się za pewnie co robi to & przez tą regułą? Jest to tzw. hack IE który działaja podobnie jak najbardziej znany * i dzięki którym dana dyrektywa wykonywana jest tylko w przeglądarkach opartych na Internet Explorerze. Musieliśmy dokonać takiego zabiegu, gdyż inaczej marginesy w przeglądarce Microsoftu byłyby ustawione na 0 (z niewiedzy, złej implementacji, złośliwości jej programistów… jak zwał, tak zwał :D).

II. Floating navigation: animacja dzięki jQuery

Podobnie jak w poprzednim typie nawigacji tutaj także trzeba skorzystać z ściągniętej już wcześniej biblioteki jQuery.

Tym razem jednak po załadowaniu DOM wywołamy kolejno dwie funkcje.

$(document).ready(function()
{
	floatNav("ul#yellow", 25, 15, 150, .7, 500, "#fff");
	floatNav("ul#blue", 25, 15, 150, .7, 500);
});

Posiadają one siedem parametrów o niżej wymienionym przeznaczeniu.

floatNav(id_listy_menu, paddingLeft_gdy_kursor_jest_na_obiekcie, paddingLeft_gdy_kursor_jest_poza_obiektem, czas_wykonywania_animacji, mnoznik_kolejnego_animowania_wlotu_elementow_po_zaladowaniu_DOM [, kolor_napisow_menu_po_kliknieciu]);

Ostatni parametr jest opcjonalny. W wypadku, gdy nie zostanie podany po kliknięciu zostanie zwrócony domyślny kolor. Należy zdawać sobie także sprawę, że ten sposób zadziała tylko w wypadku otwierania stron w oknach innych niż te używane przez skrypt.

function floatNav(float_nav_id, float_hover_out, float_hover_in, float_run_time, float_multiplier, float_click_effect, float_clicked_color)
{
	var list_elements = float_nav_id + " li";
	var link_elements = list_elements + " a";

	var timer = 0; // czas poczatkowy

	$(list_elements).each(function(i) // wczytywanie elementow po zaladowaniu strony
	{
		timer = (timer * float_multiplier + float_run_time); // zmienna przetrzymujaca czas wczytania elementu zwiekszana o wartosc sumy mnoznika i czas dzialania animacji w stosunku do czasu wczytania poprzedniego elementu

		$(this).css("margin-left","-180px"); // wczytanie od strony lewego marginesu i kolejno efekt "wstrzasniecia" z jednej pozycji do drugiej i z powrotem
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: float_hover_out }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	var link_hover_width = $(link_elements).width(); // pobranie szerokosci wejsciowej elementu listy
	$(link_elements).hover(
		function()
		{
			$(this).animate({ paddingLeft: float_hover_out, opacity: 1, width: link_hover_width-(float_hover_out-float_hover_in) }, float_run_time); // w trakcie pojawienia sie kursora na elemencie nastepuje zmiana przezroczystosci na pelna, przesuniecie w prawo oraz zmniejszenie szerokosci elementu
		},
		function()
		{
			$(this).animate({ paddingLeft: float_hover_in, opacity: float_multiplier, width: link_hover_width }, float_run_time); // przywrocenie do wartosci podstawowych po przeniesieniu kursora poza menu
		}
	);

	$(link_elements).click(
		function()
		{
			$(this).fadeOut(float_click_effect); // efekt zanikania
			$(this).fadeIn((float_click_effect/2)); // efekt pojawiania sie w czasie dwukrotnie mniejszym niż w trakcie efektu zanikania
			if ( float_clicked_color != "" )
			{
				$(this).css("color", float_clicked_color); // zmiana koloru kliknietego elementu o ile podany zostal ostatni parametr funkcji nadrzednej
			}
		}
	);
}

$(document).ready(function()
{
	floatNav("ul#yellow", 25, 15, 150, .7, 500, "#fff");
	floatNav("ul#blue", 25, 15, 150, .7, 500);
});

II. Jumping navigation: wynik!

Także tym razem przygotowałem Wam praktyczne zobrazowanie tego co chcieliśmy osiągnąć. O! tutaj, zapraszam.

Kurde! Tyle czytania i nie działa! Dlaczego?!

Obydwie metody testowałem na poniższy przeglądarkach i na wszystkich działały prawidłowo:

• Firefox 3.0.3,
• Opera 9.60
• Safari 3.1.2
• SeaMonkey 1.1.9
• Flock 1.1.1
• Sleipnir 2.7.2

Mogę domniemać, że problem tkwi w użytkowaniu kilku frameworków naraz. Problem ten opisywałem tutaj i radzę od jego przeczytania zacząć rozpoznawanie błędu :]

Coraz więcej różnorodnych stron internetowych korzysta z techniki która w szeroki sposób pozwoliła rozwinąć się przede wszystkim JavaScriptowi – z Ajaxa. Podobnie jest z różnorodnymi wtyczkami do systemu blogów WordPress. Z reguły korzystają one jednak z jakiejś biblioteki JavaScript zbierającej w całość jego najważniejsze funkcje i pozwalającej na ich prostsze użycie. W momencie jednak, kiedy w naszych pluginach pojawi się w użyciu kilka wtyczek możemy napotkać problem kolizji ich współdziałania.

Prolog!

Zanim zacznę muszę wspomnieć, że kolizja opisywana poniżej może występować na jakiejkolwiek stronie, a opisywana przeze mnie sytuacja jest tylko przykładem. Nie mniej jednak mankament ten postaram się wytłumaczyć na podstawie jednoczesnego działania AJAX Comments i przystosowanej do personalnych potrzeb modyfikacji zakładek (przykładem są te umieszczone z lewej strony tego wpisu). Pierwsza wtyczka domyślnie używa Script.Aculo.Us, a co za tym idzie także frameworku Prototype. W drugim wypadku oprę się o kurs tworzenia zakładek w WP palmiaka, który używa za to jQuery.

Po poprawnej instalacji obydwu modyfikacji pewnie spora część z Was nie dostrzeże dręczącego nas feleru. Dlaczego? Gdyż na stronie głównej wszystko będzie działało prawidłowo, ale bynajmniej nie na podstronach w których będzie możliwe komentowanie wpisów. Dla przykładu w momencie wczytania najpierw prototype.js i scriptaculous.js, a później jquery.js stworzone przez nas zakładki nie będą poprawnie działać (nie zostaną one ukryte i nie będzie możliwości przejścia pomiędzy nimi). Dlaczego tak się dzieje? Tutaj należałoby poruszyć pewną sprawę dotyczącą samego działania frameworków tego typu.

Funkcja $(argumenty)

Między innymi do tworzenia obiektu danej biblioteki używa się funkcji $(argumenty);. Dzięki temu operujące np. na obiektach DOM, czy tablicach frameworki dzięki tej specjalnej konstrukcji pozwalają użytkownikowi na wykorzystywanie ich konkretnych funkcji.

Problematyka korzystania z więcej niż jednej biblioteki naraz…

W momencie kiedy w skrypcie korzystamy z dwóch lub większej ilości frameworków może nastąpić kolizja w ich działaniu. W uproszczeniu przez użycie $(); w każdej z nich. I tak to w naszym przykładzie funkcje, czy odwołania do obiektów które powinny być wykonane za pomocą jQuery zostaną wykonane przez pierwszą wczytaną klasę. A wszystko przez to, że każda z podanych bibliotek odwołuje się do danego elementu w taki sam sposób.

Solucja!

Na szczęście od wersji 1.1.4 z pomocą przychodzą nam developerzy jQuery wraz z funkcją pozwalającą na interoperacyjność – jQuery.noConflict(param);.

jQuery.noConflict(); // zwraca kontrolę nad $ bibliotece domyślnej (wcześniej używanej)
jQuery.noConflict(true); // zwraca kontrolę nad $ i jQuery (którego $ jest aliasem) oryginalnemu właścicielowi - należy używać z ostrożnością!

Co należy wiedzieć w kwestii używania tego to przede wszystkim fakt, że wymaga się, aby powyższą funkcję wywołać przed użyciem elementów innych bibliotek, a także jQuery powinno być wczytywane po pozostałych frameworkach. W konkretnym wypadku związanym z WP który opisujemy należy także domyślnie dostarczone niżej wymienione biblioteki uaktualnić. Niestety w opisywanych tutaj wtyczkach i systemie blogów są to wersje starsze i przedstawiony trick w tym artykule nie zadziała dopóki nie ściągniemy zaktualizowanych wersji frameworków.

<script type="text/javascript" src="libs/prototype.js" />
<script type="text/javascript" src="libs/scriptaculous.js" />
<script type="text/javascript" src="libs/jquery.js" />

Domyślnie także należy używać w tym trybie jQuery zamiast $.

jQuery.noConflict();
jQuery("p").hide(); // użycie frameworka jQuery
$("div").style.display = 'none'; // użycie innego frameworka, np. prototype

Ponieważ oczywiście zaprezentowana funkcja jest podatna na przypisywanie do zmiennych to niekoniecznie musimy używać standardowej, dłuższej nazwy. Negatywem tego rozwiązania jest jednak potencjalny konflikt nazw w przypadku pisania aplikacji internetowej przez wielu programistów.

var q = jQuery.noConflict();
q("p").hide();
$("div").style.display = 'none';

Ostatecznie moglibyście także spytać „co zrobić, aby móc wewnątrz bloku kodu używać $ dla jQuery?”. Wystarczy poprzedzić zadaną funkcję przez jQuery, bądź zakończyć poprzez (jQuery).

jQuery(function($) { [...] }); // wersja pierwsza
(function($) { [...] })(jQuery); // wersja druga

Niestety w takim wypadku wewnątrz powyższych bloków kodu nie ma możliwości odniesienia się do obiektów innych bibliotek.

Przykład pozwalający na prawidłowe działanie wspomnianych zakładek…

Poprawiony przykład z vivee, który należy użyć w wypadku w.w. konfliktu (kod JavaScript).

jQuery.noConflict();

function tabs(id) {
	jQuery("#"+id+" h2:first a").addClass("active");
    jQuery("#"+id+" div").not(":first").hide();

    jQuery("#"+id+" h2 a").click(function() {
    	var licznik = jQuery("#"+id+" h2 *").index(this);                                             

        jQuery("#"+id+" h2 a").removeClass("active");
        jQuery(this).addClass("active");
        jQuery("#"+id+" div:visible").hide();

        jQuery("#"+id+" div").eq(licznik).show();
        return false;
    });
}

jQuery(document).ready(function(){
    tabs("zakladki");
});

Epilog…

WPNinja na swoim blogu poświęconym WordPressowi prawidłowo stwierdził w stosunku do mojej osoby, że mieszanie bibliotek nie jest dobrym zwyczajem.

"@m1chu,
Mieszanie ze sobą bibliotek to masakra. Nie dość, że zajmuje to niemiłosiernie dużo miejsca to, jak zauważyłeś w swoim artykule, może powodować konflikty."

Opisany przeze mnie artykuł powinien być stosowany tylko w wyjątkowych sytuacjach. Należy z reguły unikać użytkowania kilku frameworków naraz, bo to obciąża w znacznym stopniu skrypt poprzez ich wagę, a co za tym idzie ilością danych do załadowania. Zdaję sobie jednak sprawę, że niekiedy jest to niezmiernie trudne (czego jak na razie w fazie rozwojowej przykładem jest mój blog ;]). Podziękowania za przypomnienie dla WPNinja’y o tym, że zapomniałem tak ważnego faktu umieścić w swoich wpisie.