troll

Chrome 18.0.1025.151 m / Win7 x64

Табличка же там всего лишь для вертикального центрирования и гибкого растягивания.

По-моему, растягивается слишком уж гибко. Хотя всего не предусмотришь, конечно.

Тогда пара вопросов от новичка:

1. По каким причинам фон шапки сделан через img, а не background?
   
2. Для чего в подвале используется таблица?
   

Помогите, пожалуйста, понять, как решаются проблемы, связанные с каскадом. Например, в Матрешке в реализации блока .b-article есть такое правило:

.b-article a:visited {color: #974dac;}

Допустим, мне нужно внутрь .b-article вложить кнопку .b-pin с текстом определенного цвета. Я пишу следующий код:

<style>
.b-pin {color: green;}
</style>
<div class="b-article">
    <p>Lorem ipsum</p>
    <a href="/foo" class="b-pin">More</a>
</div>

Но после перехода по ссылке ее цвет изменится.

Как этого избежать? Я вижу следующие способы:

• Делать как Яндекс в библиотеке bem-bl, т.е. не использовать каскад почти никогда, а на каждый элемент навешивать класс. Меня как верстальщика такой подход устраивает, но, боюсь, его не оценят те, кто будет заниматься поддержкой и наполнением сайта.
  
• Использовать !important для повышения приоритета отдельных объявлений. По-моему, плохой способ, способный серьезно запутать код.
  
• Задавать стили, которые с большой вероятностью придется переопределить, с помощью простых селекторов (вместо .b-article a:visited писать a:visited). Тоже мало хорошего: как минимум, придется писать дополнительный код, т.е. к .b-pin дописывать .b-pin:visited.
  

Существует ли какой-нибудь более разумный и удобный вариант?

Если нужны прототипы, можно скрестить первый вариант со вторым:

var pics = [];

function Picture(settings){
  this.name = settings.name;
  this.x = settings.x;
  this.y = settings.y;
  this.image = settings.image;
}

Picture.prototype.draw = function(ctx) {
  if (this.image) {
    ctx.drawImage(this.image, this.x, this.y);
  }

  return;
}

for (var i = 0; i < JSON.Objects.length; i++) {
  pics.push(new Picture(JSON.Objects[i]));
}

Или вот так сделать, но работать будет только в Firefox и вебкитных:

function Picture(){}

Picture.prototype.draw = function(ctx) {
  if (this.image) {
    ctx.drawImage(this.image, this.x, this.y);
  }

  return;
}

for (var i = 0; i < JSON.Objects.length; i++) {
  JSON.Objects[i].__proto__ = Picture.prototype;
}

toolbar'а - горизонтально расположенных элементов, а в таких случаях использование списока (<ul>) просто не логично

Почему?

можно

font-weight:auto;
font-weight:0;
font-weight:0px;
font-weight:10px;
font-weight:10%;
font-weight:10em;
font-weight:10pt;

нельзя

font-weight:10;

Неправда, ни одним из вышеуказанных способов нельзя задавать font-weight. Возможные значения этого свойства перечислены в спецификациях CSS 2.1 и CSS 3.

"Ошибка значения font", похоже, означает баг в валидаторе: он не понимает числовые значения свойства font-weight.

<a><p></p></a>

Слышал, что на форуме Vlad говорил, что HTML5 допускает блочный в строчном элемент...хотя для меня это кажется все еще диким...где про это вообще можно прочитать?

По-моему, там отошли от понятий "блочный" и "строчный". Элементы теперь относят к определенным категориям, и у каждого элемента есть content model, определяющая, что может быть у него внутри.

Нет, на такую подлость способен только previousSibling, а previousElementSibling даст либо предыдущий элемент, либо null.

filter - это регулярное выражение

test

W3C "не рекомендует" (т.е. в некоторых обстоятельствах все же допускает) использование таблиц в презентационных целях, а WHATWG это прямо и безусловно запрещает.

Прошу простить, я неточно выразился. Имелись в виду не XHTML и HTML(5), а это и это.

Интересно получается, W3C'шная и WHATWG'шная спеки друг другу противоречат...

Google JS Style Guide с ними солидарен:

Node lists are often implemented as node iterators with a filter. This means that getting a property like length is O(n), and iterating over the list by re-checking the length will be O(n^2).

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

It is better to do this instead:

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
  doSomething(paragraph);
}

This works well for all collections and arrays as long as the array does not contain things that are treated as boolean false.

function(x) {
  alert(x);      
}('bar');

Тут мы объявили функцию и тут же её вызвали с аргументом «bar». Выведет алерт с текстом «bar».

Так ничего не выведет, может только ошибку в консоль)

Отсюда:

}(n); //Создаем функцию, сразу же её вызываем она возвращает нам порядковый номер элемента в alert при событии click на элементе.

В функцию передается не x, а n.

Посмотрите, например, на такой код (надеюсь, будет понятно, что он делает, если нет - почитайте здесь):

var n = 1,
    f = function(x) {
      return x;
};

var m = f(n);

Можно его чуть-чуть модифицировать, вызвав функцию сразу же после объявления:

var n = 1,
    m = function(x) {
      return x;
}(n);

В обоих случаях в переменной m окажется одно и то же значение - результат выполнения функции.

table-layout: fixed должен помочь: http://jsfiddle.net/LFUcJ/

SelenIT, здорово! А можно как-нибудь зафиксировать размер ячеек, чтобы они не прыгали при наведении? Тьфу, извиняюсь, затупил...

Фокус не мой, о нем еще 2 года назад здесь же писал Great Rash.

Это копипаст из темы про БЭМ, должно убирать пробелы между инлайн-блоками.

Вроде бы получилось на 1 обертку меньше, если только я не упустил каких-либо деталей: http://jsfiddle.net/ys9hd/.

Я бы сказал, что это баг Webkit, а остальные делают все правильно. При list-style-position: inside блок маркера должен быть первым inline box'ом внутри li, но, так как рядом с ним (блоком маркера) есть div c display: block, он (блок маркера) будет обернут в anonymous block box. Таким образом, div расположится на следующей за маркером строке. Во всяком случае, мне так кажется.

Где-то читал, что при назначении обработчика в HTML-разметке браузер создает из значения атрибута тело анонимной функции, которая затем вешается на нужное событие. Т.е.

<body onload="confirmAllLinks();">

в каком-то смысле равнозначно

<script>
document.body.onload = function() {
  confirmAllLinks();
};
</script>

Очевидно, без скобок смысл будет совсем другой.

PS: не ручаюсь за достоверность данной модели, так что если ввел в заблуждение - извините.