Jak upewnić się, że CSS działa dobrze we wszystkich przeglądarkach bez testu wzroku w każdej przeglądarce?

Question

Tworzenie CSS dla jednej strony internetowej do obsługi wszystkich przeglądarek w innej wersji jest naprawdę trudne. W szczególności musi mieć skonfigurowane różne przeglądarki. Zastanawiam się, czy można przetestować CSS i upewnić się, że działa on we wszystkich przeglądarkach bez otwierania każdej przeglądarki i ręcznie sprawdzać układ? lub Czy istnieje sposób szybkiego lub standardowego to zrobić?

Answer 1

1. Use a CSS Reset stylesheet
2. Use good CSS frameworks (plan, boilerplate itp)
3. This is not possible.

Answer 2

Tam naprawdę nie jest to standardowy sposób to zrobić - to jest po prostu natura bestii; jednak Adobe pracuje obecnie nad BrowserLabs, które powinno pomóc rozwiązać ten dokładny problem.

Answer 3

kilka ważnych rzeczy, aby zacząć grę na swojej drodze:

• Use a DOCTYPE lub będziesz rzucać przeglądarek w trybie quirks.
• Reset your CSS dzięki czemu można zastosować style ty chcesz elementów.
• Use a Javascript library - popularny wśród tych części jest jQuery i jest tym, który osobiście polecam. Jednak nie ma znaczenia, z którym z nich korzystasz tak długo, jak go używasz. Wielu inteligentnych facetów poświęciło wiele godzin na zajmowanie się wszystkimi niezgodnościami między przeglądarkami. Próba zrobienia wielu dynamicznych rzeczy na twojej stronie z czystym JavaScriptem graniczy z masochistycznymi.

Gdy zacząłem robić te rzeczy, moja strona działa tak samo w różnych przeglądarkach. Niezależnie od tego, czy chcesz je wszystkie sprawdzić, musisz mieć . Po prostu nie da się tego obejść.

Answer 4

Byłoby miło, gdyby było zautomatyzowane narzędzie do tego. Niestety, jedynym sposobem na stwierdzenie, czy coś jest poprawne wizualnie, jest patrzenie na to.

Istnieją usługi (takie jak BrowserShots), które odwiedzą Twoją witrynę w różnych przeglądarkach i wykonają zrzut ekranu, a następnie pozwolą Ci pobrać plik zawierający wszystkie wizualizacje Twojej witryny, ale wciąż musisz zweryfikować je ręcznie.

Komputery nie bardzo dobrze mówią, czy coś wygląda "ładnie" automatycznie, czy też wszystkie przeglądarki zawsze robią dokładnie to, co masz na myśli (sprawiają, że rzeczy są ładne).

Jeśli chcesz przetestować JavaScript, możesz wypróbować pakiet testowy o nazwie Selenium.

W przyszłości można zajrzeć do projektu rozpoczętego przez twórcę jQuery pod nazwą Test Swarm, który wygląda obiecująco, ale wciąż jest w fazie testowania i może nie zostać wydany z powodu kosztów związanych z przepustowością. Umożliwiłoby to przetestowanie kodu JavaScript w każdej głównej przeglądarce na każdej dużej platformie przy użyciu systemu rozproszonego. Nadal jest to jednak marzeniem ze względu na pewne komplikacje związane z takim systemem.

Answer 5

Nie możesz naprawdę zaokrąglić ludzkich testów interfejsu użytkownika.Zgadzam się z innymi, że powinieneś być zgodny ze standardami i zresetować css.

Rzadko otrzymujesz HTML + CSS, aby renderować dokładnie to samo we wszystkich przeglądarkach i na wszystkich platformach, wyłącznie ze względu na specyfikę poszczególnych przeglądarek. Ale tylko dlatego, że występują niewielkie różnice w renderowaniu, nie musi oznaczać, że coś jest nie tak, jest to dobry powód dla ludzkich testów interfejsu użytkownika.

Answer 6

1. Upewnij się, że zadeklarowałeś typ dokumentu.
2. Użyj resetowania css.
3. Unikaj używania szerokości i wypełnienia (lewej i prawej) na tym samym elemencie, gdzie możesz.
4. oczyścić kod w HTML i css.
5. Nie używaj marginesu w lewo i w prawo w przypadku elementów pływających i używaj nadrzędnego przelewu: ukryty, wyświetlacz: wbudowany i wzrost: 1%, jeśli rodzic nie ma już wzrostu.
6. Nie podawaj elementu z marginesem na górze ani z marginesem, ale tylko margines-górny lub
   margin-bottom. Ponieważ marginesy sąsiednich elementów zapadają się jeden na drugi, co sprawia, że ​​pozycjonowanie jest nieco nieprzewidywalne dla nowicjuszy.
7. Nie należy polegać na indeksie Z, chyba że wymaga tego skrypt.

<!--[if lt IE 9]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> 
<![endif]--> 
<script type="text/javascript" src="js/html5shiv.js" ></script> 
<script type="text/javascript" src="js/html5.js" ></script> 

można pobrać shiv.js tworzą to browser compact

przeglądarki narzędzia do testowania Kompatybilność:

http://crossbrowsertesting.com/

http://browsershots.org/

http://www.browsercam.com/

http://caniuse.com

http://www.findmebyip.com/litmus/

Answer 7

Proponuję za pomocą jednego z gotowym do użytku Front-End ramami rozwoju jak Twitter Bootstrap lub Foundation. Oba są dobrze udokumentowane i przetestowane, więc zmniejszy to ból testowania.

Zawierają one:

• CSS Reset/Normalizacja

• Gotowy do użycia składników (przyciski, Formularz Elementy dietetyczne ... itd).

• Układ siatki (który jest idealnym sposobem na uporządkowanie rzeczy na twojej stronie internetowej).

• JavaScript.

Oczywiście trzeba będzie zrobić własne badania, jak dostosować te ramy, w uzupełnieniu do wszystkich narzędzi wymienionych powyżej, proponuję IE-Tester, naprawdę niesamowite narzędzie do debugowania dla IE (co jest źródłem bólu) .

Wreszcie, w trosce o perfekcję, lepiej przetestować swoją stronę internetową (jeśli to możliwe, jak to tylko możliwe), krzyżując się ze wszystkimi przeglądarkami i urządzeniami, szczególnie jeśli wykonujesz responsywny projekt.

Nie masz wyboru, musisz to zrobić! Właśnie dlatego wynagrodzenie projektantów stron internetowych jest zwykle wysokie x-)