Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все

4 401 vues

Publié le

Доклад Дмитрия Штепуры на SQA Days-15. 18-19 апреля, 2014, Москва.
www.sqadays.com

Publié dans : Formation
  • Soyez le premier à commenter

Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все

  1. 1. Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer не такой как все Дмитрий Штепура. Maxymiser
  2. 2. Предисловие В этом докладе я хотел бы затронуть очень популярные проблемы, которые я постоянно встречаю в Internet Explorer при использовании на сайтах HTML5 и CSS3.
  3. 3. Placeholder Атрибут, который был добавлен в HTML 5 и отвечает за подсказки в полях ввода. Вот так выглядит эта самая подсказка в IE 10 :
  4. 4. Placeholder Но поддержка со стороны IE добавлена только с версией 10. В IE 9,8 и ниже эта самая подсказка выглядит вот так:
  5. 5. Placeholder при помощи javascript Так выглядит наша подсказка, которая реализована непосредственно на javascript
  6. 6. Проблемы placeholder’a реализованного при помощи javascript Тут мы можем встретить некие отличая от обычного атрибута: 1) Это может быть и цвет шрифта, в данной ситуации он чѐрный, а не серый. 2) Скорее всего при нажатии на кнопку поиска мы будем искать текст нашей подсказки, хотя тест для поиска мы ещѐ не вводили и должны были искать просто пустоту. 3) Изменение цвета подсказки при повторном помещении курсора в поле. 4) Наша подсказка может не исчезать при вводе текста. 5) Наша подсказка может исчезнуть и больше не появится, хотя должна отображаться всегда, когда в поле нет введенных данных.
  7. 7. Border-radius (IE 9+) Свойство, которое было добавлено в CSS3, оно позволяет задать радиус закругления всех углов элемента.
  8. 8. Закругление углов при помощи картинок
  9. 9. Закругление углов при помощи картинок…неловкий момент
  10. 10. Text-shadow (IE10+) Свойство, которое добавляет тень к тексту, а также устанавливает еѐ параметры
  11. 11. Box-shadow (IE9+) Свойство, которое добавляет тень к элементу
  12. 12. Text-overflow Этот неловкий момент, когда не ожидаешь от Internet Explorer’a такого поворота =)
  13. 13. Насколько похожи разные версии Internet Explorer’a ? 1) Режим совместимости и с чем его едят.
  14. 14. Эмуляторы IE 1) Почему я не рекомендую их использовать? 2) Что же делать, если уж без них никак? а) IE Collection Pack б) Xp Mode для Windows 7
  15. 15. Что можно подчеркнуть? 1) В любой непонятной ситуации заходи в IE 2) Определить корень ошибки намного лучше, чем просто еѐ найти. 3) Научись говорить на языке разработчика. 4) Не все IE одинаково похожи. 5) Эмуляторы это плохо, пнятненько !?

×