Я поставив собі таку задачу: не зраджуючи HTML-файл: задати окремі стильові класи для парних і непарних рядків таблиць з класом stripy.
Стандартний шлях
Прив'язавши виклик даної функції до події onload сторінки, ми доб'ємося потрібного результату.
Мабуть, на сьогоднішній день це оптимальне рішення, однак воно не залишає HTML-код недоторканим. Мені ж було цікаво вирішити проблему виключно засобами CSS, або, по крайней мере, покласти на CSS завдання щодо вишукування цих коштів.
ідеальне рішення
Чи можна вирішити завдання «чистим» CSS? Можна, якщо браузер підтримує CSS3. Вивчивши специфікації, ми знаходимо там новий псевдо-клас: nth-child (). безсумнівно з'явився під впливом сабжа, і завдяки якому необхідні стилі задаються дуже просто:
На жаль, сучасні браузери в абсолютній більшості поки не підтримують це. А що ж CSS2? Тут, на жаль, відповідних інструментів зовсім небагато. Частково вирішити проблему можна за допомогою селектора +:
проте даний метод підходить тільки для таблиць з відносно невеликим і заздалегідь відомим числом рядків, крім того, його ніяк не можна назвати зручним. Що ж залишається? Залишається використовувати додаткові можливості кожного окремого браузера. Я спробував знайти рішення для Windows версій Internet Explorer, Mozilla і Opera.
Internet Explorer
З цим браузером труднощів не виникло. Скориставшись здатністю IE задавати значення CSS-властивостями динамічно за допомогою expression (). завдання чергуються різнокольорових рядків, наприклад, легко вирішити наступним способом:
Для визначення цим методом не одного властивості, а цілого стилю для відповідних табличних рядків (додати класи oddrows і evenrows), код доведеться ускладнити, або скористатися технологією DHTML Behaviors:
У наведеному прикладі реалізовується задумане: додаються необхідні класи рядках, в залежності від того, парна це рядок чи ні. Така поведінка тега tr описано в файлі stripy.htc:
Використані технології були вперше представлені в Internet Explorer версії 5, відповідно таблиці з класом stripy стануть «зебрами», починаючи з цієї версії.
Розширення, подібне DHTML Behaviors втілено і в браузерах з движком Gecko. Веб-розробникам дозволено, як визначати нові елементи на сторінці, так і перевизначати зовнішній вигляд, вміст і поведінку стандартних. Для цього використовується XBL (XML Binding Language). Дана технологія має б # 243; більшим можливостями в порівнянні з розробкою від Microsoft і, здавалося, що з вирішенням поставленого завдання труднощів не виникне, але не тут-то було.
В CSS XBL-прив'язка задається подібно behavior за допомогою властивості -moz-binding:
Залишалося в XBL-файлі stripy.xml описати поведінку потрібних тегів, однак, незважаючи на всі свої зусилля, мені не вдалося «прив'язати» ні тег tr. ні інші табличні теги. Причиною цієї неприємності виявився Bugzilla Bug 83830. Binding TD cells (with XBL) does not work, at all. Як би це не було прикро, але по всьому виходило, що на XBL не варто розраховувати. На щастя, рішення все ж було знайдено!
Допомога прийшла від відомого веб-гуру Діна Едвардса (Dean Edwards), який створив XBL-обгортку. що дозволяє Gecko-браузерам використовувати технологію Microsoft DHTML Behaviors, а це значить, для вирішення завдання можна задіяти той же файл stripy.htc. що і для IE!
Для цього нам знадобиться два XBL-файлу: moz-behaviors.xml (безпосередньо обгортка, взяти можна на сайті Діна Едвардса, важить менше 7K) і bindings.xml (допоміжний, проміжний файл «між» CSS і moz-behaviors.xml. Код нижче за текстом). Тепер, щоб .htc-файл заробив і в Mozilla, необхідно наступне:- по-перше, він повинен бути дійсним ХML-документом (як у наведеному вище прикладі), так як для його завантаження використовується об'єкт XMLHttpRequest;
- по-друге, йому слід перебувати в одній директорії з moz-behaviors.xml і bindings.xml;
- і, по-третє, XBL-прив'язка повинна бути оформлена таким чином:
У загальному випадку всі відмінно працює, але змінити поведінку тега tr все одно не вдасться через згаданого вище бага, але розумниці Едвардсу вдалося вирішити і цю проблему. Для нашого випадку СSS-код слід доповнити:
Вміст файлу bindings.xml має бути наступним:
Тепер все відмінно працює. Таблиці з класом stripy стануть «зебрами» в браузерах на движку Gecko, починаючи з версії 1.0.
На жаль, цей представник сімейства веб-провідників не має механізмами розширення порівнянними з конкурентами. Так, в 9-й версії з'явилися віджети. але з їх допомогою неможливо як-небудь вплинути на роботу браузера. Що робити? Opera не залишила вибору, крім як скористатися забороненим прийомом. Починаючи з 7-ї версії, браузер (як втім, і IE, починаючи з версії 5) володів цікавою «особливістю» - можливістю виконувати скрипти прямо з CSS. Для цього використовується будь-який CSS-властивість, що дозволяє в якості значення вказувати шлях до файлу. Ось приклад такої техніки:
Opera запускає сценарій тільки для існуючих HTML-елементів і тільки один раз. Чому б цим не скористатися і не запозичити скрипт, згадуваний вище? Я так і зробив, хоча варто зізнатися, з даними прийомом виникали певні складності і не всі сценарії були «слухняними»:
Цей скрипт успішно виконатися в Opera і через CSS:
У наведеному прикладі необхідна функція викликається безпосередньо (завдяки перевірці if (window.opera). Це відбувається тільки в Opera), а можна прив'язати цей виклик до події onload сторінки, мені вдалося домогтися цього в такий спосіб:
Обидва варіанти будуть працювати в версіях Opera, підтримують властивість className об'єкта HTMLElement для елемента tr. тобто починаючи з версії 7.5. Таблиці з класом stripy успішно ставали «смугастими» і в 9-й версії браузера, однак уже в збірці 8500 Opera втрачає свою «унікальну здатність» - вказаний прийом більше не працює. Так що, здавалося, вже закрите питання, для Opera залишається поки відкритим.
Отже, домогтися всього задуманого не вдалося, але, тим не менш, ми маємо хоч і не повне, але цілком задовільний рішення. HTML залишається недоторканим, а стильовий файл style.css може виглядати так: