Мабуть, однією з найскладніших проблем веб-розробки є оптимізація клієнтської частини сайту під різні браузери. На щастя чи на жаль, світ інтернету – це божевільний зоопарк з десятків не схожих один на одного, тварин. Тут є і швидкі гепарди, і граціозні лані, косі, кульгаві, і клишоногі слони і жирафи, безглузді і непередбачувані качконоси.
Майже будь-якого веб-розробнику знайоме відчуття, коли ти, стискаючи кулачки, відкриваєш свою сторінку в якому-небудь дінозавра, з тугою і смутком взираешь на поплилі блоки, непрацюючі js-скрипти, робиш важкий подих, хрестишся і сідаєш писати милиці. У цій невеликій добірці ми зібрали ряд корисних рад по підготовці клієнтської частини сайту. Щось з цього – речі загальновідомі (проте, часом, наполегливо ігноруються), що знають лише одиниці. У будь-якому разі, сподіваємося, що даний матеріал буде корисним і позбавить вас від багатьох і багатьох печалей.
Преамбула. Філософське питання №1. Які браузери мені потрібно підтримувати?
З цього питання (як і по кожному предмету холивара) існує цілий ряд точок зору. Наведемо деякі з них:
В якості аргументу в подібній суперечці, часто наводиться статистика поширеності браузерів від того чи іншого ресурсу. «Дивіться, браузер (вставити пропущене) використовує лише 1% людей», «У тебе неправильна статистика, дивись тут (вставити посилання на дійсно заслуговує поваги ресурс)», «А що якщо у твого ресурсу мільйонна відвідуваність? Адже 1% – це 10 000 користувачів!». І спорів сім немає числа.
Втім, найчастіше серед тисяч постів на подібні теми зустрічаються ті, що намагаються донести приблизно таку думку: Статистика використання браузерів «взагалі» для більшості проектів є дані, які не значать нічого. Подібна інформація має значення лише для кількох десятків популярних сервісів, якими користуються всі. Для конкретного проекту, при прийнятті рішення про підтримку того чи іншого браузера (втім, ця теза може бути поширений на будь-яку технологію) має значення його поширеність серед користувачів конкретного проекту.
Ви розробляєте сайт, агрегатор або блог ком’юніті для IT-фахівців? Тоді підтримка старих браузерів буде марною тратою часу (заради ввічливості, все ж варто потурбуватися приємною «заглушкою» з пропозицією оновити браузер).
Ви розробляєте сайт візитку для компанії, що поставляє металопрокат роздрібним продавцям по всій Росії? Тоді слід потурбуватися адекватним відображенням сайту в IE8 і старше плюс всі сучасні браузери (автор даного поста, до речі, одного разу працював в компанії, системний адміністратор якої був переконаний, що використання всіма співробітниками Internet Explorer a значно сприяє безпеці внутрішньокорпоративної мережі).
У будь-якому випадку, веб-розробнику слід мати хоча б загальне уявлення про те, що працює, а що не працює на тих чи інших браузерах. Адаптуючи улюблений шаблон для DLE (вже не кажучи про розробку власного) варто уважно вивчити шапку в шаблоні main.tpl, а також, хоча б мигцем, продивитися CSS.
Розібравшись з філософією і холиварами, припустимо, що ви вже чітко прийняли рішення про те, що ви збираєтеся підтримувати, а що ні. Почнемо.
Порада №1. Використання умовних коментарів для IE.
Щоб полегшити розробникам написання милиць, старі браузери IE вміють розуміти спеціальну конструкцію типу:
HTML
В даному прикладі, IE віком до 8 включно відображає HTML код укладений між і . У цьому коді ми можемо підключити спеціально для них окремий css або jаvascript файл. Використання такої конструкції вкрай зручно: адже всі інші браузери будуть вважати наші милиці простим коментарем. Ну, втім, ви напевно про це все знаєте. З повним переліком умов і їх синтаксисом можна ознайомитися тут: http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii
Часто на практиці зустрічається і зворотна задача – приховати певний код від IE і показувати його у всіх інших браузерах. З цією метою використовується наступна, досить хитра конструкція:
