Я работаю в тесном сотрудничестве с кросс-браузерными проблемами совместимости более 5 лет, и за это время довольно много людей изменили проект, над которым я работаю. За это время я заметил, что разработчики часто настолько искусны в CSS, насколько это необходимо для выполнения конкретной работы, даже если человек позиционирует себя как веб-разработчик. Эти проблемы чаще всего выделяются, когда речь идет о поддержке Internet Explorer.
Для тех, кто никогда не был глубоко вовлечен в такие вопросы, я объясню, что делает IE таким особенным и трудным для работы. Прежде всего, разработчики не часто используют Windows в качестве своей ОС на ноутбуках / компьютерах для разработки. Чтобы работать с IE, чтобы убедиться, что он работает должным образом, вы должны установить VirtualBox с Windows на нем.
Вам также может понравиться: Как создать сайт, совместимый с IE
Проблема в том, что такая среда не очень удобна для работы; Это медленно для средних / больших приложений, даже если у вас есть 16 ГБ ОЗУ на виртуальной машине, с которой вы работаете.
Во-вторых, IE не предоставляет лучших инструментов разработчика для проверки элементов. Да, вы можете видеть, какие стили назначены непосредственно элементам. Но, по сравнению с Chrome Dev Tools, где вы можете видеть, откуда унаследован стиль, IE предлагает сравнительно много.
Третья проблема заключается в том, что горячая перезагрузка не работает для виртуальных машин. Требуется некоторое время, чтобы перезагрузить приложение и вернуться туда, где находится проблема, над которой вы работаете. Это не конец света, но время потеряно.
Такие инструменты, как PostCSS, могут значительно улучшить вашу кодовую базу CSS / LESS / SASS. Они дают вам доступ к плагинам, таким как autoprefixer, который добавляет специфичные для поставщика префиксы (FF, IE и т. Д.) В ваш CSS.
Возьмите следующий стиль в качестве примера:
CSS
1
::placeholder {
2
color: gray;
3
}
Это будет передано:
CSS
xxxxxxxxxx
1
::input-placeholder {
2
color: gray;
3
}
4
::placeholder {
5
color: gray;
6
}
7
:input-placeholder {
8
color: gray;
9
}
10
::input-placeholder {
11
color: gray;
12
}
13
::placeholder {
14
color: gray;
15
}
Есть другие интересные плагины, которые вы можете проверить на их сайте: https://github.com/postcss/postcss .
Теперь давайте погрузимся в основную часть этой статьи. Что вы делаете, когда ваш IE доставляет вам неприятности? По моему опыту, эти проблемы можно разделить на три категории:
- Некоторые изменения кода были сделаны, и браузер полностью завис. Если вы думаете: «CSS не может сломать браузер», поверьте мне — это возможно! Некоторые комбинации свойств CSS на иерархическом уровне могут привести к сбою в IE. В этом случае это помогает удалить код, пока приложение не начнет работать снова.
- Чтобы сделать этот процесс относительно быстрым, я подхожу к нему, удаляя половину кода, если он все еще сломан, половину оставшегося. Если код начинает работать, я добавляю обратно половину того, что удалил ранее. В некоторых случаях после нескольких итераций у меня появляется подозрительная область, а затем еще несколько попыток дают мне точную строку.
- Второй тип проблем, когда код прекрасно работает на Chrome, Firefox, но не на IE. В таких случаях 100% времени только чтение / поиск помогли мне решить проблемы. Я призываю вас сделать то же самое. Не тратьте свое время на игры со свойствами. Почти всегда я бы не догадался и не интуитивно понял корень проблемы.
- Иногда я забываю об этом правиле и пытаюсь поиграть. Это неизбежно приводит к потере времени. Я знаю, что вы можете найти много плохих идей по Stackoverflow, открытые темы Github, но всегда вы найдете отличный ответ / статью / объяснение для вашего случая. Есть много людей, имеющих дело с IE. Вы не одиноки, и чаще всего проблема, с которой вы сталкиваетесь, была решена раньше.
- Третий тип — когда разработчик думает, что он попробовал «все», но это ничего не помогает. В этом случае сотрудничество очень помогает! В нашей компании никто из нас не близок к всестороннему пониманию проблем с IE. Были моменты, когда люди разочаровывались в проблемах с настройкой Selenium Grid для работы в IE, исправлением проблем с flexbox в IE, значками и т. Д. Вот что помогает в этой ситуации:
- Дайте это другому человеку.
- Присоединяйтесь к этому человеку и посмотрите на это вместе . Я помню случай, когда была написана статья о решении конкретной проблемы, и разработчик, читавший статью, просто не понял сути объяснения автора, хотя решение было описано (не в коде :-)). С другой стороны, они смогли увидеть, как решить проблему и реализовать это исправление.
Я работаю над проектом, в котором мы поддерживаем IE. Во-первых, это была версия 9. За последние пять лет это было 11. Кодовая база, я бы сказал, большая. Это почти полмиллиона строк кода. До сих пор мы не использовали какой-либо конкретный CSS только для IE. Всегда можно найти решение, работающее для всех браузеров. Можно автоматизировать весь процесс тестирования и сохранить стабильность и зеленый цвет тестов.
Я знаю, что для этого нужно приложить немало усилий, но это приносит свои плоды. Когда приложение имеет сотни различных экранов и случаев, ручное тестирование привлечет много ресурсов людей. Мы достигли этого, не имея тестеров в команде.
Одной из установок для инструментов, которые мы нашли полезными, был Protractor с Selenium Grid. Транспортир сам по себе имеет много проблем, поэтому вам нужно понять подводные камни и понять, как его преодолеть. Несколько вопросов включают в себя:
- Действия рассматриваются транспортирами как выполненные, но это просто иногда ничего не делает.
- Печатание с полки ужасно, особенно в IE, поскольку оно пропускает буквы во время набора текста.
- Транспортир не всегда правильно ожидает условия, особенно когда страница изменяется или вы заменяете один компонент другим.
Надеюсь, все это можно исправить, и можно заставить его работать для Chrome, Firefox и IE. Я рекомендую вам никогда не использовать код прямого транспортира, но оберните его в некоторый DSL, где вы делаете это на двух уровнях. На первом уровне создаются основные команды, такие как щелчок, тип и т. Д. Для этого вы можете проверить мой проект https://www.npmjs.com/package/protractor-base-dsl, чтобы получить базовое представление о том, как выполнять операции. стабильный.
Если вы хотите иметь отдельную статью с подробным объяснением этой темы, я могу это сделать! Оставить комментарий! Второй уровень DSL будет выполнять некоторые бизнес-операции, например открывать страницу, отправлять форму с указанными значениями и т. Д.
Довольно часто, чтобы найти проблемы до их устранения, помогают тесты e2e. Когда вы запускаете их и смотрите, вы можете найти то, что вы, возможно, пропустили во время разработки / тестирования / усиления. Редко, когда кто-либо просматривает все страницы вручную, чтобы напечатать все возможные случаи перед выпуском, даже QAs.
Пожалуйста, поделитесь своими мыслями и собственным опытом по этой теме. Я хотел бы услышать от вас!
Дальнейшее чтение
Тестирование браузера в Internet Explorer все еще имеет смысл?
Как разработать веб-приложение, совместимое с Internet Explorer 11
7 способов проверить ваш сайт в Internet Explorer на устройстве Mac