Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,404 views

Published on

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

Published in: Education
  • Be the first to comment

Кроссбраузерное тестирование с популяризацией 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) Эмуляторы это плохо, пнятненько !?

×