Forum Katalogu Ciekawych Stron Strona Główna  Forum Katalogu Ciekawych Stron Strona Główna  
 
FAQ  FAQ   Szukaj  Szukaj   Użytkownicy  Użytkownicy   Ranking systemów  Ranking systemów   Grupy  Grupy  
 
Rejestracja  ::  Zaloguj Zaloguj się, by sprawdzić wiadomości
 
Forum Katalogu Ciekawych Stron Strona Główna » Tutoriale » [CSS] Hacki, czyli jak ominąć niedoskonałości przeglądarek

Napisz nowy temat  Odpowiedz do tematu
 [CSS] Hacki, czyli jak ominąć niedoskonałości przeglądarek « Zobacz poprzedni temat :: Zobacz następny temat » 
Autor Wiadomość
max
PostWysłany: 22 Kwi 2006, 07:54    Temat postu: [CSS] Hacki, czyli jak ominąć niedoskonałości przeglądarek Odpowiedz z cytatem Zacytuj zaznaczone

Znawca
Znawca

Dołączył: 16 Cze 2005
Posty: 738


Hacki, czyli jak obejść niedoskonałości przeglądarek
Hacki najczęściej wykorzystują dziurę w jakiejś przeglądarce. Najczęściej jednak problemy stwarza MSIE i nad nią skupimy się najwięcej.
Zobacz przykłady:

Na początek ukrywanie fragmentów kodu CSS dla MSIE:
Kod:
/* w pliku css */
table {
width: 100px;
voice-family: "\"}\"";   // 1
voice-family: inherit;   // 2
width: 200px; }          // 3

Opis:
Ten hack nazywa się "box model hack"

  1. 'voice-family' jest analogiczny do 'font-family', z tą różnicą, że jest wykorzystywane do odczytywania - na głos - przez przeglądarkę strony [w praktyce chyba tylko Opera 8.0 korzysta z tego, chyba :-)]. Przypisana wartość nic nie znaczy - powoduje, że MSIE przestaje czytać style od tego miejsca [zaczyna czytać dopiero kolejną regułę].
  2. przypisujemy do 'voice-family' wartość domyślą, żeby "naprawić" wcześniejszy - specjalny błąd.
  3. po raz kolejny definiujemy właściwości, które chcemy ukryć przed MSIE. Oczywiście styl "width: 200px;" jest przedstawiona jako przykład. Pamiętaj, że jeśli określimy coś raz, a później jeszcze raz to ta ostatnia opcja jest ważniejsza.

Kod:
/* tak to czyta MSIE: */
table {
width: 100px;
voice-family: "\"}\""; // i już kończy, dalej nie będzie sprawdzał tej reguły - skoczy do następnej
voice-family: inherit;
width: 200px; }

/* a nowoczesne przeglądarki: */
table {
width: 100px;
voice-family: "}"; // nieprawidłowa wartośc, ale czyta dalej, bo to przecież nie koniec świata:-)
voice-family: inherit;
width: 200px; }

Chyba wszystko jasne. Efekt jest bardzo ciekawy. Choć w przykładzie może się wydawać, że daje niewiele możliwości, to można dzięki niemu czasem rozwiązać pewne problemy. Osobiście rzadko używam tego hacka, gdyż częsciej zdarza się sytuacja, kiedy to MSIE wymaga więcej kodu niż nowoczesne przeglądarki. A teraz kolejny ciekawy efekt:
Kod:
table {
 właściwości: wartości czytane przez wszystkie przeglądarki;
}

/*
 Komentarz wieloliniowy, jednak przez dodanie '\' na końcu MSIE przeoczy
 koniec i będzie uważał cały pozostały kod za komentarz
\*/

table {
 właściwości: czytane tylko przez nowsze przeglądarki;
}

/* Komentarz wieloliniowy zamknięty normalnie
 MSIE będzie uważał zamknięcie tego komentarza jako zamknięcie poprzedniego,
 a otwierające '\*' zignoruje */

Ten hack nazywa się "commented backslash hack"
Oczywiście można - używając hacków - tworzyć reguły dla innych selektorów niż 'table'. Zasada działania tego hacku jest podobna, gdyż ukrywa się fragmenty kodu dla MSIE. Z tą różnicą, że poprzedniego używa się do ukrywania pojedyńczych właściwości, a tego do całych reguł.

I jeszcze jeden hack, którego zadaniem jest ukrywanie kawałków kodu przed MSIE.
Kod:
table {
 właściwości: wartości czytane przez wszystkie przeglądarki;
}

body>table {
 właściwości: czytane tylko przez nowsze przeglądarki;
}

Jest to jeden z ciekawszych hacków. M.in. dlatego, że pozwala na obejście niedoskonałości MSIE 6.0. Pierwsza reguła jest czytana całkowicie normalnie - przez wszystkie przeglądarki. Druga reguła jednak jest rozpoznawana jedynie przez nowoczesne przeglądarki - choć jest w pełni zgodna ze standardami. Wskazuje się po prostu, że body jest "starsze" od table. Oczywiście można stsować taki zapis do wszystkich selektorów - należy jednak pamiętać, o tym, aby "ta nierówność" była spełniona.

Osobny arkusz stylów dla MSIE:

No juz próbowąłeś wszystkiego - prośbą, groźbą - a on nic! To "jak nie młotem, to pałą" i daj mu osobny plik CSS
Kod:
<head>
<link rel="stylesheet" href="style-normal.css" type="text/css" />
<!-- [if IE]>                   // 1
<style type="text/css">      // 2
table { width: 100px; }         // 2
</style>                     // 2
<![endif] -->                   // 3
</head>

Ten hack nazywa się "warunkowy komentarz"

  1. w HTML/XHTML taki zapis: '<!-- cośtam cośtam -->' jest traktowany jako komentarz i nie jest w żadanesposób interpretowany. Jeśli jednak umieścimy '[if IE]' MSIE zaczyna interpretować zawartość tego komentarza.
  2. W powyższym przykładzie dodaliśmy jedną linijkę kodu CSS, ale moglibyśmy dodać jej dużo więcej, lub nawet po raz kolejny załączyć plik css z dodatkowym opisem styli dla MSIE. Pamiętaj, żeby jednak odwołanie do styli dla wszystkich przeglądarek umieścić nad tym zapisem.
  3. zamykamy obszar czytany przez MSIE, a także cały komentarz.

Ten sposób jest najczęściej używany przez "świadomych" webmasterów, ponieważ daje to najszybszy sposób uzyskania poprawnego interpretowania strony przez MSIE. W warunku tym zamieszczamy opis właściwości tylko i wyłącznie dla MSIE.

Osobny arkusz stylów, ale za pomocą JS
Kod:
<head>
<script type="text/javaScript">                      // 1
if (-1 != navigator.userAgent.indexOf("MSIE")) {        // 2
document.write('<link rel="stylesheet" type="text/css" href="msie.css" />'); } // 3
</script>                                            // 1
</head>

Opis:

  1. obszar skryptu JS.
  2. sprawdzam, czy internauta używa MSIE. Jeśli tak...
  3. używając metody write() dodaje się dodatkową linie kodu wczytującą inny arkusz styli.


Można oczywiście dopisać tym sposobem tylko fragment kodu - jedną regułę, a można wstawić cały plik. Zasada jest taka sama jak w przykładzie powyżej - i efekt tez identyczny.

Uwaga: niektórzy mają wyłączoną obsługę JS, przez co ten sposób wydaje się być gorszy. Jednak jeśli ktoś używa MSIE, to raczej nie wyłącza obsługi JS [to domena bardziej doświadczonych internautów, kórzy używają lepszych programów niż MSIE].

Uwaga: niektórzy po zainstalowaniu Opery nie zmieniają w jej ustawieniach opcji 'Przedstawiaj jako MSIE', przez co nawet Opera będzie czytać ten plik/regułę, co może spowodować, że strona nie będzie się w niej prezentować tak dobrze jak w FF - raczej nie ma możliwości, aby prezentowała się gorzej niż w MSIE :-/.

--- autor: Patryk Jar
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość
KCS
Wysłany:     Temat postu: Reklama w KCS







Pozycjonusz.pl - Reklama Twojej firmy !
Oferujemy szereg usług reklamujących Państwa witrynę w wyszukiwarce Google. Dzięki nam strona zdobędzie wartościowe linki i poprawi swoją pozycję w wynikach wyszukiwania !

Powrót do góry
Wyświetl posty z ostatnich:   
Napisz nowy temat  Odpowiedz do tematu Strona 1 z 1


Forum Katalogu Ciekawych Stron Strona Główna » Tutoriale » [CSS] Hacki, czyli jak ominąć niedoskonałości przeglądarek
Skocz do:  



Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach


katalog stron | forum
Powered by phpBB © 2005 phpBB Group