Видео: Кроссбраузерная вёрстка — HTML Шорты 2024
Одной из самых больших проблем при создании веб-страниц является обеспечение совместимости этих страниц между браузерами и устройствами. Это означает, что они должны хорошо выглядеть и функционировать должным образом во многих браузерах и на максимально возможном количестве устройств.
Многие редакторы кода включают в себя какой-то инструмент совместимости с браузером, который просматривает все теги в ваших файлах и определяет, соответствуют ли эти теги и любые присутствующие атрибуты последним рекомендациям W3C для выбранного вами DTD в самых популярных современных браузерах,
Эти инструменты должны иметь возможность быстро идентифицировать проблемы с кодированием, например, содержит ли код какие-либо устаревшие теги, такие как , которые должны быть идентифицированы и изменены или удалены.
Хотя тест совместимости с браузером обычно не показывает вам, как любые обнаруженные ошибки будут выглядеть в браузерах, которые не поддерживают определенный тег или атрибут, результаты теста часто указывают тип и версию браузера, которые могут испытывать трудности с отображением идентифицированных чтобы вы могли самостоятельно провести тестирование, чтобы исправить ошибку.
Например, используя инструмент совместимости браузера Dreamweaver, вы можете увидеть ошибку. Инструмент идентифицирует и описывает проблему с тремя пиксельными текстовыми ошибками, которая не может быть правильно отображена в Internet Explorer 6. 0.
Чтобы запустить тест совместимости браузера в одном открытом HTML-файле в Dreamweaver, выполните следующие действия:
< ! -3 ->-
На вкладке «Совместимость браузера» на панели «Результаты» нажмите зеленую кнопку со стрелкой в верхнем левом углу и выберите «Проверить совместимость браузера» в раскрывающемся меню.
-
В зависимости от количества найденных проблем отчет может занять несколько минут. Потерпи.
Как и другие вкладки на панели «Результаты», результаты для этого инструмента отображаются в списке внизу панели «Результаты» с значком «Ошибка», «Предупреждение» или «Сообщение» рядом с каждой найденной проблемой. Кроме того, эта панель отображает подробные результаты по каждой найденной проблеме вдоль правой части панели.
-
Чтобы устранить все обнаруженные проблемы, дважды щелкните строку на панели «Результаты», которая содержит эту проблему, и Dreamweaver автоматически откроет страницу, содержащую эту ошибку.
Этот код выделяется и / или отображается красным или зеленым волнистым подчеркиванием в представлении кода Dreamweaver, чтобы помочь в коррекции или настройке. Чтобы открыть всплывающее окно подсказки в коде, который идентифицирует ошибку, и перечисляет браузеры, которые его не поддерживают, поместите курсор поверх волнистой подчеркивания.
В отличие от инструмента совместимости с браузером, имейте в виду, что он проверяет только на достоверность кода внутри подмножества браузеров и версий браузера. То, что он не делает, - это проверка точности кода или любых функций любого JavaScript, jQuery или другого кода, используемого в файлах.
