Кроссбраузерное тестирование с популяризацией html5 и...
DESCRIPTION
Доклад Дмитрия Штепуры на SQA Days-15. 18-19 апреля, 2014, Москва. www.sqadays.comTRANSCRIPT
![Page 1: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/1.jpg)
Кроссбраузерное тестирование
с популяризацией HTML5 и CSS3.
Internet Explorer не такой как все
Дмитрий Штепура. Maxymiser
![Page 2: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/2.jpg)
Предисловие
В этом докладе я хотел бы затронуть очень популярные проблемы, которые я
постоянно встречаю в Internet Explorer при использовании на сайтах HTML5 и CSS3.
![Page 3: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/3.jpg)
PlaceholderАтрибут, который был добавлен в HTML 5 и
отвечает за подсказки в полях ввода.
Вот так выглядит эта самая подсказка в IE 10 :
![Page 4: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/4.jpg)
PlaceholderНо поддержка со стороны IE добавлена только с
версией 10.
В IE 9,8 и ниже эта самая подсказка выглядит вот так:
![Page 5: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/5.jpg)
Placeholder при помощи javascript
Так выглядит наша подсказка, которая реализована непосредственно на javascript
![Page 6: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/6.jpg)
Проблемы placeholder’a реализованного при помощи javascript
Тут мы можем встретить некие отличая от обычного атрибута:
1) Это может быть и цвет шрифта, в данной ситуации он чёрный, а не серый.
2) Скорее всего при нажатии на кнопку поиска мы будем искать текст нашей подсказки, хотя тест для поиска мы ещё не вводили и должны были искать просто пустоту.
3) Изменение цвета подсказки при повторном помещении курсора в поле.
4) Наша подсказка может не исчезать при вводе текста.
5) Наша подсказка может исчезнуть и больше не появится, хотя должна отображаться всегда, когда в поле нет введенных данных.
![Page 7: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/7.jpg)
Border-radius(IE 9+)
Свойство, которое было добавлено в CSS3, оно позволяет задать радиус закругления всех углов
элемента.
![Page 8: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/8.jpg)
Закругление углов при помощи картинок
![Page 9: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/9.jpg)
Закругление углов при помощи картинок…неловкий момент
![Page 10: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/10.jpg)
Text-shadow(IE10+)
Свойство, которое добавляет тень к тексту, а также устанавливает её параметры
![Page 11: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/11.jpg)
Box-shadow(IE9+)
Свойство, которое добавляет тень к элементу
![Page 12: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/12.jpg)
Text-overflowЭтот неловкий момент, когда не ожидаешь
от Internet Explorer’a такого поворота =)
![Page 13: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/13.jpg)
Насколько похожи разные версии Internet Explorer’a ?
1) Режим совместимости и с чем его едят.
![Page 14: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/14.jpg)
Эмуляторы IE
1) Почему я не рекомендую их использовать?
2) Что же делать, если уж без них никак?
а) IE Collection Pack
б) Xp Mode для Windows 7
![Page 15: Кроссбраузерное тестирование с популяризацией HTML5 и CSS3. Internet Explorer, не такой как все](https://reader033.vdocuments.net/reader033/viewer/2022061118/54623de2af7959c1358b45a5/html5/thumbnails/15.jpg)
Что можно подчеркнуть?
1) В любой непонятной ситуации заходи в IE
2) Определить корень ошибки намного лучше, чем просто её найти.
3) Научись говорить на языке разработчика.
4) Не все IE одинаково похожи.
5) Эмуляторы это плохо, пнятненько !?