Ccылки: Сравнение JS фреймворков

Павел Антонов — Sun, 13 Sep 2009 09:15:03 +0000

Отличная матрица сравнения фреймворков: http://matthiasschuetz.com/javascript-framework-matrix/en/

CSS Шаблоны

Павел Антонов — Thu, 18 Jun 2009 13:25:43 +0000

Популярная в последнее время тема CSS шаблонов. Уж если вставать на рельсы автоматизации процесса веб-разработки, то автоматизировать все и вся. В том числе и CSS.

Если уж заговорили про «рельсы», то первым пусть будет претендент написанный на Ruby: LESS. Шаблонизатор использует синтаксис CSS, расширяя его вложенностью и переменными:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
 
@a_border: 1px;
 
#header {
  border-top: @a_border;
  border-left: @a_border + 1;
  border-right: @a_border + 3;
  border-bottom: @a_border * 5;
}

Что получится, я думаю объяснять не нужно, все абсолютно прозрачно. Смущает несколько название. С учетом того что разработчики предлагают компилятор для коммандной строки, можно и с коммандой (less) перепутать. Еще один странный момент – включение классов:

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#header {
  .rounded_corners;
}
 
#footer {
  .rounded_corners;
}

По данному коду будет сгенерировано следующие:

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Что выглядит странно. Ну хорошо – включили код класса, но почему класс-то из результатов пропал? Странно.

CleverCSS написан на Python что не может не радовать, но разработчики решили принести синтаксис Python в CSS – что настораживает. Одно дело когда ты работаешь с расширенным синтаксисом CSS, и совсем уже другое, когда надо изучать/применять некий чужеродный синтаксис:

ul#comments, ol#comments:
  margin: 0
  padding: 0
 
  li:
    padding: 0.4em
    margin: 0.8em 0 0.8em
 
    h3:
      font-size: 1.2em
    p:
      padding: 0.3em
    p.meta:
      text-align: right
      color: #ddd

Данный код будет соответствовать CSS-коду:

ul#comments,
ol#comments {
  margin: 0;
  padding: 0;
}
 
ul#comments li,
ol#comments li {
  padding: 0.4em;
  margin: 0.8em 0 0.8em;
}
 
ul#comments li h3,
ol#comments li h3 {
  font-size: 1.2em;
}
 
ul#comments li p,
ol#comments li p {
  padding: 0.3em;
}
 
ul#comments li p.meta,
ol#comments li p.meta {
  text-align: right;
  color: #dddddd;
}

Возможности схожи с тем что умеет LESS: вложенность, переменные и операции. Вложенность можно применять и к наборам атрибутов:

#main p:
  font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic

При вычислении может приводить величины. Например, складывать cm и mm. Все это приятно, но на мой взгляд ценность представляет только вложенность и переменные/вычислений. Остальное уже не очень обязательно.

С одной стороны CSS-шаблоны это здорово. Но если посмотреть на цикл разработки, верстка выполняется на момент когда еще нет никаких систем (cms/шаблонных движков). А использовать верстальщику компилятор CSS, по-моему, будет 5-м колесом в телеге. Переводить после верстальщика CSS в CSS-шаблон, для использования в системе, то же мало оправдано.

Поскольку я никогда не применял CSS-Шаблоны в своей практике, может кто-нибудь прокомментировать полезность подобных механизмов?

Приведение HTML-блоков у общей высоте.

Павел Антонов — Sat, 17 May 2008 20:36:33 +0000

Для без-табличной верстки создание двух блоков одинаковой высоты представляет собой определенную проблему. Существует техника создания блоков равной высоты на чистом CSS (http://www.ejeliot.com/blog/61) , однако тут есть свои проблемы и ограничения.

Наткнулся в исходниках примеров http://www.xhtmlit.com/ на код выставляющий одинаковую высоту для блоков на JavaScript. Почему бы нет…

function $() {
	var elements = new Array();
	for (var i=0;i<arguments.length;i++) {
		var element = arguments[i];
		if (typeof element == 'string') element = document.getElementById(element);
		if (arguments.length == 1) return element;
		elements.push(element);
	}
	return elements;
}
 
var BoxHeights = {
	maxh: 0,
	boxes: Array(),
	num: 0,
	op_test: false,
	equalise: function() {
		this.num = arguments.length;
		for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
		this.boxes = arguments;
		this.maxheight();
		for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
	},
	maxheight: function() {
		var heights = new Array();
		for (var i=0;i<this.num;i++) {
			if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
				heights.push($(this.boxes[i]).scrollHeight);
			} else {
				heights.push($(this.boxes[i]).offsetHeight);
			}
		}
		heights.sort(this.sortNumeric);
		this.maxh = heights[this.num-1];
	},
	sortNumeric: function(f,s) {
		return f-s;
	}
}
 
window.onload = function() {
	BoxHeights.equalise('cLeft-two','cMiddle-two','cRight-two');
}

Codeline » HTML

Ccылки: Сравнение JS фреймворков

CSS Шаблоны

Приведение HTML-блоков у общей высоте.