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:
{codecitation}
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'
};
{/codecitation}
W przypadku otwarcia naszej strony w Operze zostanie wczytany arkusz stylu 'opera.css'. Również można utworzyć bardziej złożony skrypt:
{codecitation}
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')
}
{/codecitation}
Dzięki naszemu skryptowi możemy sprawić, że styl będzie odpowiednio wczytywany dla rozdzielczość naszego ekranu:
{codecitation}
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"
};
{/codecitation}
Pozdrawiam Daniel Szerszeń Read more
|