Кросбраузерність властивості scrollbar
Хочу зазначити, що властивості CSS з сімейства scrollbar є розширенням специфікації CSS2, введеним компаній Microsoft, і реалізованим в браузерах Internet Explorer починаючи з версії IE 5.5, відповідно інші браузери, на той момент, повністю ігнорували дане властивість. Але минув час і багато браузери стали підлаштовуватися під це додаток до специфікації від Microsoft.
Однак, до цього часу все не так уже й гладко! Так що в багатьох браузерах стиль смуги прокрутки або ігнорується або працює не зовсім коректно. наприклад багато ігнорують дане властивість для тега
або не розуміють деякі окремі властивості скроллбар.Нижче наведу кілька порад, які можливо допоможуть вирішити дану проблему в тих чи інших браузерах. Вживаю слово "можливо" тому що дуже важко відстежити в динаміці за всіма змінами різних браузерів. Світ не стоїть на місці кожен день, там або тут, щось змінюється! Шкода ось тільки що кроссбраузерность завжди залишається головним болем!
Але що то я заговорився. Отже, ряд "таблеток":
1. По можливості використовуйте ось такий заголовок :
2. Вказуйте властивості скроллбар не тільки для тега
але і для тегаhtml, body scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
>
3. Спробуйте, якщо це більш менш раціонально для Вашого сайту, впроваджувати стилі смуги прокрутки використовуючи атрибут style. а не однойменний тег в "голові" документа або зовнішній css файл
Можливо, дані рекомендації спрацюють в деяких браузерах, в будь-якому випадку в IE (починаючи з версії 5.5) все буде працювати коректно, а раз хоч десь працює це вже добре!
· Так як scrollbar є одним з важливих елементів інтерфейсу, постарайтеся не вести користувача в оману, використовуючи зовсім вже нестандартний дизайн смуги прокрутки.
· Якщо Вам прямо таки зовсім необхідний нестандартний скроллбар, не тільки нестандартний колір, він і нестандартна форма, та й ще й працює у всіх браузерах використовуйте скрипти, але не забувайте про перший рада !!
· У браузері зовнішній вигляд смуги прокрутки черпається з налаштувань Windows і наприклад у мене, вона має ось такий вигляд:
Але як тільки Ви застосуєте до смуги прокрутки будь-яку властивість з сімейства scrollbar. зв'язок з настройками Windows загубиться, точніше стане "за замовчуванням" і смуга придбає ось такий вигляд:
Ось список всіх псевдокласів:
· Hover - Стиль елемента на який наведений курсор миші.
· Active - Стиль для посилання яка стає активною, але перехід по ній ще не досконалий.
· Visited - Стиль для недавно відвіданих посилання.
· Link - Стиль для нечасто відвідуваною посилання.
· Focus - Стиль елемента знаходиться у фокусі.
· First-child - Стиль першого дочірнього елемента.
· Lang - вказати мову, що використовується в фрагменті документа.
Про кожного псевдоклас ми окремо поговоримо нижче, а зараз пару слів про синтаксис.
Для того щоб застосувати той чи інший псевдоклас до елементу і визначити його стиль потрібно дотримуватись наступних правил синтаксису:
А вся ця запис разом буде говорити про те, що якщо навести курсором на таке посилання - то вона почервоніє.
Так власне ми підійшли до першого, найпопулярнішому, псевдоклас hover.
Як Ви вже, напевно, здогадалися, псевдоклас hover активізується в тому випадку, якщо на елемент під вказівником.
Ну а якщо вже здогадалися просто покажу приклад:
Кілька слів наприклад вище ..
Як Ви напевно помітили як селектор псевдокласу може виступати не тільки будь-який елемент - тег, але і клас або ідентифікатор. Так в прикладі до класу .menu застосований псевдоклас hover і синтаксис набуває такого вигляду:
Чи не заплуталися в термінології?
Простими словами ми сказали браузеру що мовляв підсвічуються червоним тільки ті посилання які знаходиться в навігаційному блоці (виведені в класс.menu), а решта залиш як є!
Псевдоклас hover може бути застосований до будь-якого елементу, виведеному на екран, так в нашому прикладі, для того щоб організувати підсвічування рядків таблиці ми застосували його до тегу
Псевдокласи і посилання.
· Active - Стиль активного посилання.
· Visited - Стиль для недавно відвіданих посилання.
· Link - Стиль для нечасто відвідуваною посилання.
Спочатку покажу приклад:
Тепер розповім більш докладно.
Браузери деякий час пам'ятають, на які посилання натискав користувач останнім часом, так ось, псевдоклас visited вказує стиль посилання, яка недавно відвідувалася користувачем.
Псевдоклас link описує стиль посилання, яка які раніше не відвідувалася користувачем. Треба відзначити, що ніякої відчутної різниці між записом a і a: link немає, так що застосування даного псевдокласу в цьому випадку зовсім нічого не змінює.
Даний псевдоклас визначає стиль елемента, якщо той перебуває у фокусі. Тепер власне про те, що таке фокус. як у випадку з оптикою і ілюзією, слово фокус в CSS позначать, що якийсь об'єкт, а точніше елемент, знаходиться в центрі уваги спостерігача - користувача. Такими елементами можуть бути теги