На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Замена таблицы стилей в зависимости от разрешения экрана пользователя

Некоторое время думал, к чему это все отнести... По идее, CSS чистой воды, я думаю. :)) Веб-дизайн штука такая, все перемешанно.

Про такой способ изменения стилей я упоминал уже много раз, пора и "выложить" описание в сеть, может, кому и сгодится. :)) Перспективы, сами по себе, радужные, только почему никто из веб-дизайнеров подобное не применяет? Всем таблицам, почти всем тэгам можно задать описание стилей во внешнем файле CSS, при разном разрешении экрана картина будет разная — экран меняет размер, таблицы остаются те-же. Классика веб-дизайна — "резиновые таблицы". Тоже выход, ну а если задумка не позволяет? Заменяя таблицы стилей целиком мы можем полностью менять внешний вид страницы — при большом разрешении экрана "раздвигать" таблицы, увеличивать размер шрифтов, изменять даже цвета — все, что с точки зрения веб-дизайнера имеет смысл изменить. Конечно, менять размеры картинок таким способом не обязательно, но можно попробовать пропорционально уменьшать их размер при меньших разрешениях экрана. Сам не пробовал применять такой финт на практике, но попробовать стоит. Сам код привожу ниже.


<script language="JavaScript">
var height=0;var width=0;
if (self.screen) {
// for NN4 and IE4
width = screen.width
height = screen.height
}

if (width<641 && height<481)
{
document.writeln("<link rel=\"stylesheet\"
type=\"text/css\" href=\"640.css\" >")
}

else
{
if (width>1023 && height>767)
{
document.writeln("<link rel=\"stylesheet\"
type=\"text/css\" href=\"1020.css\" >")
}

else
{
document.writeln("<link rel=\"stylesheet\"
type=\"text/css\" href=\"800.css\" >")
}
}

</script>

Вот и все что нужно. Почти. :))) В зависимости от разрешения экрана выводится одна из трех строк с вызовом описания стилей. Стили, понятное дело, личное дело каждого.

Надо сразу предупредить вас, я не специалист по JavaScript, так что, если есть возможность как-то улучшить эту конструкцию — пишите. Кроме того, возник один вопрос, который я пока не смог решить — все прекрасно работает в Эксплорерах и Нетскейпах выше 4.05 серии. Нетскейп серии 4.05 просто не реагирует на скрипт. У меня стоит NN4.05проф, обычно при ошибках он выводит предупреждение, в данном случае он просто не читает стили. С чем это связанно, не знаю. Если на это описание "напорется" программист, большая просьба — посмотреть и посоветовать(если не лень будет письмо писать:), что можно сделать. В идеале, подобный скрипт должен предусматривать нечто для броузеров с отключенной поддержкой JavaScript, может и еще что потребуется подключить. Пока есть только это.

В веб-дизайне сам пока ничего подобного не использовал, хоть и есть задумки. Надо поискать статистику использования разных типов броузеров в сети — стоит-ли овчинка выделки. Понятно, что броузер веб-дизайнера или просто "постоянного жителя" сети настроен по максимуму — и поддержки все включенны, и плагинов куча. А вот какова общая картина — сколько с отключенными JavaScript, сколько Нетскейпов разных серий...

Практически применить можно эту схему так: веб-дизайнер делает простую страничку с одной таблицей в 600пикс и текстом в ней, задает все параметры таблицы и шрифта для популярного разрешения 800х600 во внешнем файле. После чего, тот-же веб-дизайнер :)) (надеюсь, что тот-же) описывает стили для других разрешений: для меньшего — уменьшает ширину таблицы и размер шрифта, для большего — увеличивает ширину таблицы и увеличивает размер шрифта. Про динамический веб-дизайн с применением подобного устройства я уже упоминал, если точнее, веб-дизайн не динамический, а основанный на слоях — вся страница собирается из блоков-слоев. Вот тут-то и может возникнуть необходимость применения подобного метода — можно и размеры блоков менять, и расположение их.

Дополнение — как установленно опытным путем, Нетскейпы4.05 очень странно понимают стили, вынесенные во внешний файл. Именно по этому мы и имели подобный глюк. Как догадываетесь, подобными "машинками" и так мало кто пользовался... Надо их просто игнорировать...

Алямкин Илья Юрьевич
S.T.Y.L.E.mtk.on.ufanet

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100