Содержание

Валидная и кроссбраузерная верстка. Разработка адаптивной верстки

Мы предлагаем услуги верстки: валидной, кроссбраузерной, адаптивной — все зависит от ваших требований.

• Верстка — процесс превращения макета дизайна в веб страницу, состоящую из html сущностей, внешне представляющих точную копию отрисованных блоков. Пререводя на нормальный язык кнопку нарисованную на бумаге нельзя нажать, для этого нужно создать механический элемент, способный нажиматься, внешне похожий на отрисованную кнопку. Как вы уже наверное догадались, от опыта «мастера-кнопочника» зависит очень многое.

• Качество верстки — будет ли ваша кнопка одинаково смотреться на разных устройствах ваших клиентов или нет, зависит от технической подготовки исполнителя вашего заказа и от ваших требований. Дальше мы это будем называть кроссбраузерностью(возможность сайта отображаться одинаково на разных платформах и устройсвах). Кроссбраузерность — результат кропотливого труда мастера верстки. Адаптация сайта к мобильным устройствам тоже относится к кроссбраузерности, эту опцию вы тоже можете включить, заказывая у нас верстку. При предоставлении требований к верстке нужно, в первую очередь, ориентироваться на предположительную целевую аудиторию вашего ресурса. К примеру, если ваша целевая аудитория люди 50-60 лет, то следует больше внимания уделить поддержке старых браузеров, которые сопровождают старые компьютеры. Если же ваша целевая аудитория — молодежь (14-20 лет), то следует нацелиться на поддержку мобильных устройств.

• Опыт — в нашей команде есть несколько опытнейших верстальщиков, принимавших участие более чем в 130 проектах на сегоднешний день, люди зарекомендовавшие себя наилучшим образом.

• Сроки — После предоставления макета и согласования цены, заказ исполняется со скоростью примерно 2-3 дня на верстку 1 страницы, в зависимости от сложности заказа.

• Адаптивная верстка — Цена на заказ адаптивной верстки (подстраивающаяся под устройства, для наилучшего эффекта) несколько выше обычной кроссбраузерной верстки, обсуждается индивидуально с нашим менеджером по проектам.

Для получения интересующей Вас информации
оставьте заявку или позвоните нам.

Что такое кроссбраузерность. Кроссбраузерная верстка в современных условиях — общее понимание необходимого принципа

Топик собрал в себе как всем известные способы кроссбраузерной верстки, так и несколько интересных, довольно редко встречающихся.

После появления в 1994 году одного из первых удачных браузеров Netscape Navigator, созданных на основе первого браузера с

Mosaic, копания Microsoft решила сделать свой браузер и назвать его

. Первая и вторая версия IE поставлялись вместе с пакетом Microsoft Plus!, дополняющим

, но широкого распространения не получили. Тогда Microsoft решили разработать радикально отличающийся от IE 1.0 и 2.0 браузер, для чего компания наняла программистов из Spyglass, которые разработали

на основе Mosaic. Так в 1996 году появился Internet Explorer 3.0. Однако разработчики ввели в браузер несовместимые со стандартами расширения HTML, которые впоследствии сохранялись от версии к версии. Последующее параллельное развитие IE и Netscape Navigator привели к захвату IE 95% рынка. Застой в развитии IE с 4.0 до 6.0 версии, с плохой поддержкой стандартов, низкой скоростью работы и отображения страниц, привел к возрождению Netscape в версии 6.0, который был написан на новом движке Gecko. Обновленный Netscape Navigator не смог добиться былых вершин и со временем компания Netscape объявила о прекращении поддержки своего браузера.

Однако движок Gecko послужил основой для создания в 2004 году современного

Firefox. В 1996 году появилась Opera, которая добилась своих успехов скоростью и простотой использования. В 2003 году

выпустила свой браузер Safari на движке WebKit, отказавшись от IE, ранее использовавшийся в Mac OS. В 2008 году Google также решил вступиться в гонку браузеров, выпустив

, основанный на том же движке что и Safari.

Таким образом, каждый из браузеров имеет свою историю, имеет свои версии, которые в свою очередь различаются поддержкой Javascript, HTML и CSS.

На сегодняшний день доля мирового рынка браузеров составляет: 45% для IE, 31% Firefox, 15% Chrome, 5% Safari и 2% Opera.
Отдельно хочется порадоваться о снижении доли на рынке самого «старого» и проблемного браузера IE6, который сейчас занимает всего 6%.

Под кроссбраузерностью понимается одинаковое отображение и работа сайта в разных браузерах. В данном топике я не буду рассматривать проблемы работы JavaScript в разных браузерах, а остановлюсь на верстке.

Есть два основных способа добиться одинакового отображения сайта в браузерах:

Разделение стилей для разных браузеров – один из самых распространенных способов кроссбраузерной верстки. Суть метода заключается в идентификации вида браузера пользователя и применение соответствующего стиля совместно с основным.

Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.

Можно задать стили, которые увидят все браузеры кроме IE:

Также есть возможность идентификации версии IE пользователя:
для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии

для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).

Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:

И используя их в дальнейшем в общем стиле для каждой версии:
.ie6 .elementstyle {
background: #123;
}

Плюсом данного метода является валидность его использования.

Другой, не менее частый способ кроссбраузерной верстки – CSS-хаки, позволяющий определять свойства конкретным элементам.

Для IE6:
.elementstyle {
_background: #123;
}
или:
.elementstyle {
-background: #123;
}
или валидно:

* html .elementstyle {
background: #123;
}

Для IE7:
*+html .style {
background: #123;
}
или валидно:
*:first-child+html . elementstyle {
background: #123;
}

Для Firefox:
@-moz-document url-prefix() {
.elementstyle {
background: #123;
}
}

Для Safari и Chrome(один движок, помните?):
@media screen and (-webkit-min-device-pixel-ratio:0) {
. elementstyle {
background: #123;
}
}
или
body:last-child:not(:root:root) .elementstyle {
background: #123;
}

Для Opera все сложнее. CSS-хаки для Opera понимают Safari и Chrome, поэтому нужно использовать совместно хак для Opera и для Safari\Chrome, чтобы переопределить стиль обратно:

@media all and (min-width:0px) {
head~body .elementstyle {
background: #123;
}
}
body:last-child:not(:root:root) .elementstyle {
background: #fff;
}
Альтернативой этим двум хакам может служить интересный способ определения стилей для Opera с помощью встроенного объекта «opera» в JavaScript:

Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.

Подведем итог: верстая большие сайты с большим количеством элементов, рассчитывая на дальнейшее развитие и разрастание сайта, все-таки предпочтительней использовать разделение стилей. Это валидно, удобно, это правило хорошего тона. Но нет ничего страшного в использовании CSS-хаков для небольших сайтов, тем более что многие из хаков тоже проходят валидацию.

В заключении скажу, что в идеале нужно стремиться к отказу от использования хаков и разделения стилей, совершенствуя свои навыки в верстке.

На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера — это то, что один и тот же HTML код выглядит по разному в разных браузерах. Более того, один и тот же код выглядит по разному в разных версиях одного и того же браузера.

Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют «кроссбраузерной версткой HTML». Умение верстать такой код — весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.

Почему сайт выглядит по разному в различных браузерах?

Существует несколько причин возникновения различного вида сайта на различных обозревателях.

1. Использование нестандартных возможностей HTML.

Дизайнер может использовать возможности, которые не входят в стандарт HTML. Действительно, браузеры могут поддерживать множество различных атрибутов тегов, которые не описаны в стандарте. Использовать эти возможности не рекомендуется. По одной простой причине — если что-либо не описано в стандарте, какой-либо из браузеров может это не поддерживать. И создатели такого браузера будут совершенно правы. Не нужно использовать нестандартные особенности.

Всегда проверяйте написанный вами код на соответствия стандарту.

Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.

Данный код выводит таблицу, состоящую из одной ячейки. Веб дизайнер хочет, чтобы высота первой строки данной таблицы была равна 100 пикселям. Однако, в стандарте HTML у тега

понимают большинство современных браузеров. (Лишь InternetExplorer 4, не распознает этот атрибут). Но в других случаях, пренебрежение стандартом может привести к более плачевным результатам. Наверняка, все из нас бывали на сайтах, на которых какой-либо элемент съезжал либо вбок, либо вниз. Каждый из нас, скорее всего, в душе думал, что сайт делал не профессионал. Хотя, скорее всего, сайт просто не был протестирован на основных типах браузеров. Как правило, сайты создают и тестируют только в InternetExplorer, так как это наиболее популярный браузер среди пользователей. Поэтому, в следующий раз, будем снисходительны, зная, почему происходит потеря внешнего вида.

Правильное решение для примера с табличной — это использование стилей. Вот как может выглядеть «правильный» код:

Данный вариант будет (или, по крайней мере, должен) отображаться одинаково во всех типах браузеров.

2. Значения атрибутов по умолчанию.

У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.

Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости «додумывать» значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, «lucida grande», arial, helvetica, sans-serif;
background-color: white;
}

Таким образом, все элементы на странице будут иметь свойства заданные в данном файле. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.

3. «Особенности» некоторых браузеров.

Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.

Поскольку основной виновник проблем несовместимости со стандартом — это Internet Explorer, то было придумано множество возможных обходных путей, как заставить сайт в IE выглядеть так же, как и в других браузерах.

Самый распространенный способ — это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.

Вы когда-нибудь замечали, что сайт может по разному отображаться в разных браузерах? В этом и есть смысл кроссбраузерной верстки.

Что такое кроссбраузерная верстка

Кроссбраузерная верстка — подход к разработке html-кода (верстка), который обеспечивает корректное отображается во всех существующих браузерах

Причем под корректностью понимается именно точное расположение всех деталей макета и функционала. Сайт должен смотреться одинаково во всех популярных браузерах:

  • Firefox
  • Chrome
  • Opera
  • Opera mini
  • Safari
  • Internet Explorer

Задача достаточно сложная, если использовать «специфичные» возможности CSS , так как все браузеры отображают некоторые элементы веб-страниц по-своему. И каждая новая версия включает в себя новые возможности, реализуемые в браузерах от других разработчиков далеко не в один и тот же день.

Кроссбраузерная верстка хорошо знакома тем, кто работал с браузером Internet Explorer 6 – он подпортил немало нервов верстальщикам за счет своей уникальности. А уникальность эта выражалась в том, что этот браузер не поддерживает очень многие правила и стандарты. В результате выходило так, что сверстанный макет смотрелся в Firefox и Opera просто великолепно, разваливаясь в IE6 в абсолютную кашу.

Причины нарушения корректного отображения страниц

Несмотря на то, что в мире имеются определенные стандарты по построению web-страниц, разработчики постоянно внедряют в браузеры поддержку новых технологий и новых правил CSS. Это позволяет создавать более динамичные и функциональные сайты, реализуя ранее недостижимые возможности. И каждый разработчик стремится к тому, чтобы его браузер поддерживал самые новые технологии, новые скрипты и новые библиотеки. В результате одни пользователи радуются новому браузеру, в котором хорошо отображаются самые продвинутые сайты, а другие не могут понять, почему открывшаяся страница открывается некорректно. Именно поэтому верстальщик должен написать код, который отображался бы в разных браузерах максимально одинаково.

Также не стоит забывать, что постоянно появляются новые версии браузеров и было бы очень не плохо, чтобы на новых версиях сайт также корректно работал.

Что нужно для кроссбраузерной верстки – инструменты

Кроссбраузерная верстка должна обеспечить максимально корректный показ сайта в любых современных и устаревших браузерах. Для этого верстальщик должен создать код, подходящий под большинство используемых браузеров, в том числе и малоизвестных. Ему потребуются определенные знания и умения, которые он приобрел в процессе изучения своего дела.

Неоценимую помощь оказывают сравнительны таблицы, показывающие различия в восприятии отдельных элементов различными браузерами. То есть, для того чтобы выполнить кроссбраузерную верстку, нам понадобятся:

  • Общие знания о верстке;
  • Знания в области особенностей верстки под те или иные браузеры;
  • Несколько браузеров на одном компьютере;
  • Проверка в сервисе browsershots.org

Кстати, было бы неплохо создать на своем компьютере виртуальную машину, установить на нее операционную систему и загрузить туда старые версии браузеров – многие до сих пор пользуются старым софтом, не понимающим современные технологии.

Отдельный фронт работ нужно провести с заказчиком. Ему нужно объяснить, что в мире web-дизайна нет ничего идеального, и что некоторыми моментами придется пожертвовать. Задачей команды дизайнеров и программистов становится создание сайта, который должен соответствовать следующим пунктам:

  • Максимальное соответствие исходному макету и пожеланиям заказчика;
  • Максимальное корректное отображение во всех популярных браузерах;

В процессе создания кроссбраузерной верстки в коде задается значение атрибутов элементов HTML по умолчанию, что уже на начальном этапе позволяет избавиться от некорректного отображения даже самых простых макетов будущих сайтов. Далее производится расстановка тегов с учетом совместимости кода в различных браузерах. На этом этапе верстальщику нужно будет постоянно контролировать корректность отображения сайта, используя для этого браузеры всех версий и поколений (во всяком случае, нужен хотя бы базовый набор из популярных браузеров последних лет).

Для того чтобы облегчить свою работу по созданию кроссбразуерной верстки, следует сначала выполнить верстку для одного браузера, контролируя соответствие исходному шаблону в PSD. После этого проверяется корректность отображения в других браузерах с одновременной модернизацией исходного кода. Такой подход значительно ускоряет создание кроссбраузерной верстки и позволяет в сжатые сроки получить достойные результаты.

Заключение

Кроссбраузерная верстка – это краеугольный камень современного web-дизайна. Различия в работе браузеров часто являются препятствием для реализации тех или иных возможностей. В результате мы довольствуемся усредненным, но доведенным до пика совершенства результатом. А сегодня кроссбраузерная верстка дополнилась необходимостью создания адаптивного дизайна , корректно отображающегося не только в любых браузерах, но и на любых мобильных устройствах.

Когда создаётся сайт, то важным в плане обеспечения его эффективности является кроссбраузерная верстка. Что это такое? Как её можно сделать? Какие подводные камни существуют?

Что собой представляет кроссбраузерная верстка?

Html/css — это основа при создании сайта. Многие веб-мастера подходят к этому по принципу: мне хорошо — и хватит. И как же неприятно бывает, когда заходишь со своего браузера или мобильного устройства, а сайт отображается неправильно. В таких случаях на помощь приходит адаптивный дизайн и кроссбраузерная верстка.

Css и html составляют в таком случае костяк, с помощью которого всё реализовывается. В отдельных случаях для этой цели может привлекаться JavaScript. Но конечная цель одна — сделать так, чтобы всё работало на разных версиях. Поэтому если есть желание обеспечить кроссбраузерность, чтобы сайт хорошо отображался во всех браузерах, об этом приходится думать постоянно, с первой же секунды работы над сайтом.

Пошаговое руководство в общих чертах

Итак, давайте рассмотрим, как сделать кроссбраузерную верстку. Первоначально следует определиться, с какими программами сайт будет работать. Примите к сведению, что количество браузеров приближается к двум сотням, поэтому пытаться угодить всем — дело неимоверной сложности. Поэтому выбирают число в диапазоне от 3 до 8. Чтобы определиться, на что ориентироваться, можно воспользоваться и вспомогательными сервисами вроде Yandex Metrika и После этого следует выяснить, как же будет решаться проблема достижения кроссбраузерности.

Многие делают свою ставку на хаки. Это специальные коды, селекторы и правила, которые понимает только один определённый браузер. Но, учитывая, что приходится писать как минимум несколько десятков таких вставок для разных браузеров и их версий, многие откидывают такой подход из-за его дороговизны, длительности и нерациональности. Некоторые делают ставку на использование тех элементов, которые отображаются одинаково. Но при этом часто теряется ряд важных преимуществ. Чтобы минимизировать потери, параллельно используется ещё и адаптивный дизайн. Что он собой представляет?

Адаптивный дизайн

Это подход к верстке сайтов, во время которого сайт делается резиновым, то есть таковым, который приспосабливается к разным браузерам и размерам экранов. Следует отметить, что адаптивный дизайн и кроссбраузерность тесно переплетены, и когда говорят о чем-то одном, то, как правило, подразумевают и второе. Давайте рассмотрим небольшой пример.

Есть такие браузеры, как Opera и Opera Mini. Первый используется на обычных компьютерах, а второй — на мобильных телефонах. В целом они похожи, но имеют целый ряд особенностей. В таких случаях важным является подключение отдельных файлов и/или же использование медиазапросов. Что же это такое? В первом случае создаются отдельные файлы, которые нацелены на работу конкретного браузера, и прописывается их вызов. Во втором случае необходимы файлы с медиазапросами. Если используемая программа соответствует специфическим требованиям, то подгружается файл в нужной конфигурации.

Что нужно делать?

Первоначально следует помнить, что когда работаете с html, кроссбраузерная верстка требует особого внимания. Поэтому для большей результативности следует по максимуму использовать возможности каскадных таблиц стилей. При этом также необходимо изменить и некоторые подходы к работе. Так, многие неопытные люди, когда они указывают размер чего-то, используют пиксели — рх. Рассмотрим пример с большой надписью-заголовком, которая украшает верхушку сайта.

У неё ширина была задана в размере 800рх. С экраном в 1600рх это будет довольно привлекательно. А вот на 700рх она будет смотреться нелепо. Что делать в таком случае? Можно задать размер не в пикселях, а в процентах! И занимать надпись будет не фиксированную длину, а половину ширины экрана. В процентах можно задавать и расстояние, на котором от краев экрана будет размещен определённый элемент. Но вот что делать, если экран слишком уж маленький?

Допустим, он составляет 300рх? В этом случае нам поможет медиазапрос, которому необходимо прописать фиксирование ширины. И если она равняется 700рх и меньше, то можно установить, что надпись будет занимать 75% места. А если ширина равняется 300рх и меньше, то можно выставить и все 100%. В целом тема весьма интересная и полезная, поэтому её можно изучить весьма подробно. Но, увы, здесь информации на книгу, и поместить всё в статью не получится.

Почему кроссбраузерная адаптивная верстка привлекает поисковые системы?

А ответ весьма прост: ибо это говорит о том, что разработчики следят за сайтом и делают его максимально приятным для своих пользователей. А значит, таких людей можно поощрить, предоставляя им более высокие позиции в поисковых системах. Конечно, ваш сайт не будет выведен сразу на ТОП-1, но в совокупности с другими факторами это позволит сильно подняться вверх. Следует отметить, что это не простое бесполезное требование, а нечто, чему заслужено уделено такое внимание.

Ведь подумайте сами: каково это пользователю, когда он попадает на сайт, который не очень приятен внешне? А ведь он может прийти к мысли, что поисковая система предлагает некачественный контент! Поэтому они и отбирают так тщательно сайты, которые следует предлагать. К тому же в этом есть и выгода вебмастеров, ведь они создают качественную оболочку для контента, в которой люди смогут получать интересующую их информацию с помощью любого аппаратного средства: компьютера, ноутбука, планшета, смартфона или же мобильного телефона. Соответственно, чем больше удовлетворенных посетителей, тем быстрее растёт сайт и уровень дохода.

Заключение

Нельзя не отметить тот скромный факт, что создание кроссбраузерного сайта с адаптивным дизайном — это дело нелегкое, весьма длительное и трудоёмкое. Поэтому необходимо запастись терпением и помнить, что дисциплина — это великое дело! Возможно, что-то первоначально не будет получаться, но необходимо пробовать, искать информацию, использовать различные подходы и не отступать. И тогда обязательно получится сделать сайт, который любо-дорого будет показать его посетителям.

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack , которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

Так что если для вас пиксель-пёрфект — это попасть в сетку и в горизонтальные размеры блоков, то у вас ещё есть шансы. Но если вы подкручиваете сглаживание текста, количество строк в абзаце или вертикальные размеры блоков с содержимым, строго по макету, вы тратите время впустую. Идеально кроссбраузерный сайт будет выглядеть одинаково чужеродно на всех платформах — ведь у каждой свои особенности, привычные пользователям.

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах .

Видеоверсия

Также интересно:

Рекомендуем почитать:

В продолжение темы:

Решения

В таблице ниже предоставляет полезную информацию о расширение файла.deb. Он отвечает на вопросы такие, как:Что такое файл.deb ?Какое программное обеспечение мне нужно открыть…

Новые статьи

/

Популярные

что это такое, как проверить, как обеспечить

Тематический трафик – альтернативный подход в продвижении бизнеса

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Кроссбраузерность — способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.

Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.

Задача разработчика сайта — сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.

Кроссбраузерность верстки

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

Правильная верстка сайта вызывает доверие у пользователей. Они с удобством смогут пользоваться ресурсом. Лояльность аудитории — важный показатель.

Разработать кроссбраузерную верстку — отдельный вопрос при работе над крупным проектом. При выполнении этого условия чаще всего задействуются CSS и HTML правила, иногда дополняемые небольшим JavaScript (jQuery) кодом.

Выполняется анализ целевых платформ, с которых наиболее вероятно и часто приходит клиент на сайт, внимание концентрируется на наиболее популярных браузерах и разрешениях экранов. Для этих целей можно использовать Яндекс Метрику, Google Analytics и другие сервисы сбора данных о посетителях.

На сегодняшний день производители браузеров начали активно заниматься своевременной поддержкой стандартов World Wibe Web, HTML 5 и CSS 3, что несомненно сказалось на качестве отображения страниц. Однако, в некоторых свойствах каскадных таблиц и трактовке кода, даже сейчас на разных движках встречаются существенные расхождения, которые необходимо исправлять вручную.

Как обеспечить кроссбраузерность сайта

Использование CSS hacks

“CSS хаки” — отрывки кода, понимаемые только одним определенным браузером. Если ваш сайт корректно отображается в двух браузерах, а в трёх других что-то идёт не так, чаще всего вопрос решается дописыванием хаков для каждого из трех неверно-интерпретирующих движков. Хаки — самый “грязный” способ исправления ошибок, делает код не эстетичным и не валидным, но рабочим.

Вендорные префиксы

Остались, как ещё один рудимент браузерных войн, в особенности браузеров WebKit. Более “чистый” и честный способ, чем использования хаков.

Каждый браузер имеет собственные свойства с вендорным префиксом, так, например элемент border-radius в Mozilla Firefox представлен свойством -moz-border-radius, а в Chrome и Safari -webkit-border-radius. Такие свойства меняют поведение элемента только в определенном браузере, и игнорируются другими платформами.

Универсальность элементов

Делайте упор на универсальные элементы — те, которые одинаково работают в большинстве браузеров. Работа только с ними сделает код коротким, чистым и понятным.

Проверить поддержку правил можно на бесплатном сервисе caniuse.com. В наглядном представлении в виде таблиц можно уточнить, начиная с какой версии тот или иной тег введён в поддержку каждым движком, и можно ли его применять

Как проверить кроссбраузерность сайта

Вы сверстали сайт. Учли советы. Настало время его проверить. Первый способ — установить на виртуальную машину всевозможные браузеры, открыть свой сайт в каждом и посмотреть.

Так же есть специальные сервисы проверки сайта на кроссбраузерность.

  • browsershots.org
    Преимущество:Позволяет получать скриншоты из большого количества разных версий движков.
    Недостаток: Долгое ожидание.

  • crossbrowsertesting.com
  • browserstack.com
    Преимущество: Мощные средства для глубокого анализа веб-ресурса в режиме онлайн.
    Недостаток: Платное использования большинства функций.

Как влияет на посещаемость сайта

Существует негласная статистика, говорящая о том, что Яндекс Браузер и Chrome пользуются популярностью молодёжи, а Opera и Mozilla отдают предпочтения уже работающие люди. Представьте, что вы создали сайт по скейтбордингу для молодежи, а его оформление с треском проваливается в Chrome. Шрифты не загружаются, отступы появляются совсем не там, где они должны быть — настоящая катастрофа маркетинга, потеря целевой аудитории.

Это был лишь наглядный пример того, как кроссбраузерность важна для любого проекта. Именно то, насколько хорошо ваш сайт поддерживает наибольшее количество браузеров, зависит его посещаемость и интерес пользователей к проекту.

Никто не будет читать блог с мобильного телефона, если буквы на сайте мелкие и неразборчивые, посетитель уйдет с сайта, если увидит, что в его браузере дизайн выглядит нечитабельно и ужасно.

К тому же, поисковые системы поднимают внутренний рейтинг сайтам, оформленным согласно стандартам современной верстки, что также положительно скажется на конверсии проекта.

Так же в блоге у нас есть статья про адаптивную верстку. 

табличная, кроссбраузерная, адаптивная. Основные принципы

От автора: CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.

Верстка с помощью css – что это и зачем оно нужно?

Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.

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

Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.

Поэтому всегда верстальщик в начале работы создает структуру, необходимые элементы, а потом все это оформляет.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Основные вещи, которые можно сделать в css

Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.

Соответственно, свойство display определяет, как тот или иной элемент будет отображаться на странице. Первое значение преобразует нужный элемент в таблицу, второе – в ряд таблицы, а третье – в отдельную ячейку. Вот так вот за счет таких нехитрых манипуляций вы можете смастерить искусственную таблицу на странице без единого тега table или td в коде.

Кроссбраузерная верстка. Как css может в этом помочь

А помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.

В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:

*{ padding: 0; margin: 0; } ul{ list-style: none; }

*{

padding: 0;

margin: 0;

}

ul{

list-style: none;

}

То есть мы просто убрали все внутренние и внешние отступы и всех элементов, а также убрали маркеры у списков, потому что сегодня мало кто использует их. Цель css reset – позволить вам начать описание стилей с чистого листа.

Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Адаптивная верстка в css

Адаптивная верстка это вообще отдельная ветвь в сайтостроении, но в этой статье я всего лишь объясню вам, что это такое с простейшим примером. Вообще я думаю, что названа она очень правильно. Адаптироваться, значит, меняться. А в сайтостроении в основном нужно меняться под разные разрешения экрана. Сайту меняться, всмысле, не человеку же.

Вообще адаптивность сегодня чуть ли не обязательный параметр нормального сайта. Суть ее в том, что дизайн сайта и его структура немного меняются на разных разрешениях экрана. На смартфонах и планшетах, например, пропадает боковая колонка, а на больших экранах макет перестает увеличиваться и центрируется.

Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:

@media and only screen (max-width: 600px){ img{ float: none; } }

@media and only screen (max-width: 600px){

img{

float: none;

}

}

Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.

Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!

Рис.2. Пример записи медиа-запросов. Как видите, для одного шаблона может понадобиться приличное количество правил и стилей, чтобы реализовать нормальную адаптивность.

Какой редактор использовать для работы с css?

Конечно, программа для css верстки должна быть более менее толковой – с поддержкой подсветки синтаксиса как минимум, потому что это очень важно для визуального восприятия кода.

Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.

Узнайте css лучше

Кроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.

Подробнее о том, как использовать эту технологию при верстке под мобильные устройства, вы можете узнать из этого видеокурса. Также в нашем премиум разделе вы можете найти обучающие уроки по основам этой технологии, а также более продвинутый материал по CSS3, поэтому вам не нужно ничего искать, все уже есть, только бери и учись.

Невозможно в столь короткой статье рассказать вам подробно обо всем, что дает верстка с помощью технологии css, но кое-какие моменты, я думаю, вы уловили. Для создания сайта этого просто необходимый язык, без которого нельзя обойтись, а в его изучении вам помогут материалы на нашем сайте, среди которых много и бесплатных. Также я рекомендую вам подписаться на обновления, чтобы было проще получать от нас новые уроки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Кроссбраузерная верстка, привлекающая поисковые системы

Когда создаётся сайт, то важным в плане обеспечения его эффективности является кроссбраузерная верстка. Что это такое? Как её можно сделать? Какие подводные камни существуют?

Что собой представляет кроссбраузерная верстка?

Html/css – это основа при создании сайта. Многие веб-мастера подходят к этому по принципу: мне хорошо – и хватит. И как же неприятно бывает, когда заходишь со своего браузера или мобильного устройства, а сайт отображается неправильно. В таких случаях на помощь приходит адаптивный дизайн и кроссбраузерная верстка.

Css и html составляют в таком случае костяк, с помощью которого всё реализовывается. В отдельных случаях для этой цели может привлекаться JavaScript. Но конечная цель одна – сделать так, чтобы всё работало на разных версиях. Поэтому если есть желание обеспечить кроссбраузерность, чтобы сайт хорошо отображался во всех браузерах, об этом приходится думать постоянно, с первой же секунды работы над сайтом.

Пошаговое руководство в общих чертах

Итак, давайте рассмотрим, как сделать кроссбраузерную верстку. Первоначально следует определиться, с какими программами сайт будет работать. Примите к сведению, что количество браузеров приближается к двум сотням, поэтому пытаться угодить всем – дело неимоверной сложности. Поэтому выбирают число в диапазоне от 3 до 8. Чтобы определиться, на что ориентироваться, можно воспользоваться и вспомогательными сервисами вроде Yandex Metrika и Google Analytics. После этого следует выяснить, как же будет решаться проблема достижения кроссбраузерности.

Многие делают свою ставку на хаки. Это специальные коды, селекторы и правила, которые понимает только один определённый браузер. Но, учитывая, что приходится писать как минимум несколько десятков таких вставок для разных браузеров и их версий, многие откидывают такой подход из-за его дороговизны, длительности и нерациональности. Некоторые делают ставку на использование тех элементов, которые отображаются одинаково. Но при этом часто теряется ряд важных преимуществ. Чтобы минимизировать потери, параллельно используется ещё и адаптивный дизайн. Что он собой представляет?

Адаптивный дизайн

Это подход к верстке сайтов, во время которого сайт делается резиновым, то есть таковым, который приспосабливается к разным браузерам и размерам экранов. Следует отметить, что адаптивный дизайн и кроссбраузерность тесно переплетены, и когда говорят о чем-то одном, то, как правило, подразумевают и второе. Давайте рассмотрим небольшой пример.

Есть такие браузеры, как Opera и Opera Mini. Первый используется на обычных компьютерах, а второй – на мобильных телефонах. В целом они похожи, но имеют целый ряд особенностей. В таких случаях важным является подключение отдельных файлов и/или же использование медиазапросов. Что же это такое? В первом случае создаются отдельные файлы, которые нацелены на работу конкретного браузера, и прописывается их вызов. Во втором случае необходимы файлы с медиазапросами. Если используемая программа соответствует специфическим требованиям, то подгружается файл в нужной конфигурации.

Что нужно делать?

Первоначально следует помнить, что когда работаете с html, кроссбраузерная верстка требует особого внимания. Поэтому для большей результативности следует по максимуму использовать возможности каскадных таблиц стилей. При этом также необходимо изменить и некоторые подходы к работе. Так, многие неопытные люди, когда они указывают размер чего-то, используют пиксели – рх. Рассмотрим пример с большой надписью-заголовком, которая украшает верхушку сайта.

У неё ширина была задана в размере 800рх. С экраном в 1600рх это будет довольно привлекательно. А вот на 700рх она будет смотреться нелепо. Что делать в таком случае? Можно задать размер не в пикселях, а в процентах! И занимать надпись будет не фиксированную длину, а половину ширины экрана. В процентах можно задавать и расстояние, на котором от краев экрана будет размещен определённый элемент. Но вот что делать, если экран слишком уж маленький?

Допустим, он составляет 300рх? В этом случае нам поможет медиазапрос, которому необходимо прописать фиксирование ширины. И если она равняется 700рх и меньше, то можно установить, что надпись будет занимать 75% места. А если ширина равняется 300рх и меньше, то можно выставить и все 100%. В целом тема весьма интересная и полезная, поэтому её можно изучить весьма подробно. Но, увы, здесь информации на книгу, и поместить всё в статью не получится.

Почему кроссбраузерная адаптивная верстка привлекает поисковые системы?

А ответ весьма прост: ибо это говорит о том, что разработчики следят за сайтом и делают его максимально приятным для своих пользователей. А значит, таких людей можно поощрить, предоставляя им более высокие позиции в поисковых системах. Конечно, ваш сайт не будет выведен сразу на ТОП-1, но в совокупности с другими факторами это позволит сильно подняться вверх. Следует отметить, что это не простое бесполезное требование, а нечто, чему заслужено уделено такое внимание.

Ведь подумайте сами: каково это пользователю, когда он попадает на сайт, который не очень приятен внешне? А ведь он может прийти к мысли, что поисковая система предлагает некачественный контент! Поэтому они и отбирают так тщательно сайты, которые следует предлагать. К тому же в этом есть и выгода вебмастеров, ведь они создают качественную оболочку для контента, в которой люди смогут получать интересующую их информацию с помощью любого аппаратного средства: компьютера, ноутбука, планшета, смартфона или же мобильного телефона. Соответственно, чем больше удовлетворенных посетителей, тем быстрее растёт сайт и уровень дохода.

Заключение

Нельзя не отметить тот скромный факт, что создание кроссбраузерного сайта с адаптивным дизайном – это дело нелегкое, весьма длительное и трудоёмкое. Поэтому необходимо запастись терпением и помнить, что дисциплина – это великое дело! Возможно, что-то первоначально не будет получаться, но необходимо пробовать, искать информацию, использовать различные подходы и не отступать. И тогда обязательно получится сделать сайт, который любо-дорого будет показать его посетителям.

Что такое кроссбраузерность. Кроссбраузерная верстка

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack , которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

Так что если для вас пиксель-пёрфект — это попасть в сетку и в горизонтальные размеры блоков, то у вас ещё есть шансы. Но если вы подкручиваете сглаживание текста, количество строк в абзаце или вертикальные размеры блоков с содержимым, строго по макету, вы тратите время впустую. Идеально кроссбраузерный сайт будет выглядеть одинаково чужеродно на всех платформах — ведь у каждой свои особенности, привычные пользователям.

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах .

Видеоверсия

Среди всего разнообразия существующих на данный момент браузеров таких как Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox и, конечно же браузер Амиго, который имеет способность самопроизвольно устанавливаться на компьютеры, стоит только посмотреть на ссылку. И у любого из браузеров имеется большое количество версий, выходящих одна за другой. Поэтому каждая новая версия каждого браузера имеет свои собственные особенности. И для корректной работы сайта в каждом из них необходимо использовать кроссбраузерную верстку .

И когда верстается сайт , его надо тестировать на всех браузерах. Случае, когда этого не делается, то после сдачи сайта могут всплыть неприятные дефекты.

Самым «веселым» из браузеров, конечно же является браузер Internet Explorer, хотя при всем при этом большинство пользователей до сих пор используют этот браузер. Так если сайт предварительно проверялся на Chrome, а потом его открывают в Explorer, и, о, ужас. Блоки перепутаны, кнопки меню наезжают друг на друга, картинки отображаются некорректно, в общем, полный хаос.

Поэтому для того, чтобы пользователю было удобно работать с вашим сайтом через любой браузер, и не видел подобного ужаса проведение кроссбраузерной верстки обязательно для любого сайта. Исходя из всего что было написано выше, делаем вывод, что кроссбраузерная html и css верстка – это верстка сайта, нацеленная на создания сайт, отображаемого в каждом браузере одинаково корректно.

Учитывая такое разнообразие браузеров, а так же необходимость того, чтобы сайт был универсальным и мог корректно отображаться во всех браузерах, работодатели предъявляют требование к верстальщикам в обязательном порядке верстать кроссбраузерно. Понимание причин некорректного отображения сайта, а так же навык кроссбраузерной верстки приходит со временем и в процессе долгой практики. Только методом проб и ошибок человек может разобраться какие браузеры, какие заморочки имеют. С опытом, верстальщик старается составить код, так, чтобы он был всячески адаптирован под каждый из браузеров, а в процессе верстки оставалось только подправить небольшие косяки.

Причины проблем с отображением сайта.

Теперь давайте разберем, почему происходят такие неприятности с восприятием кода в разных браузерах.
  1. Верстка не соответствует некоторым стандартам HTML.
  2. /i>Постоянно обновляются и появляются новые библиотеки и правила CSS. Они прекрасно воспроизводятся обновленными версиями браузеров, но могут некорректно отображаться старыми версиями.
  3. Internet Explorer . Самый странный браузер, который не понимает половину всех правил и поэтому постоянно придумываются новые хаки, чтобы обойти эти проблему IE.
  4. Значение атрибутов по умолчанию . В каждом браузере это значение может быть разным. Атрибуты – это цвета элементов, шрифты, их размер. Все это должно быть описано в таблице стилей, в противном случае браузер будет самостоятельно проставлять значения, указанные во свех из них по умолчанию. Поэтому в каждом из них сайт будут отображаться по разному.
Чтобы это научится обходить эти проблемы, для начала, как ы уже выяснили необходима практика, а для облегчения начального этапа изучения кроссбраузерной верстки я подготовили для Вас несколько советов.

Совет 1. Разрешить проблему атрибутов достаточно просто, хотя может немного нудновато. Для этого просто нужно прописать все каждый из атрибутов в таблице стилей. Таким образом браузерам не придется вставлять значения по своему желанию.

Совет 2. Установите все популярные браузеры на свой рабочий компьютер, а также все версии браузера Internet Explorer. Так как установить сразу несколько версий на один компьютер без особых танцев с бубном непросто, то можно установить Internet Explorer Tester. Эта программа дает возможность проверять сайт сразу же на нескольких версиях браузера.

Совет 3. Заранее выберите себе вариант верстки. Здесь есть два варианта. Первый – верстать сайт полностью подходящий под один единственный браузер, а потом исправлять проблемы в каждом следующем браузере. Вариант второй – проверять каждый элемент кода по мере его написания во всех браузерах. Выбирая первый вариант, Вы сможете избежать лишних проблем, переписывая код полностью. Но выбор всегда остается за Вами.

Совет 4. Используйте плагины, позволяющее быстрее находить ошибки кода для каждого из браузеров. Как пример можно потестировать эти плагины:

  1. Для Chrome на сайте getfirebug.com
  2. Для Opera на официальном сайте Opera
  3. Для Mozila на сайте addons mozila
  4. Для IE на оф. сайте Microsoft

Давайте сделаем вывод из всего вышеперечисленного. Кроссбраузерная верстка – это не страшно, а иногда и весело. В современном мире она очень важна, для того чтобы стать преуспевающим верстальщиком. Главное, чтобы освоить эту верстку, это опыт, большой опыт. Поэтому практиковаться Вам придется очень много. Пока Вы тренируетесь, пользуйтесь разными стратегиями, пробуйте разные методы и средства (например, использовать в своих работах готовые фреймовики, которые могут ускорить разработку сайта и с легкостью создавать адаптивные макеты сайтов). По истечению некоторого времени Вы сможете найти именно свою стратегию того, как сделать кроссбраузерную верстку, и написать сайт, отображаемый корректно во каждом из популярных браузеров.

Изучайте кроссбраузерную верстку и спасибо за внимание.

На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера — это то, что один и тот же HTML код выглядит по разному в разных браузерах. Более того, один и тот же код выглядит по разному в разных версиях одного и того же браузера.

Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют «кроссбраузерной версткой HTML». Умение верстать такой код — весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.
Почему сайт выглядит по разному в различных браузерах?

Существует несколько причин возникновения различного вида сайта на различных обозревателях.

1. Использование нестандартных возможностей HTML.

Дизайнер может использовать возможности, которые не входят в стандарт HTML. Действительно, браузеры могут поддерживать множество различных атрибутов тегов, которые не описаны в стандарте. Использовать эти возможности не рекомендуется. По одной простой причине — если что-либо не описано в стандарте, какой-либо из браузеров может это не поддерживать. И создатели такого браузера будут совершенно правы. Не нужно использовать нестандартные особенности.

Всегда проверяйте написанный вами код на соответствия стандарту.

Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.

Данный код выводит таблицу, состоящую из одной ячейки. Веб дизайнер хочет, чтобы высота первой строки данной таблицы была равна 100 пикселям. Однако, в стандарте HTML у тега

недопустим атрибут height.

В данном случае, ошибка не велика, так как атрибут height у тега

понимают большинство современных браузеров. (Лишь InternetExplorer 4, не распознает этот атрибут). Но в других случаях, пренебрежение стандартом может привести к более плачевным результатам. Наверняка, все из нас бывали на сайтах, на которых какой-либо элемент съезжал либо вбок, либо вниз. Каждый из нас, скорее всего, в душе думал, что сайт делал не профессионал. Хотя, скорее всего, сайт просто не был протестирован на основных типах браузеров. Как правило, сайты создают и тестируют только в InternetExplorer, так как это наиболее популярный браузер среди пользователей. Поэтому, в следующий раз, будем снисходительны, зная, почему происходит потеря внешнего вида.

Правильное решение для примера с табличной — это использование стилей. Вот как может выглядеть «правильный» код:

Данный вариант будет (или, по крайней мере, должен) отображаться одинаково во всех типах браузеров.

2. Значения атрибутов по умолчанию.

У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.

Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости «додумывать» значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, «lucida grande», arial, helvetica, sans-serif;
background-color: white;
}

Таким образом, все элементы на странице будут иметь свойства заданные в данном файле. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.

3. «Особенности» некоторых браузеров.

Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.

Поскольку основной виновник проблем несовместимости со стандартом — это Internet Explorer, то было придумано множество возможных обходных путей, как заставить сайт в IE выглядеть так же, как и в других браузерах.

Самый распространенный способ — это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.

Когда создаётся сайт, то важным в плане обеспечения его эффективности является кроссбраузерная верстка. Что это такое? Как её можно сделать? Какие подводные камни существуют?

Что собой представляет кроссбраузерная верстка?

Html/css — это основа при создании сайта. Многие веб-мастера подходят к этому по принципу: мне хорошо — и хватит. И как же неприятно бывает, когда заходишь со своего браузера или мобильного устройства, а сайт отображается неправильно. В таких случаях на помощь приходит адаптивный дизайн и кроссбраузерная верстка.

Css и html составляют в таком случае костяк, с помощью которого всё реализовывается. В отдельных случаях для этой цели может привлекаться JavaScript. Но конечная цель одна — сделать так, чтобы всё работало на разных версиях. Поэтому если есть желание обеспечить кроссбраузерность, чтобы сайт хорошо отображался во всех браузерах, об этом приходится думать постоянно, с первой же секунды работы над сайтом.

Пошаговое руководство в общих чертах

Итак, давайте рассмотрим, как сделать кроссбраузерную верстку. Первоначально следует определиться, с какими программами сайт будет работать. Примите к сведению, что количество браузеров приближается к двум сотням, поэтому пытаться угодить всем — дело неимоверной сложности. Поэтому выбирают число в диапазоне от 3 до 8. Чтобы определиться, на что ориентироваться, можно воспользоваться и вспомогательными сервисами вроде Yandex Metrika и После этого следует выяснить, как же будет решаться проблема достижения кроссбраузерности.

Многие делают свою ставку на хаки. Это специальные коды, селекторы и правила, которые понимает только один определённый браузер. Но, учитывая, что приходится писать как минимум несколько десятков таких вставок для разных браузеров и их версий, многие откидывают такой подход из-за его дороговизны, длительности и нерациональности. Некоторые делают ставку на использование тех элементов, которые отображаются одинаково. Но при этом часто теряется ряд важных преимуществ. Чтобы минимизировать потери, параллельно используется ещё и адаптивный дизайн. Что он собой представляет?

Адаптивный дизайн

Это подход к верстке сайтов, во время которого сайт делается резиновым, то есть таковым, который приспосабливается к разным браузерам и размерам экранов. Следует отметить, что адаптивный дизайн и кроссбраузерность тесно переплетены, и когда говорят о чем-то одном, то, как правило, подразумевают и второе. Давайте рассмотрим небольшой пример.

Есть такие браузеры, как Opera и Opera Mini. Первый используется на обычных компьютерах, а второй — на мобильных телефонах. В целом они похожи, но имеют целый ряд особенностей. В таких случаях важным является подключение отдельных файлов и/или же использование медиазапросов. Что же это такое? В первом случае создаются отдельные файлы, которые нацелены на работу конкретного браузера, и прописывается их вызов. Во втором случае необходимы файлы с медиазапросами. Если используемая программа соответствует специфическим требованиям, то подгружается файл в нужной конфигурации.

Что нужно делать?

Первоначально следует помнить, что когда работаете с html, кроссбраузерная верстка требует особого внимания. Поэтому для большей результативности следует по максимуму использовать возможности каскадных таблиц стилей. При этом также необходимо изменить и некоторые подходы к работе. Так, многие неопытные люди, когда они указывают размер чего-то, используют пиксели — рх. Рассмотрим пример с большой надписью-заголовком, которая украшает верхушку сайта.

У неё ширина была задана в размере 800рх. С экраном в 1600рх это будет довольно привлекательно. А вот на 700рх она будет смотреться нелепо. Что делать в таком случае? Можно задать размер не в пикселях, а в процентах! И занимать надпись будет не фиксированную длину, а половину ширины экрана. В процентах можно задавать и расстояние, на котором от краев экрана будет размещен определённый элемент. Но вот что делать, если экран слишком уж маленький?

Допустим, он составляет 300рх? В этом случае нам поможет медиазапрос, которому необходимо прописать фиксирование ширины. И если она равняется 700рх и меньше, то можно установить, что надпись будет занимать 75% места. А если ширина равняется 300рх и меньше, то можно выставить и все 100%. В целом тема весьма интересная и полезная, поэтому её можно изучить весьма подробно. Но, увы, здесь информации на книгу, и поместить всё в статью не получится.

Почему кроссбраузерная адаптивная верстка привлекает поисковые системы?

А ответ весьма прост: ибо это говорит о том, что разработчики следят за сайтом и делают его максимально приятным для своих пользователей. А значит, таких людей можно поощрить, предоставляя им более высокие позиции в поисковых системах. Конечно, ваш сайт не будет выведен сразу на ТОП-1, но в совокупности с другими факторами это позволит сильно подняться вверх. Следует отметить, что это не простое бесполезное требование, а нечто, чему заслужено уделено такое внимание.

Ведь подумайте сами: каково это пользователю, когда он попадает на сайт, который не очень приятен внешне? А ведь он может прийти к мысли, что поисковая система предлагает некачественный контент! Поэтому они и отбирают так тщательно сайты, которые следует предлагать. К тому же в этом есть и выгода вебмастеров, ведь они создают качественную оболочку для контента, в которой люди смогут получать интересующую их информацию с помощью любого аппаратного средства: компьютера, ноутбука, планшета, смартфона или же мобильного телефона. Соответственно, чем больше удовлетворенных посетителей, тем быстрее растёт сайт и уровень дохода.

Заключение

Нельзя не отметить тот скромный факт, что создание кроссбраузерного сайта с адаптивным дизайном — это дело нелегкое, весьма длительное и трудоёмкое. Поэтому необходимо запастись терпением и помнить, что дисциплина — это великое дело! Возможно, что-то первоначально не будет получаться, но необходимо пробовать, искать информацию, использовать различные подходы и не отступать. И тогда обязательно получится сделать сайт, который любо-дорого будет показать его посетителям.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Кроссбраузерность — способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.

Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.

Задача разработчика сайта — сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.

Кроссбраузерность верстки

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Статьи по теме

Кроссбраузерная верстка, «привлекающая» поисковые системы. Кроссбраузерность и адаптивная верстка

От автора: CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.

Верстка с помощью css – что это и зачем оно нужно?

Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.

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

Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.

Поэтому всегда верстальщик в начале работы создает структуру, необходимые элементы, а потом все это оформляет.

Основные вещи, которые можно сделать в css

Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.

Соответственно, свойство display определяет, как тот или иной элемент будет отображаться на странице. Первое значение преобразует нужный элемент в таблицу, второе – в ряд таблицы, а третье – в отдельную ячейку. Вот так вот за счет таких нехитрых манипуляций вы можете смастерить искусственную таблицу на странице без единого тега table или td в коде.

Кроссбраузерная верстка. Как css может в этом помочь

А помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.

В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:

padding : 0 ;

margin : 0 ;

ul {

list — style : none ;

То есть мы просто убрали все внутренние и внешние отступы и всех элементов, а также убрали маркеры у списков, потому что сегодня мало кто использует их. Цель css reset – позволить вам начать описание стилей с чистого листа.

Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.

Адаптивная верстка в css

Адаптивная верстка это вообще отдельная ветвь в сайтостроении, но в этой статье я всего лишь объясню вам, что это такое с простейшим примером. Вообще я думаю, что названа она очень правильно. Адаптироваться, значит, меняться. А в сайтостроении в основном нужно меняться под разные разрешения экрана. Сайту меняться, всмысле, не человеку же.

Вообще адаптивность сегодня чуть ли не обязательный параметр нормального сайта. Суть ее в том, что дизайн сайта и его структура немного меняются на разных разрешениях экрана. На смартфонах и планшетах, например, пропадает боковая колонка, а на больших экранах макет перестает увеличиваться и центрируется.

Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:

@media and only screen (max-width: 600px){ img{ float: none; } }

@ media and only screen (max — width : 600px ) {

img {

float : none ;

Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.

Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!

Рис.2. Пример записи медиа-запросов. Как видите, для одного шаблона может понадобиться приличное количество правил и стилей, чтобы реализовать нормальную адаптивность.

Какой редактор использовать для работы с css?

Конечно, программа для css верстки должна быть более менее толковой – с поддержкой подсветки синтаксиса как минимум, потому что это очень важно для визуального восприятия кода.

Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.

Узнайте css лучше

Кроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.

Подробнее о том, как использовать эту технологию при верстке под мобильные устройства, вы можете узнать из . Также в нашем премиум разделе вы можете найти обучающие уроки по основам этой технологии, а также более продвинутый материал по CSS3, поэтому вам не нужно ничего искать, все уже есть, только бери и учись.

Невозможно в столь короткой статье рассказать вам подробно обо всем, что дает верстка с помощью технологии css, но кое-какие моменты, я думаю, вы уловили. Для создания сайта этого просто необходимый язык, без которого нельзя обойтись, а в его изучении вам помогут материалы на нашем сайте, среди которых много и бесплатных. Также я рекомендую вам подписаться на обновления, чтобы было проще получать от нас новые уроки.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Кроссбраузерность — способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.

Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.

Задача разработчика сайта — сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.

Кроссбраузерность верстки

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack , которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

Так что если для вас пиксель-пёрфект — это попасть в сетку и в горизонтальные размеры блоков, то у вас ещё есть шансы. Но если вы подкручиваете сглаживание текста, количество строк в абзаце или вертикальные размеры блоков с содержимым, строго по макету, вы тратите время впустую. Идеально кроссбраузерный сайт будет выглядеть одинаково чужеродно на всех платформах — ведь у каждой свои особенности, привычные пользователям.

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах .

Видеоверсия

Доброго времени суток, дорогие гости моего обучающего блога и верные подписчики. В текущей публикации я хочу рассказать, что под собой подразумевает кроссбраузерная верстка.

Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в и дам несколько полезных советов. Давайте начнем разбор полетов!

Кроссбраузерность, покажи свое лицо!

Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению в любом существующем браузере.

Это означает, что независимо от того, в каком ППО для просмотра вы откроете сервис, его стилевая разметка не должна измениться.

Почему же все такие проблемные?

В сфере IT на этот философский вопрос можно дать ответ. И он, на самом деле, очень прост. В наше время технологии развиваются с бешенной скоростью и поэтому каждый год для браузеров выходят расширения, обновления, внедряется поддержка новых возможностей веб-языков и соответственно исключаются устаревшие функции и методы.

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

Из этого и выплывает, что новые версии браузеров поддерживают многие недавно вышедшие оптимизации языков и библиотек, а более ранние не понимают, что от них вообще хочет разработчик.

Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то , Safari, или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке https://www.w3.org).

Данный консорциум разрабатывает общие стандарты в области веб-разработки, благодаря которым и достигается совместимость между различными программными продуктами.

Рецепты для решения проблем с идентичностью отображения

Познакомившись с основными «камнями преткновения» на пути к кроссбраузерности, вы, вероятно, задали себе вопрос: «А как же тогда сделать сайт, функционирующий во всех браузерах одинаково?». Чтобы ответить на этот вопрос, я решил перечислить базовые решения и полезные советы по порядку.


На самом деле можно еще много чего написать на эту тему. Но я считаю, что на данном пункте полезных рецептов стоит остановиться, так как о важных моментах я вам рассказал.

Заметьте, что за один раз невозможно научиться кроссбраузерной верстке. Стоит практиковаться и пробовать новые решения во время реализации новых проектов. Поэтому углубляйте свои знания за счет книг, смотрите курсы, касающиеся данного вида верстки и основ юзабилити, читайте полезные статьи.

С уважением, Роман Чуешов

Прочитано: 106 раз

У вас есть вопрос — не стесняйтесь и задавайте, а мы ответим на него в одном из наших выпусков.

Задать вопрос

Что такое кроссбраузерная вёрстка, — спрашивают Илья, Сергей и Эдуард, — какие есть браузеры и нужен ли пиксель-пёрфект?

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack , которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

Так что если для вас пиксель-пёрфект — это попасть в сетку и в горизонтальные размеры блоков, то у вас ещё есть шансы. Но если вы подкручиваете сглаживание текста, количество строк в абзаце или вертикальные размеры блоков с содержимым, строго по макету, вы тратите время впустую. Идеально кроссбраузерный сайт будет выглядеть одинаково чужеродно на всех платформах — ведь у каждой свои особенности, привычные пользователям.

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах .

Как проверить кроссбраузерную совместимость адаптивного веб-дизайна

HTML по своей природе является текучей средой. Текст и контейнеры расширяются по горизонтали и вертикали, чтобы использовать доступное пространство. Эта текучесть усложняла сложные проекты, поэтому на рубеже тысячелетий многие сайты приняли фиксированную ширину, основанную на популярных размерах экрана.

Процесс оставался жизнеспособным, поскольку размеры экрана продолжали увеличиваться с 800×600 до 1024×768 и выше. Однако появление смартфонов и выпуск iPhone в 2007 году изменили эту тенденцию.Сегодня более половины пользователей заходят на веб-страницы с мобильных устройств меньшего размера.

Примечание. Технически смартфоны часто имеют более высокое разрешение, чем многие мониторы, но отдельные пиксели становятся невидимыми. iPhone 11 Max преобразует свое аппаратное разрешение 2688 x 1242 в более практичное логическое разрешение 896 x 414. Каждый логический пиксель сопоставляется с сеткой 3×3 реальных пикселя, что обеспечивает более плавные шрифты и повышенную детализацию изображения.

Первоначальным обходным решением было два сайта: один для настольных компьютеров и один для мобильных устройств, часто с обнюхиванием пользовательским агентом для перенаправления по мере необходимости.Это быстро стало непрактичным, поскольку разнообразие устройств росло в геометрической прогрессии.

Наконец, термин «Отзывчивый веб-дизайн » (RWD) был разработан Итаном Маркоттом в 2010 году. Этот метод позволял одному и тому же сайту работать на любом устройстве независимо от размера экрана или размера области просмотра.

Как работает задний привод?

Не существует единого подхода или технологии RWD.

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

Лучшей техникой было mobile first . Все началось с линейного мобильного представления, которое работало на всех устройствах, а затем изменялось или адаптировалось содержимое по мере того, как становилось доступно больше места и поддерживаемых функций браузера. В последнее время многие сайты перешли на более простые макеты, где мобильные устройства и настольные компьютеры в основном похожи.

Типичным примером RWD в действии является гамбургер-меню. Те, у кого маленькие экраны, могут щелкнуть значок, чтобы просмотреть навигационные ссылки, а те, у кого большие экраны, могут увидеть все параметры в горизонтальном списке.

В следующих разделах представлен ряд технических вариантов реализации.

HTML

окно просмотра Метатег

Независимо от метода RWD, следующий тег должен быть установлен в вашем HTML :

  
  

Параметр width=device-width гарантирует, что мобильные браузеры масштабируют логические пиксели CSS по ширине экрана.Без этого браузер будет считать, что он отображает настольный сайт, и масштабирует его соответствующим образом, чтобы его можно было панорамировать и масштабировать.

Медиа-запросы

Медиа-запросы были основной основой первых сайтов RWD. Они позволяют CSS нацеливаться на определенные диапазоны размеров области просмотра. Например:

 
п {
  размер шрифта: 1rem;
}


@media (минимальная ширина: 900 пикселей) и (максимальная ширина: 1200 пикселей) {

  п {
    размер шрифта: 1.5rem;
  }

}
  

Медиа-запросы по-прежнему используются, хотя теперь доступны менее явные параметры.

<картинка> Элементы

Элемент HTML использует синтаксис медиазапроса для управления отображаемым изображением из вариантов выбора . Обычно это используется для художественного оформления, чтобы отобразить подходящее изображение для области просмотра устройства. Например:

  <картинка>

  
  <источник srcset="landscape.jpg"
            media="(минимальное соотношение сторон:1/1)"
              alt="пейзаж" />

  
  портрет


  

Единицы области просмотра CSS

Единицы CSS vw и vh представляют 1% ширины и высоты окна просмотра соответственно. vmin — 1 % от наименьшего размера, а vmax — 1 % от наибольшего размера.

Они обеспечивают гибкость RWD, особенно при использовании в сочетании с calc . Например:

 
п {
  размер шрифта: 1rem + 0.5vw;
}
  

Столбцы CSS

Многоколоночные макеты CSS позволяют создавать несколько текстовых столбцов по мере увеличения размеров контейнера.Например:

 
.контейнер {
  колонки: 12рем авто;
  столбик-разрыв: 2рем;
}
  

CSS Flexbox и сетка

CSS Flexbox и CSS Grid предоставляют современные методы размещения дочерних элементов в зависимости от их содержимого и доступного пространства. Основное отличие:

  • Flexbox используется для одномерных макетов. Элементы могут переноситься (или нет) на следующую строку по мере необходимости, поэтому столбцы могут не выстраиваться в линию.
  • Сетка предназначена для двумерных макетов, обычно с идентифицируемыми строками и столбцами.

Любой из них можно использовать для создания внутреннего макета (термин, разработанный Джен Симмонс). По сути, элементы имеют размер в соответствии с размерами окна просмотра без необходимости медиа-запросов. Например:

 
.grid-контейнер {
  отображение: сетка;
  grid-template-columns: повторение (автоподгонка, minmax (20rem, 1fr));
  зазор сетки: 1rem;
}
  

Параметры JavaScript RWD

JavaScript также можно использовать для определения размеров области просмотра и соответствующей реакции.Например:

 
константа
  vw = окно.внутренняя ширина,
  vh = окно.внутренняя высота;
  

Точно так же размеры отдельного элемента можно проверить с помощью offsetWidth и offsetHeight, хотя метод getBoundingClientRect() может возвращать больше информации, включая доли пикселя:

  константа
  элемент = документ.getElementById('мой элемент'),
  прямоугольник = элемент.getBoundingClientRect(),
  ew = прямоугольная ширина,
  eh = прямоугольная высота;
  

Размеры окна и элемента могут изменяться при повороте устройства или изменении размера окна браузера.API matchMedia может анализировать мультимедийные запросы CSS и запускать события изменения:

 
const mql = window.matchMedia('(мин. ширина: 600px)');


mqTest(mql);


mql.addListener(mqTest);


функция mqTest(e) {

  если (e.matches) {
    console.log('ширина области просмотра не менее 600 пикселей');
  }
  еще {
    console.log('Ширина области просмотра меньше 600 пикселей');
  }

}
  

Поддержка браузера

Прежде всего, технологии RWD обеспечивают хорошую поддержку браузеров. Самый последний вариант — CSS Grid — поддерживается почти 95% используемых сегодня браузеров.Тем не менее, все равно необходимо протестировать ваш сайт на различных устройствах, разрешениях и браузерах…

Тестирование в браузере

Изменение размера окна браузера — разумная стратегия тестирования на несколько часов, но она быстро становится неточной и громоздкой. Большинство браузеров предлагают режим адаптивного дизайна , который позволяет выбрать устройство и пользовательский агент, повернуть его, выбрать разрешение, изменить плотность пикселей, ограничить полосу пропускания, эмулировать прикосновение и делать снимки экрана.

В Firefox выберите Режим адаптивного дизайна в меню Веб-разработчик или нажмите Ctrl | Cmd + Shift + M :

В браузерах на основе Chromium откройте Инструменты разработчика из меню Дополнительные инструменты или нажмите Ctrl | Cmd + Shift + I .Затем щелкните значок Переключить панель инструментов устройства :

Вернитесь на вкладку браузера, чтобы просмотреть измененный размер сайта:

В Safari включите параметр Показать меню «Разработка» в строке меню на вкладке Дополнительно браузера Настройки . Загрузите страницу и выберите Войти в режим адаптивного дизайна в меню Разработка .

Однако имейте в виду, что эти инструменты только имитируют размеры экрана устройства и пользовательский агент.Они не могут точно эмулировать следующее:

  • Возможности рендеринга

    Браузер будет использовать свой собственный движок рендеринга, а не эмулируемого устройства. Функция CSS, которая работает в Firefox, будет «работать» в эмулированном представлении iPhone независимо от фактической поддержки. Тем не менее, рабочий стол Chrome будет демонстрировать разумное приближение к Android Chrome, а macOS Safari будет похож на iPhone, поскольку они основаны на тех же механизмах рендеринга.

  • Старые устройства

    Тестирование представления браузера iPhone в последней версии Safari не может точно представить старые устройства с устаревшими операционными системами и программным обеспечением.

  • Дисплеи высокой плотности

    Вы ограничены физическими пикселями монитора вашего ПК, поэтому сайт может выглядеть лучше или хуже на реальном устройстве.

  • Сенсорный экран

    Мышь или трекпад обеспечивают более точное управление, чем устройство с сенсорным экраном и небольшим дисплеем. Эффекты, примененные при наведении, может быть невозможно просмотреть.

  • Скорость обработки

    Скорее всего, ваш компьютер будет иметь более высокую скорость сети и обработки, чем мобильное устройство.

Эмуляторы мобильных ОС

Запуск виртуальной машины Android или iOS на вашем устройстве позволяет вам устанавливать и запускать настоящие мобильные браузеры и использовать их настоящие механизмы рендеринга.

Эмуляторы Android

включают:

  • Genymotion: бесплатные и коммерческие облачные варианты, все версии Android для Windows, macOS и Linux
  • Android Studio (и эмулятор): бесплатно, Windows, macOS и Linux
  • Visual Studio Xamarin (и эмуляторы): коммерческая версия, Windows и macOS
  • Bliss OS: бесплатно, Android 9 для Windows, Linux и Chrome OS
  • ОС Phoenix: бесплатно, Android 7.1 или 5.1 для Windows и macOS
  • Android-x86: бесплатные ISO-образы Android для любой платформы виртуальных машин.

Chrome — очевидный выбор браузера для Android, но вы также можете установить Opera Mini, которая заметна на телефонах с низким энергопотреблением.

Опции для iOS более ограничены:

У этих эмуляторов все еще есть недостатки:

  • Программное обеспечение требует определенных технических знаний и использует значительные системные ресурсы.
  • Многие опции iOS являются симуляторами .Они адаптируют другой движок рендеринга и не всегда будут точными.

Услуги онлайн-тестирования

Этот сегмент был создан в партнерстве с LambdaTest. Спасибо за поддержку партнеров, которые делают SitePoint возможным.

Некоторые онлайн-сервисы позволяют тестировать адаптивные страницы в мобильных браузерах через Интернет. По сути, вы арендуете время на реальном устройстве и можете просматривать его экран в браузере. Нет программного обеспечения, которое нужно настраивать или поддерживать.

Помимо тестирования в реальном времени, некоторые сервисы включают в себя API-интерфейсы автоматического тестирования, которые позволяют запускать сценарии и проверять регрессии стилей или неработающие пользовательские интерфейсы.

LambdaTest предоставляет более 2000 комбинаций устройств, ОС и браузеров. Особенности включают в себя:

  • тестирование localhost страницы, работающие на вашем ПК для разработки
  • отладка с помощью встроенных инструментов разработчика
  • тестирование геолокации из разных мест
  • автоматически созданные полностраничные скриншоты на нескольких устройствах
  • встроенный трекер проблем
  • LT Программное обеспечение браузера (Windows, macOS, Linux) для тестирования и сравнения устройств с автоматической перезагрузкой и синхронизацией прокрутки
  • API автоматизированного тестирования на основе Selenium
  • Круглосуточная поддержка
  • бесплатный план с неограниченным доступом от 15 долларов в месяц.

Зарегистрируйте бесплатную учетную запись LambdaTest …

Альтернативные услуги, которые также обеспечивают живое и автоматизированное мобильное тестирование, включают:

Тестирование реальных устройств

Наконец, ничто не заменит тестирование на реальных устройствах. Это лучший способ оценить фактическую скорость обработки, сенсорное управление и адаптивный веб-дизайн вашего сайта.

В идеале вы должны протестировать как можно больше устройств, но ваш новый смартфон может не соответствовать среднему аппаратному обеспечению.Постарайтесь приобрести устройства среднего класса, которым год или два, например, подержанный Moto G7 или iPhone 8.

Устройства в той же сети могут получить доступ к серверу вашего ПК, введя его IP-адрес в браузере. Это можно получить с помощью ifconfig в macOS и Linux или ipconfig в Windows.

Вы также можете подключить смартфон к компьютеру с помощью USB-кабеля. Это позволяет удаленно управлять устройством и легко получать доступ к его панелям инструментов разработчика для отладки.Техника зависит от платформы, но для отладки Android Chrome в настольной версии браузера:

  1. На устройстве Android выберите Параметры разработчика в Настройках и включите Отладка по USB .
  2. Подключите устройство к компьютеру с помощью соответствующего USB-кабеля. При первой попытке вам может быть предложено подтвердить действия на одном или обоих устройствах.
  3. Запустите Chrome на своем ПК и откройте в новой вкладке.Убедитесь, что Обнаружение USB-устройств включено.
  4. При необходимости установите Переадресация портов — например, порт 8888 на удаленном устройстве можно перенаправить на localhost:8888 .
  5. Ваше устройство должно появиться в списке. Теперь вы можете проверить новую или существующую вкладку, которая открывает инструменты разработчика устройства:

Для отладки Safari для iPhone выполните следующие действия:

  1. Подключите телефон к компьютеру Apple.
  2. Откройте веб-страницу, которую вы хотите отладить, в Safari на вашем iPhone.
  3. Запустите Safari на своем компьютере.
  4. В Safari на компьютере перейдите к Develop > [ваш iPhone] > [веб-сайт для проверки] . Это откроет инструменты разработчика Safari на вашем компьютере, что позволит вам отлаживать сайт на вашем iPhone.

Один сайт, много просмотров

Технологии адаптивного веб-дизайна

позволяют создать единый веб-сайт, который может просматривать любой человек на любом устройстве независимо от технических ограничений и границ.Сделать его удобным для пользователя — это другой вопрос, но диапазон и возможности инструментов тестирования продолжают улучшаться.

Основные проблемы межбраузерной совместимости, с которыми сталкиваются разработчики

Введение

Рынок программного обеспечения постоянно растет, как и браузеры и устройства. Клиенты больше не наивны в выборе лучших веб-сайтов для удовлетворения своих потребностей. Таким образом, для бизнеса становится необходимым предложить им лучший пользовательский опыт и услуги. Существует так много браузеров, которые время от времени выходят с новыми версиями, что затрудняет для разработчиков решение проблем кроссбраузерной совместимости.Кросс-браузерная совместимость является наиболее важным аспектом, требующим особого внимания разработчиков, и с которым всегда было сложно справиться из-за различных рабочих механизмов различных доступных браузеров. Это становится еще более сложным, когда речь идет о различных комбинациях устройств и операционных систем. Таким образом, поиск способов решения проблем кроссбраузерной совместимости является высокоприоритетной задачей разработчиков и критически важным для бизнеса.

Что такое кроссбраузерная совместимость?

Проще говоря, кросс-браузерная совместимость — это способность веб-приложений согласованно функционировать на всех типах комбинаций браузер-ОС-устройство с точки зрения того, как они выглядят и ведут себя на как можно большем количестве платформ.По мере того, как в экосистему внедряется все больше и больше устройств, операционных систем и браузеров, их поддержка становится довольно сложной задачей для фронтенд-разработчиков. У разных пользователей разные настройки браузера, и бизнес не может заставить их переключиться на другой тип браузера. Поэтому важно проверять совместимость вашего веб-сайта даже со старыми устаревшими браузерами. Но как мы можем достичь всего этого? Это делается путем сосредоточения внимания на исправлении основных проблем кроссбраузерной совместимости, с которыми сталкиваются разработчики.По мере продвижения в этой статье мы сможем ответить на вопрос о том, что такое проблемы кроссбраузерной совместимости и решения.

Давайте углубимся в некоторые ключевые проблемы, которые вызывают проблемы совместимости браузеров для разработчиков. Вот так!
 

Одним из наиболее важных аспектов, вызывающих проблемы кроссбраузерной совместимости и затрудняющих работу разработчиков, является CSS. Управление CSS довольно сложное и неорганизованное. CSS создает проблемы не только для веб-разработчиков, но и для тех, кто разрабатывает браузеры.С помощью новых кросс-браузерных стратегий и инструментов тестирования можно легко решить проблемы совместимости. Среди разработчиков распространено мнение, что разработчики хотят больше сосредоточиться на логических аспектах веб-разработки, а не на продукте. Google изучил наиболее распространенные проблемы кросс-браузерной совместимости в своих самых популярных ответвлениях, таких как CSS Flexbox, CSS Position Sticky, сетки, соотношение сторон и CSS-преобразования. Google в сотрудничестве с Microsoft, Igalia и Mozilla пытается решить эти проблемы совместимости в рамках проекта совместимости 2021, также называемого COMPAT2021.Microsoft взяла на себя улучшение CSS-сеток и подсетей в Chromium и намерена квалифицировать все тесты сетки.

  • Проблемы со старыми браузерами: 

Устаревшие браузеры, такие как Internet Explorer, устарели и не поддерживают новейшие технологии. Даже более старые версии других браузеров, таких как Mozilla Firefox, Google Chrome и т. д., относятся к категории старых браузеров. Технологии постоянно развиваются, поэтому CSS должен меняться вместе с этой эволюцией.Но это легче сказать, чем сделать. Невозможно полностью внедрить обновления CSS, потому что даже сегодня многие пользователи используют Internet Explorer в качестве предпочитаемого браузера. Браузеры продолжают выпускать новые обновленные функции, но не все пользователи используют обновленную версию предпочтительного браузера. Таким образом, эти проблемы необходимо протестировать, чтобы избежать проблем совместимости браузеров во всех браузерах и версиях браузеров для лучшего взаимодействия с пользователем.

  • Internet Explorer устарел:

Было время, когда Internet Explorer (IE) доминировал на рынке.Однако с быстрым развитием технологий Internet Explorer устарел и не поддерживает функции, которые есть в других браузерах. В 2021 году Internet Explorer стал постоянной проблемой для разработчиков, а также основной причиной возникновения проблем с кросс-браузерной совместимостью, поскольку некоторые пользователи все еще просматривают Интернет в IE. Вот диаграмма, показывающая самые проблемные браузеры разработчиков (согласно отчету о совместимости браузеров MDN 2020).

Источник: MDN Survey 2020

Он не предлагает поддержку нескольких классов, дизайн макета формы не очень хорош, и он также не обновляется большинством новых свойств, доступных в других местах.Несмотря на то, что Internet Explorer поддерживает CSS Flexbox, это не решает проблему полностью. Сообщается, что не будет поддержки рабочего стола IE 11 с 2022 года и позже для некоторых версий Windows 10. Режим IE в MS Edge будет использоваться для доступа и тестирования IE.

Люди не могут легко выйти из Internet Explorer, потому что у него есть история. Все началось с IE. Internet Explorer имел огромный успех, как и его вклад в прошлом. Множество приложений по здоровью, бухгалтерии, инвентаризации и т.д., были построены на Internet Explorer. Даже сегодня многие предприятия используют IE, поскольку переход на современные браузеры обходится дорого. Принимая во внимание все вышеперечисленные причины, разработчики должны понимать, что IE нельзя игнорировать, по крайней мере, в настоящее время, и убедиться, что проблемы кросс-браузерной совместимости тестируются в приоритетном порядке и в Internet Explorer.

Вот полезный постер с основными проблемами кросс-браузерной совместимостиСоздание веб-приложений зависит от JavaScript, несмотря на множество достижений в области HTML и CSS. Разработчики сталкиваются со многими проблемами при решении проблем совместимости браузеров с помощью JavaScript, в основном, когда они используют функции на веб-страницах, которые старые браузеры не поддерживают, или когда они используют неподходящий DOCTYPE и неправильный код браузера для прослушивания и т. д. Должен быть надлежащий механизм для обработки сценариев. языки, такие как JavaScript, чтобы устранить проблемы кросс-браузерной совместимости с JavaScript. Вот несколько примеров проблем межбраузерной совместимости, связанных с JavaScript:

— выравнивание версий ECMAScript для разных браузеров

— версия ECMAScript6 поддерживается, но только с использованием полифиллов.

— Нет встроенной поддержки JavaScript

— Раздувание кода, вызванное использованием компилятора

— JS Содержит несколько модулей и пакетов, замедляющих скорость работы приложения

Решение проблем кроссбраузерной совместимости с помощью JavaScript является довольно проблематичным для разработчиков. Следовательно, важно провести тестирование на кросс-браузерную совместимость, чтобы выяснить проблемы и решения кросс-браузерной совместимости.

  • Компоновка и стиль Совместимость:

Большинство разработчиков борются с проблемами стиля и макета.Любой бизнес потребует хорошо продуманный адаптивный веб-сайт. Но с учетом разных браузеров, платформ и устройств это становится недостижимым. Добиться долговременной совместимости макетов в различных браузерах с помощью CSS Flexbox и CSS Grid непросто. Динамические веб-сайты с адаптивным дизайном и макетами всегда имеют проблемы, такие как прокрутка и поддержка размеров области просмотра, что вызывает серьезные проблемы с совместимостью между браузерами для разработчиков. В отчете о совместимости браузеров MDN за 2020 год упоминаются особенности макета и дизайна, вызывающие проблемы с совместимостью между браузерами.

Источник: MDN Survey 2020

  • Прогрессивные веб-приложения Проблемы совместимости:

Прогрессивные веб-приложения — это не нативные приложения, которые не имеют функций нативного веб-приложения. Он не может использовать встроенные функции устройства, такие как доступ к камере или файлу и т. д. Управление PWA стало проблемой для разработчиков. Однако Google всегда поддерживает будущее PWA и предоставляет список API для разработки PWA. PWA поддерживаются замаскированными значками, но должны передавать в браузер фиксированные значки и манифест личного веб-приложения.Следовательно, совместимость браузера имеет первостепенное значение, даже в случае прогрессивных веб-приложений. Хотя частая смена изображений значков, несомненно, является самой нелюбимой задачей, ее нельзя игнорировать.

  • Проблемы при рендеринге в браузере:

Иногда некоторые элементы работают в одном браузере, но не в другом. Эти проблемы с рендерингом вызывают проблемы с совместимостью между браузерами. Каждый браузерный движок работает по-своему при отображении веб-страниц, и эти браузерные движки несут ответственность за все, что мы видим и используем в браузерах.Из-за этого размер шрифта и соотношение изображений становятся резкими, что приводит к несогласованности рендеринга страниц. Тестирование веб-сайтов в таком количестве браузеров и их версий кажется невозможным, если вы не полагаетесь на платформы облачного тестирования, такие как pCloudy, чтобы упростить кросс-браузерное тестирование.

  • Позднее принятие новых обновлений:

Разработчики продолжают выпускать новые функции, но браузеры не принимают их сразу. Эта задержка вызывает много других препятствий в реализации, вызывая серьезные проблемы с совместимостью между браузерами.Всякий раз, когда происходит задержка с внедрением новых функций, это влияет на качество веб-сайта. Подсетки CSS, поддерживаемые Mozilla Firefox, помогают решить проблемы разработчиков с интерфейсом и дизайном. CSS Subgrids — это новая функция CSS для создания вложенных сеток. Существует сетка внутри другой сетки, которая помогает разработчикам внешнего интерфейса решать многие предсказуемые проблемы совместимости.

Другой основной причиной возникновения проблем кроссбраузерной совместимости является CSS Flexbox. Как упоминалось ранее в этой статье, CSS Flexbox рассматривается в рамках проекта Compat21, демонстрирующего проблемы, влияющие на совместимость браузеров.Flexbox создает проблемы с дизайном и макетом, которые считаются наиболее важными для разработчиков проблемами совместимости с браузерами. Flexbox структурирует содержимое веб-страницы. Более 70 % страниц содержат CSS Flexbox в своем исходном коде. CSS Flexbox состоит из списка свойств, которые в настоящее время не поддерживаются всеми браузерами.

Это фрагмент кода (JS-код), используемый для предоставления современных функций браузера более старым браузерам, которые изначально их не поддерживают. Полифиллы важны для разработчиков, потому что иногда многие функции не работают в разных браузерах.Итак, чтобы справиться с этой ситуацией, используются полифиллы. Почему разработчики боятся заниматься этим грязным делом совместимости? Это потому, что думать о том, как решить проблемы кроссбраузерной совместимости, — это работа разработчика. Им не сойдет с рук наведение порядка и поддержание единообразия веб-сайта на разных платформах. Полифиллы считаются дополнительным бременем для разработчиков, поэтому они не нравятся разработчикам, особенно в случае старых браузеров. Polyfill — самая актуальная проблема совместимости в 2021 году.

Заключение

Кроссбраузерная совместимость — это критический аспект, от которого зависит пользовательский интерфейс вашего веб-сайта. Решение проблем кроссбраузерной совместимости большую часть времени становится кошмаром для разработчиков. Как бы вы ни старались избежать этих проблем, они будут преобладать, потому что ошибки и разработка идут рука об руку; и у разработчиков нет другого выбора, кроме как найти способы их решения. Мы всегда должны тестировать эти проблемы кросс-браузерной совместимости, полагаясь на такие платформы, как pCloudy, которые поддерживают тестирование кросс-браузерной совместимости вашего приложения и достижение целей совместимости браузера.

Тестирование кроссбраузерной совместимости адаптивного веб-дизайна

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

В последнее время потребительский просмотр веб-страниц стал охватывать почти все мобильные устройства, доступные на рынке для доступа в Интернет, в дополнение к традиционным настольным компьютерам и ноутбукам.В недавней статистике было обнаружено, что почти половина людей, подключенных к Интернету, используют мобильные телефоны.

С переходом пользователей на мобильные телефоны веб-разработчики и дизайнеры также должны приспосабливаться к постоянно меняющемуся миру веб-дизайна и разработки. Они должны создать веб-страницу, которая будет адаптироваться к разным размерам экрана без ущерба для удобства использования и потери важной информации и деталей.

Читайте дальше, чтобы узнать больше о тестировании кросс-браузерной совместимости адаптивного веб-дизайна.

Что такое тестирование адаптивного веб-дизайна?

Для решения задач веб-сайтов, которым необходимо адаптироваться к разным размерам экрана и браузерам, в отрасли было введено кросс-браузерное и адаптивное тестирование веб-дизайна. Эта концепция позволяет автоматически изменять размер и масштаб текста, элементов пользовательского интерфейса и изображений в зависимости от размера экрана используемого вами устройства.

Благодаря гибкому дизайну веб-разработчик может написать один набор кода HTML, CSS и JavaScript для нескольких устройств, платформ и браузеров.Это выгодно не только разработчику, но и пользователю. Без адаптивного дизайна вам может быть сложнее читать текст, нажимать кнопки или просматривать другие части веб-сайта, поскольку содержимое имеет неправильное размещение и выравнивание, а некоторые изображения больше, меньше или размыты.

Крайне важно протестировать веб-дизайн перед его запуском, чтобы разработчик мог настроить выравнивание, размер текста и другие проблемы, связанные с содержимым, прежде чем пользователи смогут перемещаться по веб-сайту с любого устройства.При тестировании адаптивного веб-дизайна разработчики чаще всего проверяют следующее:

  • Согласованное выравнивание контента на разных устройствах.
  • Текст отображается разборчиво во всех масштабах и окнах просмотра.
  • Изображения и текст остаются в соответствующих контейнерах.
  • Размер дисплея и изображений изменяется по мере необходимости. 4
  • Разрешить пользователям прокрутку по вертикали (или по горизонтали, как в случае адаптивных таблиц данных).
  • Разрешить пользователям перемещаться по веб-сайту с помощью ссылок и меню на всех устройствах.

В настоящее время проводятся дополнительные испытания, поскольку на рынке представлено больше функций. Это включает в себя смахивание пальцами, касание, ландшафтные или портретные модели, прокрутку, наведение курсора, масштабирование, щелчок правой кнопкой мыши и многое другое. Помимо этих новых проблем, различные размеры экранов мобильных устройств также усложняют тестирование для разработчиков.

Что такое тестирование совместимости между браузерами?

Разработчикам необходимо провести кросс-браузерное тестирование, чтобы узнать производительность веб-сайта на разных устройствах и в разных браузерах.Большинство разработчиков стараются составлять комбинации, чтобы обеспечить уверенность сайта в любой ситуации. Распространенными комбинациями являются разные комбинации браузер-ОС (IOS/Android/и т. д.) и разные устройства (ноутбуки/мобильные устройства/планшеты).

При выполнении кросс-браузерного теста на веб-сайте анализируются определенные функции. Мы перечислили их ниже и обсудили их важность.

  • Базовая функциональность — самый важный тест, который необходимо выполнить, так как он определяет, будет ли сайт работать на разных устройствах и в разных браузерах.Без этого теста разработчики не узнают, правильно ли работает их сайт.
  • Дизайн — дизайн веб-сайта может варьироваться от одного носителя к другому и должен быть одинаковым на любом устройстве. Помимо этого, дизайн также должен быть привлекательным для пользователей, чтобы у них возникло желание больше изучить веб-сайт и, возможно, воспользоваться услугами или продуктами, которые вы предлагаете.
  • Доступность — доступность веб-сайта также важна, поскольку, если ваш веб-сайт недоступен на одной платформе, это может привести к потере клиентов.Таким образом, веб-сайт генерирует более низкую прибыль или потенциальных клиентов.
  • Отзывчивость — правильная загрузка веб-сайта также важна, потому что, если она будет слишком медленной, пользователь может потерять интерес к вашему веб-сайту и попытаться проверить других конкурентов. Крайне важно, чтобы ваш сайт не тормозил и не зависал, чтобы избежать низкого органического трафика.

Как проверить кроссбраузерную совместимость?

Существует два способа выполнения теста на кросс-браузерную совместимость: ручной метод и автоматический метод.

Ручной метод

Для ручного метода вы будете запускать веб-сайт в разных браузерах и на разных устройствах. Этот метод требует использования нескольких устройств, операционных систем и браузеров, что делает его трудоемким, дорогостоящим и сложным. Из-за длительного процесса выполнение ручного тестирования может привести к различным проблемам и проблемам, поэтому предпочтительнее использовать автоматизированное тестирование.

Автоматизированный метод

Для автоматического тестирования вам просто нужно использовать программное обеспечение для автоматического запуска веб-сайта в различных сочетаниях браузеров, устройств и операционных систем.Этот метод лучше, так как требует больше времени и средств по сравнению с ручным тестированием. На рынке есть различные инструменты, из которых вы можете выбирать, и большинство из них полезны. Вам просто нужно определить, какое приложение лучше всего подходит для вашего случая.

В современном мире все разработчики должны создать функционирующий, хорошо спроектированный пользовательский веб-сайт, чтобы конкурировать за большую долю рынка. Как разработчик, вы должны последовательно обеспечивать восхитительный опыт конечных пользователей в разных браузерах и на разных устройствах.

Кроссбраузерное тестирование также должно быть обязательным условием для каждого веб-сайта, чтобы обеспечить удобство работы пользователей. Свяжитесь с командой наших опытных веб-разработчиков и дизайнеров в Brain Box Labs , чтобы помочь вам эффективно использовать свой бизнес на высококонкурентном современном рынке.

Свяжитесь с Brain Box Labs, чтобы узнать больше о тестировании кросс-браузерной совместимости

Тестирование на кросс-браузерную совместимость — неотъемлемая часть адаптивного веб-дизайна.В то время как принципы адаптивного дизайна должны быть интегрированы в новые проекты, кросс-браузерное тестирование должно быть первой линией защиты существующих проектов.

Чтобы узнать больше, обратитесь к нашей команде разработчиков, дизайнеров и экспертов по удобству использования в Brain Box Labs, чтобы помочь воплотить ваши идеи в жизнь.

Мы специализируемся на создании пользовательских мобильных и веб-приложений, решающих бизнес-задачи. Тщательное планирование, прототипирование, проектирование и тестирование позволяют нам создавать интуитивно понятные приложения, которые просто работают.

Свяжитесь с нами по телефону (647) 699-3733 сегодня!

ПРОФЕССИОНАЛЬНЫЙ СОВЕТ:

«Прежде чем приступить к кросс-браузерному тестированию, запустите все тесты дизайна и функциональности в своем основном браузере — обычно в Chrome. Это даст вам представление о том, как должен был выглядеть и вести себя первоначальный веб-сайт».

Кроссбраузерная совместимость

: что это значит для вашего бизнеса — Агентство цифрового маркетинга

Идея межбраузерной совместимости проста: убедитесь, что ваш веб-сайт выглядит одинаково во всех браузерах.Здравый смысл кажется желаемым результатом, не так ли? Тем не менее, вместо того, чтобы разбрасываться этой фразой, когда дело доходит до отладки, важно понять ее полное значение.

Почему разные? Что означают эти различия?

И что еще более важно: как вообще тестируют на совместимость?

Не все браузеры одинаковы

Когда появляются новые стандарты или функции, не каждый браузер поддерживает их сразу или одновременно.В результате различий в том, как закодирован браузер, они могут по-разному интерпретировать или даже игнорировать то, как отображаются некоторые строки CSS или javascript.

Это распространяется не только на веб-страницы. Почтовые клиенты, такие как Gmail или Outlook, также по-разному интерпретируют CSS. В этом случае они более избирательны в выборе того, что разрешать или игнорировать в результате совместимости с их программным обеспечением и для защиты от потенциальных проблем с безопасностью.

Тем не менее, их важно знать при создании рассылки по электронной почте; использование неправильного свойства CSS может привести к ОЧЕНЬ другому виду электронных писем.

Разный результат, разный опыт

Что это значит? Давайте снова рассмотрим рассылку по электронной почте. Допустим, вы не проводили тестирование на разных клиентах и ​​непреднамеренно полагаетесь на свойство CSS, которое Outlook не поддерживает. Электронная почта отправляется сотням людей, использующих различных почтовых провайдеров и клиентов. Вскоре вы получаете сообщение о том, что потрясающий дизайн рассылки выглядит не так уж и потрясающе.

Во многих случаях это может показаться незначительным неудобством, и все немного отличается — этого недостаточно, чтобы большинство заметило.Однако бывают случаи, когда информационный бюллетень может выглядеть катастрофически неправильно.

Например, если вы поместите фоновое изображение с текстом на нем, вам придется проделать гораздо больше дополнительной работы, чтобы заставить его работать во всех клиентах. В Outlook, который не рекомендует использовать фоновые изображения, они, скорее всего, вообще не будут отображаться, оставляя неуклюжее пустое пространство и никакой информации для ваших клиентов.

Это электронное письмо выглядит довольно хорошо для большинства. Но подождите — обратите внимание на Yahoo! Почта? Цвет фона основного текста не загружается как белый, и в результате основной текст не читается.Это важная проблема! (источник изображения: 5 полезных инструментов и сервисов для кросс-браузерного тестирования)

В лучшем случае это непривлекательно. В худшем — бесполезно.

В любом случае, вы разослали в массы непрофессиональное электронное письмо. Хотя большинство людей не будут тратить время на жалобы, они удалят его, не задумываясь, или даже вовсе откажутся от подписки.

Звучит пугающе? Воспользуйтесь шансом прочитать эти две статьи: «Разрабатывайте и создавайте рассылки по электронной почте, не теряя ума (и души)» и «Дизайн рассылки по электронной почте: рекомендации и примеры».Они помогут; Поверьте мне.

Продолжение: Что насчет веб-страниц?

При тестировании браузеров необходимо учитывать разные операционные системы, разрешение экрана и версию браузера.
Не забывайте варьировать комбинации! (Источник: CrossBrowserTesting)

Вообще говоря, разность потенциалов здесь часто не так значительна. (Разве это не облегчение? Особенно для всех разработчиков, которые вздохнули с облегчением в связи с прекращением поддержки Internet Explorer 6.) Тем не менее, вам все равно нужно проверить свой сайт… на всякий случай.

Охватите все свои базы и протестируйте свой сайт в различных сценариях. Например, если у пользователя заблокирован javascript, становятся ли функции на вашем сайте непригодными для использования? Правильно ли масштабируется сайт во всех разрешениях?

Если вы используете более новый код CSS или Javascript, есть ли безопасный запасной вариант для более старых версий? Убедитесь, что всегда есть безопасный (и красивый) запасной вариант при использовании новых вещей или вещей, которые пользователь или устройство потенциально могут заблокировать.

Влияние различий

Так каков же результат этих различных переживаний, которые мы потенциально создаем? Я уверен, что вы начинаете понимать картину сейчас. Эти различия изменят их восприятие в лучшую или худшую сторону. Последнее, что вы хотите сделать, это сделать так, чтобы у клиента был плохой опыт работы с вашим брендом.

Вот почему целью кроссбраузерной совместимости является обеспечение согласованности. Они не обязательно должны везде выглядеть одинаково — например, веб-страницы на мобильных устройствах должны быть оптимизированы для этого устройства и для этой цели отличаться от версии для настольных компьютеров — но опыт должен быть одинаковым.Он должен быть функциональным, полезным и продуманным.

Цель хорошего дизайна — направить клиентов к тому, что им нужно, самым простым и плавным способом. Даже то, что может показаться небольшой ошибкой, например, слегка смещенное меню, может вызвать проблемы. Вы думаете: «Эй, на рабочем столе это все еще выглядит довольно хорошо».

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

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

Как проверить совместимость

Теперь вы, вероятно, задаетесь вопросом, как все это проверить. Вы покупаете каждое устройство для тестирования или получаете в свои руки все возможные почтовые клиенты?! К счастью, мы можем проводить тестирование гораздо проще.

Стек браузеров

BrowserStack позволяет просматривать веб-сайт на разных устройствах и браузерах практически на их серверах.Он даже позволяет вам выбрать конкретную версию каждого браузера! Несмотря на то, что существуют варианты, которые могут дать вам снимок экрана вашего сайта на многих устройствах и в разных браузерах, просмотр в режиме реального времени трудно превзойти и гораздо более проницателен — не говоря уже о том, что он полезен для отладки, когда вы также можете использовать браузер. инструменты инспектора, когда вы обнаружите что-то не так!

Лакмус

Litmus специализируется на электронных письмах, помогая вам увидеть, как они выглядят в различных почтовых клиентах, и указывая на любые использованные вами строки кода, которые могут вызвать проблемы.Дополнительные контрольные списки и аналитика помогают убедиться, что ваши электронные письма являются первоклассными, прежде чем они попадут в какие-либо почтовые ящики. Его проницательность просто не может быть превзойдена!

Хотя я рекомендую именно эти два варианта, вы также можете рассмотреть альтернативные варианты. Альтернативы BrowserStack включают Equafy, Browserling, SauceLabs и BrowserShots. Если Litmus выходит за рамки вашего бюджета, рассмотрите возможность использования Email On Acid, Preview My Email или Инспектора входящих сообщений MailChimp.

Как минимум, запустите код рассылки электронной почты через Premailer или встроенный стайлер электронной почты Torchbox.Оба они гарантируют, что ваш код будет иметь форму и , чтобы вы знали, несовместимы ли какие-либо свойства стиля с наиболее известными почтовыми клиентами. Лучше всего то, что оба они бесплатны! (Теперь у вас нет оправдания не отправлять отличные электронные письма!)

Время для совместимости!

Как говорится, «знание — сила». Теперь, когда вы знаете, что искать, где и почему вы ищете, вы будете в гораздо лучшей форме, чтобы продвигать свой бизнес с максимальной эффективностью с каждой веб-страницей и электронным письмом, которое вы публикуете.

Вы оказываете огромную услугу своему бренду и клиентам, когда можете одинаково встречаться с ними в любом браузере, на любом устройстве и в любой версии.

Контрольный список для тестирования кросс-браузерной совместимости

Все приведенные выше детали контрольного списка тестирования совместимости браузеров содержат именно то, что вам нужно знать о тестировании совместимости браузеров. И за наши деньги нет программы лучше для выполнения этих функций, чем Comparium.

Comparium был специально разработан, чтобы предоставить тестировщикам все необходимое для обеспечения единообразия и высокого качества в браузерах, операционных системах и различных разрешениях.Он может эмулировать типы экранов для огромного количества различных устройств, позволяя вам попробовать тысячи различных комбинаций, чтобы убедиться, что ваша страница отображается в максимально возможном качестве.

Благодаря автоматическому и ручному тестированию, а также одновременному сравнению снимков экрана вы можете проверить каждую функцию своих веб-страниц. Как мы объяснили выше, в трех основных категориях тестирования (общее, макет и функциональное) есть много различных функций, которые необходимо проверить, прежде чем вы сможете с уверенностью отправить свою страницу в работу.

В сочетании с нашим контрольным списком тестирования веб-сайта Comparium может облегчить большую часть этого тестирования , позволяя быстро оптимизировать работу на разных платформах и устранить любые незначительные несоответствия, с которыми необходимо справиться. А благодаря регулярным обновлениям Comparium постоянно совершенствуется, предоставляя пользователям все больше и больше полезных функций, чтобы они могли максимально эффективно использовать свои веб-страницы.

Тестирование веб-страниц — дело непростое.Мы все сталкивались со страницами, на которых даже самая маленькая ошибка дает нам плохое мнение о товарах и услугах, которые мы рассматриваем. Тем не менее, с правильными инструментами вы можете легко сократить свою работу на огромную сумму. Приведенные выше контрольные списки дают вам подробное изложение всего, что вам нужно проверить, прежде чем отправлять страницу в прямом эфире.

А благодаря интуитивным инструментам, таким как Comparium, достаточно нескольких щелчков мышью, чтобы убедиться, что вы представляете миру наилучшую версию своей страницы.

Кросс-браузерная проблема, что делать в Internet Explorer?

В настоящее время в Интернете существует большое количество браузеров, таких как Mozilla Firefox, Safari, Google Chrome, Internet Explorer и т. д. Пользователи этих браузеров также присутствуют. Таким образом, на одном веб-сайте должны быть исправлены все проблемы с кросс-браузерностью. В противном случае один сайт может корректно отображаться в одном браузере, а в других браузерах работать некорректно. Если это произойдет с вашим сайтом, вы можете потерять посетителей. Ни один посетитель не останется на сломанном макете сайта.. Так что это нужно исправить как можно скорее.

В большинстве случаев Internet Explorer нарушает макет веб-сайта, поскольку он имеет три различных и устаревших версии (например, IE7, IE8 и IE9), которые все еще находятся на рынке. И главная проблема в том, что есть и пользователи этой версии. Разработчики действительно сталкиваются с трудностями при устранении проблем, связанных с браузером IE. Поскольку эти версии не поддерживают более новую версию CSS, например CSS3.

Прежде чем приступить к работе над своей веб-страницей, узнайте, каковы ограничения старого браузера Internet Explorer и современного IE.В основном ориентирован на старые браузеры Internet Explorer. Некоторые новые свойства CSS не поддерживаются в старых версиях IE, но мы должны знать обо всех версиях IE, потому что мы не можем указать, какой браузер будет использовать пользователь. Веб-страница должна выглядеть единообразно во всех браузерах, поэтому перед началом проектирования следует четко понимать, в чем заключаются общие проблемы браузеров IE

.
  • IE6 станет проблематичным при чрезмерном использовании плавающих элементов, что приведет (как это ни парадоксально) к исчезновению содержимого

  • IE6 удвоит отступ плавающих элементов со стороны, совпадающей с направлением плавающего элемента; настройка дисплея : встроенный часто исправляет этот

  • В IE6 и IE7, если элемент не имеет макета, это может вызвать ряд проблем, в том числе отсутствие фона, неправильное сжатие полей и т. д..

  • IE6 не поддерживает минимальные и максимальные свойства CSS max-width

  • IE6 не поддерживает фиксированное расположение фоновых изображений

  • IE6 и IE7 не поддерживают множество альтернативных значений свойства display (например, встроенная таблица, таблица-ячейка, таблица-строка, и т. д.)

  • Вы не можете использовать псевдокласс :hover для любого элемента в IE6, кроме привязки

  • Некоторые версии IE слабо поддерживают определенные селекторы CSS (например, селекторы CSS).грамм. селекторы атрибутов, дочерние селекторы и т.д.)

  • Версии IE 6–8 мало поддерживают CSS3, но есть некоторые обходные пути

  • Более ранние версии IE не поддерживаются border-radius

  • Более ранние версии IE не поддерживают фоновый градиент

Сброс CSS

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

 
html, body, div, ul, ol, li, dl, dt, dd, h2, h3, h4, h5, h5, h6, pre, form, p, blockquote,
набор полей, ввод, час {маржа: 0; заполнение: 0;}
h2,h3,h4,h5,h5,h6,предварительно,код,адрес,заголовок,цитировать,код,em,
сильный,й {размер шрифта:1em; вес шрифта: нормальный; стиль шрифта: обычный;}
ul, ol {стиль списка: нет;}
набор полей, изображение, час {граница: нет;}
заголовок, th {выравнивание текста: по левому краю;}
таблица {граница-коллапс: коллапс; интервал между границами: 0;}
тд {вертикальное выравнивание: сверху;}
 

взломов Internet Explorer

Хотя условные комментарии лучше, вы также можете настроить таргетинг на некоторые версии Internet Explorer, используя следующий синтаксис в общей таблице стилей, используя (* _.) символы

 
.класс {
  ширина: 200 пикселей; /* Все браузеры */
  * ширина: 250 пикселей; /* IE */
  _ширина: 300 пикселей; /* IE6 */
  .ширина: 200 пикселей; /* IE7 */
}

 

Ориентация только на Opera

Opera не является популярным браузером, но это не причина не устранять проблему, которая может возникнуть. Приведенный ниже код предназначен только для Opera, что позволяет вам добавлять правила CSS только для этого браузера.

 
@media все и (минимальная ширина: 0px){
    .имя класса {}


 

Ориентация только на Safari

Safari — один из наиболее совместимых со стандартами браузеров, поэтому вам редко приходится исправлять проблемы, связанные только с Safari. Но это может случиться иногда. Вот хороший хак для написания правил CSS только для Safari.

 
html:lang(en)>body .classname {цвет: #333333;}

 

Ориентация только на Google Chrome

После Opera и Safari, вот, наконец, такой же хак, нацеленный только на Google Chrome:

 
Экран @media и (-webkit-min-device-pixel-ratio:0) {
    # test1 {цвет: красный;}
}


 

Если мы получаем больше проблем с IE в старых версиях браузеров IE, Microsoft реализовала условные комментарии в своем браузере, которые позволяют вам связать таблицу стилей, которая будет интерпретироваться только браузером.

Здесь мы можем увидеть некоторую модель, как связать таблицу стилей Conditinal

Цель: ВСЕ ВЕРСИИ IE

Таргетинг на все, КРОМЕ IE

Цель ТОЛЬКО IE 7

Целевой IE 7 и НИЖЕ

Цель IE 7 и выше

Тестер IE

IE tester — это бесплатно загружаемый инструмент. Он покажет, как ваша страница будет выглядеть в разных версиях IE. Он покажет IE 5.5 до последней версии IE. очень легко выяснить, в чем проблема, связанная с нашим дизайном

.

Сканер веб-страниц

Сканер веб-страниц — это онлайн-инструмент для тестирования, это продукт Microsoft, созданный для современного IE, как только вы введете здесь свой код, он покажет, каковы общие проблемы в используемом CSS,

Сканер веб-страниц

javascript — Кроссбраузерная разработка — Qaru

Я занимаюсь кросс-браузерной разработкой и на самом деле не использую ни один из предписанных шаблонов, например, кросс-браузерное тестирование.Вместо этого я использую декоративный узор. Иногда это прекрасно работает, иногда вызывает головную боль, но это можно сказать о любом шаблоне разработки.

Большая часть моей разработки происходит в том браузере, который я считаю наиболее соответствующим стандартам. Я предпочитаю WebKit Presto, но оба они, как правило, соответствуют стандартам. В этих браузерах правильное использование HTML и CSS почти всегда приводит к желаемым результатам. Мой любимый браузер WebKit — Google Chrome. Safari тоже работает, но имейте в виду, что в Mac OS X сглаживание шрифта имеет тенденцию увеличивать размер текста.Чтобы обеспечить совместимость с сайтами, разработанными для Safari Mac, Safari Win выделяет шрифты, поэтому это не всегда самое точное представление вашего сайта с точностью до пикселя.

Blueprint CSS может оказать огромную помощь, если вы пытаетесь быстро создать прототип кроссбраузерного дизайна сайта. Я не уверен, что такая структура всегда необходима, и они также могут влиять на то, как вы структурируете свою XHTML-разметку, и искажение вашей разметки, чтобы она соответствовала уже существующей иерархии классов CSS, не всегда является хорошей идеей.

Когда у меня есть дизайн, который меня устраивает в моем браузере, совместимом со стандартами, я затем украшаю его исправлениями ошибок в других браузерах, менее соответствующих стандартам, используя условные стили или таблицы стилей. Firefox, по крайней мере, начиная с версии 3.0, почти никогда не бывает серьезной проблемой, но есть способы целенаправленно настраивать Firefox и даже различать Gecko 1.9 и 1.8, используя только CSS. Технически это хак, так что приверженцы чистоты CSS могут насмехаться над богохульством кода, но это надежное и полезное решение.Для ясности и простоты обслуживания я обычно сохраняю свои исправления Firefox/IE в изолированных таблицах стилей и компилирую их с помощью какого-либо скрипта на стороне сервера, который я считаю предпочтительнее, чем операторы условного включения и хаки JavaScript. Если вы используете кэширование с PHP, это не является существенным узким местом или пустой тратой процессорного времени.

IETester — незаменимый инструмент для проверки дизайна во всех различных версиях IE, и он даже использует соответствующий механизм JScript для каждой версии, чего не хватало в предыдущих, менее надежных решениях, таких как MultipleIE.

Добавить комментарий

Ваш адрес email не будет опубликован.