Кросбраузерність сайту перегляд сайту в різних браузерах, створення сайтів і заробіток в мережі

Я не виключаю, що в недалекому майбутньому пошукові системи Яндекс і Гугл заохочуватимуть проекти, що відрізняються коректністю css і html коду, а також оптимальної кросбраузерністю, додаванням певної величини тИЦ і ПР (PR) сайту. які є відображенням трастовості проекту. По-моєму, це було б справедливо, адже дана робота забирає багато часу і сил.

Взагалі, при розкручуванні свого ресурсу треба постійно тримати руку на пульсі і відстежувати зміни в алгоритмах ранжирування пошукових систем і оперативно на них реагувати, особливо це стосується найважливіших аспектів, таких як, наприклад, використання nofollow noindex при закритті посилань або шматків тексту від індексації в Yandex і Google, коректне застосування анкора посилання. Сюди ж відноситься і кроссбраузерность.

Адже ми отримуємо відвідувачів на свої сайти, які користуються абсолютно різними браузерами, до того ж абсолютно різних модифікацій. Наприклад, в даний час ще дуже великий відсоток відвідувачів користується старими версіями Internet Explorer (8,7 і навіть 6), незважаючи на те, що вже давно вийшла оновлена ​​9 версія. Це стосується і інших популярних браузерів: Firefox, Google Chrome, Opera і Safari. Ось я і перерахував ті браузери. до яких слід адаптувати сайт або блог WordPress, оскільки інші займають дуже маленьку частку.

Я думаю, ви знаєте, що якщо сайт красиво і правильно відображається в браузері, в якому ви з ним працюєте, це абсолютно не означає, що також він буде виглядати в інших. Найбільш виділяється наявністю багів (bug - помилка, англ.) IE, особливо його старі модифікації. Це виходить тому, що різні браузери по-різному інтерпретують код html і правила каскадних таблиць стилів css.

Резюмуючи вищесказане, необхідно відзначити, що кроссбраузерность була і поки залишається однією з найбільш гострих проблем у веб-розробці. Само по собі проходження веб стандартам, в тому числі html і css, дає досить високий рівень сумісності, проте це стосується тільки досвідчених веб-майстрів, які верстають сайт "з нуля". В сучасних умовах переважна більшість користується передовими розробками, такими як CMS (Content Management System - система управління контентом) Joomla, WordPress та іншими.

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

І останнє. Окремо стоять старовинні версії IE (6,7,8), якими поки користуються деякі відвідувачі, відповідно ми не можемо ними нехтувати, проте з ними проблем найбільше. Справа в тому, що навіть якщо html і css коди прописані коректно і сайт красиво і однаково виглядає у всіх популярних браузерах (до речі IE9 теж відноситься до їх числа, оскільки останнім часом Microsoft докладає чимало зусиль, щоб повернути втрачені позиції в боротьбі з конкурентами, в тому числі шляхом більш уважного ставлення до застосування міжнародних стандартів щодо використання html і css), проте в вищезазначених варіаціях IE часто можливі спотворення.

Нижче ми розглянемо деякі варіанти, які дозволяють досягти оптимальної кросбраузерності. Хочу тільки сказати, що при іcпользованіі CMS (наприклад, WordPress) як "помічника" в побудові вашого ресурсу бажано час від часу перевіряти, як він виглядає в популярних браузерах, якими користуються відвідувачі.

Вибираєте зі списку потрібні версії браузерів (все вводити немає сенсу, оскільки зовсім старі версії використовуються мізерним числом користувачів); причому зауважте, що можна вибирати також браузери, які використовуються різними операційними системами:

При бажанні виберіть певний дозвіл екрана і глибину кольору з меню, що випадає «Screen Size» і «Color Depth»:

Після описаних вище рухів натискаєте кнопку «Submit» і чекаєте результату. Процес формування скріншотів може зайняти деякий час (в залежності від числа зазначених для перевірки браузерів від 3 хвилин до півгодини, можливо навіть більше), так що можна випити чашечку кави або зеленого чаю. Після цього отримаєте результат:

Як я вже говорив, дотримання стандартів (валідності) у використанні кодів html і css забезпечує кроссбраузерность ресурсу. Можна здійснити перевірку сайту на помилки html коду. а також перевірку валідності css w3c валідатором. Але я також відзначав, що в старих версіях Internet Explorer використовувалися невалидность коди, тому, поки значна частина потенційних Новомосковсктелей користується застарілими модифікаціями цього браузера, доводиться якось викручуватися для досягнення кросбраузерності сайту.

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

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

Але незабаром старі варіанти Internet Explorer підуть у небуття, а починаючи вже з 9 версії проблем виникнути не повинно, відповідно зменшиться необхідність використання хаков і, як наслідок, більше число css елементів верстки матимуть необхідну валідність. Бачите, як тісно переплетені поняття валідності і кросбраузерності. Тут дуже важливо вибрати улюблене мною правило "золотої середини", яким я дуже часто користуюсь не тільки в професійній діяльності, а й у житті.

А тепер про технічні деталі. Для того, щоб використовувати хакі, необхідно по моєму прикладу створити текстовий файл (назвати його, скажімо, як у моєму випадку, ie.css) в кореневій папці вашої теми ваш_сайт / public_html / wp-content / themes / названіе_вашей_теми (шлях приблизно такий) . Потім прописати наступну css конструкцію:

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

Все, хак повинен працювати. Навіть якщо ця інформація не допоможе і даний хак не підійде вашій темі, принаймні будете мати уявлення, як діяти в подібних випадках (це звернення, зрозуміло, початківцям вебмайстрам).

Щоб зрозуміти, які елементи css відповідають за форматування того чи іншого стилю, можна скористатися чудовою, на мій погляд, опцією, яка існує практично у всіх новітніх версіях популярних браузерів (Opera. Internet Explorer). У Mozilla Firefox ця опція реалізується за допомогою плагіна Фаербуг (Firebug - як завантажити, встановити і користуватися одним з кращих розширень для браузера Firefox).

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

Для того, щоб зміни вступили в силу, потрібно внести відповідні корективи в файл style.css поточної теми:

Після цього не забувайте натиснути "Оновити файл». Потім можна подивитися змінені параметри в тестованих браузерах (в цьому прикладі, нагадаю, Мозилла і Гугл Хром):