Jakie są najlepsze praktyki dotyczące witryn internetowych z wieloma przeglądarkami? [Zamknięte]

(Chciałbym, żeby to była definitywna społeczność wiki. Sprowadziłem ją z mojej własnej odpowiedzi nato pytanie.)

Określ wszystko

Wiele problemów z różnymi przeglądarkami to: nie określono czegoś, a różne przeglądarki przyjmują różne założenia. W związku z tym:

Zadeklaruj poprawny typ dokumentu

Twój doctype informuje przeglądarkę, jakich reguł użyjesz w swoim kodzie. Jeśli nie określisz, przeglądarka musi odgadnąć, a różne przeglądarki odgadną inaczej.

Z mojego doświadczenia wynika, że ​​„ścisły” dokument powoduje, że IE zachowuje się lepiej (włącza takie rzeczy, jak CSS: selektory najechania na div w IE7).

Ten artykuł daje dobre tło na temat typów dokumentów.

Użyj standardów internetowych

Unikaj znaczników specyficznych dla przeglądarki lub używaj ich tylko wtedy, gdy ich awaria w innych przeglądarkach nie będzie znacząca dla korzystania z witryny.

Sprawdź poprawność kodu HTML i CSS

Nie musisz mieć wszystkiego perfekcyjnego, ale sprawdzanie poprawności jest dobrym sprzężeniem zwrotnym. Tak jakJeff powiedział:

Znajomość zasad i granic pomaga zdefiniować to, co robisz, i daje uzasadnioną amunicję do wyrażania zgody lub nie zgadzania się. Możesz dokonać świadomego wyboru zamiast losowego „Po prostu to robię i to działa”.

Wyobraź sobie, że otworzyłeś znacznik akapitu i nigdy go nie zamknąłeś. Jeśli następnie otworzysz znacznik listy, czy miałeś na myśli, że jest wewnątrz akapitu, czy nie? Walidacja pomoże Ci to złapać, zamknąć tag i wyeliminować dwuznaczność.

Zastanów się nad resetem CSS

Różne przeglądarki przyjmują różne podstawowe zasady CSS. Możesz pomóc im wszystkim, aby zachowali się tak samo, wyraźnie wygładzając różnice. Eric Meyer, który napisałCSS: The Definitive Guide, używaten reset. Innym popularnym wyborem jestYUI Resetowanie CSS.

Użyj biblioteki JavaScript do interakcji DOM

Ilekroć twój Javascript musi pracować z elementami na twojej stronie, najlepiej użyć biblioteki takiej jak jQuery, Prototype lub MooTools. Te biblioteki są używane przez wiele tysięcy programistów i biorą większość niespójności między interpretacją Javascript przez przeglądarki, radzą sobie z nimi wewnętrznie i dają spójny zestaw poleceń, które działają. Próba samodzielnego znalezienia i obejścia wszystkich tych niespójności jest stratą czasu i może powodować błędy.

Testuj w wielu przeglądarkach, radzę sobie z IE na końcu

Testuj w wielu przeglądarkach w miarę upływu czasu. Ogólnie rzecz biorąc, przekonasz się, że przeglądarki inne niż IE zachowują się podobnie, a IE jest przypadkiem specjalnym - zwłaszcza jeśli zastosujesz się do powyższych wskazówek. W razie potrzeby możesz dodać hacki IE w oddzielnym arkuszu stylów i załadować je tylko dla użytkowników IE.

Quirksmode.com jest dobrym miejscem do polowania na losowe różnice w przeglądarce.

Browsershots.org może pomóc pokazać, jak Twoja strona będzie wyświetlana w asortymencie przeglądarek i systemów operacyjnych.

Niepowodzenie z wdziękiem

Żadna strona nie będzie wyglądać idealnie w każdej przeglądarce, która istnieje. Jeśli użytkownik nie ma Flasha, Javascript lub zaawansowanego CSS itp., Chcesz, aby Twoja witryna była użyteczna. Zaprojektuj z myślą o tym:

Sprawdź nagi kod HTML

Spróbuj załadować witrynę za pomocą nagiego kodu HTML - bez stylów, bez skryptów. Czy dostępne są opcje menu? Czy treść pierwotna poprzedza treść drugorzędną? Czy strona jest użyteczna, nawet jeśli jest brzydka?

Rozważ progresywne ulepszenie sterowane testami

Opisane wTen artykuł, ta technika używa javascript do sprawdzenia, czy przeglądarka ma daną zdolność, taką jak obsługa danej właściwości CSS, przed użyciem jej na stronie. W przeciwieństwie do wąchania przeglądarki, ponieważ testuje funkcje, a nie konkretną przeglądarkę.

questionAnswers(7)

yourAnswerToTheQuestion