Деякий час думав, до чого це все віднести… За ідеєю, 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, так що, якщо є можливість якось покращити цю конструкцію – пишіть. Крім того, виникло одне питання, яке я поки не зміг вирішити – все чудово працює в Explorer і Netscape вище 4.05 серії. Netscape серії 4.05 просто не реагує на скрипт. У мене стоїть NN4.05проф, зазвичай при помилках він виводить попередження, в даному випадку він просто не читає стилі. З чим це пов’язано, не знаю. Якщо на цей опис наштовхнеться програміст, велике прохання – подивитися і порадити (якщо не лінь буде лист писати), що можна зробити. В ідеалі, подібний скрипт повинен передбачати щось для браузерів з відключеною підтримкою JavaScript, може й ще що буде потрібно підключити. Поки є тільки це.
У веб-дизайні сам поки нічого подібного не використовував, хоча і є задуми. Треба пошукати статистику використання різних типів браузерів в мережі – чи вигідно це. Зрозуміло, що браузер веб-дизайнера або просто «постійного мешканця» мережі налаштований по максимуму – і підтримки всі включені, і плагінів купа. А ось якою є загальна картина – скільки з відключеними JavaScript, скільки Netscape-ів різних серій…
Практично застосувати можна цю схему так: веб-дизайнер робить просту сторінку з однією таблицею в 600 пікселів і текстом у ній, задає всі параметри таблиці та шрифти для популярної роздільної здатності 800х600 в зовнішньому файлі. Після чого, той-же веб-дизайнер (сподіваюсь, що той-же) описує стилі для інших здатностей: для меншої – зменшує ширину таблиці і розмір шрифту, для більшої – збільшує ширину таблиці і збільшує розмір шрифту. Про динамічний веб-дизайн із застосуванням подібного пристрою я вже згадував, якщо точніше, веб-дизайн не динамічний, а заснований на шарах – вся сторінка збирається з блоків-шарів. Ось тут-то і може виникнути необхідність застосування подібного методу – можна і розміри блоків міняти, і розташування їх.
Доповнення – як встановленно досвідченим шляхом, Netscape4.05 дуже дивно розуміють стилі, які винесені в зовнішній файл. Саме з цього ми і мали подібний глюк. Як здогадуєтеся, подібними «машинками» і так мало хто користувався… Треба їх просто ігнорувати…
***
Це переклад статті.