m1chu.eu - another devblog » (x)HTML

Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1)

m1chu — Tue, 24 Aug 2010 20:38:47 +0000

Sieć została ogarnięta szałem najnowszej, piątej wersji języka HTML. Jak to zazwyczaj bywa słabo z jej obsługą radzi sobie Internet Explorer. We wszystkich wydanych wersjach pojawia się problem z parsowaniem elementów języka HTML 5, a co za tym idzie nie ma domyślnie możliwości ich poprawnego ostylowania. Podobny problem w przeszłości występował w Firefoksie 2.

Zarys problemu

Załóżmy więc, że tworzymy nowy projekt i jesteśmy na etapie dodawania nagłówka oraz stopki dokumentu.




    
    Obsługa HTML 5 z CSS
    


    Nagłówek
    Stopka

Nadaliśmy powyżej kilka atrybutów stylów pozycjonujących elementy oraz nadających im odpowiedni wygląd. Po przetestowaniu w Internet Explorerze i alternatywnych przeglądarkach zobaczymy jednak różne wyniki.

Wynik w Firefoksie 4.

Wynik w Internet Explorerze 8.

Internet Explorer – rozwiązanie pierwsze

Aby pozbyć się tego problemu należy do sekcji head wstawić:

Internet Explorer – rozwiązanie drugie

Dla każdej wersji Internet Explorera można także dodać do dokumentu HTML (w sekcję head) zewnętrzny kod JavaScript, dzięki któremu osiągniemy wyżej opisany skutek.

Firefox 2

Niespełna jeden procent internautów nadal używa drugiej odsłony popularnego lisa. Zarówno on, jak i wszystkie przeglądarki oparte na silniku Gecko pre 1.9b5 (np. Camino 1.x) posiadają błąd parsowania dzięki któremu w przypadku otwarcia nowego znacznika każdy nieznany, wcześniej otwarty zostanie automatycznie zamknięty.

Rozważmy więc przykładowy kod.


    Nagłówek
    
        Stopka

Przeglądarki oparte na omawianej wersji silnika Gecko przeparsują go w następujący sposób:

Nagłówek

Stopka

Aby rozpocząć modyfikacje należy wykonać dwie rzeczy:

Wykonać przekierowanie przykładowo za pomocą mod_rewrite lub PHP tak, aby Firefox 2 uważał analizowany dokument jako XHTML

RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
  header('Content-type: application/xhtml+xml');
}

Dodać atrybut xmlns do znacznika html

W tym wypadku należy jednak pamiętać o tym, że XML jest wrażliwy na encje HTML-owe. Przykładowo więc używanie ⋅ należy zaniechać na rzecz ⋅.

Następnym razem dowiecie się…

jak stworzyć wielokolumnową treść w CSS3?

HTML 5: obsługa elementów AUDIO i VIDEO

m1chu — Fri, 19 Mar 2010 21:14:33 +0000

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:

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.

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



	
	
	
	
	
	
	
	Twoja przeglądarka nie obsługuje HTML 5.

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:

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:

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



	
	
	
	
	
	
	
	Twoja przeglądarka nie obsługuje HTML 5.

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ść

Kodek (kontener)	Android	Chrome >= 3.0	Firefox >= 3.5	Iphone	Opera >= 10.5	Safari >= 4
Theora video (Ogg/.ogv)	x	✓	✓	x	✓	x
Vorbis audio (Ogg/.ogg)	x	✓	✓	x	✓	x
H.264 video (MP4/.mp4)	✓	✓	x	✓	x	✓
AAC audio (MP4/.mp3)	✓	✓	x	✓	x	✓
WAV audio (WAV/.wav)	-	-	✓	-	✓	✓

Efekt graficznego podświetlenia w jQuery i Prototype z Scriptaculous

m1chu — Mon, 09 Feb 2009 12:45:54 +0000

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

'."\r\n";
	print ''."\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 ''."\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.



	
  	
  	
	Product highlighter

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

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.

$(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

Event.observe – uchwyt rejestrujący zdarzenie na drzewie dokumentu. Funkcja obiektu składającego się na bibliotekę Prototype. Posiada cztery argumenty:

element – obserwowany element DOM, mogący być referencją do niego bądź jego identyfikatorem,
nazwaZdarzenia – standaryzowana wg. DOM Level 2 Events nazwa zdarzenia, np. load,
uchwyt – uchwyt w postaci funkcji.

Przykład:

Prototype

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.

Effect.Morph – metoda interfejsu Scriptaculous >= 1.7. Pozwala na animacyjną zmianę właściwości CSS elementu. Przyjmuje jeden podstawowy argument style zawierający w sobie właściwości i wartości CSS w formie oryginalnej bądź w postaci Camel-Case, czyli bez spacji i znaków specjalnych pomiędzy kilkoma członami nazwy właściwości. Opcjonalnie można dodawać kolejne parametry rdzenia obiektu Effect, takie jak duration (czas animacji), czy transition (rodzaj animacji, wymaga Effect.Transitions).

Przykład:

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

Pozycjonujemy za pomocą kaskadowego arkusza stylów (CSS)

m1chu — Wed, 07 Jan 2009 23:14:44 +0000

Pozycjonowanie najczęściej kojarzy się wszystkim z optymalizacją stron w taki sposób, aby uzyskać jak najwyższe miejsce w wyszukiwarkach, pod zadanymi frazami. W skrócie – z SEO (Search Engine Optimization). W procesie tworzenia stron internetowych, a dokładniej w trakcie opisywania formy wyświetlania strony poprzez arkusz stylów pojęcie te przyjmuje zgoła inne znaczenie. A mianowicie jest to metoda tworzenia układu strony poprzez użycie właściwości position. Za namową kilku użytkowników Vivee przedstawię dziś na czym właśnie ta metoda polega…

Właściwością CSS określającą położenie elementów w oknie przeglądarki jest position. Może ona przyjąć pięć wartości działających zgodnie w przeglądarkach od wersji Mozilla Firefox 0.1+, Opera 4.0+, Safari 3 oraz IE 7. Wszystkie są zgodne z specyfikacją CSS 2.0+:

static – wartość domyślna przyjmowana kiedy dla danego obiektu nie zostanie przypisana żadna wartość position. Wartość ta określa standardowe, statyczne rozmieszczenie fragmentów strony – tzn., od góry do dołu i od lewej do prawej. Można je w łatwy sposób umieszczać szeregowo tworząc z nich elementy liniowe (za pomocą display: inline;), a także równolegle, jeden pod drugim tworząc z nich elementy blokowe (display: block;).
relative – powoduje zastosowanie pozycjonowania relatywnego względem elementu nadrzędnego. Obiekt może zmienić pozycję za pomocą dodatkowych właściwości left i top, nie mniej jednak elementy sąsiadujące zachowywać się będą tak jakby on nadal był na swoim pierwotnym miejscu. W praktyce jednak dodatkowych właściwości się najczęściej nie używa, gdyż rozwarstwiają one stronę tworząc kilka osobnych układów. Najczęściej stosowane w połączeniu z pozycjonowaniem absolutnym (absolute), gdzie element relatywny jest kontenerem (obiektem zawierającym, rodzicem), a absolutny jego zawartością.
absolute – blok rozmieszczany jest absolutnie względem elementu nadrzędnego, którym domyślnie jest body. Kontenerem nadrzędnym może zostać każdy fragment z nadaną wartością position inną niż static. Wymaga nadania dodatkowych właściwości left i/lub right i/lub top i/lub bottom. Obiekt z taką wartością jest wyrzucany z biegu dokumentu (tworzona jest nowa warstwa).
fixed – pozycjonowanie względem okna przeglądarki. Wymaga nadania dodatkowych właściwości left i/lub right i/lub top i/lub bottom.
inherit – przejmuje wartość rodzica.

Dodatkowe, wyżej wspomniane właściwości to:

left przyjmująca wartość będącą odległością od lewej krawędzi elementu nadrzędnego.
bottom – wartość jako odległość od dolnej krawędzi elementu nadrzędnego.
right – odległość od prawej krawędzi kontenera.
top – odległość od górnej krawędzi kontenera.

Przykład:

#absolutnieSpozycjonowanyElement {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 150px;
	top: 150px;
}

Spoglądamy kątem oka na statyczne pozycjonowanie…

Najprostszym przykładem zobrazowania tego przykładu będzie utworzenie dwóch szeregowych elementów, a pod nimi jeszcze jednego o szerokości dwóch powyższych.

Na takim edukacyjnym szablonie będziemy opierać się we wszystkich metodach. W tej tradycyjnej, statycznie aby uzyskać powyższy efekt musimy #left i #right wyświetlić liniowo (w tym wypadku display: inline;, ale w innych może to być np. display: table-cell;, itp.), a #bottom blokowo (display: block;).

#left
#right
#bottom

Moglibyśmy dwa pierwsze tagi div umieścić w jednym innym, który byłby blokiem. W praktyce się to przydaje, w przedstawianej teorii nie ma jednak takiej potrzeby. Ponieważ jednak #left i #right są fragmentami liniowymi to nadane im szerokości w arkuszu nie będą odpowiadać realnie wyświetlanym rozmiarom. Z tego powodu skorzystamy z właściwości float.

float – tworzy obiekty pływające w celu otoczenia ich przez tekst, bądź tworzenia szeregu kolumn w układzie strony, co wywołane jest własnością przyklejającą obiekty do siebie względem lewej lub prawej krawędzi (CSS2+). Powoduje ona utworzenie nowego biegu dokumentu przez elementy z nadanym float przez co nie mogą się one na siebie nakładać. Posiada następujące wartości:

left – umieszcza obiekt przyklejając go z lewej strony.
right – umieszcza element przyklejając go z prawej strony.
none – wartość domyślna, element nie jest pływający.

W takim wypadku jednak stworzenie z #bottom obiektu blokowego nie spowoduje przeniesienia go do nowej linii. Musimy wprowadzić elementy z float z powrotem do biegu dokumenty, do czego służy clear.

clear definiuje położenie nowego akapitu. Rozwijane od CSS1+. Przyjmuje wartości:

none – domyślna flaga, nie powoduje zmian.
left – następna linia znajdzie się za elementami położonymi z lewej strony (w poruszanym temacie: float: left;).
right – kolejna linia znajdzie się za elementami położonymi z prawej strony (float: right;).
both – nastąpi bezprecedensowe przejście do nowej linii (bez znaczenia na wartość float).
inherit – przejmuje wartość rodzica.

No i ostatecznie nadając margines szerokości i wysokości 50 pikseli otrzymujemy finalny kod prezentujący układ jak na obrazku:

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
body {
	margin: 50px; /* ustawienie marginesu na 50px */
}
div#left {
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	display: inline; /* liniowy element */
	float: left; /* stworzenie elementu plywajacego z lewej strony */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	float: left; /* stworzenie elementu plywajacego z lewej strony */
	display: inline; /* liniowy element */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	display: block; /* element blokowy */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	clear: left; /* usuniecie oplywania dla float: left;, przejscie do nowej linii */
	background-color: #F6F7EE;
}

I oto rezultat, jaki otrzymamy po złożeniu całego kodu.

Position relative i position absolute!

Ponieważ najczęściej, albo korzysta się z samotnego position: absolute; lub z łączenia position: relative; z position: absolute; to zajmiemy się tymi dwoma przypadkami, tylko i wyłącznie.

Jak już wspomniałem standardowym kontenerem części układu strony z nadanym position: absolute; jest ciało strony (body). Przykładowo:

div#pozycjonowanieAbsolutne {
	position: absolute /* wzgledem body */
	left: 10%; /* 10% szerokosci ciala strony zostanie odsuniety div o tym identyfikatorze */
	top: 500px;
}

Spowoduje to umieszczenie na nowej warstwie (po za biegiem statycznym dokumentu) div w odległości 500 pikseli od górnej krawędzi ciała strony i 10 procent szerokości body od jego lewej krawędzi.

Tego typu model rozmieszczania elementów ma jeden dodatkowy atut. Pozwala na rozciąganie oraz przycinanie pozycjonowanych w taki sposób obiektów.

Pierwszą funkcjonalność otrzymamy operując na dodatkowych właściwościach określających położenie obiektu. Wystarczy podać wartości left i right, aby dokonać rozszerzenia i/lub nadać top i bottom w celu dokonania wydłużenia. Przykładowy kod:

div {
	position: absolute; /* rozmieszczanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px; right: 50px; /* rozszerzenie: 50px od lewej krawedzi, az do 50px z prawej krawedzi rodzica */
	bottom: 10%; top: 15%; /* wydłuzenie od gornej odleglosci 10% dlugosci ciala strony, do dolnej krawedzi oddalonej o 15% dlugosci strony */
}

clip – określa widoczną przestrzeń o kształtach prostokątnych. Zgodne z CSS2+. Parametry:

auto – domyślny, cały element jest widoczny.
rect(top, right, bottom, left) – określa krawędzie widoczności obiektu. Wg. specyfikacji wartością jest shape(wartości), ale zarówno w CSS2 i CSS2.1 został zaimplementowany tylko kształt prostokąta (rect).
inherit – przejmuje wartość rodzica.

Przykład:

#e {
	position: absolute;
	clip: rect(0px, 10px, 10px, 0px); /* kwadrat o krawedziach 10x10px */
}

Zobrazowanie:

Drugą funkcjonalność otrzymamy poprzez użycie clip. Chcąc absolutny fragment skrócić według rozmiarów x, y o połowę patrząc z punktu 0 możemy posłużyć się następującym kodem:

div {
	position: absolute; /* rozmieszczanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px;
	bottom: 10%;
	width: 300px; /* szerokosc */
	height: 500px; /* wysokosc */
	/*
		top: 		krawedz gorna przyciecia w miejscu krawedzi gornej div;
		right: 		krawedz prawa przyciecia w polowie szerokosci div;
		bottom:		krawedz dolna przyciecia w polowie wysokosci div;
		left:		krawedz lewa przyciecia w miejscu krawedzi lewej div;
	*/
	clip: rect(0px, 150px, 250px, 0px);
}

Pora przejść do konteneryzacji elementów absolutnie ustawianych w ciele dokumentu. Jak już wspomniałem służy do tego position: relative; które należy ustawić na rodzicu będącym dzieckiem body lub innego obiektu potomnego ciała dokumentu.


	#left
	#right

#bottom

Będziemy starali się osiągnąć rezultat jak w przykładzie tradycyjnego ułożenia strony. Posłuży nam do tego powyższa struktura, która różni się tylko tym, że pierwsze dwa (w poprzednim paragrafie liniowe) elementy div opatrzyliśmy w jeden kontener (który będzie pozycjonowany relatywnie w tym przypadku).

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
div:first-child { /* :first-child - klasa okreslajaca pierwszy element div u danego rodzica */
	position: relative; /* pozycjonowanie relatywne */
	width: 450px; /* szerokosc potomkow + left */
	height: 200px; /* wysokosc potomkow + top */
}
div#left {
	position: absolute; /* pozycjonowanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px; /* odleglosc od lewej krawedzi diva - rodzica */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	position: absolute; /* pozycjonowanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 250px; /* odleglosc od lewej krawedzi diva - rodzica, szerokosc div#left + left div#left */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica, wysokosc div#left + top div#left */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	position: absolute; /* pozycjonowanie absolutne wzgledem ciala strony */
	left: 50px;
	top: 200px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}

Porzuciliśmy typy wyświetlania (display) oraz opływanie (float) w tym listingu, które są zbyteczne w tak prostym rozmieszczeniu, a zarazem przy zastosowaniu w.w. metod umieszczania.

Obiektowi nadrzędnemu, poprzez klasę :first-child nadany jest typ i rozmiary. W blokach jemu potomnych nadane są typy absolutne, rozmiary oraz odległości od lewej i górnej krawędzi. W przypadku #right przesunięcie w prawo w postaci left jest sumą odległości przesunięcia #left i szerokości tego diva (wraz z grubością obramowania). Efekt… identyczny :]

Dla #bottom nie ma już kontenera. W tym wypadku chciałem pokazać jak rozmieszczać absolutnie z rodzicem w postaci ciała strony. Tym razem to pozycja od górnej krawędzi body jest równa wysokości relatywnego elementu zawierającego #left i #right.

Co należy pamiętać, że elementy tabel nie mogą być relatywne, a absolutne pozycjonowanie nie działa względem ich treści.

Tworzymy nieruchomą stopkę za pomocą rozmieszczenia ustalonego (fixed)

Za pomocą position: absolute; możemy umieścić stopkę na dole nieprzewijalnej strony stosując atrybuty left / right i bottom. W przypadku tradycyjnej, statycznej metody możemy stopkę umieścić w dolnych częściach każdej odpowiednio układając bloki, jeden nad drugim. Niekiedy jednak może zdarzyć się, że chcielibyśmy takowy „footer” przykleić do dolnej krawędzi okna przeglądarki bez względu, czy treść strony możemy przewijać, czy nie. O tego typu rzeczy pytali właśnie czytelnicy…

Rozmieszczanie ustalone, oznaczane jako position: fixed; działa podobnie jak absolutne, tylko że umiejscawiane obiekty są przyklejane do okna przeglądarki. Bez względu, czy mamy możliwość przewijania treści strony to one zawsze pozostają w stałym miejscu na ekranie. Typ ten jest także podatny na rozciąganie (left i right oraz bottom i top) i przycinanie (clip).

#left
#right
#bottom
#footer
#down

Dodałem dodatkowo elementy o id footer, aby pokazać w jaki sposób można przykleić stopkę, a także down dzięki któremu w przykładzie będzie można przewijać przeglądany dokument.

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
div#left {
	position: fixed; /* pozycjonowanie ustalone względem okna przeglądarki */
	left: 50px; /* odleglosc od lewej krawedzi diva - rodzica */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	position: fixed; /* pozycjonowanie ustalone */
	left: 250px; /* odleglosc od lewej krawedzi diva - rodzica, szerokosc div#left + left div#left */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica, wysokosc div#left + top div#left */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	position: fixed; /* pozycjonowanie ustalone */
	left: 50px;
	top: 200px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#footer {
	position: fixed; /* pozycjonowanie ustalone */
	left: 50px; right: 50px; /* rozciagniecie */
	bottom: 0px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	height: 50px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	border-bottom: 0px;
	background-color: #F6F7EE;
}
div#down {
	position: absolute;
	left: 50px;
	top: 2500px;
}

Jeżeli przewiniecie stronę w dół, a później w górę zauważycie, że elementy nie zanikają i nie pojawiają się. To cecha tej metody. I praktycznie jedyna różnica względem position: absolute;, bo użycie w arkuszu jest jak widać prawie identyczne.

Ważnym jest także, aby usunąć wszelkie marginesy i paddingi z wbudowanych elementów drzewa dokumentu. Chodzi tutaj o html i body. Jeżeli tego nie zrobimy to w różnych przeglądarkach możemy otrzymać różny wynik przykładów, a w przyszłości tworzonych przez nas stron. Jedne fragmenty mogą zaczynać się w innym miejscu niż inne, pomimo że np. nadaliśmy wszystkim ten sam odstęp od lewej (left) i górnej (top) krawędzi kontenera. W swoich paragrafach robiłem to za pomocą *.

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}

A gdybyśmy to tak wszystko połączyli…

To w jednym z najprostszych, tworzonych czysto do nauki przykładów otrzymalibyśmy coś takiego. Zapraszam do źródła i miłego czytania :]

——————————
(*) zamiast frazy element w tekście zostały użyte także ogólne synonimy obiekt i fragment.
(**) zamiast frazy pozycjonowanie użyto w tekście także synonimu rozmieszczenie.

Haki CSS i komentarze warunkowe dla niepokornego Internet Explorera

m1chu — Mon, 22 Dec 2008 02:10:56 +0000

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

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.

          
kod pomiędzy tymi komentarzami zadziała w przeglądarkach innych niż IE

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.

Używasz diabelsko dobrej, alternatywnej przeglądarki!

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.


kod pomiędzy tymi komentarzami zadziała w przeglądarkach innych niż IE

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.

/*@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.

To nie jest MSIE.

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.

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:

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.

Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?

m1chu — Sun, 14 Dec 2008 22:22:58 +0000

Walidacja kodu jest istotna. Nieważne czy powodem jest chęć wyszlifowania w sobie dobrych nawyków, czy po prostu zwykła i naturalna potrzeba poprawienia napisanego przez siebie kodu. Co jednak jeżeli tworzysz stronę wg. przyjętych w specyfikacji zasad, z dumą chcesz umieścić na niej odnośnik potwierdzający poprawność kodu zawierającego animację Flash i nagle spotka Cię niemiła niespodzianka? I wszystko poprzez krążące po zaułkach Internetu niepoprawne konstrukcje osadzania wcześniej wymienionej technologii…

W jaki sposób poprawnie implementować Flash? Jakich zastępczych metod można używać? Co jest sprawcą tego, że z reguły nasz kod jest nieprawidłowy? Ten artykuł odpowie Ci na wszystkie powyższe pytania…

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.

	
	Przeglądarka nie obsługuje znacznika "embed", animacja Flash nie zostanie wyświetlona!

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 – jest znacznikiem wykorzystywanym do wstawiania obiektów typu plugin do kodu strony. Niezgodny z specyfikacją HTML4 i XHTML1. Obsługiwany jednak przez Firefoksa 1.0+, Mozille 0.6+, Operę 3.0+, Safari, Netscape Navigatora 1.0+ i Internet Explorera 3.0+. Obsługuje atrybuty class, dir, hidden, hspace, id, lang, name, pluginpage, src i style. Używany często wraz z noembed (także niezgodnym z w.w. specyfikacjami) którego zawartość wyświetlana jest w momencie kiedy przeglądarka nie obsługuje embed.

Przykład:

	
	Tekst dla przeglądarek nie obsługujących "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łę.

object – pozwala na wstawienie do dokumentu obiektu multimedialnego. Zaimplementowany w przeglądarkach Firefox 0.1+, Opera 4.0+, Mozilla 0.6+, Safari, Netscape Navigator 6.0+ i Internet Explorer 3.0+. Służy za zamiennik m.in. dla niepoprawnych bgsound, czy embed. Znacznik ten jest częścią specyfikacji HTML 4.01 Strict/Transitional/Frameset, XHTML 1.0 Strict/Transitional/Frameset oraz XHTML 1.1. Obsługuje atrybuty takie jak: accesskey, archive, class, classid, codebase, codetype, data, dir, id, lang / xml:lang, name, style, title, type i xmlns.

Przykład:

Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.

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.

param – pozwala na wprowadzenie parametrów do obiektów (object) i apletów (przestarzale za pomocą applet, bądź aktualnie także za pomocą object). Każdy z takowych parametrów musi być ustawiony w osobnym znaczniku param. Jest zgodny z dokumentacją HTML 4.01 Strict/Transitional/Frameset, XHTML 1.0 Strict/Transitional/Frameset oraz XHTML 1.1, a także obsługiwany w przeglądarkach Firefox 0.1+, Opera 4.0+, Mozilla 0.6+, Netscape Navigator 6.0+ i Internet Explorer 3.0+. Obsługuje atrybuty takie jak: id, name, value oraz xmlns (tylko dla XHTML).

Przykład dla XHTML 1.0:

Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.

Przykład HTML:

Tekst wyświetlany w wypadku nie załadowania jakiegokolwiek z zasobów dwóch powyższych znaczników.

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.

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.

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.


[...]



[...]



	Alternatywny tekst.

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.

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ęć…

2 animowane menu za pomocą funkcji jQuery – animate()

m1chu — Sun, 26 Oct 2008 23:24:14 +0000

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.


	Link 1
	Link 2
	m1chu.eu

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

animate( parametry, [czas_wykonania], [styl_animacji], [akcja_zwrotna] )

parametry – elementy animacji do wykonania (będące odpowiednikami dyrektyw CSS), np. top, left, marginLeft, width, height, czy opacity. Podawane są w formie nazwa: wartosc i rozdzielane przecinkami.
czas_wykonywania – czas w milisekundach (lub w postaci wbudowanego ciągu znaków: „slow”, „normal” lub „fast) wykonywania animacji.
styl_animacji (opcjonalny) – styl animacji, wymaga odpowiedniej wtyczki jQuery obsługującej tą opcję!
akcja_zwrotna (opcjonalny) – funkcja zwracana wraz z zakończeniem animacji.

Przykład:

$("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.

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.


	
		Menu główne!
 
		Odnośnik 1

		Odnośnik 2
		thenet.pl
		after-all.eu
	
	
		Menu boczne!
 
		Odnośnik 1
		Odnośnik 2
		m1chu.eu
		utnij.eu

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 :]