| Hacki, czyli jak obejść niedoskonałości przeglądarek |
|
| Wpisany przez Patryk yarpo Jar | |||
| piątek, 18 września 2009 02:52 | |||
Hacki, czyli jak obejść niedoskonałości przeglądarekJak z pewnością spostrzegłeś podczas kursu wielokrotnie pisałem, żetego nie obsługuje jedna przeglądarka, a tego inna. Najczęściej jednak problemy stwarza MSIE, dlatego głównie na nim skupimy się podczas tej lekcji. Hacki najczęściej wykorzystują dziurę w jakiejś przeglądarce. Zobacz przykłady: Na początek ukrywanie fragmentów kodu CSS dla MSIE:
/* w pliku css */
table {
width: 100px;
voice-family: "\"}\""; // 1
voice-family: inherit; // 2
width: 200px; } // 3
Opis:
/* 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. Ja osobiście rzadko używam tego hacka, gdyż częsciej zdarza mi się sytuacja, kiedy to MSIE wymaga więcej kodu niż nowoczesne przeglądarki. A teraz kolejny ciekawy efekt:
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" I jeszcze jeden hack, którego zadaniem jest ukrywanie kawałków kodu przed MSIE.
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 MSIE6.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 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
..
<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" Ten sposóh jest używany przez mnie najczęściej, ponieważ daje mi to, czego ja najbardziej chcę - opis właściwości tylko dla MSIE. Teraz wróc do lekcji "Pozycjonowanie - gotowa strona" i dodaj tam odpowiednie linie kodu [HTML i CSS], aby sprawić, by strona w Operze/FF była "elestyczna", a w MSIE prezentowała się nieźle. Osobny arkusz stylów, ale za pomocą JS
...
<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: 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]. Tags:
|