Степан Резников: июня 2008

30.06.2008

JavaScript + CSS

Задача: Подружить JavaScript и CSS, чтобы при отсутствии JavaScript применялись немного другие стили.

Предположим, что у нас есть блок <div id="block">блок</div>, который изначально должен быть скрыт и появляться по нажатию на псевдоссылку <span id="link">псевдоссылка</span>. Если же джаваскрипта нет, то блок должен показаться сразу, а псевдоссылка спрятаться с глаз долой.

Вариант 1. С использованием тега `<noscript>` (олд скул)

<style type="text/css"> #block {display: none;} </style>

<noscript> <style type="text/css"> #block {display: block;} #link {display: none;} </style> </noscript>

Это работает, но приходится создавать отдельный кусок стилей. К тому же валидатор ругается что есть сил, поскольку <style> запрещен внутри <noscript>, а <noscript> запрещен внутри <head>. Плохой способ, не рекомендую так делать.

Вариант 2.

Гораздо лучше пойти по пути последовательного улучшения (progressive enhancement), суть которого заключается в том, что сначала мы добиваемся корректной работы в самом простом, доступном окружении (в данном случае — в браузере с неработающим джаваскриптом), а затем постепенно улучшаем наше решение, добавляя функционал для повышения удобства пользователей в браузерах поддерживающих этот функционал.

Это означает, что стили изначально должны быть настроены для случая отсутствия джаваскрипта. Далее загружается джаваскрипт, находит наш блок и скрывает его, находит псевдоссылку и показывает ее. Недостаток такого решения в том, что блок может «моргать» — пользователь может увидеть его на какое-то короткое время (пока загружается и выполняется джаваскрипт).

Вариант 3.

Как можно побороть моргание блока? Я использую такое решение. В теге <head> добавляем простую строчку:

<script type="text/javascript">document.documentElement.className = "js";</script>

Если джаваскрипт включен, элементу <html> присвоится класс js. Что важно, это произойдет до загрузки контента. Теперь можно написать такие стили:

#link {display: none;} .js #link {display: inline;} .js #block {display: none;}

16.06.2008

Ретрахинг кода (refucktoring)

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

Keyboard navigation

Некоторым людям (особенно с двигательными расстройствами) сложно пользоваться мышью для просмотра веб-страниц. Вместо мыши они используют предоставляемую браузерами клавиатурную навигацию при помощи клавиши Tab. Добавляя на страницу JavaScript, нужно подумать об этих людях и предусмотреть навигацию с помощью клавиатуры.

По-хорошему, для каждого обработчика действия мышью должен быть соответствующий обработчик для клавиатуры. Например, если есть обработчик события onclick, по идее, нужен и обработчик для onkeydown.

Код на jQuery:

$("#test").click(function () { doSomething(); }); $("#test").keydown(function (event) { // Allow the Enter key to activate that element return event.keyCode != 13 || doSomething(); });

Далее, хорошо бы прописать стили для псевдокласса :focus. Хотя бы такие же, как и для :hover.

#test:hover, #test:focus {color: #cc0000;}

Чтобы также ховерилось и фокусировалось в IE, нужно навесить обработчики для событий onmouseover/onfocus и onmouseout/onblur в которых, соответственно, нужно добавлять и убирать какой-нибудь класс.

Все круто, но с помощью таба можно пройтись только по ссылкам и элементам форм. Другие элементы по умолчанию не получают фокус. Что делать, если активный элемент, на который мы навесили onclick и onkeydown, не ссылка, а <span>?

Для этого существует атрибут tabindex.

tabindex="0" — разрешает элементу получать фокус в порядке в котором он идет в документе.

tabindex="5" — положительное значение позволяет изменить порядок получения фокуса элементом при навигации табом.

tabindex="-1" — отрицательное значение исключает элемент из навигации табом.

Проверил, работает в IE и Firefox. Опера и Сафари, к сожалению, вообще пока не поддерживают навигацию табом.

Пример клавиатурной навигации: ездилка на сайте вакансий Евросети.

P. S. Кстати, а знаете ли вы, что Shift + Tab перемещает фокус в обратном порядке?

15.06.2008

Резюме в виде облака

Наткнулся на забавный онлайн-сервис: Wordle — генератор красивых облаков из слов. Запостил в эту штуку свое резюме:

07.06.2008

Крокфорд жжет

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

Другое дело — книга Дугласа Крокфорда «JavaScript: The Good Parts». Душа радуется!

Пример вложенного объекта:

var flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2004-09-22 14:55", city: "Sydney" }, arrival: { IATA: "LAX", time: "2004-09-23 10:42", city: "Los Angeles" } };

Пример добавления метода у массива:

Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; }; Array.method('reduce', function (f, value) { var i; for (i = 0; i < this.length; i += 1) { value = f(this[i], value); } return value; }); ... // Create an array of numbers. var data = [4, 8, 15, 16, 23, 42]; // Define two simple functions. One will add two // numbers. The other will multiply two numbers. var add = function (a, b) { return a + b; }; var mult = function (a, b) { return a * b; }; // Invoke the data's reduce method, passing in the // add function. var sum = data.reduce(add, 0); // sum is 108 // Invoke the reduce method again, this time passing // in the multiply function. var product = data.reduce(mult, 1); // product is 7418880

Только недавно досмотрел второй сезон. Я не тормоз, просто смакую :)

06.06.2008

Developers, developers, developers!

В IEBlog проскочило упоминание, что, начиная с момента выпуска IE8 Beta 1, было сделано более двух миллионов скачиваний. Первая бета была адресована разработчикам и, я уверен, что большинство скачавших так или иначе занимаются сайтостроением. То есть можно прикинуть, что в мире порядка двух миллионов веб-разработчиков!