Рад открыть раздел «Веб-разработка» блога OWOX :)
В этом разделе мы будем знакомить Вас с решениями, которые позволяют сделать сайт современным и приятным.
Об одном из таких решений.
Во время работы над разделом помощь для интернет-магазина www.kyivstarshop.net столкнулся с проблемой, которую удалось решить, на мой взгляд, довольно элегантно.
Задача
Страница с интерактивными элементами должна полностью доносить информацию пользователю, даже если у него не работает 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.
Оба ограничения незначительны, но стоит о них помнить. Либо написать боле сложную функцию, которая будет их учитывать.