10 вказівок, на які слід звернути увагу під час створення кросбраузерного веб-сайту

12

Теоретично створити веб-сторінку легко. Основні аспекти включають написання HTML-коду, його тестування у веб-браузері та його завантаження. HTML і CSS є стандартами, а це означає, що веб-сторінка, яка добре працює в певному веб-переглядачі, може не відображатися в інших браузерах.

Звичайно, на практиці все не так просто. Існує безліч браузерів, кожен з яких відображає HTML і CSS по-різному.

Щоб забезпечити однакову роботу веб-сторінок у всіх веб-браузерах, веб-дизайнери повинні практикувати кросбраузерне кодування. У цій публікації ми обговоримо 10 перевірених трюків, якими ви можете скористатися, щоб створити безпомилковий веб-сайт, готовий до роботи в різних браузерах.

Короткий вступ до CSS

CSS або каскадні таблиці стилів — це набір інструкцій щодо веб-форматування, які керують зовнішнім виглядом веб-сторінок. Деякі браузери, які сумісні з CSS:

  • IE
  • Край
  • Firefox
  • Chrome
  • Сафарі
  • Опера
  • iOS Safari
  • Опера
  • Браузер Android
  • Chrome для Android

Але перш ніж ви прийдете до висновку, що це заощадить вам багато часу, ви повинні зрозуміти, що більшість веб-браузерів не повністю підтримують усі його функції.

CSS діє як компонент зображення, який характеризує компоненти веб-сторінки. У той же час каскадні таблиці стилів контролюють дизайн різних сторінок одночасно.

Хоча немає жодного секрету в створенні ідеального крос-браузерного веб-сайту, який забезпечує чудову естетику, яку ви бажаєте, є деякі аспекти, про які можна подбати, щоб покращити свої шанси. Ось десять простих, але ефективних порад щодо кодування кросбраузерного веб-сайту.

1 Чим простіше, тим краще

Чим складнішими стають HTML і CSS, тим імовірніше, що вони схильні до помилок і помилок. Спробуйте зберегти елементарний макет на етапі проектування, тобто: заголовок, кілька стовпців і нижній колонтитул. Якщо у вашому дизайні є кілька бокових панелей, у міру просування процесу все буде неспокійним.

Уникайте використання великої кількості вкладених елементів і інтегруйте лише необхідні елементи. Для створення меню використовуйте ul і li замість таблиці або ряду елементів p.

2 Перевірте свій код HTML, CSS і RSS

Ніщо так не дратує дизайнера, як ретельний стиль веб-сторінки, і коли приходить час її перевірити, невідома помилка постійно з'являється. У таких ситуаціях дизайнеру варто потримати нерви і почати з перевірки розмітки та таблиць стилів.

У мережі є багато безкоштовних і платних інструментів, щоб перевірити, чи законні ваші розмітки HTML і CSS. За допомогою цих інструментів ви можете бути впевнені, що розмітка ідеальна, а веб-сторінки відображають вміст так, як ви хочете.

Firebug

Firebug — це все в одному налагоджувачі та редакторі. Це дозволяє розробнику працювати над розміткою HTML, JavaScript і CSS. Ви можете контролювати розмітку в режимі реального часу, виділяти її та видаляти.

Перевірка Html

Поки ви перевіряєте вихідний код сторінки, повідомляється про помилки та помилки. І якщо ви не можете з’ясувати, що не так, інструмент надасть вам кілька порад.

Validator.w3.org

Ви повинні завантажити файл, який хочете підтвердити. Валідатор покаже вам результати в різних форматах, наприклад:

  • з рекомендаціями
  • як начерк
jigsaw.w3.org

Інструмент перевіряє вашу розмітку на потенційні помилки та баги. Ви можете налаштувати кілька профілів CSS, вибрати певний носій для таблиці стилів і контролювати інформацію у звіті.

Relaxed.vse.cz

Цей інструмент не використовує правила W3C для перевірки, а покладається на вбудовані спеціальні протоколи. Ви можете вибрати версію HTML, яку бажаєте використовувати, чи бажаєте ви побачити вихідний код і багато інших варіантів.

3 Не працюйте з режимом примх браузера

Деякі веб-браузери мають режим особливостей. У цьому браузер конкурує зі своїми попередніми версіями, які часто повні помилок. Хоча це дозволяє старішому веб-сайту бути сумісним із сучасними веб-браузерами, це стає досить складним завданням, якщо ви шукаєте стандартизовані веб-сторінки. Це пояснюється тим, що в режимі особливостей веб-сторінки не відображаються стандартизованим способом, а власним унікальним способом.

За замовчуванням веб-браузер перемикається в режим особливостей, якщо ви не включили декларацію типу документа або DOCTYPE. Тому ви завжди повинні пам’ятати про додавання дійсного DOCTYPE у кінці веб-сторінки.

4 Практикуйте правила скидання CSS

Кожен веб-браузер має власні значення за замовчуванням для певних аспектів, таких як висота та ширина лінії. Ці значення за замовчуванням часто конфліктують із настроюваними правилами CSS і спотворюють загальний вигляд веб-сторінок.

Щоб уникнути дилеми налаштування кожного написаного вами правила CSS, ви можете виконати всі ці скидання на початку файлу CSS. Щойно ви додасте ці правила у свою таблицю стилів, ви можете бути впевнені, що ви працюєте з однієї точки для всіх браузерів.

5 Використовуйте Firefox

Як правило, розробники тестують веб-сторінки відразу в одному браузері. Потім вони переходять до інших браузерів і продовжують вносити необхідні зміни, переходячи з одного браузера в інший. Це ідеальний підхід, а не перевірка веб-сайту в усіх браузерах за один запуск.

Для створення вашого веб-сайту Firefox є найбільш бажаним браузером, оскільки він полегшує вирішення будь-яких проблем із сумісністю порівняно з іншими браузерами. Firefox постачається з великою кількістю доповнень, що робить його дуже зручним для розробників. Якщо веб-сторінки виглядають чистими у Firefox, ви можете бути впевнені, що вони добре працюватимуть в інших браузерах.

6 Тестування

Сучасні веб-браузери мають особливості відтворення, тому розробник зобов’язаний перевірити розмітку на кожному з них. Ось список основних веб-переглядачів:

  • Internet Explorer
  • Firefox
  • Сафарі
  • Opera (44.0.2510.1218)
  • Microsoft Edge
  • Браузер UC

Як швидкий підхід, ви можете скористатися послугою онлайн-тестування. Існує багато веб-сайтів, наприклад Browsershots, які роблять знімки екрана вашого сайту та показують, як вони виглядатимуть у різних операційних системах і веб-переглядачах. Ці знімки екрана надсилаються електронною поштою або просто доступні для завантаження. Деякі з інструментів є платними, але вони напевно повідомляють вам заздалегідь про проблеми сумісності, з якими можуть зіткнутися веб-сторінки.

Трюки CSS не принесуть результатів, якщо ви не можете перевірити їх у провідних веб-переглядачах. Ось кілька корисних інструментів для автентифікації міжбраузерної сумісності розміток HTML і CSS:

Quirksmode

Це простий, але ефективний спосіб виявлення збоїв у різних браузерах. Quirksmode інтерпретує CSS і відображає всі можливі проблеми.

Знімки браузера

Інструмент Browsershots робить знімки екрана веб-сторінок і показує, як ваш веб-сайт відображатиметься в різних веб-браузерах і операційних системах.

Тестер IE

Це надійна веб-програма, яка дає змогу аналізувати вигляд веб-сторінок у різних версіях Internet Explorer. Інструмент перевіряє шаблон на різних версіях браузерів і операційних систем і відображає результати в інтерфейсі, схожому на Ms Word.

7 Використовуйте умовні коментарі

Бувають випадки, коли ви намагаєтеся якнайкраще, але все одно не можете отримати бажані результати в певних браузерах, особливо в Internet Explorer. Тут вам потрібні надійні та перевірені хаки.

Проста альтернатива для цього, ви можете включити лише розмітку IE з коментарями. За допомогою цього простого прийому ви можете використовувати додатковий HTML або JavaScript лише для IE.

8 Зробіть IE6 сумісним із форматом PNG

PNG чудові. Ви можете мати 250+ ступенів прозорості зображення. Щоб створити візуальні ефекти, оптимізовані для Retina, ви можете продемонструвати свої навички дизайну, наприклад додати плавні межі та власний фон.

Але Internet Explorer не в змозі ефективно відображати прозорі PNG і показувати погані поля там, де це має бути прозорим. З невеликою оптимізацією ви можете змусити файли PNG безперебійно працювати в IE6. Це не вимагатиме від вас серйозних змін у CSS.

Ви можете використовувати IE PNG Fix для того ж.

9 Додайте запасні варіанти

Більшість веб-браузерів сумісні з Flash і JavaScript. Можна скористатися резервними варіантами, якщо веб-браузер відвідувача не підтримує такі функції.

Наприклад, у випадку Safari на iPhone навігаційні меню Flash стають марними, оскільки браузер не підтримує Flash.

Ось коротка шпаргалка, щоб заощадити час на експериментування з різними мультимедійними файлами:

  • Зображення: до кожного тегу img додайте атрибут alt, який описує зображення.
  • Флеш-фільми: уникайте використання Flash для основних функцій, наприклад навігації.

10 Виберіть ручне кодування

Це може бути предметом дискусії серед веб-дизайнерів. Багато веб-майстрів сьогодні використовують автоматизовані інструменти, щоб заощадити час. Вони особливо корисні, якщо ви погано розбираєтесь у HTML. Але важливо зазначити, що такі інструменти не відповідають гнучкості та елегантності дизайнера, який уміло вручну кодує кросбраузерну розмітку HTML.

Кодування розмітки HTML, XHTML і CSS вручну має велике значення. Ви повністю контролюєте те, що розробляєте, і завжди налаштовуєте програму відповідно до потреб і вподобань.

Якщо вам важко кодувати вручну, ви можете скористатися текстовим редактором веб-сторінок. В Інтернеті є багато таких інструментів. Ви можете спробувати щось із наведеного нижче.

  • CKEditor
  • Кавова чашка
  • Atom Sublime Text
  • кода

Підведенню

Ось короткий контрольний список, який ви можете розглянути після того, як завершите кодування кросбраузерного веб-сайту:

  • Кожен веб-браузер має індивідуальний спосіб дій. З кодуванням HTML у документах CSS ви повинні позначати веб-сторінки таким чином, щоб вони виглядали чистими в кожному браузері.
  • Щоб на вашому сайті не було вад і помилок, позбудьтеся недійсних кодів XHTML, HTML або CSS, які можна виділити за допомогою згаданих вище інструментів.
  • Слідкуйте за браузерами, які приносять максимальний трафік на ваш сайт.
  • Виконайте фундаментальну перевірку свого сайту, щоб виміряти ефективність у браузерах.
  • Дослідіть модель коробки CSS, щоб дізнатися більше про кросбраузерні формати.
  • Вміло використовуйте плани штрихування та відтінки стилю тексту.
  • Пам’ятайте про вдосконалення вмісту, розташування та простір.

Витрати додаткового часу на бездоганну роботу веб-сторінок у якомога більшій кількості браузерів завжди окупаються. Ви не тільки забезпечите доступність веб-сайту для максимальної аудиторії, але й залишите відвідувачів задоволеними, що важливо.

Джерело запису: instantshift.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі