Styl CSS dla odzielnej przeglądarki lub dla różnych rozdzielczości

Wpisany przez Roszpun

sobota, 24 lipca 2010 14:11

Tworząc stronę internetową, najczęściej obserwujemy wyniki swojej pracy w jednej przeglądarce (przykładowo Firefox). Gdy już skończyliśmy kodowanie naszej strony, chcemy zobaczyć jak wygląda w innych przeglądarkach. I co się okazuje? Jesteśmy kompletnie załamani tym co ujrzeliśmy. W Operze elementy są niepoprawnie wyświetlane, Google Chrome nie wyświetla niektórych elementów, natomiast w IE 6 nasza strona w ogóle nie istnieje. Próbujemy temu jakoś zaradzić, tworząc uniwersalny styl dla Firefox'a, Opery oraz Chrome, jednak zdajemy sobie sprawę, że dla nas to nie możliwe.

Jak wiadomo dla Internet Explorer 6 możemy zastosować komentarze warunkowe. A co z resztą przeglądarek? Z pomocą przychodzi JavaScript, w którym możemy napisać polecenie warunkowe, które przeglądarka będzie interpretować tak:

Jeśli nazwa przeglądarki to Opera, wstaw w sekcję head arkusz stylu pod nazwą "opera.css".

W JS wyglądać to będzie w następujący sposób:


	

	function getcss(cssfile){  // tworzy funkcję dodawania css

	loadcss = document.createElement('link')//ustawia atrybuty arkusza

	loadcss.setAttribute("rel", "stylesheet")

	loadcss.setAttribute("type", "text/css")

	loadcss.setAttribute("href", cssfile)

	document.getElementsByTagName("head")[0].appendChild(loadcss)//wybiera miejsce, w którym ma znaleźć się styl

	}

	if(navigator.appName == 'Opera')//warunek

	{

	getcss('opera.css')//polecenie wczytania pliku 'opera.css'

	};

W przypadku otwarcia naszej strony w Operze zostanie wczytany arkusz stylu 'opera.css'. Również można utworzyć bardziej złożony skrypt:


	function getcss(cssfile){ 

	loadcss = document.createElement('link')

	loadcss.setAttribute("rel", "stylesheet")

	loadcss.setAttribute("type", "text/css")

	loadcss.setAttribute("href", cssfile)

	document.getElementsByTagName("head")[0].appendChild(loadcss)

	}

	if(navigator.appName == 'Opera','Chrome')// dla tych przeglądarek będzie wczytywany styl Opery

	{

	getcss('opera.css')

	}

	if(navigator.appName == 'Netscape')// Pod taką nazwą skrypt widzi Firefox'a 

	{

	getcss('firefox.css')

	}

Dzięki naszemu skryptowi możemy sprawić, że styl będzie odpowiednio wczytywany dla rozdzielczość naszego ekranu:


	function getcss(cssfile){

	

	loadcss = document.createElement('link')

	

	loadcss.setAttribute("rel", "stylesheet")

	

	loadcss.setAttribute("type", "text/css")

	

	loadcss.setAttribute("href", cssfile)

	

	document.getElementsByTagName("head")[0].appendChild(loadcss)

	

	}

	

	if(screen.width <= '800')

	// jeśli szerokość ekranu jest równa lub mniejsza 800px

	

	{

	

	getcss('800x600.css')

	// wczytaj styl "800x600.css"

	

	};

Pozdrawiam Daniel Szerszeń

< Poprzednia		Następna >