CSS хакі та підстроювання під браузер, CSS, Статті, Програмування - Програмування C, Delphi, C#
Дедалі більше розробників переходять із табличної верстки на верстку з допомогою CSS. Якщо є такі переваги, як менший час завантаження, покращена доступність та легше управління сайтом, то чому ж цього не зробити?
Історично найголовнішою проблемою використання CSS було те, що дуже мало браузерів їх підтримували. Але, починаючи з п'яти версій, всі браузери мають хорошу підтримку CSS, що становить на даний момент 99% браузерів.
Також актуальною проблемою є те, що браузери іноді можуть інтерпретувати команди CSS по-різному, від чого розробники піднімають руки до неба і повертаються назад до таблиць. Однак не варто так зневірятися, тому що в міру того, як ви вивчатимете CSS, ви дізнаєтеся про всі відмінності і побачите, що їх не так вже й багато.
Як працює хак з підстроювання під браузер
Принцип підстроювання полягає в тому, щоб посилати браузеру, що обманюється, одні команди CSS, а всім іншим - інші, які мають пріоритет перед першими. Це відбувається за тим принципом, що якщо є два правила CSS, тодруге правило обов'язково матиме більший пріоритет.
Припустимо, ви встановлюєте проміжок між заголовком та іншим вмістом 25 пікселів в Internet Explorer. У IE ця відстань буде виглядати нормально, але в Opera, Firefox і Safari проміжок буде занадто великим і краще виглядатиме тоді, коли його величина складе 10px. Щоб досягти того, щоб у всіх браузерах все виглядало однаково, вам потрібно створити наступні 2 правила:
Перша команда призначена для IE, друга - для решти браузерів. І як же це працюватиме? Ну, прямо зараз не буде звісно,тому що всі браузери можуть зрозуміти обидва правила і, відповідно, використовуватимуть друге, тому що воно є останнім.
За допомогою додавання CSS хаку ми можемо сховати друге правило від IE. Це означає, що IE навіть не знатиме, що друге правило існує, і тому використовуватиме перше. Як це зробити? Читаємо далі.
Підстроювання під Internet Explorer
Для того, щоб змусити IE використовувати потрібне нам правило, ми можемо скористатися командою вибору нащадка , яку IE не розуміє. Ця команда включає два елементи, один із яких є нащадком іншого. У нашому випадку html>body посилається на нащадка, body , що міститься в батьківському елементі html .
Таким чином, наші команди перетворюються на такий вид:
#headerhtml>body #header
IE не може зрозуміти друге правило CSS через те, що не знає, що потрібно робити з виразом html>body , тому він буде використовувати перше правило. Всі інші браузери будуть використовувати друге правило.
Підстроювання під IE 5
На перший погляд може бути досить дивним той факт, що потрібно використовувати різні правила для різних версій IE, але для IE5 це дійсно важливо. Пояснюється це тим, що IE5 неправильно "розуміє" боксову модель. За стандартом при встановленні ширини елемента в CSS, набивання та рамки НЕ включаються до цього значення. Однак IE5 якимось незбагненним чином включає ці величини в ширину, викликаючи тим самимзменшення ширини елементів у браузері.
Нижченаведене правило встановлює ширину елемента, що дорівнює 10em, для всіх браузерів, крім IE5, в якому ширина елемента буде 5em (IE5 включає набивку з обох сторін при розрахунку ширини + рамка):
#header{padding: 2em; border: 0.5em; width: 10em>
Вирішенням цієї проблеми є хак box model hack, придуманий Tantek Çelik, який завдяки йому став досить відомим серед активістів CSS. Зараз ви побачите, що він собою представляє. Отже, для того, щоб підлаштуватись під IE5 і встановити для нього своє правило CSS, потрібно використовувати такий запис:
Як він до цього здогадався, уявити зовсім неможливо. Але найголовнішим і те, що це справді працює, тобто. спочатку IE5 встановить ширину в 15 пікселів, в яку будуть включені набивання з обох боків та рамки (зліва та праворуч). Це дасть шукану ширину 10em в IE5.
Далі значення 15em буде замінено другим значенням 10em усіма браузерами, крім IE5, який з якоїсь причини не розуміє команди CSS, наступної відразу після хак-виразу. Це не найкрасивіше рішення, звичайно, але зате робоче.
Підстроювання під IE для MAC
IE для MAC, відверто кажучи, робить взагалі незрозумілі речі з CSS. Мабуть, браузер можна починати вважати застарілим, оскільки Microsoft не збирається випускати для нього оновлень. Тому багато розробників пишуть код таким чином, щоб сайт був хоча б нормально видно в IE/Mac, ане володів порівнянними з іншими браузерами функціональністю та дизайном. Користувачам, які використовують IE/Mac, будуть доступні всі ресурси сайту, і цього цілком достатньо.
Щоб сховати команди, використовуючи хак IE / Mac CSS hack, потрібно просто укласти кожне з них між блоками з тире та зірочками:
IE/Mac просто проігнорує всі ці команди. Цей хак може бути корисним у тому випадку, якщо певна частина не працює належним чином у IE/Mac. Якщо цей розділ не є основним, то ви просто можетесховати його від IE/Mac таким чином:
/* Hide from IE-Mac \*/ #noiemac /* End hide */
Перше правило CSS приховає весь розділ від IE/Mac, що має id noiemac (тобто.
Підстроювання під Netscape 4
Netscape 4 має обмежену та неправильну підтримку CSS. Робити розмітку за допомогою CSS під цей браузер, який тепер використовується не більше ніж одним відсотком користувачів, може бути дуже трудомістким завданням. Тому просто просто приховувати всі файли CSS від нього. Цього можна досягти за допомогою директиви @import.
Netscape 4 відобразить необроблену стилями сторінку, оскільки не розуміє директиви @import.
Перевірка вашого сайту у різних браузерах
На час написання статті найбільш поширеними браузерами були IE5, IE6, Firefox, Opera та Safari (найсвіжішу статистику можна подивитися на TheCounter.com). Всі ці браузери + деякі застарілі ви можете завантажити з Evolt browser archive. Якщо ви не знаєте, як можна встановити відразу кілька версій IE на ваш комп'ютер, подивіться, як це можна зробити тут.
Найкраще, звичайно, щоб ви перевірили, як виглядає ваш сайт у всіх цих браузерах, причому як на PC, так і на Mac. Якщо у вас немає Mac комп'ютера, ви можете зробити знімок екрану вашого сайту в Safari через iCapture або спробувати Browsercam, який має ширший набір можливостей для цього.
Загалом можна сказати, що сучасні браузери мають дуже хорошу підтримку CSS – цього достатньо для того, щоб використовувати CSS для розмітки сайтів. Однак все ж таки деякі елементи можуть виглядати по-різному в різних браузерах. Але з цього приводу турбуватися особливо не варто, тому що за допомогою хаків ваш сайт можна адаптувати так, щоб у всіх браузерахвін виглядав однаково.
Статтю написано Трентоном Моссом.
Коментарі щодо перекладу надсилати сюди: