В седьмой версии данного браузера добавилось небольшое число команд для работы с каскадными листами стилей. Не стоит думать, что все из этих команд новые – большинство из них уже давно поддерживаются другими браузерами, и они только сейчас включены в Internet Explorer 7. Однако эти новые CCS-комманды в большинстве своем позволяют более полно управлять и контролировать различные HTML-элементы и устраняют необходимость использования классов во многих случаях.
В данной статье приведен несколько полезных CSS-комманд, которыми можно воспользоваться в седьмой версии браузера.
Родственные отношения
В шестой версии IE не поддерживались родственные CCS-отношения и приходилось использовать много альтернативных путей, для того чтобы спрятать CCS-комманды от Internet Explorer. Сейчас, в седьмой версии браузера, необходимость в этом отпала, так как появилось такое понятие как родственные CCS-отношения. Для того, чтобы наглядно представить, что представляет из себя данная возможность, рассмотрим следующую HTML-структуру:
div span {color: red;}
Чайлд селектор (Child selector)
Рассмотрим ситуацию, когда действие по изменению цвета записано следующим CSS-кодом:
//div>span {color: red;}
В данном случае изменения цвета текста не произойдет, потому что применен новый элемент >, так называемый чайлд-селектор. Он строго устанавливает родственные отношения предок-потомок между div и span. А в приведенном примере отношения между тегами div и span установлены как предок-потомок второго уровня.
С помощью чайлд-селектора можно установить родственные отношения потомок-предок между любыми HTML-элементами. Возьмем к примеру такую ситуацию: нам необходимо позиционирование относительно вершины контента, заключенного только между первыми тегами div в теле страницы. При этом контент в последующих тегах должен оставаться неизменным. Без чайлд-селектора нам пришлось бы довольно громоздко описывать этот первый div при помощи класса, а потом еще связать его с CSS-коммандами. Сейчас же можно обойтись простой конструкцией:
//body>div {margin-top: 10px;}
Смежный селектор (Adjacent selector)
Смежный селектор (он обозначается как +) тоже является чрезвычайно производительным инструментом в управлении СSS. Он начал поддерживаться только в седьмой версии IE. Он предназначен для установления отношений между соседними HTML-элементами. Поясним суть использования смежного селектора на примере. Рассмотрим следующий фрагмент CSS-кода:
//blockquote+p {margin-top: 0;}
В данном коде говорится, что текст, расположенный до цитат (обычно цитируемые участки обозначаются с помощью тега blockquote), должен позиционироваться в топе страницы. Использование такой конструкции особенно эффективно при частом чередовании цитируемого и обычного текста.
Вот еще один пример эффективного использования смежного селектора при горизонтальном позиционировании списков. Очень часто хочется в списке добиться того, чтобы верхний элемент списка был как-то смещен относительно нижнего. Вот пример того, как с помощью смежного селектора сделать так, чтобы каждый верхний элемент списка был ненамного смещен влево относительно нижнего:
//li+li {border-left: 1px solid black;}
т. е. каждый элемент li будет смещен влево на один пиксель относительно следующего li.
Заключение
Если сравнивать с предыдущей версией, в Internet Explorer 7 бесспорно проведено несколько значительных улучшений касательно использования каскадных листов стилей. Устранено множество CSS-багов и добавлено несколько CSS-комманд. Однако в том то и дело, что их всего лишь несколько. Internet Explorer 7 все еще не поддерживает или не совсем адекватно воспринимает большое число CSS-комманд . Нам остается только надеяться, что данные недостатки будут устранены в следующих версиях браузера.