SlideShare a Scribd company logo
Кросс-браузерность, что ты делаешь?..
Ах-ха-ха, прекрати!
Скрипник Татьяна, Киев
Об авторе
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/

More Related Content

What's hot

JavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовJavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовguest42f396
 
4.3. Rat races conditions
4.3. Rat races conditions4.3. Rat races conditions
4.3. Rat races conditions
defconmoscow
 
ЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, Совкомбанк
ЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, СовкомбанкЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, Совкомбанк
ЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, Совкомбанк
Банковское обозрение
 
Coding for iPhone
Coding for iPhoneCoding for iPhone
Coding for iPhone
Yuriy Artyukh
 
Бекэнд для push-уведомлений своими руками
Бекэнд для push-уведомлений своими рукамиБекэнд для push-уведомлений своими руками
Бекэнд для push-уведомлений своими руками
Alexandr Mikhaylenko
 
А не поговорить ли нам о XSS!
А не поговорить ли нам о XSS!А не поговорить ли нам о XSS!
А не поговорить ли нам о XSS!
SQALab
 
Выбор CMS для вашего сайта
Выбор CMS для вашего сайтаВыбор CMS для вашего сайта
Выбор CMS для вашего сайта
Astra Media Group, Russia
 
Chrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработкаChrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработка
Alexandr Mikhaylenko
 
Отказоустойчивость веб-проекта: мониторинг, резервирование, обслуживание
Отказоустойчивость веб-проекта: мониторинг, резервирование, обслуживаниеОтказоустойчивость веб-проекта: мониторинг, резервирование, обслуживание
Отказоустойчивость веб-проекта: мониторинг, резервирование, обслуживание
1С-Битрикс
 
Сколько стоят хорошие сайты
Сколько стоят хорошие сайтыСколько стоят хорошие сайты
Сколько стоят хорошие сайты
Геннадий Метёлкин
 
Максим Кочкин (Wamba)
Максим Кочкин (Wamba)Максим Кочкин (Wamba)
Максим Кочкин (Wamba)Ontico
 
Samosadny mass csrf attacks via flash ads
Samosadny   mass csrf attacks via flash adsSamosadny   mass csrf attacks via flash ads
Samosadny mass csrf attacks via flash adsDefconRussia
 
Coding monday
Coding mondayCoding monday
Coding monday
Oleg Nechiporenko
 
Подготовка интернет-магазина к боевым условиям
Подготовка интернет-магазина к боевым условиямПодготовка интернет-магазина к боевым условиям
Подготовка интернет-магазина к боевым условиям
Anton Baranov
 
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
OdessaFrontend
 
Bootstrap
BootstrapBootstrap
Bootstrap
Timofey Chukleev
 

What's hot (18)

JavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовJavaScript и доступность web-сайтов
JavaScript и доступность web-сайтов
 
4.3. Rat races conditions
4.3. Rat races conditions4.3. Rat races conditions
4.3. Rat races conditions
 
ЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, Совкомбанк
ЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, СовкомбанкЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, Совкомбанк
ЧатБанк – chatbank.ru от ПАО «Совкомбанк». Андрей Бухтияров, Совкомбанк
 
Coding for iPhone
Coding for iPhoneCoding for iPhone
Coding for iPhone
 
Бекэнд для push-уведомлений своими руками
Бекэнд для push-уведомлений своими рукамиБекэнд для push-уведомлений своими руками
Бекэнд для push-уведомлений своими руками
 
А не поговорить ли нам о XSS!
А не поговорить ли нам о XSS!А не поговорить ли нам о XSS!
А не поговорить ли нам о XSS!
 
Выбор CMS для вашего сайта
Выбор CMS для вашего сайтаВыбор CMS для вашего сайта
Выбор CMS для вашего сайта
 
Chrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработкаChrome push notifications. Анатомия и разработка
Chrome push notifications. Анатомия и разработка
 
Отказоустойчивость веб-проекта: мониторинг, резервирование, обслуживание
Отказоустойчивость веб-проекта: мониторинг, резервирование, обслуживаниеОтказоустойчивость веб-проекта: мониторинг, резервирование, обслуживание
Отказоустойчивость веб-проекта: мониторинг, резервирование, обслуживание
 
Сколько стоят хорошие сайты
Сколько стоят хорошие сайтыСколько стоят хорошие сайты
Сколько стоят хорошие сайты
 
Максим Кочкин (Wamba)
Максим Кочкин (Wamba)Максим Кочкин (Wamba)
Максим Кочкин (Wamba)
 
Samosadny mass csrf attacks via flash ads
Samosadny   mass csrf attacks via flash adsSamosadny   mass csrf attacks via flash ads
Samosadny mass csrf attacks via flash ads
 
Защита
ЗащитаЗащита
Защита
 
Coding monday
Coding mondayCoding monday
Coding monday
 
Подготовка интернет-магазина к боевым условиям
Подготовка интернет-магазина к боевым условиямПодготовка интернет-магазина к боевым условиям
Подготовка интернет-магазина к боевым условиям
 
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
Оптимизация скорости сайта без использования AMP | Odessa Frontend Meetup #10
 
PT MIFI Labxss
PT MIFI LabxssPT MIFI Labxss
PT MIFI Labxss
 
Bootstrap
BootstrapBootstrap
Bootstrap
 

Viewers also liked

10 способов как не надо тестировать высоконагруженный веб-сервис
10 способов как не надо тестировать высоконагруженный веб-сервис10 способов как не надо тестировать высоконагруженный веб-сервис
10 способов как не надо тестировать высоконагруженный веб-сервис
SQALab
 
Мир проектного управления глазами не ITишника (Максим Вишнивецкий)
Мир проектного управления глазами не ITишника (Максим Вишнивецкий)Мир проектного управления глазами не ITишника (Максим Вишнивецкий)
Мир проектного управления глазами не ITишника (Максим Вишнивецкий)Ontico
 
Сравнительное юзабилити-тестирование - Выбирай или проиграй
Сравнительное юзабилити-тестирование - Выбирай или проиграйСравнительное юзабилити-тестирование - Выбирай или проиграй
Сравнительное юзабилити-тестирование - Выбирай или проиграй
SQALab
 
Инструменты для тестирования UI
Инструменты для тестирования UIИнструменты для тестирования UI
Инструменты для тестирования UIISsoft
 
QA Manager in Scrum Teams
QA Manager in Scrum Teams QA Manager in Scrum Teams
QA Manager in Scrum Teams
SQALab
 
QA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знать
QA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знатьQA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знать
QA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знать
QAFest
 
Особенности тестирования веб приложение
Особенности тестирования веб приложениеОсобенности тестирования веб приложение
Особенности тестирования веб приложение
DressTester
 
Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...
Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...
Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...
Badoo Development
 
Первоклассное тестирование
Первоклассное тестированиеПервоклассное тестирование
Первоклассное тестирование
SQALab
 
User Interface Тестирование – все ли так просто?
User Interface Тестирование – все ли так просто?User Interface Тестирование – все ли так просто?
User Interface Тестирование – все ли так просто?
SQALab
 
QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...
QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...
QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...
QAFest
 
Технический долг: взгляд и действия со стороны QA / QC&AT
Технический долг: взгляд и действия со стороны QA / QC&ATТехнический долг: взгляд и действия со стороны QA / QC&AT
Технический долг: взгляд и действия со стороны QA / QC&AT
CodeFest
 
Тестирование тестировщиков. Нейрофидбэк в QA
Тестирование тестировщиков. Нейрофидбэк в QAТестирование тестировщиков. Нейрофидбэк в QA
Тестирование тестировщиков. Нейрофидбэк в QA
SQALab
 
Никита Налютин, Антон Александров - Управление рисками тестирования
Никита Налютин, Антон Александров - Управление рисками тестированияНикита Налютин, Антон Александров - Управление рисками тестирования
Никита Налютин, Антон Александров - Управление рисками тестирования
SQALab
 
Риски в тестировании
Риски в тестированииРиски в тестировании
Риски в тестированииISsoft
 
The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017
LinkedIn
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
SlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
SlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
SlideShare
 

Viewers also liked (19)

10 способов как не надо тестировать высоконагруженный веб-сервис
10 способов как не надо тестировать высоконагруженный веб-сервис10 способов как не надо тестировать высоконагруженный веб-сервис
10 способов как не надо тестировать высоконагруженный веб-сервис
 
Мир проектного управления глазами не ITишника (Максим Вишнивецкий)
Мир проектного управления глазами не ITишника (Максим Вишнивецкий)Мир проектного управления глазами не ITишника (Максим Вишнивецкий)
Мир проектного управления глазами не ITишника (Максим Вишнивецкий)
 
Сравнительное юзабилити-тестирование - Выбирай или проиграй
Сравнительное юзабилити-тестирование - Выбирай или проиграйСравнительное юзабилити-тестирование - Выбирай или проиграй
Сравнительное юзабилити-тестирование - Выбирай или проиграй
 
Инструменты для тестирования UI
Инструменты для тестирования UIИнструменты для тестирования UI
Инструменты для тестирования UI
 
QA Manager in Scrum Teams
QA Manager in Scrum Teams QA Manager in Scrum Teams
QA Manager in Scrum Teams
 
QA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знать
QA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знатьQA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знать
QA Fest 2015. Катерина Овеченко. Топ 5 уязвимостей, о которых стоит знать
 
Особенности тестирования веб приложение
Особенности тестирования веб приложениеОсобенности тестирования веб приложение
Особенности тестирования веб приложение
 
Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...
Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...
Доклад Ильи Кудинова на CodeFest 2014. "Учимся на ошибках в организации и про...
 
Первоклассное тестирование
Первоклассное тестированиеПервоклассное тестирование
Первоклассное тестирование
 
User Interface Тестирование – все ли так просто?
User Interface Тестирование – все ли так просто?User Interface Тестирование – все ли так просто?
User Interface Тестирование – все ли так просто?
 
QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...
QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...
QA Fest 2015. Татьяна Завьялова. UX тестирование: планирование, подготовка, п...
 
Технический долг: взгляд и действия со стороны QA / QC&AT
Технический долг: взгляд и действия со стороны QA / QC&ATТехнический долг: взгляд и действия со стороны QA / QC&AT
Технический долг: взгляд и действия со стороны QA / QC&AT
 
Тестирование тестировщиков. Нейрофидбэк в QA
Тестирование тестировщиков. Нейрофидбэк в QAТестирование тестировщиков. Нейрофидбэк в QA
Тестирование тестировщиков. Нейрофидбэк в QA
 
Никита Налютин, Антон Александров - Управление рисками тестирования
Никита Налютин, Антон Александров - Управление рисками тестированияНикита Налютин, Антон Александров - Управление рисками тестирования
Никита Налютин, Антон Александров - Управление рисками тестирования
 
Риски в тестировании
Риски в тестированииРиски в тестировании
Риски в тестировании
 
The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
 

Similar to QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdkrit2010
 
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
HappyDev-lite
 
Risspa domxss
Risspa domxssRisspa domxss
Risspa domxssyaevents
 
От пояса с инструментами к полноценной лаборатории
От пояса с инструментами к полноценной лабораторииОт пояса с инструментами к полноценной лаборатории
От пояса с инструментами к полноценной лаборатории
Yandex
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Yandex
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
Pavlo Iuriichuk
 
браузеры презентация
браузеры презентациябраузеры презентация
браузеры презентация4ertenka
 
браузеры презентация
браузеры презентациябраузеры презентация
браузеры презентация4ertenka
 
Современный подход к локализации на примере одного проекта
Современный подход к локализации на примере одного проектаСовременный подход к локализации на примере одного проекта
Современный подход к локализации на примере одного проекта
SQALab
 
Наталия Макишвили "Вёрстка для мобильных устройств"
Наталия Макишвили "Вёрстка для мобильных устройств"Наталия Макишвили "Вёрстка для мобильных устройств"
Наталия Макишвили "Вёрстка для мобильных устройств"
Yandex
 
Вёрстка для мобильных телефонов
Вёрстка для мобильных телефоновВёрстка для мобильных телефонов
Вёрстка для мобильных телефонов
toWave.ru
 
Как делать глобальный проект
Как делать глобальный проектКак делать глобальный проект
Как делать глобальный проектisdeforum
 
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ontico
 
Web programming modern tendencies
Web programming modern tendenciesWeb programming modern tendencies
Web programming modern tendenciesDarkestMaster
 
Локализация - как делать глобальный проект?
Локализация - как делать глобальный проект?Локализация - как делать глобальный проект?
Локализация - как делать глобальный проект?
Alconost
 
Browzer
BrowzerBrowzer
BrowzerIKTO
 
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
Mikhail Egorov
 
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
Ontico
 
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Ontico
 

Similar to QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати! (20)

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
 
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
 
Risspa domxss
Risspa domxssRisspa domxss
Risspa domxss
 
От пояса с инструментами к полноценной лаборатории
От пояса с инструментами к полноценной лабораторииОт пояса с инструментами к полноценной лаборатории
От пояса с инструментами к полноценной лаборатории
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 
браузеры презентация
браузеры презентациябраузеры презентация
браузеры презентация
 
браузеры презентация
браузеры презентациябраузеры презентация
браузеры презентация
 
Современный подход к локализации на примере одного проекта
Современный подход к локализации на примере одного проектаСовременный подход к локализации на примере одного проекта
Современный подход к локализации на примере одного проекта
 
Наталия Макишвили "Вёрстка для мобильных устройств"
Наталия Макишвили "Вёрстка для мобильных устройств"Наталия Макишвили "Вёрстка для мобильных устройств"
Наталия Макишвили "Вёрстка для мобильных устройств"
 
Вёрстка для мобильных телефонов
Вёрстка для мобильных телефоновВёрстка для мобильных телефонов
Вёрстка для мобильных телефонов
 
Как делать глобальный проект
Как делать глобальный проектКак делать глобальный проект
Как делать глобальный проект
 
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
 
Web programming modern tendencies
Web programming modern tendenciesWeb programming modern tendencies
Web programming modern tendencies
 
Локализация - как делать глобальный проект?
Локализация - как делать глобальный проект?Локализация - как делать глобальный проект?
Локализация - как делать глобальный проект?
 
Browzer
BrowzerBrowzer
Browzer
 
PT MIFI Labxss
PT  MIFI LabxssPT  MIFI Labxss
PT MIFI Labxss
 
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
 
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
CSRF-уязвимости все еще актуальны: как атакующие обходят CSRF-защиту в вашем ...
 
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
 

More from QAFest

QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилинQA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QAFest
 
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The FutureQA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QAFest
 
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QAFest
 
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QAFest
 
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать большеQA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QAFest
 
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiledQA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QAFest
 
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгораниемQA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QAFest
 
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QAFest
 
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QAFest
 
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium ClusterQA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QAFest
 
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QAFest
 
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QAFest
 
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automationQA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QAFest
 
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QAFest
 
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QAFest
 
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях ITQA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QAFest
 
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложенииQA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QAFest
 
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QAFest
 
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QAFest
 
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QAFest
 

More from QAFest (20)

QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилинQA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
 
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The FutureQA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
 
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
 
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
 
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать большеQA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать больше
 
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiledQA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
 
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгораниемQA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
 
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
 
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
 
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium ClusterQA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
 
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
 
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
 
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automationQA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
 
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
 
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
 
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях ITQA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
 
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложенииQA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
 
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
 
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
 
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
 

QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!

Editor's Notes

  1. Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии. Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать.
  2. Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии. Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать.
  3. Google Chrome сильно “косячит” с отображением внутренней тени у блока с закруглёнными углами (border-radius). Весьма странно, что в Safari, хотя он и работает с Chrome на одном движке, таких проблем не наблюдается. В Safari радиус размытия (blur distance) у тени визуально значительно меньше, чем в других браузерах
  4. Самым очевидным и простым способом сделать это ещё с ранних версий 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 и указания радиуса скругления.
  5. внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе
  6. Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin.