CSS: "безболюча" верстка - каскадування та умовні коментарі

Друга (та не остання 🙂 ) частина серії статтей "CSS: "безболюча" верстка". Першу частину читайте тут.

Каскадування

Вже у самій назві CSS - Cascading Style Sheet присутнє слово "каскадування". Що це означає? Метод каскадування є засобом вирішення конфліктів правил у середині таблиці. На практиці ж це означає, що при двох одинакових записах у таблиці стилів, застосовуватиметься те, що розміщене нижче. Наприклад у документі є два одинакові селектори з однаковими властивостями але різними

значеннями:

р { color:red; }
h1 { color:green; }
р { color:black; }

Явний конфлікт! Проте метод каскадування дозволяє безболісно вирішити його: Елемент абзацу p на веб-сторінці матиме чорний колір, адже декларація відповідного значення для даного селектора розміщена нижче.

Розуміння цього принципу дозволяє користуватись такими можливостями CSS, як наприклад, директива @import. Веб-майстер може створити документ reset.css із "скинутими" стилями, потім додати його на початку в основний документ style.css з допомогою ось такого коду:

@import url(reset.css);

Уже в основній таблиці style.css можна писати нові властивості до різноманітних селекторів без жодних конфліктів!

Умовні коментарі

Найсильніший головний біль при верстці веб-сторінки веб-майстру додає браузер Internet Explorer, що завжди прагне все відображати по своєму... Щоб обійти "недолугість" даного браузера можна скористатись "хаками" у основній таблиці стилів. Проте, такий метод має свій недолік: основна таблиця стилів стає заплутаною і "важкою".

Є і інший шлях - скористатись умовними коментарями! Це означає, що веб-майстер використає специфічний HTML для IE, щоб визначити певну версію цього браузера і потім завантажити спеціальну для цього браузера таблицю стилів. Ось ці коментарі:

<!--[if IE]>
Націлений на всі версії IE
<![endif]-->

<!--[if lte IE 7]>
Націлений на всі версії IE, що нижче або дорівнюють "7"
<![endif]-->

<!--[if IE 6]>
Націлений на IE 6
<![endif]-->

Виокремлення всіх "хаки" для IE у спеціальні таблиці стилів, дозволить зменшити вагу основної таблиці стилів і звільнить від обробки непотрібного коду браузерів, для яких він не потрібен.

За підтримки:
Регистрация доменных имен. Вы можете купить домен в любой доменной зоне мира!