Недавно нашел интересный метод обесцветить, т.е. сделать черно-белым любой элемент на веб странице, будь то изображение, таблица, форма или что-либо еще.

Казалось бы, зачем это может понадобиться? Однако у меня сразу же появилась мысль о том, где такая возможность пригодиться. Довольно часто в моей практике встречались дизайны, в которых существовали элементы управления (различные кнопки, иконки) в двух видах – цветной, обозначающий что элемент активен, и серый, обозначающий что элемент не активен и нажимать на него не имеет смысла. Раньше я использовал два разных изображения – одно цветное, одно черно-белое, и если элемент деактивировался, то я подставлял нецветную картинку. Недостаток такого метода в том, что браузер должен подгружать дополнительную картинку, и хуже всего, что этих картинок может быть довольно много… Кроме того, нужно тратить время на то, чтобы создавать все эти нецветные изображения. При помощи предлагаемого здесь метода, обесцвечивание можно выполнить простой функцией grayscale().

Чтобы вам была более понятна суть, посмотрите мой демо пример. Однако здесь же замечу, что, хотя этот метод и тестировался в разных браузерах, все же пока это экспериментальное решение.

<< читать дальше >>

В библиотеке Mootools уже реализованы большинство псевдоселекторов CSS3: :nth-child, :contains, :not и др. Но у вас есть возможность не ограничиваться имеющимся выбором и создать свой собственный CSS селектор, который можно будет использовать в таких функциях Mootools, как $$ и getElement. Все, что нужно будет сделать, это добавить свою функцию к объекту Selectors.Pseudo. В функцию будут передаваться два аргумента – параметр, передаваемый селктору (:pseudo(parameter)) и объект, который может быть использован в качестве временного хранилища данных при последовательном проходе элементов. Последний аргумент используется к примеру в псевдоселекторе :nth-child. Функция должна возвращать true если элемент соответствует критериям выбора или false в обратном случае.

<< читать дальше >>

James Donaghue создал библиотеку Peppy для выборки элементов DOM, использую селекторы CSS3. Главные достоинства библиотеки это скорость и размер. При размере всего 10Кб, Peppy работает гораздо быстрее, чем соответствующие библиотеки всех основных фреймворков.

В доказательство своих слов, Джеймс приводит результаты сравнительных тестов, которые сравнивают скорость работы селекторов фреймворков Mootools, jQuery, YUI, Dojo, Prototype, Ext и Sizzle. Их можно посмотреть здесь.

Синтаксис селекторов ничем не отличается от синтаксиса jQuery (в том смысле, что и там и там используется знак доллара $):

var elems = $('dt');

Так что, если вы используете фреймворки только из-за удобных селекторов, то думаю Peppy будет им прекрасной заменой. Скачать скрипт можно на этой странице.

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

*width: 200px;
_width: 240px;

Таким образом, я указываю ширину для Internet Explorer (первая строка) и конкретно для IE 6 (вторая строка). Совсем недавно я нашел один замечательный скрипт – CSS Browser Selector, с помощью которого можно писать удобочитаемые хаки практически для всех браузеров и операционных систем. Кроме того, можно также писать стили отдельно для сайтов, где разрешен JavaScript и где он выключен.

<< читать дальше >>

Я думаю большинство из нас привыкли к более продвинутому методу получения элементов DOM, чем простые document.getElementById() или document.getElementsByTagName(). В большинстве современных JavaScript фреймворков используются функции позволяющие получать коллекцию элементов по CSS селектору:

var elems = $('.list li a');

Такой метод более простой и удобный, однако и более медленный. К тому же функции, выполняющие такую выборку, довольно таки громоздкие и их использование значительно увеличивает размер скриптов.

Однако, ничто не стоит на месте, и все меняется с приходом новых стандартов и новых браузеров. Так, в новом стандарте Selectors API имеются функции document.querySelector() и document.querySelectorAll(), способные делать выборку элементов по CSS. Реализация этих функций на уровне браузера даст возможность избавиться от необходимости добавлять вышеупомянутые скрипты во фреймворки, значительно увеличит производительность и ёмкость скриптов.

До сих пор обе эти функции были реализованы в Webkit и Internet Explorer 8 beta, но буквально на днях вышла новая версия Firefox 3.1 alpha, где одним из новшеств являются CSS селекторы.

Типичное применение:

var elem = document.querySelector('#myelem');
var elems = document.querySelectorAll('ul > li:not(".selected"):hover');

Дабы придать функциям более привычный вид, можно использовать следующий прием (об этом писал Dustin Diaz):

var $$ = function(q, b) {
  if (b) {
    return document.querySelector(q);
  } else {
    return document.querySelectorAll(q);
  }
};

Если в качестве второго параметра передаем true, то используется querySelector, возвращающий единственный элемент, если этот параметр не указан, то тогда используется querySelectorAll, который в свою очередь возвращает коллекцию элементов nodeList. Чтобы преобразовать полученный nodeList в массив, можно использовать функцию slice():

var nodes = [].slice.call($$('ul > li:not(".selected"):hover'), 0);

Последним из наиболее популярных браузеров, где пока не реализованы эти функции, это Opera, но и там не все так плохо, ибо работы над этим уже ведутся.