reset.css — так ли всё хорошо?

Наткнулся на необычный и интересный баг — <b> и <strong> не делают текст полужирным, если использовать reset.css от Eric A. and Kathryn S. Meyer:

Решение: закомментировать 23-ю строку в reset.css (font: inherit;). Пользуйтесь.

Интересное поведение Google Chrome

Наткнулся на удивительное: мало того, что Chrome кастомизирует страницу с ошибкой, так ещё и докладывает, что я не один не могу открыть сайт. Приятно.

jQuery.mousewheel: обработка событий колеса мыши

В данной статье мы будем пользоваться jquery.mousewheel.

Для того, чтобы обработать событие скролла, необходимо повесить listener на определённый элемент:

$('#wrapper')
   .mousewheel(function (event, delta) {
      //code
   })
;

Пример — как обработать скролл — делаем горизонтальную прокрутку блока при вращении колёсика мыши:

$('#photo-wrapper')
   .data('scrollLeft', -1) //для предотвращения блокировки вертикального скролла
   .mousewheel(function (event, delta) {
      if ( (!this.scrollLeft && delta > 0) || (this.scrollLeft == $(this).data('scrollLeft') && delta < 0) ) {
         return true; //данный блок необходим для того, чтобы перестать блокировать вертикальный скролл, если горизонтальный закончился
      }
      
      $(this).data('scrollLeft', this.scrollLeft); //сохраняем текущий скролл слева
      
      this.scrollLeft -= (delta * 300); //на сколько прокрутить блок? (размер скролла)
      return false; //отключить вертикальный
   })
;

jQuery's .animate вешает chrome/webkit на ≈10 секунд (загрузка процессора 100%)

Есть в одном проекте следующий код:

$(t)
   .css({'border': '9px solid #D9D9D9'})
   .animate({'border': '9px solid #C62417'}, 'fast')
   .animate({'border': '9px solid #D9D9D9'}, 'fast')
   .animate({'border': '9px solid #C62417'}, 'fast')
   .animate({'border': '9px solid #D9D9D9'}, 'fast')
;

И вешает он браузер (Google Chrome 11.0.696.28 beta) при вызове события.
В чём же проблема? Как выяснилось, проблема в том, что создаются несколько одинаковых анимаций последовательно.

Решение — заменить одинаковые цвета на практически не отличающиеся, но немного другие:

$(t)
   .css({'border': '9px solid #D9D9D9'})
   .animate({'border': '9px solid #C62417'}, 'fast')
   .animate({'border': '9px solid #D9D9D8'}, 'fast')
   .animate({'border': '9px solid #C62418'}, 'fast')
   .animate({'border': '9px solid #D9D9D9'}, 'fast')
;

Таким образом анимации становятся разными и проходят с загрузкой процессора ≈1%.