12.06.09

Браузер Internet Explorer не завжди обтяжує себе дотриманням всіх стандартів верстки W3C. Свого часу це було «фішкою» Microsoft, яка користувалася своїм монопольним становищем на ринку ПО, щоб ще більше його зміцнити. А до цього «вільне трактування» мови розмітки допомогло перемогти Netscape. Втім, мова в цій статті піде не про загиблого браузері і навіть не про його переможців.

В результаті відступу Майкрософта від деяких стандартів HTML і CSS код може трактуватися по-різному браузером Internet Explorer і іншими, «чесними» браузерами (Firefox Mozilla, Opera, Safari і ін.). Досвідчені веб-майстри і html-кодери знають про нюанси створення якісного кросбраузерності коду, але новачки, у яких ще немає хорошого практичного досвіду верстки сайтів, часто набивають шишки і згадують батьків колишнього глави Microsoft. На жаль, злість і звинувачення - справа неконструктивну. Проблеми краще вирішувати, спираючись на досвід і шишки, бажано, чужі.

У цій статті я хотів би розповісти про одну виверту при описі стилів CSS, що дозволяє вирішити поширену проблему: як зробити так, щоб код верстки розумівся тільки браузером Internet Explorer, але ігнорувався усіма іншими «нормальними» браузерами. При цьому JavaScript нам не знадобиться, досить правок загального стилю CSS.

Щоб код CSS зрозумів тільки браузер IE потрібно між властивістю класу і значенням властивості ставити не двокрапка, а знак рівності. Інші браузери, крім Internet Explorer, таку команду проігнорують, оскільки такий запис не описана в стандартах верстки W3C. Щоб було зрозуміліше, розглянемо два практичних прикладу опису стилю CSS.

Приклад 1: Як ви хочете зробити відступ блоку тільки для IE

.example1_css_style {
margin-left: 20px;
margin-right = 45px;
margin-top: 10px;
}

В цьому класі перший рядок наказує всім браузерам зробити відступ зліва на 20 пікселів, а друга - відступ на 45 пікселів справа, але тільки для Internet Explorer. У всіх інших браузерах, крім IE, відступу праворуч не буде.

Приклад 2: Як задати різні значення одного й того ж властивості CSS для кожного браузера

.example2_css_style {
margin: 0px 0px 0px 0px;
margin = 22px 22px 0px 0px;
}

У цьому прикладі стилю CSS спочатку всі браузери, в т.ч. і Internet Explorer, встановлюють нульові відступи для блоку. А в другій сходинці тільки Internet Explorer робить відступи по 22 пікселя зверху і справа, інші браузери цю команду не розуміють і ігнорують. Тобто для IE властивість стилю margin задається 2 рази, другий раз переписуючи попередній, а для інших браузерів - один раз, перший.

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

Сервісний центр «Мобільний Майстер» проведе iphone ремонт в Одесі з гарантією. Якщо ви не хочете переплачувати, зверніться до фахівців саме цієї компанії.