Skrypt rozróżniający IE - reszta dla stylu CSS - jak?

[KLAPEK]

Witam, może ktoś z Was byłby na tyle miły i podał jakiś namiar, jak należy zrobić, aby w zależności od przeglądarki IE lub reszta, ładował się styl CSS
Zrobiłem sobie stronę z pozycjonowaniem [absolutnym i relatywnym - w Mozzi bez żadnych problemów, wszystko jest na miejscu bez względu na rozdzielczość, natomiast w IE się sypie w każdej rozdzielczości ]
Napisałem więc drugi CSS dla IE i teraz pytanie w jaki sposób [skrypt Javy?] wrzucić rozróżnianie na starcie w przesyłaniu stylów CSS?
Z góry dzięki

[Domel]

Kod: Zaznacz cały

if(navigator.appName.indexOf('Microsoft Internet Explorer') != -1)
  {
   document.writeln('IE');
  }
else
  {
   document.write('Nie IE');
  }

To nie jest rozwiazanie profesjonalne ale w "normalnych" warunach dziala. Oczywiscie na wszystkich przegladarkach, ktore klamia czyli np Opera moze nie dzialac tak jak powinno (w przypadku gdy bedzie zaznaczone identyfikacja na IE) ale z drugiej strony jak cos podszywa sie i klamie, ze jest IE to mozna go potraktowac jak IE
Mozna sie pokusic o bardziej wyrafinowane rozwizanie (nawet Marcoos i Gandalf gdzies juz pisali takie skrypty, wiec mozesz poszukac jak Ci nie wystarcza)

[KLAPEK]

Śliczne dzięki

Kod: Zaznacz cały

   document.writeln('IE');

Czy tu zamiast IE mam wpisać np: iestyl.css, czy należy zrobić wszystko odzielnie tj np: ieindex.html
Skrypt ma być pomiędzy znacznikami head?

[Gandalf]

Domel: to nie lepiej obiektowka?

if (document.all) {
} else {
}

???

[Domel]

No tez mozna

[Domel]

Czy tu zamiast IE mam wpisać np: iestyl.css, czy należy zrobić wszystko odzielnie tj np: ieindex.html

Zamiast IE wpisujesz

Kod: Zaznacz cały

<link rel="stylesheet" type="text/css" href="plik.css">

Skrypt ma być pomiędzy znacznikami head?

Tak.

[KLAPEK]

Super wszystko chodzi, mam tylko jeszcze takie pytanie, czy da się [i jak?] dorzucić do tego skryptu jeszcze Operę 7 w trybie zgodności z MSIE6 [jesli jest w takim, dostaje styl IE i nie widać jednej ramki, bo chyba ma inne pozycjonowanie niż IE], jak ją przełącze na Operę lub Mozillę dostaje prawidłowy css i wszystko jest OK
W ogóle z Operą to największe kłopoty
W 6.02 w każdej identyfikacji nie wiem dlaczego rozciąga jedną ramkę

To dla IE styl: [na górze jest jeszcze jedna ramka, i obok są 3 jedna pod drugą o różnych wymiarach]

Kod: Zaznacz cały

.menu {
   position:absolute;
   margin-top: 40px;
   margin-left: -180px;
    background: #26c40c;
padding: 10px;
    border: 2px dotted #D81818;
    font-family: arial, sans-serif;
    font-size: 12pt;
  text-align: center;
}

[marcoos]

Hmm... Jeśli chcesz wykrywać tylko IE, a nie Operę podszywającą się pod ten szmelc, to rób tak:

Kod: Zaznacz cały

 if (navigator.userAgent.indexOf("MSIE")!=-1&&navigator.userAgent.indexOf("Opera")==-1)
     document.write("Your browser sucks. Get a real one!")
 else
 document.write("Thanks for not using IE.")


Chociaż jeśli robisz to tylko po to, żeby IE dostawał innego CSS, to to nie ma sensu. Istnieją sztuczki pozwalające Eksplozjatorowi na ominięcie pewnych
fragmentów CSS (z wykorzystaniem np. faktu, że IE nie rozumie selektora > ), np.:

Kod: Zaznacz cały

div#pasek {
 color: red;
 background: yellow;
}

body > div#pasek {
 color: blue;
 background: pink;
}


Kod: Zaznacz cały

....
<body>
<div id="pasek">Siała baba mak, dostała pięć lat.</div>
</body>
</html>


I porównaj wynik w IE i czymkolwiek innym.

JavaScript to fajny język, ale IMHO należy unikać jego zastosowania tam, gdzie można identyczne efekty uzyskać bez żadnych skryptów.

[quiris]

Chociaż jeśli robisz to tylko po to, żeby IE dostawał innego CSS, to to nie ma sensu. Istnieją sztuczki pozwalające Eksplozjatorowi na ominięcie pewnych
fragmentów CSS (z wykorzystaniem np. faktu, że IE nie rozumie selektora > ), np.:

Te sztuczki są lepszym rozwiązaniem niż korzystanie z JS (jak ktoś wyłączy JS to już cieniutko się robi). Natomiast u mnie sprawdziło się rozwiązanie z wykorzystaniem takiego cuda wymyślonego przez M$ pod nazwą Komentarze warunkowe: http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp

Kod: Zaznacz cały

<!--[if IE]>
<p>Welcome to Hell!</p>
<![endif]-->


[quiris]

W 6.02 w każdej identyfikacji nie wiem dlaczego rozciąga jedną ramkę

Z Operą 6.x to podobnie jak z NN4.x. Jednym słowem żenada. Nieźle się trzeba nagimnastykować. Ja ze swej strony proponuję ignorować tę przeglądarkę.

[Domel]

Chociaż jeśli robisz to tylko po to, żeby IE dostawał innego CSS, to to nie ma sensu. Istnieją sztuczki pozwalające Eksplozjatorowi na ominięcie pewnych
fragmentów CSS (z wykorzystaniem np. faktu, że IE nie rozumie selektora > ), np.:

A mi sie te sztuczki nie podobaja, bo za kilka lat nie beda (raczej) przydatne. A strony robi sie na zawsze... i aktualizacja powinna przede wszysztkim dotyczyc contentu a nie lajaltu. Dlatego JS gwarantuje jawny dostep do appName a to sie nie zmienia (a przynajmniej nie powinno sie zmieniac). Po to wlasnie wymyslono UA, zeby z niego korzysatc.

Natomiast u mnie sprawdziło się rozwiązanie z wykorzystaniem takiego cuda wymyślonego przez M$ pod nazwą Komentarze warunkowe: http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp

O a to mi sie podoba. Zgodne z W3C, same plusy

[KLAPEK]

Fajne to if, tylko jak teraz to wszystko tak zgrabnie połączyć by wyeliminować Operę 7 udającą IE
Próbowałem dołożyć drugie if [które podrzucił marcoos] do skryptu, który zaproponował Domel, ale w ogóle nie ładowało CSS w żadnej przeglądarce -> jak zatem spiąć 2 warunki if + else, chyba że można zrobić w jedym if wpisać i appName MSIE i userAgent Opera
Próbowałem, ale nadal nie ładowało mi CSS [bardzo cienki jestem z JS ]
Co do ignorowania Opery 6 - to chyba nadal sporo ludzi używa i miałoby mocno utrudnioną nawigację....

[Gandalf]

Hmm... Jeśli chcesz wykrywać tylko IE, a nie Operę podszywającą się pod ten szmelc, to rób tak:

Kod: Zaznacz cały

 if (navigator.userAgent.indexOf("MSIE")!=-1&&navigator.userAgent.indexOf("Opera")==-1)
     document.write("Your browser sucks. Get a real one!")
 else
 document.write("Thanks for not using IE.")


Jejku, ludzie... myslalem, ze juz przerabialismy okres typu Dan Steinmen... To bylo 6 lat temu!!!!
Co Cie marcoos obchodzi jak sie nazywa browser? A jak browser sie bedzie nazywal "Mbulamakatamajo"? Obchodzi Ci wylacznie jego silnik, i po cechach charakterystycznych mozesz go latwo rozpoznac:

Kod: Zaznacz cały

if (document.all) {} // if IE
if (document.all && !window.opera) {} // IE && !Op


[KLAPEK]

Kod: Zaznacz cały

if (document.all) {} // if IE
if (document.all && !window.opera) {} // IE && !Op


A jak teraz zgrabnie wpiąc to w jeden skrypt JS
Mam 2 pliki CSS i chciałbym, aby:
jeśli IE od M$ - to ładuj IEstyl.css;
jeśli IE, a tak naprawdę Opera - to ładuj styl.css;
else - ładuj styl.css

[Domel]

Kod: Zaznacz cały

if (document.all && !window.opera)
{
 document.write("MS IE");
}
else if (window.opera)
 {
  document.write("Opera - bez wzgledu na identyfikacje");
 }
else
 {
  document.write("Inne");
 }

Moze tak?

[Gandalf]

Kod: Zaznacz cały

if (window.opera) {
  document.write("Opera - bez wzgledu na identyfikacje");
} else if (document.all) {
  document.write("MS IE");
} else {
  document.write("Inne");
}


[marcoos]

Co Cie marcoos obchodzi jak sie nazywa browser? A jak browser sie bedzie nazywal "Mbulamakatamajo"? Obchodzi Ci wylacznie jego silnik, i po cechach charakterystycznych mozesz go latwo rozpoznac:

Kod: Zaznacz cały

if (document.all) {} // if IE


"Bullszit", jak mawiali starożytni Gruzini.

Od kiedy to document.all[] jest charakterystyczny tylko dla IE?

Istnieje wiele przeglądarek implementujących document.all[], a obsługujących CSS (bo w tym wątku chodzi o CSS!) lepiej niż IE. Choćby Opera i Konqueror.

Sprawdzanie obecności danej metody/kolekcji ma sens tylko wtedy, jeśli zamierzamy z niej skorzystać:

Takie coś:

Kod: Zaznacz cały

if (document.all)
 document.all["costam"].innerHTML="Bleble"
else
if (document.getElementById)
 document.getElementById("costam").innerHTML="Pleple";


jest sensowne. Natomiast

Kod: Zaznacz cały

if (document.all)
 document.write("<link rel='stylesheet' type='text/css' href='ograniczony_css_dla_explorera.css'/>")


już niebardzo. Nie pomoże nawet Twoje

Kod: Zaznacz cały

if (document.all&&!window.opera)
 document.write("<link rel='stylesheet' type='text/css' href='ograniczony_css_dla_explorera.css'/>")


bo pod to załapuje się właśnie np. Konqueror.

Obie metody - sprawdzanie obecności danej metody/kolekcji i skanowanie useragentu browsera są dobre, jeśli stosuje je się z sensem. Np. wyobraź sobie, że w Mozilli a.b jest błąd w obsłudze CSS, który usunięto w Mozilli a.c. Wiesz, że ten błąd można obejść przez prostą sztuczkę skryptem, która jednak powoduje rozyspanie się strony w nowszych wersjach. (Miałem kiedyś taki problem z NN7.0!) Bez skanowania UA nie poradzisz sobie w takiej sytuacji.

[Gandalf]

tak, ale ja nie potrzebuje rozroznic Mozilli 1.1 od 1.2 (wowczas musze uzyc UA). Musze, pioniewaz oba maja identyczny DOM (teoretycznie). Zupelnie inna jest syuacja z CSS.

Jaki masz cel w podaniu przegladarce jednego albo drugiego CSS? Podanie takiego CSS jaki obsluzy dany silnik.

Wiec mozna przyjac ze istnieja 4 klasy silnikow (ignorujac stare):

1) Opera
2) IE
3) Gecko
4) KHTML

Mowiac KHTML mam na mysli nowa jego wersje uzyta w Safari, a nie przestarzala uzyta w Konquerorze.

I teraz, dla Gecko podajemy jeden CSS, dla Opery drugi, dla IE trzeci a dla Konq??? No coz, jesli chcemy, to wynajdujemy jakas fajna wlasciwosc Konquerora (znam dwie) i podajemy tylko dla niego, ale przeciez szczerze mowiac mozemy zalozyc, ze jesli przegladarka uzywa document.all to dlatego, ze chce byc obslugiwana jak IE, pozwolmy jej wiec na to.

Masz oczywiscie racje, ze i moja i twoja metoda nie sa w 100% skuteczne, ale Twoja pada kiedy zmienie sobie UA w moim FB (i co, chcesz promowac algorytm w ktorym zmiana UA powoduje, ze strona mi sie wypieprza - super!), a Twoja metoda pada kiedy jakas przegladarka na sile chce udawac inna.

Moja propozycja (po sugestiach BZ), jest taka:

Kod: Zaznacz cały

if (document.getElementByid) {
} else if (window.opera) {
} else if (document.all) {
} else if (document.layers) {
} else {
}


1) Jesli cos ma DOM lvl 1 to super i mamy w dupie jaki to silnik
2) Jesli to IE (albo cos co udaje stare IE - bo nowe poszly w DOM lvl1) to dajemy mu to
3) jesli zas to NS4 (lub cos udajacego je) to dajemy mu to.
4) a inaczej...

Widzisz marcoos, zmiana UA to moze byc wybryk mojego ego i nie mam ochoty aby mi strona przestala dzialac. Natomiast jesli jakas grupa decyduje sie ze ich przegladarka bedzie obslugiwala document.all robi to celowo, a nie przypadkiem. Jej celem jest, zeby traktowac ja jak IE. Wiec nie widze powodu aby czynic inaczej.

[marcoos]

To jest IMHO przesada.

Jeżeli przeglądarka umie coś obsłużyć (a Konqueror umie prawie tyle CSS, co Mozilla), to czemu w tym przeszkadzać i serwować wykastrowaną wersję, tylko dlatego, że uważa się że if (document.all) to najlepsze rozwiązanie na wykrywanie IE?

Rozsądne jest rozwiązanie, w którym (jeśli chodzi o CSS) przeglądarki podzielimy na trzy grupy:

1. Zgodne ze standardami (Mozilla, Opera, Konqueror, Safari, i in.).
- maksimum funkcjonalności i wyglądu (CSS)

2. Internet Explorer 5.5+
- tyle, ile badzIEw zrozumie
3. Śmiecie (IE 5.0-, NN4)
- dla nich dbamy tylko o funkcjonalność, wygląd jest tu trzeciorzędną sprawą

Pełen bajerancki CSS serwujemy dla(1), dla (2) uproszczony, dla (3) albo bardzo uproszczony, albo je po prostu olewamy, serwując dokument bez CSS i podając linka do upgrade campaign na www.webstandards.org.

Dlatego sensowne jest:

Kod: Zaznacz cały

if (document.getElementById&&(navigator.userAgent.indexOf("MSIE")!=-1&&!window.opera))
 css='ie55.css'; // dostanie to tylko IE.
else if (document.getElementById)
 css='full.css'; // wszystko poza IE, co rozumie getElementById - grupa (2)
else
 css='nn4ie4.css''; // reszta, czyli grupa (3)

document.write("<link rel='stylesheet' type='text/css' href='"+css+"'>"


Grupę (2) sprawdzam po metodzie, bo zazwyczaj, jeśli coś nie jest IE, a obsługuje W3C DOM, to obsługuje CSS. Takie założenie jest uprawnione, w przeciwieństwie do odwrotnego - że jeśli coś ma document.all, to nie umie CSS....

Problemem takiego rozwiązania jest tylko "zgodność w przyszłość", bo może IE 7 będzie obsługiwać CSS przynajmniej tak, jak Konqueror. Ale do IE 7 mamy jeszcze dwa lata, a poprawka w tym skrypcie to kwestia kilku sekund.

Nie ma sensu dyskryminować Konquerorowców tylko dlatego, że IE jest do bani, a Konq w paru miejscach jest z nim zgodny.
Przypomina mi to traktowanie Mozillowców jak użytkowników NN4....

Oczywiście dalej uważam, że najlepsza metoda na niezgodności CSS w przeglądarkach to odpowiednie manipulowanie selektorami, a nie zabawa z JS.

[Gandalf]

Ale konqueror swiadomie i celowo uzywa document.all wlasnie w tym celu!

Poza tym Twoje rozumowanie "mozna wymienic w pare sekund" jest fajne, ale tylko jesli jedynym uzytkownikiem skryptu jestes Ty sam, jesli go rozdajesz to mozesz tylko spowodowac problemy.

Lepiej na pierwsze miejsce w IFie wsadzic document.getElementById - mamy wtedy pewnosc, ze DOM to DOM i kazdy pojdzie.

Jak juz napisalem wcale nie chce dyskryminowac Konq, tylko nie mam chwili czasu zeby przejzec jego DOM i znalezc co on ma specyficzne, a na pewno cos ma... Jak to znajdziesz to bedzie po prosblemie i bez potrzeby uzalezniania sie od UA.