Как убедиться, что CSS работает нормально во всех браузерах, не проверяя глаза на каждом браузере?

Question

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

Answer 1

1. Использовать таблицу стилей CSS Reset
2. Используйте хорошие CSS-фреймворки (план, шаблон и т. Д.)
3. Это невозможно.

Answer 2

Несколько важных вещей, которые помогут вам начать путешествие:

• Используйте DOCTYPE , иначе браузеры перейдут в режим причуд.
• Сбросьте ваш CSS , чтобы вы могли применять стили , которые вы хотите к элементам.
• Используйте библиотеку Javascript - популярной среди этих частей является jQuery, и я лично рекомендую ее. Тем не менее, это не имеет значения, с каким вы идете, пока вы используете его. Многие умные парни потратили много часов на то, чтобы позаботиться о всех несовместимостях между браузерами. Попытка сделать много динамичных вещей на вашем сайте с помощью чистого Javascript граничит с мазохистским.

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

Answer 3

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

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

Компьютеры не очень хорошо умеют сообщать, если что-то выглядит «красиво» автоматически, иначе все браузеры всегда будут делать именно то, что вы имеете в виду (делать вещи красиво).

Если вы хотите протестировать JavaScript, вы можете попробовать набор тестов под названием Selenium .

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

Answer 4

Нет действительно стандартного способа сделать это - это просто природа зверя; однако Adobe в настоящее время работает над BrowserLabs , что должно помочь решить эту проблему.

Answer 5

Я предлагаю использовать одну из готовых к использованию сред разработки Front-End, такую ​​как Twitter Bootstrap или Foundation . Оба документа хорошо документированы и проверены, поэтому это облегчит тестирование.

Они содержат:

• CSS Сброс / Нормализация

• Готовые к использованию компоненты (кнопки, элементы формы, меню и т. Д.).

• Grid Layout (это идеальный способ упорядочить вещи на вашей веб-странице).

• JavaScript.

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

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

У вас нет выбора, кроме как сделать это! Вот почему зарплата веб-дизайнеров обычно высока х-)

Answer 6

1. Убедитесь, что вы указали тип документа.
2. Использовать сброс css.
3. Избегайте использования ширины и отступов (слева и справа) для одного и того же элемента, где вы можете.
4. очистить код в HTML и CSS.
5. Не используйте поля влево и вправо при перемещении элементов и используйте переполнение родительского элемента: скрытый, display: inline и height: 1%, если родительский объект еще не имеет высоты.
6. Не присваивайте элементу margin-top или margin-bottom, а только margin-top или
   край дна. Поскольку поля смежных элементов сворачиваются друг в друга, что делает позиционирование несколько непредсказуемым для новичков.
7. Не полагайтесь на z-index, если это не требуется вашим сценариям.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<script type="text/javascript" src="js/html5shiv.js" ></script>
<script type="text/javascript" src="js/html5.js" ></script>

Вы можете скачать shiv.js из этого браузера compact

Инструменты тестирования совместимости браузера:

http://crossbrowsertesting.com/

http://browsershots.org/

http://www.browsercam.com/

http://caniuse.com

http://www.findmebyip.com/litmus/

Answer 7

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

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