Двой­ные клас­сы и IE6

Од­ни­ми из са­мых при­ят­ных се­лек­то­ров в CSS мог­ли бы стать мно­же­ствен­ные клас­сы. Сти­ли­за­ция в за­ви­си­мо­сти от це­поч­ки клас­сов, про­пи­сан­ных од­но­му эле­мен­ту мог­ла бы быть очень за­ман­чи­вой, од­на­ко, как все­гда, всё пор­тит IE6.

Соб­ствен­но, сра­зу к делу. Вот при­мер при­ме­не­ния несколь­ких клас­сов. В нор­маль­ных бра­у­зе­рах пер­вые две строч­ки бу­дут иметь зе­лё­ный фон, то­гда как IE6 —крас­ный. Это воз­ни­ка­ет за счёт того, что:

  • При ис­поль­зо­ва­нии це­поч­ки клас­сов, на­при­мер .class1.class2 {…} IE6 со­вер­шен­но иг­но­ри­ру­ет все клас­сы, кро­ме по­след­не­го в се­лек­то­ре. Со­от­вет­ствен­но —это мож­но ви­деть в пер­вом при­ме­ре —IE6 не об­ра­ща­ет вни­ма­ния на несу­ще­ству­ю­щий класс в се­лек­торе.

  • IE6 не про­сто не об­ра­ща­ет вни­ма­ния на эти клас­сы, он их не до­бав­ля­ет к свой­ству кас­ка­да се­лек­то­ра: бо­лее ве­со­мый в тео­рии се­лек­тор —в IE6 та­ким не яв­ля­ется.

Та­ким об­ра­зом, мо­жет со­здать­ся впе­чат­ле­ние, что в IE6 се­лек­тор сра­ба­ты­ва­ет как надо: на­при­мер, имея .class1 {…} .class1.class2 {…} и про­ве­ряя ме­ня­ет­ся ли по­ве­де­ние бло­ка при до­бав­ле­нии вто­ро­го клас­са, —в IE6 вто­рой се­лек­тор бу­дет пе­ре­кры­вать пер­вый толь­ко по­то­му, что он идёт вторым.

Как вы­вод: нель­зя поль­зо­вать­ся та­ки­ми се­лек­то­ра­ми и, в слу­чае необ­хо­ди­мо­сти, луч­ше со­здать до­пол­ни­тель­ную обёрт­ку, в ко­то­рой уже про­дуб­ли­ро­вать все клас­сы из­на­чаль­но­го эле­мен­та, по­сле чего в се­лек­то­ре ука­зы­вать клас­сы че­рез про­бел. К со­жа­ле­нию, для трой­ных и чет­вер­ных це­по­чек при­дёт­ся со­зда­вать но­вые и но­вые обёрт­ки, так что луч­шим вы­хо­дом бу­дет от­каз от ис­поль­зо­ва­ния со­еди­не­ния классов.

Од­на­ко, ино­гда по­лез­но опре­де­лять для всей стра­ни­цы ка­кой-то класс, на ко­то­ром по­том бу­дет ос­но­вы­вать­ся даль­шей­шая вёрст­ка. Ча­сто та­ким об­ра­зом для BODY про­пи­сы­ва­ют мно­же­ство клас­сов. Но если необ­хо­ди­мо при­ме­нять сти­ли со­об­раз­но двум или трём клас­сам, дей­ству­ю­щим од­но­вре­мен­но, име­ет смысл со­здать один-два об­рам­ля­ю­щих дива для всей стра­ни­цы и про­дуб­ли­ро­вать клас­сы в них. Это немно­го уве­ли­чит раз­мер HTML, но со­кра­тит CSS, кро­ме того, сде­ла­ет ра­бо­ту с кас­кад­ны­ми таб­ли­ца­ми сти­лей удобнее.