27 февр. 2009 г.

Чего мне не хватает в CSS

Несмотря на всю мощь CSS, некоторых вещей мне там все-таки не хватает.

Константы

Очень часто хочется сделать какие-то правило общими для нескольких селекторов. Приходится, либо копировать часть правил из селектора в селектор:

.class1 {
  font-size: 0.9em;
  color: #FF0000;
  position: absolute;
}

.class2 {
  font-size: 0.9em;
  color: #FF0000;
  float: left;
}

Или отдельно описывать общие части:

.class1 {
  position: absolute;  
}

.class2 {
  float: left;
}

.class1,
.class2 {
  font-size: 0.9em;
  color: #FF0000;
}

Вроде бы неплохо, но не всегда удобно — часто приходится группировать селекторы из разных частей css, в итоге размазывая описание одной сущности.

Или же создавать еще один CSS-класс, содержащий общие части, и добавлять его потом ко всем нужным HTML-элементам, что мне вообще не нравится:

.class1 {
  position: absolute;
}

.class2 {
  float: left;
}

.class3 {
  font-size: 0.9em;
  color: #FF0000; 
}

Душа же хочет чего-нибудь такого:

$font1 {
  font-size: 0.9em;
  color: #FF0000; 
}

.class1 {
  $font;
  position: absolute;
}

.class2 {
  $font;
  float: left;
}

Где-то читал, что что-то подобное поддерживает webkit.

Селекторы, с возможностями похожими на XPath

Часто хочется назначить какие-то правила контейнеру, если внутри контейнера есть какой-нибудь элемент. Например, сделать нижний отступ у контейнера, если внутри контейнера есть изображение (пример надуман, обычно все намного сложнее):

.container[descendant::img] {
  margin-bottom: 1em;
}

Мне кажется это гораздо более нужным чем всякие drop shadow и css-анимации.

7 комментариев:

DenisX комментирует...

ну ещё в цсс не хватало гемора (как в xsl), если кривые руки будут всё это использовать :)

alpha комментирует...

Я не сказал что нужно все как в xsl, конкретно мне хватает селектора, с помощью которого можно проверить наличие вложенного элемента. Да и кривые руки могут испортить все что угодно, независимо от того в насколько прямую систему они лезут.

ast комментирует...

Можно парсер написать, для "компилирования" CSS из примера с наследованием :-)

ast комментирует...

наверно оно:
http://code.google.com/p/google-web-toolkit-incubator/wiki/CssResource :-)

alpha комментирует...

Да, константы там - это круто. Но хочется нативной поддержки, а не через GWT :)

Иван Соколов комментирует...

Есть еще такое начинание по этой теме: http://lesscss.org/
Парсер для этого расширения css есть, к сожалению, только на Ruby.
Конечно это далеко не гугловский монстр, но в перспективе очень даже неплохо..

Анонимный комментирует...

Спасибо за инструкции...
Web design companies