кросбраузерності верстка

Кросбраузерності верстка. Корисні поради

І так, в даній статті я спробую пояснити, що таке кросбраузерності верстка, в чому її важливість, і дам кілька порад з приводу того, як можна навчитися верстати кросбраузерності.

На сьогоднішній день існує достатня кількість різноманітних браузерів: це і Internet Explorer. і Mozilla FireFox. і Opera. і Safari. і Chrome. Крім того у кожного з цих браузерів, як і у будь-якого програмного забезпечення, є багато версій. Тобто одна версія браузера застаріває, виходить наступна, в яку впроваджуються сучасні можливості і т.п. але про це трохи докладніше далі.

Так ось, один і той же сайт, з тим же самим шаблоном, стилями і движком може відображатися в різних браузерах по-різному. Тобто ви верстали макет сайту і перевіряли його, використовуючи лише Mozilla FireFox, після вирішили запустити і перевірити в Internet Explorer, а там - кошмар: блоки роз'їхалися, меню відображається некоректно і все форми не на своєму місці.

Такого бути не повинно, сайт повинен відображатися практично однаково в усіх браузерах, тому що відвідувачі Вашого сайту усіма ними користуються. Тепер, щоб підсумувати все вищенаписане, можна вже визначити термін кросбраузерності верстка - це верстка сайту, яка дозволяє відображати його у всіх браузерах однаково.

Ось чому при прийомі на роботу основна вимога до верстальщикам - це вміння верстати кросбраузерності. Навчитися подібної верстці відразу не вийде, вміння приходить з досвідом, людина починає приблизно розуміти, чому в одних браузерах код відображається нормально, а в інших косяки. Тому досвідчений верстальник намагається відразу скласти код, максимально адаптований під всі браузери і тільки по ходу верстки коригувати якісь похибки.

Тепер трохи про те, чому так відбувається, чому різні браузери сприймають написаний вами код по-різному.

Ну, по-перше, є деякі стандарти HTML. яким ваша верстка може не відповідати. Чи не відповідати цим стандартам можуть і певні версії браузерів, якими все одно користуються відвідувачі ваших сайтів.

По-друге, прогрес рухається вперед, з'являються нові технології. які дозволяють бути вашому сайту більш стильним і функціональним. Відповідно з'являються нові бібліотеки, а також правила CSS, які будуть добре сприйматися оновленими версіями браузерів, а застарілими, на жаль - немає.

По-третє, це витівки Internet Explorer. який грає за своїми якимось правилам. Особисто я до сих пір не можу зрозуміти, чому громадян не поцупити з цього браузера. Особливо весело було раніше, коли багато хто користувався IE6. Цей браузер половину правил не розуміє, прозорості картинок не чути і т.д. От і доводилося і доводиться верстальщикам використовувати всякі хакі, щоб обійти IE.

Ну і остання важлива причина - це значення атрибутів за замовчуванням. У різних браузерах воно може бути різним. Під атрибутами мається на увазі колір елемента, відстань між елементами, розмір шрифту і т.д. Якщо всі ці та інші характеристики не прописати в таблиці стилів, то браузер сам почне підставляти значення, які вказані у нього за умовчанням. Ну, а оскільки ці значення у браузерів різні, то самі можете здогадатися, як буде відображатися в них ваш сайт.

Як вирішити всі ці проблеми і навчитися кросбраузерності верстки. Відповідь одна це практикуватися і шукати в мережі рішення, чому певний код не хоче розуміти певний браузер. Я ж зі свого боку хочу дати декілька порад, які допоможуть вам верстати кросбраузерності.

1. Для того щоб вирішити проблему з атрибутами за замовчуванням. можна прописати ці атрибути в таблиці стилів, щоб браузери не додумували і не підставляли свої значення. Приклад такого правила привожу:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color. white;
>

2. Необхідно щоб на вашому комп'ютері були встановлені всі найпопулярніші браузери. Бажано також встановити всі версії IE, починаючи від 6. Встановити на один комп'ютер безліч версій IE не вийде просто так: необхідно або ставити їх на різні операційний системи за однією версією, або користуватися віртуальною машиною.

Можна також скористатися програмою IE Tester, яка дозволяє перевіряти сайт у всій безлічі версій IE. Особисто я користуюся, але декому не подобається, кажуть, що деякі з проектів ця програма відображає некоректно.

3. Необхідно визначити для себе стратегію верстки. Як вам буде зручніше: верстати відразу весь сайт під один браузер, а після поганяти його під інші або ж верстати поступово і кожен елемент перевіряти у всіх браузерах, при необхідності коригуючи.

Я для себе вибрав другий варіант, верстаю кожен елемент спочатку під FireFox, а потім підганяю його під інші, так по закінченню верстки можна уникнути зайвих проблем і не переробляти весь макет повністю.

4. Для того, щоб полегшити собі роботу і швидше знаходити помилки в своєму коді для того чи іншого браузера, можна встановити наступні плагіни:

Який з усього вишенапісанного можна зробити висновок. Кросбраузерності верстка не так вже й страшна, як може здатися на перший погляд, головне набратися досвіду, щоб розуміти як може відобразити той чи інший браузер написаний вами код на сторінці. Виберіть для себе покрокову стратегію верстки і користуйтеся плагінами для розробників.

Поділіться статтею з друзями:

Скажіть, я ось зіткнувся з такою проблемою, верстаю форму де кнопка відправити у вигляді картинки, маю її за допомогою відступів. Скинув вже все що тільки можна. У ie вона довільно зміщується з незрозумілих причин в верх. в інших браузерах все впорядке. Помітив, що у кожного браузера шрифт одного і того ж сімейства, виглядає по різному, у одного він товщий, у іншого більш худий і ширина букв різна. Це нормально?

Та нехай хоч 1000 видає W3 - головне що б користувачі бачили сайт всюди однаково і правильно!

to Norb. Ви за своїми помилками стежте, а про всі свої я і сам знаю - ніяких наслідків вони за собою не тягнуть.

Так у вас помилок 53 w3 видає!