Як визначити user style для Chrome, Кузня IT рішень
Каскадні стилі html-сторінки поділяються на п'ять основних типів:
- User-Agent styles
- User styles
- Author styles
- Author important styles
- User important styles
У цьому списку стилі розташовані в порядку зростання пріоритету, як описано в специфікації W3C. Докладніше про те, що з себе представляє кожен із зазначених стилів, ви можете дізнатися у статті про класифікацію каскадних стилів (CSS).
У цій статті йдеться про те, як визначити user-defined stylesheet для браузера Chrome.
User defined styles
— це стилі, які користувач вказує на налаштуваннях браузера. Робиться це досить рідко, але деякі «гурмани» ні-ні та й «зачісують» свій браузер, якщо він їх чимось не влаштовує.
Якщо в html-сторінці для якогось елемента не вказано стиль відображення — браузер відобразить елемент, застосувавши до нього «заводський» стиль — стиль, рекомендований виробником браузера. Але ці «заводські» налаштування можна поміняти, якщо вказати так звані стилі користувача — таким способом ми можемо сказати браузеру, що замість «заводських» стилів потрібно застосовувати стилі, вказані користувачем.
Для прикладу ми створимо тестову html-сторінку:
У коді сторінки ми використовуємо три заголовки:
-
заголовок першого рівня
, до якого ми застосуємостиль користувача заголовок другого рівня
, який буде відображено із «заводськими» налаштуваннями (User Agent styles ) заголовок третього рівня
Наприклад, ви хочете, щоб заголовки h1 всіх сторінок у браузеріза умовчанням відображалися завжди великимкурсивний шрифт, червоний колір. Для цього ми створимо наступний стиль:
Якщо ви використовуєте Chrome
Як було зазначено вище, стилі користувача в наш час використовуються дуже рідко, тому Chrome перестав підтримувати цю можливість. Але якщо у вас версія Chrome 32 або раніше - все спрацює, потрібно зробити наступне:
Google Chrome: версія та шлях до профілю
Якщо у вас Internet Explorer
Якщо вийшло так, що ви користуєтеся Explorer - висловлю вам глибоке співчуття. Але нічого - зробимо глибокий вдих, потім видих і додамо в нього стилі користувача.
Для цього заходимо в Сервіс-Властивості оглядача-Загальні, тиснемо кнопку Оформлення. У діалозі, що з'явився, вибираємо наш файл Custom.css. Тиснемо кнопку «OK».
Inernet Explorer: налаштування стилів користувача
Результат наведено на скріншоті:
Сторінка після застосування стилів користувача
Як видно, заголовок h1 забарвився у червоний колір, IExplorer застосував стилі з файлу Custom.css.
Без стилів користувача ця ж сторінка відобразиться таким чином:
Сторінка без застосування стилів користувача
Як видно на малюнку, без стилів користувача, заголовок