Си поставих следната задача: без промяна на HTML-файл: посочвате отделни класове стил за четните и нечетните редове на таблици с раиран клас.
Стандартният начин
Обвързването на повикване тази функция на събитието при зареждане на страницата, ще се постигне желания резултат.
Може би днес е оптималното решение, но то не оставя HTML-код непокътнати. За мен беше интересно да се реши проблема само с CSS, или най-малкото да се възложи задачата на CSS да се търсят тези средства.
Идеалното решение
Възможно ли е да се реши проблема с CSS «чисти»? Възможно е, ако браузърът поддържа CSS3. След преглед на изискванията, ние откриваме, има нов псевдо-клас: тото-дете (). Със сигурност се появява под влияние на обект, и от кой необходимите начините за представяне са много просто:
За съжаление, модерни браузъри в по-голямата част все още не поддържат тази. И това, което CSS2? Тук, за съжаление, подходящи инструменти доста малко. Частично се реши проблема, можете да използвате инструмента за избор +:
Въпреки това, този метод е подходящ само за сравнително малки маси и известен брой редове, в допълнение, тя не може да се нарече удобно. Това, което остава? Остава да използвате разширените функции на всеки браузър. Опитах се да се намери решение за Windows версии на Internet Explorer, Mozilla и Opera.
Internet Explorer
С този браузър са възникнали трудности. Възползвайки се от способността да се определят стойности IE CSS имоти динамично използване на експресия (). задача редуващи се цветни редове, например, лесно да се решават по следния начин:
За да се определи този метод не е един от имотите, както и цялата стила на съответните редове маса (добавете oddrows и evenrows класове), кодът ще трябва да се усложни, или използването на технологии DHTML режими на работа:
В този пример, реализиран плана си: да се добави необходимата низ клас, в зависимост от това дали още низ или не. Това поведение TR етикет, описан в stripy.htc файл:
Използвани технологии за първи път са въведени в Internet Explorer 5, съответно, на масата с раиран клас стане "зебри", тъй като тази версия.
Разширение, като DHTML поведения и изпълнява в браузъри с двигателя Gecko. Разработчиците са позволени, как да се определят нови елементи на страницата, и замени вид, съдържанието и поведението на стандарта. Той използва XBL (XML Binding Language). Тази технология има б # 243; lshimi възможности в сравнение с развитието на Microsoft и изглеждаше, че решение на проблема с трудности няма да възникнат, но това беше.
CSS XBL-като задължителен поведение дефинират с имоти -moz-обвързващи:
Остана в XBL-файл stripy.xml описва поведението на подходящи маркери, обаче, че въпреки всичките си усилия, не можех да "поправят" всеки TR маркер. Няма други настолни тагове. Причината за неприятностите появи Bugzilla Bug 83830. подвързване TD клетки (с XBL) не работи, най-малко. Тъй като, ако това не е бил наранен, но наоколо се оказа, че на XBL не се брои. За щастие, а е намерено решение все още!
Помощ дойде от прочутия Дийн Едуардс уеб гуру (Дийн Едуардс), който е създал XBL-обвивка. позволявайки на Gecko браузъри да използвате Microsoft DHTML поведения технология, което означава да се реши проблема, можете да използвате една и съща файл stripy.htc. като за IE!
За това ние трябва два XBL-файл: Моз-behaviors.xml (директно показана, можете да вземете на уебсайта Дийн Едуардс, тежи по-малко от 7K) и bindings.xml (помощен междинен файл CSS «между» и Моз-behaviors.xml код. по-долу). Сега, за да файл .htc спечелил в Mozilla, ви е необходимо следното:- Първо, тя трябва да бъде валиден XML-документ (както в примера по-горе), тъй като за нейното зареждане използва XMLHttpRequest обект;
- На второ място, тя трябва да бъде в същата директория и Моз-behaviors.xml bindings.xml;
- и трето, на XBL-свързващ трябва да бъде формулиран по следния начин:
В общи линии, всичко работи добре, но за да се промени поведението на TR етикет все още ще се провали поради грешката споменато по-горе, но Clever Girl Едуардс успя да реши този проблем. В нашия случай, кода на CSS следва да бъдат изменени:
Съдържание bindings.xml файл трябва да бъде, както следва:
Сега всичко работи добре. Таблици с раиран клас ще бъде "зебри" в браузъра на двигателя Gecko на, от версия 1.0.
За съжаление, този член на семейството на уеб-проводници няма механизъм разширение сравнима с конкуренти. Да, в 9-та версия добавя джаджи. но те не могат да ви помогнат по някакъв начин влияе на работата на браузъра. Какво да се прави? Opera е имал друг избор, освен да се възползва от забранени методи. Започвайки с версия 7, браузърът (като наистина, т.е. от версия 5) има интересна "функция" - възможността за изпълняване на скриптове директно от CSS. За тази цел, всеки CSS-имот, който позволява като стойност, за да определите пътя към файла. Ето един пример на тази техника:
Opera работи скрипт само за съществуващи HTML-елементи и само веднъж. Защо да не се възползваме и да не заемат сценария, посочен по-горе? Така и направих, въпреки че трябва да признаем, с тази техника се сблъска с известни затруднения и не всички сценарии са "послушни":
Този скрипт се изпълнява успешно в Opera и чрез CSS:
В този пример желаната функция се нарича директно (. Чрез проверка дали (window.opera) тя се среща само в Opera) и може да бъде свързан с оспорването на събитието при зареждане на страницата, аз бях в състояние да се постигне това, както следва:
И двата варианта ще работят в Opera версии, които поддържат имот име на класа HTMLElement обект на TR елемент. т.е. като се започне с версия 7.5. Таблица с раиран клас успешно стане "шарени" и 9-версия на браузъра, но в 8500 събрание Opera губи своята "уникална възможност" - каза на рецепцията не работи вече. Така че като че ли имаше затворен въпрос, Операта е все още отворен.
Така че, може да получи всичките си планове не успяха, но, въпреки това, което имаме, макар и не пълна, но е на задоволително решение. HTML е непокътната и стил style.css файл може да изглежда така:
Свързани статии