m1chu.eu - another devblog » Client-side

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

Wzorzec projektowania wtyczek jQuery na bazie metod i funkcji

m1chu — Sat, 06 Mar 2010 18:17:32 +0000

Praca z jQuery prędzej, czy później wymusza na nas kompleksowe tworzenie rozwiązań wykonywanych po stronie użytkownika. Metody filtrujące, animacje, czy efekty na galeriach zdjęć łatwiej będzie osiągnąć i rozwijać posługując się, łączącymi się na wtyczki, mechanizmami metod i funkcji, dostępnymi w frameworku.

Metoda, a funkcja?

Podstawowa różnica pomiędzy nimi polega na tym, że operują na innych obiektach. Każda nowa metoda musi być dołączona do prototypu jQuery.fn, a funkcja po prostu do obiektu jQuery.

/* metoda */
jQuery.fn.nazwa = function() {
	[...]
};

/* funkcja */
jQuery.nazwa = function() {
	[...]
};

W praktyce powoduje to, że do metody odwołujemy się operując na jakimś elemencie, identyfikatorze, bądź na klasie znajdującej się na stronie internetowej, a w przypadku funkcji, po prostu ją wywołujemy w celu wykonania jakieś akcji.

/* wywołanie: metoda */
$(element).nazwa();

/* wywołanie: funkcja */
var x = $.nazwa();
alert(x);

Obydwie możemy parametryzować. Argumentem może być zwykła zmienna, dowolnego, obsługiwanego przez JavaScript typu lub obiekt przechowujący zbiór pól o konkretnym przeznaczeniu.

/* metoda z parametrem */
jQuery.fn.nazwa = function(options) {
	[...]
};

/* funkcja z parametrem */
jQuery.nazwa = function(options) {
	[...]
};

Umowne zasady tworzenia pluginów

Twórcy jQuery, poprzez dokumentację, podpowiadają jakimi zasadami należy się kierować, aby poprawnie tworzyć wtyczki. Mianowicie:

Terminologie funkcja, metoda, czy klasa są stosowanie umownie, z racji specyfiki przeznaczenia każdego z tych elementów. Fraza metoda jest w powyższym wypadku synonimem całego pojęcia wtyczki.
Nazwy plików powinny być formowane następująco: jquery.[nazwa_wtyczki].js. Przykładowo: jquery.nazwa.js.
W metodach this jest referencją do aktualnie przetwarzanego obiektu jQuery.
Powinno się dołączać wtyczkę do obiektu nadrzędnego poprzez jQuery, a nie $, co użytkownikom zwiększa pole manewru we wprowadzaniu zmian z użyciem jQuery.noConflict().
W celu uniknięcia problemów z poprawnością kodu po jego wcześniejszej kompresji, wszelkie metody oraz funkcje powinny kończyć się znakiem średnika (;).
Użycie .each pozwala na bezproblemową iteracje po wszystkich elementach na których operujemy w metodzie.
Metoda domyślnie musi zwracać wartość.

.each(function(indeks, element)) – przenosi się po każdym elemencie drzewa DOM, będących częścią obiektu jQuery, za każdym razem wykonując funkcję określoną jako parametr opisywanej metody.

Przykład:


	play
	the
	game

$('ol').each(function(i, e) {
	// e == this
	// e jest warte użycia w konkretnych zagnieżdżeniach, kiedy to this nie zawsze wskazuje na aktualnie analizowany element pętli
	$(e).html('' + $(this).text() + '');
});

Przekazywanie parametrów w celu kontrolowania zachowań wtyczki

Czym byłby plugin bez możliwości prostej parametryzacji określonych zachowań? W celu ułatwienia zrozumienia ich tworzenia postaramy się stworzyć bardzo prosty tester poprawności wpisywanych do pola danych (np. o identyfikatorze #nick). Sprawdzimy w nich, czy wprowadzony tekst będzie odpowiadał odpowiedniemu wzorcowi wyrażenia regularnego i będzie wystarczająco długi. Ponadto określimy do jakiego elementu zwrócić informację na wypadek niespełnienia wcześniej wymienionych kryteriów. Warto więc będzie zdefiniować na stałe wartości tych opcji oraz dać przyszłym jej użytkownikom możliwość nadpisania ich w argumentach wywoływanej metody.

jQuery.extend([ tryb_rekursywny ,] obiekt_rozszerzany, obiekt_1_rozszerzający [, ... obiekt_n_rozszerzający]) – łączenie dwóch lub kilku właściwości obiektów do osobnego.

tryb_rekursywny – przyjmuje wartości logiczne (true/false) w celu wykonania rekursywnego łączenia,
obiekt_rozszerzany – element nadpisywany (w celu uniknięcia należy pozostawić puste),
obiekt_x_rozszerzający – elementy łączone.

Załóżmy więc, że nazwiemy naszą wtyczkę filtrate, a domyślne dane będziemy przetrzymywać w obiekcie defaults.

jQuery.fn.filtrate = function() {
	var defaults = {
		length:		6, // minimalna długość wprowadzanego tekstu
		regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
		returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
	};

	alert(defaults.regexp); // przykładowe użycie
};

Za pomocą parametru options przekażemy spersonalizowane dane konfiguracyjne.

jQuery.fn.filtrate = function(options) {
	var defaults = {
			length:		6, // minimalna długość wprowadzanego tekstu
			regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
			returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
	}; 

	// rozszerzenie domyślnej konfiguracji
	var options = $.extend(defaults, options);

	alert(options.regexp); // przykładowe użycie
};

Propozycje wywołań metody z użyciem argumentów.

$('#nick').filtrate({length: 3});
// lub
$('#nick').filtrate({
	regexp: /[0-9]/gi,
	length: 3
});

Do ustawień nie ma jednak publicznego dostępu. Możemy co prawda skonfigurować je przy wywoływaniu wtyczki, ale nie bezpośrednio, np. później. W tym celu należy przenieść domyślne wartości do własności składowej metody oraz połączyć wprowadzane i predefiniowane dane bez modyfikacji tych drugich.

jQuery.fn.filtrate = function(options) {
	// rozszerzenie domyślnej konfiguracji bez jej nadpisywania (pierwszy argument pusty)
	var options = $.extend({}, $.fn.filtrate.defaults, options);

	alert(options.regexp); // przykładowe użycie
};

$.fn.filtrate.defaults = {
	length:		6, // minimalna długość wprowadzanego tekstu
	regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
	returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
};

Zewnętrzny programista ma teraz szansę wykonania ustawień przed i po wywołaniu wtyczki, a także bez konieczności robienia tego w bloku jQuery(document).ready(function() [...]);.

// nadpisanie długości spoza parametru
$.fn.filtrate.defaults.length = 3;
$('#nick').filtrate({regexp: /[0-9]/gi});

Prywatne funkcje – ukrywamy poszczególne elementy

Nie każda partia kodu powinna być dostępna do bezpośredniego wywołania przez użytkownika wtyczki. Przykładem może być tutaj funkcja użytkowa, stworzona stricte do celów danej metody. Aby tego dokonać, należy opleść całą definicję pluginu w funkcję zamykającą (closure) oraz po za samą metodą użyć standardowej formy tworzenia funkcji w JavaScript. Metodologia tworzenia funkcji w jQuery nie zda tutaj prawidłowego rezultatu. Dostęp będzie nadal publiczny.

(function($) { // start: closure
	$.fn.filtrate = function() {
		$.logs(1); // ostrzeżenie z zawartością '1'

		logs(1); // ostrzeżenie z zawartością '1'
	};		

	function logs($obj) {
    	alert($obj);
  	};

	$.logs = function($obj) {
		alert($obj);
	};
})(jQuery); // end: closure

jQuery(document).ready(function() {
	$('#nick').filtrate();

	$.logs(1); // ostrzeżenie z zawartością '1'
	logs(1); // brak dostępu do tej funkcji z zewnątrz
});

Wywoływanie funkcji oraz innych metod we wtyczce

Zaistnieć może także sytuacja przeciwna do powyższej. Z różnych powodów możemy chcieć skorzystać z publicznie dostępnej metody, zaimplementowanej wewnątrz wtyczki, którą tworzymy lub z funkcji przedstawionych na początku artykułu.

[...]
        
        	Wpisz swój script nick
            Wpisz swój a href nick
        
[...]

Mamy przykładowy zestaw paragrafów, z których będziemy chcieli wykluczyć pewny ciąg znaków. Ponieważ będziemy sprawdzać więcej elementów niż jeden, skorzystamy z wcześniej wymienionej metody iteracyjnej .each(), a następnie pobierzemy ich zawartości, usuniemy stosowną frazę (korzystając z osobnej funkcji/metody) i zwrócimy wynik do znacznika je zawierającego.

jQuery.fn.filtrate = function(options) {
	var defaults = {
		erase:	 	/a href/g, // tekst do usunięcia
		usemethod:	true // pomocnicze, użycie metody lub funkcji
	};
	// rozszerzenie domyślnej konfiguracji
	var options = $.extend(defaults, options);

	return this.each(function() {
		var context = $(this).html(); // pobranie zawartości elementu
		switch (options.usemethod) // dodany w celach naukowych ;]
		{
			case false:
				context = $.cleanup(context, options.erase); // wywołanie funkcji
				break;
			default:
				context = $.fn.filtrate.cleanup(context, options.erase); // wywołanie metody
				break;
		}
		$(this).html(context); // zapisanie zmodyfikowanej zawartości elementu
	});
};		

// metoda zaimplementowana we wtyczce
jQuery.fn.filtrate.cleanup = function(context, erase) {
	return context.replace(erase, ''); // usunięcie frazy z ciągu
};

// osobna funkcja
jQuery.cleanup = function(context, erase) {
	return context.replace(erase, ''); // usunięcie frazy z ciągu
};

jQuery(document).ready(function() {
	// tryb wywoływania z metody
	$('footer p').filtrate({erase: /script/g});

	// tryb wywoływania spoza metody
	return $('footer p').each(function() {
		var context = $(this).html();
		context = $.fn.filtrate.cleanup(context, /a href/g);
		context = $.cleanup(context, /script/g);
		$(this).html(context);
	});
});

Osiągamy postawiony cel

Na podstawie powyższych rad możemy osiągnąć postawiony sobie cel – tester poprawności wpisywanych danych do pola typu input. Rozwiązanie będzie zezwalać na testowanie wielu pól naraz.

[...]
    	
			
			
        
[...]

Wywołanie odbywać się będzie w momencie zwolnienia przycisku klawiatury.

jQuery(document).ready(function() {
	$('input').keyup(function() {
		$('input').filtrate({regexp: /[a-z]/g});
	});
});

W przestrzeni funkcji zawierającej wtyczkę znajdzie się prywatna funkcja logująca akcje oraz dwie publiczne metody implementowane w pluginie. Pierwsza z nich będzie sprawdzać poprawność wpisywanego tekstu pod względem zadanego wzorca, a druga długość wprowadzonego ciągu znaków.

	// metoda testująca poprawność wpisanych znaków
	$.fn.filtrate.preg_match = function(pattern, subject) {
		var subject_splited = subject.split(''); // utworzenie tablicy znaków
		for ( i=0; i < subject_splited.length; ++i ) // iteracja po każdym ze znaków
		{
			// jeżeli którykolwiek znak nie będzie odpowiadał wzorcowi metoda zwraca fałsz
			if ( subject_splited[i].match(new RegExp(pattern)) == null )
			{
				return false;
			}
		}
		return true; // wszystkie znaki są odpowiednie, prawda - jedziemy dalej ;]
	};

	// metoda porównująca długości ciągów
	$.fn.filtrate.strlen_compare = function(string, min_length) {
		var length = string.length;
		if ( length < 1 ) // tekst nie został wpisany
		{
			return false;
		}
		else if ( length < min_length ) // tekst krótszej długości niż wymagana
		{
			return min_length - length;
		}
		return true; // tekst odpowiedniej długości
	};

	// funkcja prywatna, logująca akcje
	function log_alerts(returnto, text)
	{
		// jeżeli nie podano tekstu do wypisania, czyścimy zawartość znacznika przetrzymującego ostrzeżenia i informacje
		if ( text == undefined )
		{
			$(returnto).html('');
			return;
		}

		// dodanie nowego akapitu z zwróconą treścią do podanego znacznika
		$('' + text + '').appendTo(returnto);
	}

Domyślne opcje ustawimy poza wtyczką. W niej samej, dla każdego wskazanego elementu strony, sprawdzimy najpierw warunek długości, a gdy zostanie spełniony, także zawartości.

(function($) { // start: closure
	$.fn.filtrate = function(options) {
		// rozszerzenie domyslnej konfiguracji bez jej nadpisywania (pierwszy argument pusty)
		var options = $.extend({}, $.fn.filtrate.defaults, options);

		var context, strlen_compared_result;

		// czyszczenie znacznika zawierającego informacje o stanie pól
		log_alerts(options.returnto);

		// sprawdzenie każdego elementu
		return this.each(function(i) {
			context = $(this);

			// testowanie długości
			strlen_compared_result = $.fn.filtrate.strlen_compare(context.val(), options.length);
			switch (strlen_compared_result)
			{
				case false: // w wypadku niewpisania tekstu
					// logowanie akcji
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' jest puste');
					return true;
					break;
				case true: // w wypadku odpowiedniej długości tekstu
					// puste
					break;
				default: // w wypadku za krótkiego tekstu zwracany jest: tekst + wymagana długość + ilość brakujących znaków
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' zawiera za mało znaków (minimum: ' + options.length + ' / brakuje: ' + strlen_compared_result + ')');
					return true;
					break;
			}

			// testowanie typów znaków znajdujących się w tekście
			switch ($.fn.filtrate.preg_match(options.regexp, context.val()))
			{
				case false: // w wypadku pojawienia się niedozwolonych znaków
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' zawiera niedozwolone znaki');
					return true;
					break;
				default: // w wypadku poprawnego sformowania tekstu
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' jest prawidłowo wypełnione');
					break;
			}
		});
	};

	$.fn.filtrate.defaults = {
		length:	 6, // minimalna dlugosc wprowadzanego tekstu
		regexp:	 /[0-9a-z]/gi, // kryterium wprowadzanych znaków
		returnto:   'footer' // informacja o bledzie zostanie zwrócona do tego elementu
	};

	// pozostałe dwie metody + prywatna funkcja
})(jQuery); // end: closure

Przykład ten powinien przybliżyć kwestię wcześniej poruszone w artykule. Na jego podstawie udostępniłem także testową stronę oraz gotowe pliki do pobrania.

15 przydatnych wyrażeń regularnych w PHP

m1chu — Tue, 13 Oct 2009 20:23:51 +0000

W pewnym stadium zaawansowania wyrażenia regularne stają się potężnym narzędziem każdego programisty PHP (i nie tylko). A to dlatego, że pozwalają na wykonywanie operacji, których często nie sposób dokonać w prosty sposób przy pomocy standardowych funkcji zawartych w tym języku. Walidacja zawartości zmiennych, czy podmienianie specyficznej części ich zawartości – na to pozwalają wyrażenia regularne. 15-ście przykładowych, najbardziej niezbędnych dla każdego web developera, skompletowałem w dalszej części artykułu. Do Waszej dyspozycji oddaję także prosty serwis sprawdzający poprawność wprowadzanych wzorców.

1. Walidacja adresu e-mail opartego na hoście

Wzorzec:

/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione następujące warunki:

nazwa użytkownika musi zaczynać się od znaku litery lub cyfry, nie może zawierać spacji, tabulatorów, aty, za to mogą się znajdować w nim kropki, pod warunkiem, że nie występują jedna, po drugiej,
po nazwie użytkownika musi pojawiać się znak małpy,
domena, podobnie jak nazwa użytkownika, musi rozpoczynać się od litery, bądź cyfry, po czym do znaków dozwolonych dochodzą - oraz ., pod warunkiem, że pierwszy z wcześniej wymienionych znaków nie znajduje się na początku lub na końcu nazwy subdomeny (wyjątkiem są dwa myślniki na jej końcu odpowiadające często prefiksom xn--), a drugi nie jest poprzedzany swoim odpowiednikiem. TLD może mieć długość od dwóch do sześciu znaków,
domena może być zakończona kropką,
rozwiązanie nie sprawdza jak długi jest wprowadzony adres e-mail.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@n-do.x-d.pl

Tekst nie spełniający warunków:

2.a_a-d@n-do.x-d.v-.pl (część domeny kończąca się nieprawidłowym znakiem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

$email = trim('adres@domena.pl');
if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu', $email) )
{
	print 'Nieprawidłowy adres e-mail';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$email = trim('adres@domena.pl');
if ( (bool)filter_var($email, FILTER_VALIDATE_EMAIL) === false )
{
	print 'Nieprawidłowy adres e-mail';
}

2. Walidacja adresu e-mail opartego na hoście lub IPv4 serwera

Wzorzec:

/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@((([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?))|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])))$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione warunki z poprzedniego punktu oraz:

po znaku @ musi się pojawić opisany już wcześniej prawidłowo sformowany host lub adres IPv4 serwera w postaci czterech, dziesiętnych oktetów.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@64.64.100.100

Tekst nie spełniający warunków:

2.a_a-d@64.64.256.100 (trzeci oktet jest po za zakresem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

$email = trim('adres@85.64.100.100');
if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@((([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?))|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])))$/Diu', $email) )
{
	print 'Nieprawidłowy adres e-mail';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$email = trim('adres@domena.pl');
if ( (bool)filter_var($email, FILTER_VALIDATE_EMAIL) === false )
{
	print 'Nieprawidłowy adres e-mail';
}

3. Prosta weryfikacja adresu URL

Wzorzec:

/^(http|ftp)([s]{0,1}):\/\/([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)(\.([a-z0-9]{2,6})){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu

Opis:

Zweryfikować, czy użytkownik wprowadził adres URL, wg wzoru:

protokół://adres_serwera:port/

dozwolone protokoły: http, https, ftp, ftps,
adres serwera w formie serwera lokalnego, subdomen, domeny i rozszerzenia,
port jest opcjonalny,
dalsze wprowadzone dane (jak Query String) nie są sprawdzane,
konstrukcja jest przeznaczona do sprawdzanie adresów opartych na IPv4.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

http://m1chu.eu/

Tekst nie spełniający warunków:

htt://adres.com/temp/ (nieprawidłowy schemat)

Rozwiązanie oparte o wyrażenie regularne:

$url = trim('http://m1chu.eu');
if ( !preg_match('/^(http|ftp)([s]{0,1}):\/\/([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)(\.([a-z0-9]{2,6})){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu', $url) )
{
	print 'Nieprawidłowy adres URL';
}

4. Wycinanie hosta z portem z adresu URL

Wzorzec:

/^(http|ftp)([s]{0,1}):\/\/((.*)\.[a-z0-9]{2,6}|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu

Opis:

Pobrać host wraz z portem (jeżeli został podany) z URI. Pozostałe zasady są tożsame z wymienionymi w poprzednim punkcie.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

http://m1chu.eu:80/ (zwróci: m1chu.eu:80)

Tekst nie spełniający warunków:

htt://adres.com/temp/ (nieprawidłowy schemat)

Rozwiązanie oparte o wyrażenie regularne:

$url = trim('ftps://stro.eu:1000/file.exe');
if ( preg_match('/^(http|ftp)([s]{0,1}):\/\/((.*)\.[a-z0-9]{2,6}|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu', $url, $matches) )
{
	// $matches[3] - nazwa serwera z domeną lub adres IPv4
	// $matches[10] - port
	print $matches[3] . ':' . $matches[10];
}

5. Sprawdzanie adresu IP (protokół IPv4)

Wzorzec:

/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/Du

Opis:

Wykryć poprawność wprowadzonego w formie dziesiętnych oktetów IP (w wersji czwartej protokołu).

Strona testowa:

Tutaj.

Tekst spełniający warunki:

0.0.0.0

Tekst nie spełniający warunków:

101.256.0.1 (drugi oktet poza zakresem)

Rozwiązanie oparte o wyrażenie regularne:

$ipv4 = trim('192.168.0.1');
if ( !preg_match('/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/Du', $ipv4) )
{
	print 'Nieprawidłowy adres IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv4 = trim('192.168.0.1');
if ( (bool)filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4) === false )
{
	print 'Nieprawidłowy adres IPv4';
}

6. Sprawdzamy adres IP z wykluczeniem puli prywatnych adresów (protokół IPv4)

Wzorzec:

/^([1-9]{1}[1-9]{0,1}|1\d([1-6]{1}|[8-9]{1})|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])$/Du

Opis:

Wykryć poprawność wprowadzonego IP (w wersji czwartej protokołu) z wykluczeniem części prywatnych i zastrzeżonych pul. Metoda nie dotyczy masek podsieci. Objęte wyjątki:

10.0.0.0 – 10.255.255.255,
0.0.0.0 – 0.255.255.255,
255.255.255.255,
127.0.0.0 – 127.255.255.255.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

192.168.0.136

Tekst nie spełniający warunków:

0.0.0.0 (adres prywatny)

Uwagi:

Stosując funkcję ze zbioru filter_* odrzucone zostaną wszystkie zakresy adresów prywatnych i zastrzeżonych (np. 255.255.255.x).

Rozwiązanie oparte o wyrażenie regularne:

$ipv4 = trim('68.78.205.0');
if ( !preg_match('/^([1-9]{1}[1-9]{0,1}|1\d([1-6]{1}|[8-9]{1})|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])$/Du', $ipv4) )
{
	print 'Nieprawidłowy adres IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv4 = trim('68.78.205.0');
if ( (bool)filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4 | FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE) === false )
{
	print 'Nieprawidłowy adres IPv4';
}

7. Sprawdzamy adres IP (protokół IPv6 i IPv4)

Wzorzec:

/^((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?$/Du

Opis:

Wykryć poprawność wprowadzonego IP (w wersji szóstej i czwartej protokołu).

Strona testowa:

Tutaj.

Tekst spełniający warunki:

fe80:0:0:0:0204:61ff:254.157.241.86

Tekst nie spełniający warunków:

2001:::db8:: (błędna notacja)

Uwagi:

Stosując funkcję ze zbioru filter_* odrzucone zostaną wszelkie adresy IPv4. W przedstawionym wyrażeniu regularnym adresy z tej wersji są akceptowane zarówno występując samotnie, jak i w postaci sekwencji czterech ostatnich bajtów w IPv6 (np. :247.125.68.4).

Rozwiązanie oparte o wyrażenie regularne:

$ipv6 = trim('fe80::204:61ff:fe9d:f156');
if ( !preg_match('/^((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?$/Du', $ipv6) )
{
	print 'Nieprawidłowy adres IPv6/IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv6 = trim('fe80::204:61ff:fe9d:f156');
if ( (bool)filter_var($ipv6, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6) === false )
{
	print 'Nieprawidłowy adres IPv6';
}

8. Wykrywanie kolorów RGB w postaci szesnastkowej

Wzorzec:

/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/Diu

Opis:

Sprawdzić, czy wprowadzone dane są szesnastkowymi odpowiednikami zapisu kolorów modelu RGB.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

#ff0000

Tekst nie spełniający warunków:

#a0hfg1 (g i h nie są znakami używanymi przy zapisie heksadecymalnym)

Rozwiązanie oparte o wyrażenie regularne:

$hex = trim('#0F15a2');
if ( !preg_match('/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/Diu', $hex) )
{
	print 'Nieprawidłowy kod szesnastkowy koloru!';
}

9. Proste sprawdzenie nazwy użytkownika

Wzorzec:

/^([a-z0-9]{1})([a-z0-9_-]{2,11})$/Diu

Opis:

Wprowadzone dane muszą rozpoczynać się od znaku alfanumerycznego. Kolejne znaki mogą być ponadto myślnikiem lub podkreśleniem. Długość tekstu nie może być większa niż 12ście znaków.

Strona testowa:

Brak.

Tekst spełniający warunki:

m1chu

Tekst nie spełniający warunków:

_nick (pierwszy znak nie jest cyfrą, ani literą)

Rozwiązanie oparte o wyrażenie regularne:

$username = trim('m1chu');
if ( !preg_match('/^([a-z0-9]{1})([a-z0-9_-]{2,11})$/Diu', $username) )
{
	print 'Nieprawidłowa nazwa użytkownika!';
}

10. Proste sprawdzenie hasła użytkownika

Wzorzec:

/^(?=[a-z0-9_#@%\*-]*?[A-Z])(?=[a-z0-9_#@%\*-]*?[a-z])(?=[a-z0-9_#@%\*-]*?[0-9])([a-z0-9_#@%\*-]{8,24})$/Diu

Opis:

Wpisane hasło użytkownika musi mieć od ośmiu, do dwudziestu czterech znaków, pośród których musi być co najmniej jedna wielka litera, jedna mała i jedna cyfra. Dodatkowo dozwolone są: _, #, @, %, * i -.

Strona testowa:

Brak.

Tekst spełniający warunki:

1xY#n6%2V

Tekst nie spełniający warunków:

@1bbd2 (za krótki ciąg, brak wielkiej litery)

Rozwiązanie oparte o wyrażenie regularne:

$password = trim('To#jEst@_haSL-o%usera*');
if ( !preg_match('/^(?=[a-z0-9_#@%\*-]*?[A-Z])(?=[a-z0-9_#@%\*-]*?[a-z])(?=[a-z0-9_#@%\*-]*?[0-9])([a-z0-9_#@%\*-]{8,24})$/Diu', $password) )
{
	print 'Nieprawidłowa nazwa użytkownika!';
}

11. Zaznaczanie frazy w tekście

Wzorzec:

/\b(fraza)\b/iu

Opis:

Zamienianie podanej frazy na inną lub wystylowanie jej formy. Przydatna funkcja w wyszukiwarkach.

Strona testowa:

Brak.

Działanie:

szukana_fraza -> szukana_fraza

Rozwiązanie oparte o wyrażenie regularne:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print preg_replace('/\b(' . $find . ')\b/iu', '\\1', $text);

Rozwiązanie oparte o str_ireplace:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print str_ireplace($find, '' . $find . '', $text);

12. Zamiana tekstowych emotikon na graficzne

Opis:

Podmiana tekstowych uśmieszków na ich odpowiedniki graficzne. Wersja z użyciem str_ireplace.

Strona testowa:

Brak.

Rozwiązanie oparte o wbudowaną funkcję PHP:

$text_format = array(
	array(';)', ';-)', 'x)', ';]', ';-]'),
	array(':)', ':-)', '=)', ':]', ':-]'),
	array(':(', ':-(', '=(', ':[', ':-['),
	array(';(', ';-(', 'x(', ';[', ';-['),
	array(':P', ':-P', '=P'),
	array(':D', ':-D', '=D'),
	array(':*', ':-*', '=*'),
	array(':O', ':-O', '=O'),
	array(':/', ':-/', '=/')
	);

$image_format = array(
	'wink.png',
	'smile.png',
	'sad.png',
	'cry.png',
	'tongue.png',
	'bigsmile.png',
	'kiss.png',
	'surprise.png',
	'grimace.png'
	);

$text = 'To jest przykładowy tekst ;] Prawda, że fajny? :-D Pogrymasiłbym trochę =/, ale po co? :) Także do zobaczenia :*';

foreach ( $text_format as $key => $val )
{
	$text = str_ireplace($val, '', $text);
}

print $text;

13. Zamiana BBCode na HTML

Wzorzec przykładowy:

/\[b\](.*?)\[\/b\]/Dius

Opis:

Podmiana BBCode poprzez kod HTML. Funkcjonalność znana z forów internetowych.

Strona testowa:

Brak.

Działanie:

[i]pochylenie[/i] -> pochylenie

Uwagi:

W komercyjnych projektach należy skorzystać z bardziej zaawansowanych klas do obsługi tego problemu. Pozwoli to uniknąć np. problemu z nieprawidłowym zagnieżdżeniem kilku tagów BBCode w sobie.

Rozwiązanie oparte o wyrażenie regularne:

function bbcode2html($code) {
	$search = array(
        '/\[b\](.*?)\[\/b\]/Dius',
        '/\[i\](.*?)\[\/i\]/Dius',
        '/\[u\](.*?)\[\/u\]/Dius',
        '/\[s\](.*?)\[\/s\]/Dius',
        '/\[img\=(.*?)\](.*?)\[\/img\]/Dius',
        '/\[img\](.*?)\[\/img\]/Dius',
        '/\[url\](.*?)\[\/url\]/Dius',
        '/\[url\=(.*?)\](.*?)\[\/url\]/Dius',
        '/\[color\=(#?([a-f0-9]{6}|[a-f0-9]{3}))\](.*?)\[\/color\]/Dius',
        '/\[size\=([1-9]{1}[0-9]{0,2})(px|pt|em)\](.*?)\[\/size\]/Dius',
    	'/\[font\=([a-z0-9\s"]+)\](.*?)\[\/font\]/Dius',
    );

	$replace = array(
        '\\1',
        '\\1',
        '\\1',
        '\\1',
        '',
        '',
        '\\1',
        '\\2',
        '\\2',
        '\\3',
    	'\\2'
    );

	return preg_replace($search, $replace, $code);
}

14. Sprawdzenie poprawności wprowadzonego kodu pocztowego

Wzorzec:

/^[0-9]{2}-?[0-9]{3}$/Du

Opis:

Testowanie poprawności wpisanego kodu pocztowego (w formacie używanym w Polsce). Dozwolone są wersje z myślnikiem pomiędzy drugą i trzecią cyfrą, oraz bez niego.

Strona testowa:

Brak.

Tekst spełniający warunki:

62-150

Tekst nie spełniający warunków:

611-10

Rozwiązanie oparte o wyrażenie regularne:

$postcode = '61-610';
if ( !preg_match('/^[0-9]{2}-?[0-9]{3}$/Du', $postcode) )
{
	print 'Nieprawidłowy kod pocztowy';
}

15. Operowanie na znacznikach XML/XHTML

Wzorzec:

/<([a-z]+)([\s]{1}[^=]+[=]{1}[^<]+)*(?:>(.*)<\/\1>|\s+\/>)/u

Opis:

Sprawdzenie znaczników XML/XHTML oraz pobranie treści znajdującej się pomiędzy nimi.

Strona testowa:

Brak.

Rozwiązanie oparte o wyrażenie regularne:

$tag = 'm1chu.eu - another devblog';
if ( !preg_match_all('/<([a-z]+)([\s]{1}[^=]+[=]{1}[^<]+)*(?:>(.*)<\/\1>|\s+\/>)/u', $tag, $matches, PREG_PATTERN_ORDER) )
{
	print 'Nieprawidłowa konstrukcja znacznika';
}
else {
	print_r($matches); // print_r($matches[3]) - lista treści zawieranych w tagach
}

Słowem zakończenia

Starałem się jak najdokładniej sprawdzić powyższe wzorce. Nie mniej jednak, jak to zwykle bywa, mogą się w nich znaleźć błędy. Jeżeli ktoś takowe znajdzie, ma jakieś pytania, czy lepsze propozycje to proszę o komentarze pod wpisem.

Jak wspomniałem na wstępie, uruchomiłem serwis pozwalający na sprawdzanie wyrażeń regularnych względem podanego tekstu. Jest on aktualnie w fazie testów, więc mogą występować błędy w jego działaniu. Po zakończeniu wprowadzania poprawek baza wpisów zostanie wyczyszczona do zera. Można go testować, a w przyszłości korzystać pod dwoma adresami:

regexp.pl (adres główny)
regexp.m1chu.eu (adres alternatywny)

Pod względem danych sesyjnych obydwa adresy działają niezależnie. Zapraszam do testowania i wyrażania swojego zdania na moim blogu, w komentarzach tego artykułu.

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.