tworzenie stron internetowych kompatybilnych z różnymi przeglądarkami
Posted in wydajność przez WP Engine
Last updated on May 30th, 2019
mimo że większość ludzi korzysta z jednej przeglądarki, masz dziesiątki opcji zarówno dla komputerów stacjonarnych, jak i urządzeń mobilnych. Najlepiej byłoby, gdyby strony internetowe wyświetlały się idealnie niezależnie od używanej przeglądarki. Jednak nie zawsze tak jest, i tu właśnie pojawia się testowanie między przeglądarkami.
dzięki dokładnym testom między przeglądarkami możesz upewnić się, że Twoja witryna wygląda i zachowuje się doskonale we wszystkich popularnych opcjach. W ten sposób użytkownicy będą mieli równie wspaniałe wrażenia, niezależnie od tego, czy używają Chrome, Firefox, opery, czy mniej znanych opcji, takich jak SeaMonkey.
w tym artykule omówimy nieco więcej na temat znaczenia testów między przeglądarkami. Następnie omówimy kilka kroków, które pomogą Ci stworzyć witrynę kompatybilną z różnymi przeglądarkami. Do roboty!
Dlaczego Kompatybilność Między Przeglądarkami Jest Ważna?
większość osób korzysta ze znanych przeglądarek, takich jak Google Chrome, Safari, Firefox i Opera. Jednak dostępnych jest o wiele więcej opcji, niż można sobie wyobrazić. Jest to dobre dla konsumenta, ale problem dla Ciebie polega na tym, że każda przeglądarka jest zbudowana inaczej. Oznacza to, że Twoja strona może działać idealnie na Chrome, ale problemy występują na Firefoksie (dla przykładu).
z naszego doświadczenia wynika, że większość błędów, które zobaczysz w jednej przeglądarce, ale nie w innej, to stosunkowo małe problemy. Jeden konkretny element witryny może nie patrzeć na niego, lub dana funkcja może nie działać poprawnie. Chociaż problemy te mogą być niewielkie, należy je rozwiązać, jeśli chcesz zapewnić to samo doświadczenie wszystkim odwiedzającym Twoją witrynę.
najlepiej zaprojektuj swoją witrynę tak, aby była kompatybilna z różnymi przeglądarkami od podstaw. W ten sposób nie ryzykujesz wyobcowania użytkowników konkretnej przeglądarki. W następnych sekcjach pokażemy Ci, jak to zrobić.
jak utworzyć witrynę kompatybilną z różnymi przeglądarkami
pomysł stworzenia witryny kompatybilnej z różnymi przeglądarkami może wydawać się zniechęcający. Jednak kilka prostych kroków może przejść długą drogę w kierunku zapewnienia, że Twoja witryna działa idealnie w większości przeglądarek. Porozmawiajmy o tym, co to jest!
Krok 1: Ustaw „Doctype” dla plików HTML
gdy przeglądarka ładuje Twoją witrynę, musi dowiedzieć się, jakiej wersji HTML używasz. Jest to ważne, ponieważ różne wersje HTML zawierają różne reguły.
’ doctype ’ jest instrukcją, która mówi przeglądarkom: „Hej, to jest wersja HTML, której będziemy używać!”W ten sposób przeglądarki nie będą musiały zgadywać, co może zmniejszyć liczbę błędów napotkanych przez użytkowników.
na szczęście ten krok jest niezwykle prosty. Wszystko, co musisz zrobić, to dodać następujący fragment kodu do dokumentów HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
jak zauważysz, ten fragment jest dla wersji 4.01 HTML. Jeśli zamiast tego chcesz użyć HTML5, możesz użyć tego kodu:
<!DOCTYPE html>
problem polega na tym, że niektóre przeglądarki nadal nie grają dobrze z HTML5. Pomimo wielu ulepszeń, korzystanie z niego może wpływać na kompatybilność między przeglądarkami, więc musisz rozważyć ten fakt wraz z jego zaletami.
Krok 2: Użyj reguł resetowania CSS
Zwykle CSS jest głównym winowajcą błędów zgodności przeglądarki. To dlatego, że każda przeglądarka ma swój własny zestaw reguł CSS. Inaczej mówiąc, CSS witryny może się różnić w zależności od przeglądarki, z której korzystają odwiedzający.
jednym ze sposobów rozwiązania tego problemu jest użycie „resetu CSS”. Są to zestawy reguł, które możesz dodać do swojej witryny, które ustawiają linię bazową dla sposobu działania CSS w przeglądarkach.
istnieje kilka opcji, jeśli chodzi o resetowanie CSS, ale jedna z naszych ulubionych nazywa się Normalize.css, ze względu na to, jak wszechstronny jest:
możesz pobrać normalizację.plik css z biblioteki GitHub i użyj go jako punktu wyjścia dla CSS witryny. Pomoże Ci to zmaksymalizować kompatybilność między przeglądarkami w Twojej witrynie.
Krok 3: Użyj bibliotek i frameworków kompatybilnych z różnymi przeglądarkami
biblioteki JavaScript i szerokie frameworki, takie jak Foundation i Bootstrap, są obecnie niezwykle popularne. Jeśli masz zamiar użyć takich elementów do zbudowania swojej strony internetowej, możesz zaoszczędzić sobie wiele bólu głowy, korzystając z opcji przyjaznych dla różnych przeglądarek.
niektóre biblioteki i frameworki zostały opracowane od podstaw do pracy z jak największą liczbą przeglądarek. Ogólnie rzecz biorąc, większość popularnych frameworków-w tym dwa, o których wspomnialiśmy-jest zbudowana tak, aby była kompatybilna z jak największą liczbą przeglądarek.
dla bezpieczeństwa należy jednak sprawdzić dokumentację każdej biblioteki lub frameworka, którego zamierzasz użyć. W większości przypadków informacje na temat kompatybilności między przeglądarkami są dość łatwe. Na przykład tutaj znajduje się strona zgodności Fundacji z jej dokumentacją:
trochę badań pomoże Ci zapewnić niesamowite wrażenia dla wszystkich odwiedzających, nie tylko tych, którzy korzystają z konkretnej przeglądarki.
testowanie między przeglądarkami
nawet jeśli dołożyłeś starań, aby stworzyć witrynę kompatybilną z różnymi przeglądarkami, nadal dobrym pomysłem jest sprawdzenie i sprawdzenie, czy wszystko działa tak, jak powinno. Ten proces jest stosunkowo prosty-wystarczy załadować witrynę za pomocą wielu przeglądarek i sprawdzić błędy.
problem polega na tym, że istnieje wiele przeglądarek. Aby pokryć swoje podstawy, zalecamy skupienie się na pięciu najlepszych opcjach w zależności od udziału w rynku, które są:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
możesz zauważyć, że Microsoft Edge nie znalazł się na liście. Jego udział w rynku jest obecnie raczej niewielki, ale nadal dobrą praktyką jest zapewnienie, że Twoja witryna również z nim współpracuje.
oczywiście instalacja pięciu lub sześciu różnych przeglądarek na komputerze może być uciążliwa. Dlatego istnieje wiele usług, które umożliwiają przeprowadzanie testów online między przeglądarkami. To znacznie upraszcza proces, a opłaty są zwykle niewielkie.
nie poświęcaj swojego cyfrowego doświadczenia
nie wszyscy odwiedzający Twoją stronę będą korzystać z tej samej przeglądarki. Oznacza to, że jeśli chcesz mieć pewność, że każdy użytkownik będzie mógł cieszyć się Twoją witryną, musisz przeprowadzić testy między przeglądarkami.
pamiętaj jednak – nawet jeśli Twoja witryna działa idealnie we wszystkich przeglądarkach, nadal musisz użyć najwyższej jakości hosta, jeśli chcesz zapewnić najlepsze możliwe wrażenia cyfrowe. Dzięki WP Engine uzyskujesz niesamowitą wydajność i dostęp do wsparcia na poziomie ekspertów, więc sprawdź nasze plany!