Рекомендуется к прочтению верстальщикам, а так же их руководителям. Не является руководством к какому-либо действию.
Сегодня 13 февраля 17-ого. История началась 3 дня назад. Собственно проблема появилась следующая. Есть каруселька (это тип слайдера), верстальщику компании «R&K» пришёл запрос, о том что каруселька не адаптивная, т.е. не сжимается как положено, при сжатии окна браузера по ширине. Баг выявлен в Firefox v50.1.0 32-bit, Win7 32-bit. При этом, на следующий день, появился странный телефонный звонок от заказчика, с сообщением о том, что всё работает, и благодарность за быстрое реагирование. Т.к. вёрстку вообще никто не смотрел, то люди почесали в недоумении репы и разошлись. Через два дня снова позвонил заказчик, и уже яростно/истошно/дико/люто начал орать, что вёрстка снова не адаптивная, и не ужимается в окно браузера при сжатии браузера. Вот тут-то люди призадумались и начали крутить вёрстку.
index.html
<!DOCTYPE html>
<html><head>
<meta encoding="utf-8" />
<link rel="stylesheet" href="style.css" />
</head><body>
<div>
<label><input type="radio" name="name" checked="checked" /></label>
<label><input type="radio" name="name" /><img src="1.jpg" /></label>
<label><input type="radio" name="name" /><img src="2.jpg" /></label>
</div>
</body></html>
style.css
* {margin: 0; padding: 0; font-size: 0; } /* сброс стилей */
div {
margin: 20px auto; /* центрирование для тестов */
border: 1px solid royalblue; /* видимость блока для тестов */
/*display: inline-block; оригинальное значение div, для теста не нужно */
max-width: 450px; /* 300, 400, 450, 600, ширину перебирайте сами */
white-space: nowrap; /* что бы изображения были в линию */
/*overflow: hidden; оригинальное значение overflow, для теста не нужно */
}
input {
/*display: none; оригинальное значение display, для теста не нужно */
}
img {
width: 100%; /* адаптивное сжатие изображения */
}Само собой все лишнее выпилено для тестов. Что бы ясно был виден смысл проблемы. Итак, обнаруженная проблема «адаптивной верстки» следующая:
Верстаем, верстаем, например то что выше, запускаем опять же в вышеприведённом браузере Firefox. Видим следующую картину, всё как и ожидается, например вот так.
Сжимаем окно, естественно «адаптивная вёрстка» жмёт и изображение, получаем вот это.
Всё в порядке? А не тут то было… Идём пить чаёк, курим, приходим обратно, открываем яндекс, читаем новости (почту, Хабр, рутуб и т.д.), открываем поглядеть нашу верстку, и изумлённо получаем вот это.
Теперь поймите правильно людей. Люди — это люди. Всё учесть невозможно. В мире багнутого ПО учесть всё — тем более невозможно. Сложилась следующая ситуация. Клиент открыл страничку в одной вкладке, сжал браузер, и получил то, что хотел. На следующий день он открыл страничку со второй вкладкой, и верстку расколбасило. При этом, верстальщик ровно так же не замечая вкладок — открывал по-разному и получал разные результаты. На количество вкладок никто не обратил внимания. Дошло до того, что начали приподымать чистую вёнду, смотреть там, начали рыть багрепорты на форумах мозиллы, начали искать странное поведение селекторов width/max-width и предпринимать ну очень фееричные и странные действия, про которые стыдно писать, но на количество вкладок снова и опять никто не обратил внимания. Более того, часа три никто не смог воссоздать баг, потому что открывали тестовую страничку на чистом браузере без вкладок. Были просто поражены тем, что баг исчез сам собой, но конечно же, стоило открыть страничку со вкладками, причем с определенными — баг выполз. Сутки люди имели наилютейший баттхерт, которого я в жизни не видел, сдобренный истошными воплями клиента. Разумеется, у людей начали немножко сдавать нервы, и дело чуть не дошло до откровенного мордобоя. Далее повесть рассказывать смысла нет, но догадаться во что выливаются подобные ситуации можно самостоятельно.
Пожалуйста, в мире багнутого ПО будьте внимательней и терпеливей. Это относится ко всем без исключения. Как к исполнителям, так и к руководителям. С заказчиков брать кроме денег, конечно же нечего, и им простительно.
P.S.: К верстальщикам не имею никакого отношения. Верстал 10 лет назад, слава богу быстро слез с этого непотребного дела. Получил себе эту проблему по телефонному звонку от знакомого, который всю голову изломал, решая оную задачку. Баг успешно воссоздан, верстка выше — моя. Верстка тестовая, никак не продакшн, ни в одном глазу. Специально позвонил еще одному знакомому верстальщику, слышит про этот баг впервые.
Автор: InterceptorTSK
