Css хакі і підстроювання під браузер, css, інтернет-технології, статті на

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

Історично самої основною проблемою використання CSS було те, що дуже мало браузерів їх підтримували. Але, починаючи з 5-ох версій, всі браузери мають хорошу підтримку CSS, що становить на даний момент 99% використовуваних браузерів.

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

Як працює хак по підстроювання під браузер

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

Припустимо, ви встановлюєте проміжок між заголовком і рештою вмісту в 25 пікселів в Internet Explorer. В IE яку буде виглядати нормально, але в Opera, Firefox і Safari проміжок буде занадто великим і набагато краще буде виглядати тоді, коли його величина складе 10px. Щоб досягти того, щоб у всіх браузерах все виглядало однаково, вам потрібно створити наступні 2 правила:

#header # 123; margin-bottom: 25px # 125;
#header # 123; margin-bottom: 10px # 125;

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

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

Підстроювання під Internet Explorer

Для того, щоб змусити IE використовувати потрібне нам правило, ми можемо скористатися командою вибору нащадка. яку IE не розуміє. Ця команда включає два елементи, один з яких є нащадком іншого. У нашому випадку html> body посилається на нащадка, body. що міститься в батьківському елементі html.

Таким чином, наші команди перетворюються до наступного вигляду:

#header # 123; margin-bottom: 3em # 125;
html> body #header # 123; margin-bottom: 1em # 125;

IE не може зрозуміти друге правило CSS через те, що не знає, що потрібно робити з виразом html> body. тому він буде використовувати перше правило. Всі інші браузери будуть використовувати друге правило.

Підстроювання під IE 5

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

Нижчевикладене правило встановлює ширину елемента, що дорівнює 10em, для всіх браузерів, крім IE5, в якому ширина елемента буде 5em (IE5 включає набивання по обидва боки при розрахунку ширини + рамка):

#header # 123padding: 2em; border: 0.5em; width: 10em # 125;

Вирішенням цієї проблеми є хак box model hack, придуманий Tantek # 199; elik, який завдяки йому став досить відомий в середовищі активістів CSS. Зараз ви побачите, що він із себе представляє. Отже, для того, щоб підлаштуватися під IE5 і встановити для нього своє правило CSS, потрібно використовувати такий запис:

#header # 123; padding: 2em; border: 0.5em; width: 15em; voice-family: "" # 125; ""; voice-family: inherit; width: 10em # 125;

Як він до цього здогадався, уявити собі абсолютно неможливо. Але найголовнішим є те, що це дійсно працює, тобто спочатку IE5 встановить ширину в 15 пікселів, в яку будуть включені набивка по обидва боки і рамки (зліва і справа). Це дасть шукану ширину 10em в IE5.

Далі значення 15em буде замінено другим значенням 10em усіма браузерами, крім IE5. який з якоїсь причини не розуміє команди CSS, наступного відразу після хак-вирази. Це не найкрасивіше рішення, звичайно, але зате робоче.

Підстроювання під IE для MAC

IE для MAC, відверто кажучи, виробляє взагалі незрозумілі речі з CSS. Мабуть, браузер можна починати рахувати застарілим :), оскільки Microsoft не збирається випускати для нього оновлень. Тому багато розробників пишуть код таким чином, щоб сайт був хоча б нормально видно в IE / Mac, а не володів порівнянними з іншими браузерами функціональністю і дизайном. Користувачам, які використовують IE / Mac, будуть доступні всі ресурси сайту, і цього цілком достатньо.

Щоб сховати команди, використовуючи хак IE / Mac CSS hack, потрібно просто зробити висновок кожне з них між блоками з тире і зірочками:

/ # 42; Hide from IE-Mac # 42; /
#header # 123; margin-bottom: 3em # 125;
#footer # 123; margin-top: 1.5em # 125;
/ # 42; End hide # 42; /

IE / Mac просто проігнорує всі ці команди. Цей хак може бути корисний в тому випадку, якщо певна частина не працює належним чином в IE / Mac. Якщо ж цей розділ не є основним, то ви просто можете заховати його від IE / Mac таким чином:

#noiemac # 123; display: none # 125;

/ * Hide from IE-Mac * /
#noiemac # 123; display: block # 125;
/ * End hide * /

The first CSS rule hides the entire section assigned the noiemac id (i.e.