Чим перевірити верстку сайту? Інструменти для перевірки

1. Чому важливо перевіряти якість верстки
2. Інструменти для перевірки
3. Як перевірити адаптивну верстку
4. кросбраузерність
5. Перевірка на відповідність з макетом
6. Додаткові вимоги

Від автора: у вас в руках файли з версткою. Але як перевірити її якість? Які інструменти існують для тих, хто не розбирається в HTML і CSS? Якими корисними речами варто користуватися самому верстальщику? Ця стаття спробує відповісти на ці питання.

Чому важливо перевіряти якість верстки

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

Інструменти для перевірки

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Мал. 1. З отладчиком знаходити помилки простіше

W3C Валідатор. Сервіс перевірки коду на дрібні помилки. W3C - це організація, яка займається розробкою і офіційною підтримкою веб-стандартів. Оскільки вона встановлює ці стандарти, на її сайті є спеціальний сервіс, який може перевірити будь-яку сторінку в мережі на валідність (тобто на помилки). Потрібно сказати, що це досить строгий валідатор.

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

Детальніше з цими правилами можна ознайомитися на сайті W3C. По суті, єдиний сайт, який валідатор перевіряє без помилок, це сайт самої W3C. Тому не варто виправляти всі помилки. І все-таки валідатор може вказати на якісь серйозні проблеми, тому перевірка верстки сайту в ньому бажана. validator.w3.org - валідатор.

IE Tester. Існує така програма, яка дозволяє протестувати сайт в старих версіях Internet Explorer. Багато замовників сьогодні все ще вимагають підтримку цього браузера, щоб сайт в ньому відображався так само, як і в інших. Можливо, зараз вже є онлайн-сервіси, в яких можна виконати аналогічну перевірку. У будь-якому випадку, вам досить вставити потрібний код і програма покаже, як все це відображалося б в IE 6, 7 і 8.

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

Решта браузери просто пропустять цей фрагмент. Такий спосіб можна використовувати, якщо вам дійсно дуже сильно потрібна підтримка IE.

Інші сервіси. Останнім часом сервісів для перевірки верстки стає все більше і більше. Немає сенсу зупинятися на якомусь окремому. Більшість цих сервісів працюють непогано, але все одно не перевіряють все досконально.

Як перевірити адаптивну верстку

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

Мал. 2. Зміна ширини вікна браузера - найпростіший спосіб перевірити адаптивність.

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

Чим ще перевірити верстку сайту? Обов'язково повинна бути перевірка на кроссбраузерность. Потрібні відкрити сайти в різних браузерах і подивитися, як вони там виглядають. Можна змінювати масштаб і розмір шрифту. Ви повинні переконатися, що хоча б у більшості користувачів все буде нормально. Якщо ви перевіряєте вручну, то можете також попросити знайомих перевірити верстку в їх браузерах, якщо їх версії відрізняються від ваших. Тут можна дати ще одну пораду - не використовуйте занадто специфічних властивостей, які підтримуються тільки в якомусь одному браузері. А якщо вже використовуйте, придумуйте для них якусь альтернативу в інших браузерах. Для деяких властивостей все ще потрібно використовувати Вендорний префікси. Це пов'язано з тим, що веб-стандарти постійно розвиваються і всі браузери не можуть підтримувати лише. Але якщо вже робити перевірку на кроссбраузерность, то робити її як мінімум для таких браузерів: Chrome, Mozilla, Opera, Safari, IE.

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

Перевірка на відповідність з макетом

Перевірити верстку можна ще так: скріншот зверстаного сайту необхідно додати до макету в фотошопі в якості нового шару. Встановити цієї верстви прозорість і подивитися, наскільки відображення елементів збігається з макетом. Для цього можна використовувати спеціальний плагін. Наприклад, Pixel Perfect для Mozilla.

Додаткові вимоги

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

У цій статті ми описали основні способи перевірки верстки за допомогою різних програм, сервісів і інструментів. Це допоможе вам адаптувати сайт під будь-які умови.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3