: Home / JavaScript / artykuły / Styl CSS dla odzielnej przeglądarki lub dla różnych rozdzielczości
Styl CSS dla odzielnej przeglądarki lub dla różnych rozdzielczości
Ocena użytkowników: / 0
SłabyŚwietny 
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 >
 

Komentarze 

 
0 #1 Patryk yarpo Jar 2010-07-25 02:54
Podobny kod można znaleźć w tym artykule:
http://youthcoders.net/javascript/artykuly/93-dynamiczne-ladowanie-js.html

Choć zastosowanie ciekawe.

Spróbuj za pomocą tego:
http://youthcoders.net/javascript/artykuly/180-wzorzec-moduu-dobre-praktyki-js.html

przerobić to na obiekt, który pozwalałby się oderwać od takich konstrukcji:
if(navigator.appName == 'Opera','Chrome')

i ukryć to gdzieś w implementacji. A wystawić tylko interfejs. W stylu:

var oCSS = yCSSLoader();
oCSS.opera({'6' : 'plik_opera_6.css'});
oCSS.ie({'8' : 'plik_ie_8.css'});
oCSS.resolution({'800x600' : '800x600.js', '1024x768' : '1024x768.js'});
oCSS.always('file.js');
Cytować
 

Dodaj komentarz


Kod antysapmowy
Odśwież