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

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

Теперь вкратце опишу принцип работы этого метода.

Хоть я частенько и ругаю IE за его огрехи, но в этом случае он справляется лучше всех, ибо в Internet Explorer существует специальный фильтр который позволяет сделать такое преобразование цвета:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

Фильтр может быть установлени и в CSS:

elem {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /* Элемент должен иметь "hasLayout"! */
    zoom: 1;
}

Что касается остальных браузеров, то здесь все гораздо сложнее. Во первых обесцвечивание обычных элементов – параграфов, таблиц и т.п. В этом случае нужно просматривать значения “цветных” стилей: color, background-color, и изменять их цвет следующими фукнциями:

// Уменьшение насыщенности
function RGBtoDesat(r,g,b) {
    var average = (r + g + b) / 3;
    return {
        r: average,
        g: average,
        b: average
    };
}

// Преобразование в черно-белый цвет
function RGBtoGrayscale(r,g,b) {
    var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
    return {
        r: mono,
        g: mono,
        b: mono
    };
}

Для обесцвечивания изображений используется другая технология – элемент <canvas> и его метод getImageData(), но при этом изображение должно находиться на том же домене, что и веб страница. По всей видимости метод getImageData() не поддерживается в Chrome и Safari меньше четвертой версии, поэтому для этих браузеров такой метод работать не будет.

Использование

Чтобы выполнить обесцвечивание, нужно вызвать функцию grayscale(), передав в качестве параметра элемент или коллекцию элементов:

// один элемент
var el = document.getElementById( 'myEl' );
grayscale( el );

// Массив элементов DOM
grayscale( document.getElementsByTagName('div') );

// Также работает с коллекциями jQuery
grayscale( $('div') );

Чтобы вернуть элемент в первоначальное, цветное, состояние, нужно воспользоваться функцией grayscale.reset():

grayscale.reset( el );
grayscale.reset( $('div') );

При всем этом, я бы не советовал вам использовать такую методику для больших изображений, так как их использование в элементе canvas может поглотить много ресурсов, даже если вы используете предлагаемую автором фунцкию grayscale.prepare() работы с такими изображениями.

Больше информации можете узнать на здесь. Там же можно скачать скрипт и посмотреть демо пример автора.

Смотреть демо

В качестве примера можно продемонстрировать псевдокласс :random, созданный Яном Кассенсом:

Selectors.Pseudo.random = function(probability, local){
	return Math.random() < (probability || .5).toFloat();
};

// выбор примерно половины div-ов на странице
$$('div:random');

// выборка 20% заголовков h2 с классом article
$$('h2.article:random(.2)');

Такой псевдоселектор позволяет выбирать случайные элементы из DOM. В первом примере будут выбраны примерно половина элементов div на странице, а во втором будет произведена выборка всех загловков h2 с классом article, а затем в случайном порядке будут выбраны 20% из их общего числа.

Еще один пример реализации псевдоселектора я подсмотрел на блоге у Девида Уолша:

Selectors.Pseudo.selected = function(){
	return (this.selected && this.get('tag') == 'option');
};

Это селектор :selected, который имеется в jQuery. Суть его заключается в том, что он выбирает выбранные элементы option из списка select:

<select name="mysel" id="mysel" multiple="multiple">
	<option value="One">One</a>
	<option value="Two">Two</a>
	<option value="Three" selected="selected">Three</a>
	<option value="Four" selected="selected">Four</a>
</select>

Удобная это вещь - псевдоселектор, не правда ли? Тем более если его можно легко создавать самому, под свои нужды.

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

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

var elems = $('dt');

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

*width: 200px;
_width: 240px;

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

Пример:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

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

.[os].[browser] .mylink { font-weight: bold; }

В начале идет класс с названием операционной системы, за ним класс броузера без пробела, а потом уже ваш селектор.

Полный список классов операционных систем:

• win – Microsoft Windows
• linux – Linux
• mac – Mac OS

Полный список поддерживаемых браузеров:

• ie – Internet Explorer (все версии)
• ie8 – Internet Explorer 8.x
• ie7 – Internet Explorer 7.x
• ie6 – Internet Explorer 6.x
• ie5 – Internet Explorer 5.x
• gecko – Mozilla, Firefox (все версии), Camino
• ff2 – Firefox 2
• ff3 – Firefox 3
• opera – Opera (все версии)
• opera8 – Opera 8.x
• opera9 – Opera 9.x
• konqueror – Konqueror
• webkit или safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
• chrome – Google Chrome

Кроме того есть екстра класс .js – для указания отдельных стилей при включенном JavaScript.

Ну и конечно же, чтоб все это заработало, нужно подключить сам скрипт (весит меньше 1 килобайта):

<script src="css_browser_selector.js" type="text/javascript"></script>

Страница проекта

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, но и там не все так плохо, ибо работы над этим уже ведутся.