Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Destaque (19)
Semelhante a QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!
Semelhante a QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати! (20)
Mais de QAFest
Mais de QAFest (20)
QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!
- 1. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати! Скрипник Татьяна, Киев
- 2. Об авторе 2 года тестирования web-приложений в компании Softengi Тренер в Softengi Training Center tanya.skripnik92@gmail.com tanya_skripnik92 Tanya Skripnik
- 3. Cross-browser – это способность веб-сайтов, веб- приложений, HTML конструкций или client-side скриптов полноценно функционировать на окружениях, полностью поддерживающих их функционал, и корректно обрабатывать случаи, когда функции отсутствуют или не полностью поддерживаются. https://en.wikipedia.org/wiki/Cross-browser
- 13. Типичные баги кросс- браузерности - Placeholder - Shadow - Border radius - Buttons
- 14. Placeholder Атрибут placeholder выводит текст внутри текстового поля, который исчезает при получении фокуса.
- 15. Placeholder Placeholder реализованный с помощью javascript.
- 16. Placeholder с помощью javascript 1) Цвет шрифта может отличаться (зачастую он темнее) 2) Подсказка может не пропадать при клике в поле 3) Подсказка может не появиться обратно после очистки поля от введенного текста 4) При нажатии на кнопку подписки будет отправлен текст подсказки
- 17. Shadow Внутренняя тень Внешняя тень или «свечение»
- 18. Border radius Chrome, Safari, Opera IE 8,9
- 19. Buttons • Размещение кнопок относительно поля • Размещение текста кнопки IE 8 Opera Firefox
- 21. Инструменты https://dev.modern.ie/tools/ Хабр плохого не советует http://habrahabr.ru/sandbox/82473/
- 22. Экономия времени • Нет необходимости перетестировать весь функционал приложения в разных браузерах • Больше багов будет выявлено в ранних версиях ИЕ
- 23. Выводы 1. Грамотная оценка кросс-браузерного тестирования может послужить буфером для функционального тестирования 2. Стоит следить за новыми фичами HTML5 и CSS3, которые, вероятней всего, не будут полностью поддерживаться старыми версиями браузеров 3. Научитесь говорить на одном языке с разработчиком
- 24. И не забывайте: «идеальных» браузеров не бывает…
- 26. Полезные ссылки • 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/
Notas do Editor
- Атрибут 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.