Помним про пользователей без javascript

Григорий Гребинюк
15 декабря 2007
Григорий Гребинюк,
Программист компании OWOX

Рад открыть раздел «Веб-разработка» блога OWOX :)
В этом разделе мы будем знакомить Вас с решениями, которые позволяют сделать сайт современным и приятным.

Об одном из таких решений.
Во время работы над разделом помощь для интернет-магазина www.kyivstarshop.net столкнулся с проблемой, которую удалось решить, на мой взгляд, довольно элегантно.

Задача

Страница с интерактивными элементами должна полностью доносить информацию пользователю, даже если у него не работает javascript (не поддерживается, либо отключен).

На странице есть ссылки, при клике на которые разворачивается/сворачивается контент, а сами ссылки изменяют свое отображение.


Помним про пользователей без javascript

Помним про пользователей без javascript


У пользователя с браузером без javascript на странице должны быть видны блоки текста с заголовками. То есть, ему должна быть доступна вся информация.


Помним про пользователей без javascript

Решение

Первая мысль была, используя селекторы и javascript, пробежаться по странице и назначить элементам стили, тем самым скрыть блоки, которые не должны быть видны. Но кроме того, что это довольно ресурсоемкая задача, даже с использованием современных фреймворков. На страницах с большим DOM-деревом задержка может быть ощутимой. В любом случае на этапе загрузки страница неприятно «мигнет» при смене стилей. Чтобы этого избежать, нужно вносить изменение в оформление до начала отображения страницы. То есть редактировать нужно не сами отображаемые элементы страницы, а таблицу стилей, назначая новые правила оформления элементов внутри тега <head>, до начала обработки содержимого <body>. Назначить новое правило в конкретную styleSheets можно при помощи метода insertRule(), в IE аналог метода — это addRule(). Я написал небольшую обертку над этими методами:




function setRule(selector,rule){

	var styleSheets =

		document.styleSheets[document.styleSheets.length-1];

	if(typeof styleSheets.addRule != 'undefined'){

		styleSheets.addRule(selector, rule);

	}else if(typeof styleSheets.insertRule != 'undefined'){

		styleSheets.insertRule(selector+" {"+rule+"}",

		styleSheets.cssRules.length);

	}

}



Эта обертка в последнюю таблицу стилей страницы добавляет в конец новые CSS правила. Для данного примера функциональности вполне достаточно. В больших проектах этого уже может быть мало.

У этой обертки есть некоторые ограничения, которые следует знать перед использованием. Объект styleSheets, в который мы добавляем правило, должен быть загружен с того же домена что и страница. Иначе мы увидим ошибку. Браузер не дает править чужие CSS файлы. Это можно обойти, создав свой собственный объект styleSheets и добавив в него все правила. И второе ограничение это то, что метод addRule() в IE не может добавлять одно и тоже правило к  нескольким селекторам. Запись вида h1, h2{margin:0} нужно разбивать на два вызова, отдельно для h1 и для h2.

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

Метки: javascript, css

Комментарии

15 января 2008

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

Даже простейшая ошибочка, в момент отрисовки страницы, может уничтожить всю красоту сайта, напрямую зависящую от исполнения того же JavaScript…

Так что, если уж используете эти технологии в своих разработках, то постарайтесь провести глубокое тестирование и кроссбраузерную проверку на работоспособность вашего проекта.

Добавить комментарий