Advertisement
Check these out next
QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!
Nov. 9, 2015•0 likes•902 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Report
Education
Зачастую начинающие тестировщики предполагают, что «посмотреть» веб-приложение в «разных» браузерах и есть содержание кросс-браузерного тестирования. Но множество вопросов остаются недосказанными: - На что обращать внимание? - Какие браузеры выбрать? Что делать с разными версиями одного браузера? - Какие инструменты использовать? - Сколько времени выделить? Зная ключевые различия браузеров, особенности отображения контролов, форм и прочих элементов страницы, можно не только улучшить карму своего веб-приложения, но и не теряя эффективности значительно сократить время на тестирование. В докладе хочу поделиться с вами приобретенными знаниями различий известных браузеров, показать, на что стоит обращать внимание в первую очередь и, как можно более грамотно описать проблему разработчику в случае её нахождения.
QAFestFollow
Advertisement
Advertisement
Advertisement
Recommended
QA Fest 2015. Юрий Федько. XSS - от простого к сложному!QAFest
JavaScript и доступность web-приложенийVladimir Agafonkin
Разумная безопасность сайтаrevisium
Как обеспечить безопасность клиентских сайтовrevisium
Безопасность Joomla: теория и практикаrevisium
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...QAFest
QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!
- Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати! Скрипник Татьяна, Киев
- Об авторе 2 года тестирования web-приложений в компании Softengi Тренер в Softengi Training Center tanya.skripnik92@gmail.com tanya_skripnik92 Tanya Skripnik
- Cross-browser – это способность веб-сайтов, веб- приложений, HTML конструкций или client-side скриптов полноценно функционировать на окружениях, полностью поддерживающих их функционал, и корректно обрабатывать случаи, когда функции отсутствуют или не полностью поддерживаются. https://en.wikipedia.org/wiki/Cross-browser
- Популярные браузеры
- Популярные браузеры
- Популярные браузеры
- Популярные браузеры
- Популярные браузеры
- Популярные браузеры
- Популярные браузеры
- Популярные браузеры
- Типичные баги кросс- браузерности - Placeholder - Shadow - Border radius - Buttons
- Placeholder Атрибут placeholder выводит текст внутри текстового поля, который исчезает при получении фокуса.
- Placeholder Placeholder реализованный с помощью javascript.
- Placeholder с помощью javascript 1) Цвет шрифта может отличаться (зачастую он темнее) 2) Подсказка может не пропадать при клике в поле 3) Подсказка может не появиться обратно после очистки поля от введенного текста 4) При нажатии на кнопку подписки будет отправлен текст подсказки
- Shadow Внутренняя тень Внешняя тень или «свечение»
- Border radius Chrome, Safari, Opera IE 8,9
- Buttons • Размещение кнопок относительно поля • Размещение текста кнопки IE 8 Opera Firefox
- Developer Tools (F12)
- Инструменты https://dev.modern.ie/tools/ Хабр плохого не советует http://habrahabr.ru/sandbox/82473/
- Экономия времени • Нет необходимости перетестировать весь функционал приложения в разных браузерах • Больше багов будет выявлено в ранних версиях ИЕ
- Выводы 1. Грамотная оценка кросс-браузерного тестирования может послужить буфером для функционального тестирования 2. Стоит следить за новыми фичами HTML5 и CSS3, которые, вероятней всего, не будут полностью поддерживаться старыми версиями браузеров 3. Научитесь говорить на одном языке с разработчиком
- И не забывайте: «идеальных» браузеров не бывает…
- Полезные ссылки • http://webcocktail.ru/coding/css-box-shadow/ • http://xiper.net/ • http://web-standards.ru/articles/cross-browser-rounded- corners/ • http://pravdabiz.ru/2011/05/24/tri-metoda-skrugleniya- uglov-u-elementov-sajta/
Editor's Notes
- Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии. Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать.
- Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии. Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать.
- Google Chrome сильно “косячит” с отображением внутренней тени у блока с закруглёнными углами (border-radius). Весьма странно, что в Safari, хотя он и работает с Chrome на одном движке, таких проблем не наблюдается. В Safari радиус размытия (blur distance) у тени визуально значительно меньше, чем в других браузерах
- Самым очевидным и простым способом сделать это ещё с ранних версий HTML являются картинки. Увы, самой простой способ не всегда самый лучший или подходящий. Например, можно просто наложить уголки с цветом фона на элемент, но такой способ не годится, когда, оставшаяся за скруглением, часть должна быть прозрачной. И, конечно же, хочется уменьшить число запросов к серверу, чтобы страница сразу показывалась в задуманном виде без лишних задержек. Кроме того, что прозрачные картинки усложняют вёрстку, дизайнеры ещё и хотят видеть их сглаженными, а с полупрозрачными картинками есть немалыесложности в Internet Explorer 6. Их можно решить через фильтры, но ценой этого будет сильное проседание производительности. Пожалуй, мало кто захочет чтобы с их сайта уходили клиенты, не дождавшиеся загрузки. Но не все об этом подозревают. Для облегчения работы (и снижения стоимости создания решений, основанных на веб-стандартах) было придумано и реализовано современными браузерамиCSS-свойство border-radius, которое позволяет закруглить уголки прямо средствами браузера без каких-либо дополнительных усилий. Так же в старых версиях браузера Opera (начиная с 9.5) существует ещё однообходное решение: использовать векторную графику SVG в качестве фона. А что же Internet Explorer? Однако, пока ещё самым распространённым в мире браузером является Internet Explorer, не поддерживающий решение ни через CSS, ни через SVG. Тем не менее, в Internet Explorer есть ещё одна малоизученная (как мы увидим дальше) возможность: один из предков SVG — векторная графика VML. В VML есть предопределённая фигура: прямоугольник с закруглёнными угламиroundrect. 1# С помощью картинок - Вставляем в блок div 4 картинки по углам, Либо две сверху и снизу в виде шапки, где уже выполнено скругление. 2# С помощью блоков div и пощаговой аппроксимации радиуса - имитация скругления (скругление без картинок) css-div округлые углы.Скругление на уровне стилей... 3# W3C CSS3 и свойство border-radius. Благодаря различным вендорным свойствам от производителей браузеров и плагина PIE (для Internet Explorer) - стало возможно скруглять углы на уровне браузера, путем задания соответствующих стилей блоку div и указания радиуса скругления.
- внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе
- Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin.
Advertisement