10 wskazówek, na które należy zwrócić uwagę podczas tworzenia witryny w różnych przeglądarkach

4

Teoretycznie stworzenie strony internetowej jest łatwe. Główne aspekty obejmują napisanie kodu HTML, przetestowanie go w przeglądarce internetowej i przesłanie. HTML i CSS to standardy, co oznacza, że ​​strona internetowa działająca poprawnie w określonej przeglądarce może nie wyświetlać się poprawnie w innych przeglądarkach.

Oczywiście w praktyce sprawy nie okazują się takie proste. Istnieje wiele przeglądarek, z których każda wyświetla kod HTML i CSS w inny sposób.

Aby strony internetowe działały jednakowo we wszystkich przeglądarkach, projektanci stron internetowych powinni ćwiczyć kodowanie w różnych przeglądarkach. W tym poście omówimy 10 wypróbowanych i przetestowanych sztuczek, które możesz zastosować, aby uzyskać bezbłędną i przystosowaną do różnych przeglądarek witrynę internetową.

Krótkie wprowadzenie do CSS

CSS lub Cascading Style Sheets to zestaw instrukcji formatowania stron internetowych, który kontroluje wygląd stron internetowych. Niektóre przeglądarki kompatybilne z CSS to:

  • TJ
  • Brzeg
  • Firefoxa
  • Chrom
  • Safari
  • Opera
  • Safari na iOS
  • Opera
  • Przeglądarka Androida
  • Chrome na Androida

Ale zanim dojdziesz do wniosku, że zaoszczędzi ci to dużo czasu, powinieneś zrozumieć, że większość przeglądarek internetowych nie obsługuje w pełni wszystkich jego funkcji.

CSS działa jako komponent przedstawiający, który charakteryzuje komponenty strony internetowej. Jednocześnie kaskadowe arkusze stylów kontrolują wygląd różnych stron w tym samym czasie.

Chociaż nie ma tajemnicy, jak stworzyć idealną witrynę kompatybilną z różnymi przeglądarkami, która zapewnia efektowną estetykę, o której marzysz, istnieją pewne aspekty, o które można zadbać, aby zwiększyć swoje szanse. Oto dziesięć łatwych do naśladowania, ale skutecznych wskazówek dotyczących kodowania witryny internetowej obsługującej różne przeglądarki.

1 Im prościej, tym lepiej

Im bardziej złożony staje się HTML i CSS, tym bardziej prawdopodobne jest, że będą one podatne na błędy i błędy. Staraj się zachować elementarny układ na etapie projektowania, czyli: nagłówek, niektóre kolumny i stopkę. Jeśli twój projekt ma wiele pól paska bocznego, w miarę postępu procesu wszystko będzie gorączkowe.

Unikaj używania wielu zagnieżdżonych elementów i integruj tylko wymagane elementy. Aby utworzyć menu, użyj ul i li zamiast tabeli lub serii p elementów.

2 Zweryfikuj swój kod HTML, CSS i RSS

Nic nie irytuje projektanta bardziej niż staranne stylizowanie strony internetowej, a kiedy przychodzi czas na jej przetestowanie, wciąż pojawia się nieznany błąd. W takich sytuacjach projektant powinien zachować nerwy i zacząć od walidacji znaczników i arkuszy stylów.

W Internecie dostępnych jest wiele bezpłatnych i płatnych narzędzi, które pozwalają sprawdzić, czy Twoje znaczniki HTML i CSS są prawidłowe. Z pomocą tych narzędzi możesz mieć pewność, że znaczniki są doskonałe, a strony internetowe wyświetlają zawartość tak, jak chcesz.

Podpalacz

Firebug to wszystko w jednym debugerze i edytorze. Pozwala programistom pracować nad znacznikami HTML, JavaScript i CSS. Możesz monitorować znaczniki w czasie rzeczywistym, zaznaczać je i usuwać.

Walidator HTML

Podczas sprawdzania poprawności źródła strony zgłaszane są błędy i błędy. A jeśli nie możesz dowiedzieć się, co jest nie tak, narzędzie poda Ci kilka sugestii.

Walidator.w3.org

Musisz przesłać plik, który chcesz zweryfikować. Walidator pokaże wyniki w różnych formatach, takich jak:

  • z zaleceniami
  • jako zarys
układanki.w3.org

Narzędzie sprawdza znaczniki pod kątem potencjalnych błędów i błędów. Możesz ustawić wiele profili CSS, wybrać określony nośnik dla arkusza stylów i kontrolować informacje w raporcie.

Relaxed.vse.cz

To narzędzie nie korzysta z reguł W3C do sprawdzania poprawności, ale opiera się na wbudowanych protokołach niestandardowych. Możesz wybrać wersję HTML, której chcesz użyć, czy chcesz zobaczyć kod źródłowy i wiele innych opcji.

3 Nie pracuj z trybem dziwactw przeglądarki

Niektóre przeglądarki internetowe mają tryb dziwactw. Pod tym względem przeglądarka konkuruje ze swoimi wcześniejszymi wersjami, które często są pełne błędów. Chociaż umożliwia to kompatybilność starszej witryny z dzisiejszymi przeglądarkami internetowymi, staje się nie lada zadaniem, jeśli szukasz ustandaryzowanych stron internetowych. Dzieje się tak, ponieważ w trybie dziwactw strony internetowe nie są wyświetlane w znormalizowany sposób, ale na swój własny, unikalny sposób.

Domyślnie przeglądarka internetowa przełącza się w tryb dziwactwa, jeśli nie dołączysz deklaracji typu dokumentu lub DOCTYPE. Dlatego zawsze należy pamiętać o dodaniu poprawnego DOCTYPE na końcu strony internetowej.

4 Przećwicz zasady resetowania CSS

Każda przeglądarka internetowa ma własne wartości domyślne dla pewnych aspektów, takich jak wysokość i szerokość linii. Te wartości domyślne często kolidują z niestandardowymi regułami CSS i zniekształcają ogólny wygląd stron internetowych.

Aby uniknąć dylematu dostosowywania każdej napisanej reguły CSS, możesz przeprowadzić resetowanie na początku pliku CSS. Po dodaniu tych reguł do arkusza stylów możesz mieć pewność, że pracujesz z tego samego punktu we wszystkich przeglądarkach.

5 Korzystaj z Firefoksa

Ogólnie rzecz biorąc, programiści testują strony internetowe jednocześnie w jednej przeglądarce. Następnie przechodzą do innych przeglądarek i kontynuują wprowadzanie niezbędnych zmian, przechodząc z jednej przeglądarki do drugiej. Jest to idealne podejście zamiast sprawdzania poprawności witryny we wszystkich przeglądarkach za jednym razem.

Aby utworzyć swoją witrynę, Firefox jest najbardziej preferowaną przeglądarką, ponieważ ułatwia naprawianie wszelkich problemów ze zgodnością w porównaniu z innymi przeglądarkami. Firefox zawiera mnóstwo dodatków, co czyni go bardzo przyjaznym dla programistów. Jeśli strony internetowe są czyste w przeglądarce Firefox, możesz mieć pewność, że będą działać dobrze w innych przeglądarkach.

6 Testowanie

Dzisiejsze przeglądarki internetowe mają dziwactwa związane z renderowaniem, więc testowanie znaczników na każdej z nich staje się obowiązkiem programisty. Oto lista głównych przeglądarek internetowych:

  • Internet Explorera
  • Firefoxa
  • Safari
  • Opera (44.0.2510.1218)
  • Microsoft Edge
  • przeglądarka UC

W ramach szybkiego podejścia możesz skorzystać z usługi testowania online. Istnieje wiele stron internetowych, takich jak Browsershots, które robią zrzuty ekranu Twojej witryny i pokazują, jak będą wyglądać w różnych systemach operacyjnych i przeglądarkach internetowych. Te zrzuty ekranu są wysyłane pocztą elektroniczną lub po prostu udostępniane do pobrania. Niektóre narzędzia są płatne, ale z pewnością informują Cię z wyprzedzeniem o problemach ze zgodnością, jakie mogą napotkać strony internetowe.

Sztuczki CSS na nic się nie zdadzą, jeśli nie możesz ich przetestować w wiodących przeglądarkach internetowych. Oto kilka przydatnych narzędzi do uwierzytelniania zgodności znaczników HTML i CSS w różnych przeglądarkach:

Dziwactwo

Jest to łatwy, ale skuteczny sposób na polowanie na usterki w różnych przeglądarkach. Quirksmode interpretuje CSS i wyświetla wszystkie możliwe problemy.

Zrzuty przeglądarki

Narzędzie Browsershots wykonuje zrzuty ekranu stron internetowych i pokazuje, jak Twoja witryna będzie wyświetlana w różnych przeglądarkach internetowych i systemach operacyjnych.

Tester IE

Jest to niezawodna aplikacja internetowa, która umożliwia analizę wyglądu stron internetowych w różnych wersjach przeglądarki Internet Explorer. Narzędzie testuje szablon na różnych wersjach przeglądarek i systemów operacyjnych i wyświetla wyniki w interfejsie podobnym do Ms Word.

7 Użyj komentarzy warunkowych

Są chwile, kiedy dajesz z siebie wszystko, ale nadal nie możesz uzyskać pożądanych wyników w niektórych przeglądarkach, zwłaszcza w Internet Explorerze. Tutaj potrzebujesz niezawodnych i przetestowanych, aby były prawdziwymi hackami.

Łatwą alternatywą dla tego jest dołączenie znaczników IE only do komentarzy. Dzięki tej prostej sztuczce możesz udostępnić dodatkowy kod HTML lub JavaScript tylko dla IE.

8 Spraw, aby IE6 był zgodny z formatem PNG

PNG są cudowne. Obraz może mieć ponad 250 stopni przezroczystości. Aby tworzyć efekty wizualne zoptymalizowane pod kątem siatkówki oka, możesz pochwalić się swoimi umiejętnościami projektowymi, takimi jak dodawanie gładkich ramek i niestandardowe tła.

Ale Internet Explorer nie jest w stanie skutecznie wyświetlać przezroczystych plików PNG i pokazywać faul boxy tam, gdzie powinny być przezroczyste. Przy odrobinie optymalizacji możesz sprawić, by pliki PNG działały płynnie w IE6. Nie będzie to wymagało wprowadzania większych poprawek w CSS.

Możesz użyć IE PNG Fix do tego samego.

9 Dodaj rozwiązania zastępcze

Większość przeglądarek internetowych obsługuje Flash i JavaScript. Możliwe jest skorzystanie z rozwiązań awaryjnych w przypadku, gdy przeglądarka internetowa odwiedzającego nie obsługuje takich funkcji.

Na przykład w przypadku Safari na iPhonie menu nawigacyjne Flash stają się bezużyteczne, ponieważ przeglądarka nie obsługuje Flasha.

Oto szybka ściągawka, dzięki której zaoszczędzisz czas na eksperymentowaniu z różnymi plikami multimedialnymi:

  • Obrazy: Do każdego tagu img dodaj atrybut alt opisujący obraz.
  • Filmy Flash: unikaj używania Flasha do podstawowych funkcji, takich jak nawigacja.

10 Wybierz ręczne kodowanie

To może być przedmiotem dyskusji wśród projektantów stron internetowych. Wielu webmasterów korzysta obecnie ze zautomatyzowanych narzędzi, aby zaoszczędzić czas. Przydają się zwłaszcza, jeśli nie jesteś dobrze zorientowany w HTML. Należy jednak zauważyć, że takie narzędzia nie dorównują elastyczności i elegancji projektanta, który umiejętnie ręcznie koduje znaczniki HTML w różnych przeglądarkach.

Ręczne kodowanie znaczników HTML, XHTML i CSS to długa droga. Masz całkowitą kontrolę nad tym, co rozwijasz i zawsze dostosowujesz program zgodnie z potrzebami preferencji.

Jeśli kodowanie ręczne jest dla Ciebie gorączkowe, możesz użyć tekstowego edytora stron internetowych. W Internecie dostępnych jest wiele takich narzędzi. Możesz wypróbować jedną z następujących czynności:

  • Edytor CK
  • Filiżanka kawy
  • Atomowy wysublimowany tekst
  • Coda

Podsumowanie

Oto krótka lista kontrolna, którą możesz wziąć pod uwagę po zakończeniu kodowania witryny w różnych przeglądarkach:

  • Każda przeglądarka internetowa ma indywidualny sposób działania. Korzystając z kodowania HTML w dokumentach CSS, należy oznaczyć strony internetowe w taki sposób, aby wyświetlały się one czysto w każdej przeglądarce.
  • Aby Twoja witryna była wolna od błędów i błędów, pozbądź się nieprawidłowych kodów XHTML, HTML lub CSS, które można wyróżnić za pomocą narzędzi wymienionych powyżej.
  • Sprawdzaj przeglądarki, które generują maksymalny ruch na Twojej stronie.
  • Przeprowadź gruntowną kontrolę swojej witryny, aby zmierzyć skuteczność w przeglądarkach.
  • Zapoznaj się z modelem pudełkowym CSS, aby dowiedzieć się więcej o formatach w różnych przeglądarkach.
  • Umiejętnie wykorzystuj plany cieniowania i odcienie stylów tekstu.
  • Pamiętaj o ustaleniu poprawy treści, aranżacji i przestrzeni.

Poświęcenie dodatkowego czasu, aby strony działały bezbłędnie w jak największej liczbie przeglądarek, zawsze się opłaca. Nie tylko upewnisz się, że witryna jest dostępna dla maksymalnej liczby odbiorców, ale także uszczęśliwisz odwiedzających, co jest ważne.

Comments are closed, but trackbacks and pingbacks are open.

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów