Co jest lepsze: CSS hacki lub wykrywanie przeglądarki?
Często kiedy rozglądam się po Internecie, stwierdzam, że ludzie zazwyczaj używają hacków CSS, aby ich strona wyglądała tak samo we wszystkich przeglądarkach. Osobiście uważam, że jest to dość czasochłonne, aby znaleźć wszystkie te hacki i przetestować je; każda zmiana, którą robisz, musisz przetestować w przeglądarkach 4+, Aby upewnić się, że nie złamał niczego innego.
Około rok temu, rozejrzałem się po Internecie, czego używają inne główne witryny (Yahoo, Google, BBC, itp.) i stwierdziłem, że większość z nich wykonują jakąś formę wykrywania przeglądarki (JS, HTML if, oparte na serwerze). Ja też zacząłem to robić. Na prawie wszystkich stronach, nad którymi ostatnio pracowałem, używam jQuery, więc używam wbudowanego wykrywania przeglądarki.
Czy jest jakiś powód, dla którego używasz lub nie używasz żadnego z nich?
15 answers
Problem polega na tym, że masz tylko jedną szansę na css (ponieważ jest to prawie statyczna zawartość u klienta)... nie można (łatwo) dostosować go do potrzeb klienta w locie - więc w tych trudnych sprawach (a jest ich za dużo) wykrywanie jest niestety najlepszą drogą. Nie widzę, żeby to się szybko zmieniło.
Z javascript, często można uniknąć wiele z tego bólu poprzez biblioteki jak (jak państwo) jQuery-i sprawdzanie funkcjonalność wsparcie zamiast identyfikować konkretną przeglądarkę (najczęściej). Są pewne przypadki, które musisz dokładnie znać (na przykład model pudełkowy).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 09:21:51
Istnieje trzecia opcja:
Zminimalizuj lub wyeliminuj potrzebę wykrywania przeglądarki i hakowania CSS.
Staram się używać rzeczy takich jak wtyczki jQuery, które dbają o wszelkie różnice w przeglądarce dla ciebie(dla widgetów i tym podobnych). To nie zajmuje się wszystkim, ale robi wiele i deleguje wysiłek wspierania wielu przeglądarek komuś, kto wydał i wyda na to znacznie więcej wysiłku,niż możesz sobie pozwolić lub chcesz.
Po tym podążam te książeczki:
- Użyj tego, co nazywam minimal CSS , co oznacza, że używaj tylko funkcji, które są szeroko obsługiwane;
- użyj tabel do skomplikowanego układu w razie potrzeby. Może Ci się to nie podoba, ale szczerze mówiąc, aby robić rzeczy takie jak układ side-by-side, tabele będą działać na przeglądarkach cofając się o dekadę i będzie to o wiele mniej wysiłku niż uzyskanie div do pracy z kombinacjami absolutnego pozycjonowania, pływających i tym podobnych; {]}
- zmusić IE6 do trybu ścisłego, a nie dziwacznego dodając DOCTYPE. Nie mogę podkreślać, jak bardzo ułatwi to ci życie, ale o dziwo wiele osób nadal tego nie robi; {]}
- Minimalizuj problemy modelu box używając poprawnego DOCTYPE lub używając zagnieżdżonych elementów blokowych, a nie innych hacków modelu box ; oraz
- w razie potrzeby Dołącz dodatkowe pliki CSS dla odpowiednich przeglądarek. Zazwyczaj robię to na serwerze, a nie na kliencie z wygenerowanymi stronami (co, powiedzmy szczerze, jest większość ich). Wiele projektów, nad którymi pracowałem, miało IEfix.pliki css.
Potem dzielę przeglądarki na poziomy:
Poziom 1:
- Firefox 3;
- IE7.
Moja Strona musi nad nimi pracować.
Poziom 2:
- Firefox 2;
- Safari;
- Opera;
- Chrome.
Moja Strona powinna nad nimi pracować. Może to urazić niektórych ludzi, ale szczerze mówiąc udział w rynku tych przeglądarek jest tak nisko, że po prostu nie są tak ważne jak Firefox 3 czy IE7.
Poziom 3:
- IE6;
- inni.
Dołoży się minimalnego wysiłku, aby pracować nad nimi, chyba że jest to, na przykład, wymóg firmy. IE6 jest koszmarny, ale to udział w rynku w grudniu wyniósł 20% i gwałtownie spadł. Dodatkowo istnieją uzasadnione obawy dotyczące bezpieczeństwa (na przykład na stronach finansowych) zniechęcające lub nawet uniemożliwiające korzystanie z IE6, takie jak Paypal zablokował IE6 I Google każe użytkownikom porzucić IE6.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 09:47:23
Tak. Wykrywanie przeglądarki po stronie klienta przerywa, jeśli JavaScript jest wyłączony i może nie działać poprawnie w przyszłych wersjach przeglądarki. Ostatni powód jest również prawdziwy dla CSS hacki. Wykrywanie przeglądarki po stronie serwera przerywa, jeśli użytkownik wyraźnie spróbuje ją złamać, ale nadal może być realną alternatywą.Jest jakiś powód, dla którego używasz lub nie używasz żadnego z nich?
Co polecam:
Upewnij się, że Twój kod działa w przeglądarkach zgodnych ze standardem - ie rozwijać w jednym lub dwóch z nich i sprawdzić browsershots.org potem. Najprawdopodobniej będzie można zaimplementować pożądany wynik we wszystkich z nich za pomocą jednego arkusza stylów.
/ Align = "left" / Jeśli jest tylko kilka problemów, możesz przejść z hack CSS. W przeciwnym razie użyj komentarzy warunkowych.Edit:
Jeśli mam również obsługiwać ancient browser ' s, ogólnie idę drogą wdzięku degradacji: po prostu pozwolę im pokazać czysty html z podstawowy arkusz stylów (rozmiary czcionek, kolory,...). Wszystkie fantazyjne rzeczy będą ukryte za pomocą @import reguły.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 10:32:19
Ogólnie lubię mieć arkusz stylów dla przeglądarek zgodnych ze standardami, takich jak Firefox i Safari, a następnie używać komentarzy warunkowych do wykrywania Internet Explorera i serwowania mu dodatkowego pliku CSS zawierającego poprawki i przesłonięcia specyficzne dla IE.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 10:35:29
W ciągu 6 lat pisania HTML i CSS na życie, zdecydowana większość moich problemów CSS pochodzą z Internet Explorer.
Jak zaznaczono w innych odpowiedziach, możesz użyć komentarzy warunkowych, aby podać dodatkowe arkusze stylów do IE (lub dodać klasę do <body>LUB <html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the User-agent string`, mają one gwarancję działania.
Jeśli chodzi o inne niż IE problemy z CSS, nigdy nie znalazłem takiego, który byłby wart wykrycia przez przeglądarkę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-26 08:38:44
Dobrze hacki są szybsze dla przeglądarki, ale wykrywanie przeglądarki daje lepszą czytelność w CSS, jeśli dobrze go skonstruować. Jeśli możesz dokonać wykrywania przeglądarki i jednocześnie możesz udostępniać CSS między przeglądarkami i mieć tylko różne css w oddzielnych plikach lub cokolwiek innego, wtedy użyłbym wykrywania przeglądarki - ponieważ jest to coś, co początkujący może zrozumieć, gdzie hacki CSS są trudne do zrozumienia, jeśli ich nie znasz
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 09:22:48
Wolę używać wykrywania przeglądarki i umieszczać niezależny od przeglądarki CSS we własnym pliku.
Najlepszym rozwiązaniem jest jednak znalezienie CSS, który jest domyślnie kompatybilny ze sobą i po prostu go użyj.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 09:23:44
Staram się też nie używać. W wielu przypadkach problemów, które mają IE można uniknąć, upraszczając nieco strukturę znaczników.
Pomaga również, jeśli używasz porządnego resetu CSS, takiego jak Erica Meyera .
Jestem również powoli, ale na pewno spada wsparcie dla IE6 w zasadzie, zwłaszcza biorąc pod uwagę najnowsze problemy z bezpieczeństwem IE6 i IE7 - nie będziemy zmieniać nawyków przeglądania ludzi i preferencji przeglądarki, jeśli będziemy nadal wspierać gówniany przeglądarki.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 14:42:13
Uważnie rozważ wszystko powyżej, szczególnie wskazówki dotyczące doctype. Jeśli musisz zastosować hack CSS, dla konkretnej przeglądarki wiedz, że hacki są prawie zawsze do uniknięcia. Szczególnie dla suchej strony statycznej.
Mówienie z ograniczonego doświadczenia w rozwijaniu tych rzeczy... Zakładam, że chcesz zrobić fajną stronę, która miga bez bałaganu adoobi:
- kodować stronę, która wygląda rozsądnie w tych przeglądarkach, z których wszystkie można przetestować na jednym maszyna:
Op3ra 9.6, s @ fari 3, Chr0me 1, 1nternet Xpl0rer 6, 7 & 8, Firefux 1.5
Użyj reguły @ import css, aby porzucić css w starożytnych przeglądarkach i pozwolić im jeść ciasto.
Użyj kombinacji wykrywania obiektów i sniffingu przeglądarki, aby znaleźć i wyeliminować problem przeglądarek(wszystkie wersje poniżej celu powyżej). Również złapać starożytnych przeglądarek wiesz, że nie są na bieżąco (właściwości css można przetestować i porównać do znanej wartości) tylko w jeśli przekroczą sniffer, użyj również komentarzy warunkowych, aby wykopać 1E5, karmiąc go anty-css, aby go uspokoić po drodze, podobnie jak dla ie6, z wyjątkiem trzymania go w jQu3ry, jeśli w ogóle jest to możliwe.
Użyj dynamicznego elementu, aby załadować libray jQu3ry do dozwolonych przeglądarek (każda, która nie zawiodła Twoich dokładnych testów). Tzn. nie importujemy nawet biblioteki, gdy wiemy, że nie zadziała / wpuszczamy wszystkich innych.
Użyj jQu3ry, aby rozwiązać wszelkie problemy w obsługiwanych przeglądarkach, z których większość wyjdzie na jaw dopiero wtedy, gdy strony staną się dynamiczne. Użyj jQu3ry, aby ulepszyć układ i dodać interfejs itp...
Rozwiń to za pomocą oświadczeń medialnych i możesz przetestować wartość css unikalną dla tych urządzeń, teraz będziesz miał więcej wiedzy do wykorzystania w dostosowywaniu układu (tj. zniszcz te kolumny i zmniejsz te obrazy). Wyłącz animacje i tak dalej.
Zachowaj jego dostępność, zawsze używając etykiet tekstowych i kilka sztuczek pozycjonowania, aby zniknęły, jeśli musisz Panie krzykliwy gość menu... po prostu nie polegaj na obrazach lub Javascript, aby przeglądać swoje witryny.
Łatwo jest zablokować wszystko poniżej Netsc @ pe 4. Dając im tylko podstawową sieć, w sposób, w jaki pierwotnie miała być. Nie określaj nawet tła, koloru, czcionki lub czegokolwiek dla nich. Domyślne ustawienia przeglądarki powinny działać poprawnie. Informacje będą dostępne.
Faktycznie, przenoszę to wszystkie" dostępne " przeglądarki identyfikują się jako N$4, dzięki czemu możemy łatwo usunąć je z dynamicznej prezentacji i powstrzymać się od wkręcania niepełnosprawnych.
Niestety była dobrym statkiem, ale nawet dobry statek do straszenia wiecznie leżących z M$ musi umrzeć. Nie bój się, bo mamy teraz jeszcze lepszą;)
Tylko moje 2 centy, stosuj ostrożnie.
Co jest nie tak z wykrywaniem strony serwera przeglądarki? Wydaje się bardzo skuteczny i niezawodny(poza tym, że użytkownik zmienia swój ciąg user-agent). Możesz użyć PHP, aby wybrać arkusz stylów dla strony lub dynamicznie wygenerować go dla każdego żądania - nie jestem pewien, czy inne języki pozwalają na wyjście bezpośrednio do pliku i pozwalają ustawić nagłówki ręcznie, ale nie mogę sobie wyobrazić, że nie pozwalają zidentyfikować agenta użytkownika, więc jedna z tych opcji jest prawdopodobnie opłacalna dla każdego serwera-po stronie środowisko.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-29 07:03:44
Hacki zawsze dodadzą ci pracy i praca powinna być zoptymalizowana
Najpierw dodajesz hacki, a następnie zaczynasz martwić się o to, jak zachowują się na różnych przeglądarkach i różnych maszynach.
Zamiast tego możesz polegać na rozszerzeniach css specyficznych dla danego dostawcy http://reference.sitepoint.com/css/vendorspecific
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-29 07:36:37
[moje podejście] [1] używanie klasy PHP do wykrywania systemu operacyjnego, przeglądarki i wersji przeglądarki.
[1]: moje podejście przy użyciu klasy PHP do wykrywania systemu operacyjnego, przeglądarki i wersji przeglądarki http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach/
Osobiście uważam, że jest to dość czasochłonne, aby znaleźć wszystkie te hacki i przetestować je; każda zmiana, którą dokonujesz, musisz przetestować w przeglądarkach 4+, Aby upewnić się, że nie złamał niczego innego.
Nie powinieneś testować 'właściwych' hacków CSS w każdej przeglądarce.
Chodzi o to, że piszesz kod zgodny ze standardami, a następnie dodajesz konkretne hacki, aby kierować tylko jedną przeglądarkę (lub silnik renderujący), która popełnia błąd. Na przykład zapis " * html #mielement " aby celować w wyjątek tylko dla IE6: żadna inna przeglądarka nigdy nie będzie dotknięta przez tego hacka, więc nie ma potrzeby, aby testować go wyczerpująco. To może pójść źle, jeśli jakaś nowa niejasna przeglądarka pojawiła się i popełnił dokładnie ten sam błąd co IE6, co jest bardzo mało prawdopodobne, nie twoja wina, i coś, czego można się spodziewać, aby szybko naprawić.
Są rzeczy, które nazywają siebie CSS hacki, ale które używają nieprawidłowych konstrukcji, takich jak hack" _propertyname". To może złamać w różnych przeglądarkach, ponieważ gdy używasz nieprawidłowego kodu, każda przeglądarka może zinterpretować go inaczej. Nie używaj tego.
Szczerze mówiąc, w każdym razie nie jest to problem, który kiedyś był, głównie dlatego, że IE5 nie żyje. Jeśli używasz doctype trybu standardowego i piszesz do standardów, będzie on działał głównie w bieżącej rundzie przeglądarek. Jedynym prawdziwym pozostałym problemem jest IE6, który możesz kierować za pomocą "* html"; jest mało prawdopodobne, że będziesz potrzebował znacznie więcej w drodze hacków CSS niż to. The days of The Box Model Hack są, na szczęście, skończone.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 14:27:00
Słuchaj swojego kodu! Kent Beck tak mówi. A w Wing-Tsun mówią: Bądź jak woda, która się wygina! Czy coś.
Oto Hack CSS, aby IE5 zrozumiał html5: http://blog.whatwg.org/styling-ie-noscript .
A tu to samo używając JS: http://blog.whatwg.org/supporting-new-elements-in-ie .
Porównaj 5 stron wyjaśnienia włamań z 5 linijkami dobrze zrozumiałego kodu. Więc użyj JS.
Rzeczy mają swoje zalety i ich minusy. I twoje zrozumienie materii i elegancja rzeczywistego kodu prowadzą drogę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-18 22:41:39
CSS hacki nie są sposobem, aby przejść, ponieważ przeglądarki są aktualizowane cały czas, a nowe aktualizacje mogą złamać hacki, podczas gdy z wykrywaniem przeglądarki Javascript, można dokładnie potwierdzić możliwości przeglądarki. Jednak inną opcją jest użycie minimalnego CSS, aby upewnić się, że wszystko działa we wszystkich sytuacjach. JQuery i inne biblioteki javascript, które są dla interfejsu użytkownika, mają wbudowane wykrywanie możliwości przeglądarek, więc powinieneś je sprawdzić.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-29 06:54:05