Як визначити user style для Chrome
- Каскадні таблиці стилів html-сторінки діляться на п'ять основних типів: User-Agent styles User...
- Якщо у вас Internet Explorer
Каскадні таблиці стилів html-сторінки діляться на п'ять основних типів: - User-Agent styles
- User styles
- Author styles
- Author important styles
- User important styles
У представленому вище списку стилі розташовані в порядку зростання пріоритету, як описано в специфікації W3C. Більш докладно про те, що з себе представляє кожен із зазначених стилів, ви можете дізнатися в статті про класифікацію каскадних стилів (CSS).
У цій статті мова піде про те, як визначити user-defined stylesheet для браузера Chrome.
- це стилі, які користувач вказує в настройках браузера. Робиться це досить рідко, але деякі «гурмани» ні-ні та й «зачісують» свій браузер, якщо він їх чимось не влаштовує.
Якщо в html-сторінці для будь-бо елемента не вказано стиль відображення - браузер відобразить елемент, застосувавши до нього «заводський» стиль - стиль, рекомендований виробником браузера. Але ці «заводські» налаштування можна поміняти, якщо вказати так звані користувача стилі - таким способом ми можемо сказати браузеру, що замість «заводських» стилів потрібно застосовувати стилі, зазначені користувачем.
Для прикладу ми створимо тестову html-сторінку:
<Html> <head> </ head> <body> <h1> Header 1 with custom style. </ H1> <h2> Header 2 with user agent style. </ H2> <h3 style = "color: # 0FF" > Header 3 with author style. </ h3> </ body> </ html>
У коді сторінки ми використовуємо три заголовка:
- заголовок першого рівня <h1>, до якого ми застосуємо призначений для користувача стиль
- заголовок другого рівня <h2>, який буде відображений з «заводськими» настройками (User Agent styles)
- заголовок третього рівня <h3>, до якого ми застосували на сторінці авторський стиль, вказавши його безпосередньо через атрибут style
Наприклад, ви хочете, щоб заголовки h1 всіх сторінок в браузері за замовчуванням відображалися завжди великим курсивним шрифтом, червоним кольором. Для цього ми створимо наступний стиль:
h1 {font-family: Verdana, Arial, sans-serif; font-style: Italic; font-size: 24pt; color: # F00; }
Якщо ви використовуєте Chrome
Як було зазначено вище, призначені для користувача стилі в наш час використовуються дуже рідко, тому Chrome перестав підтримувати цю можливість. Але якщо у вас версія Chrome 32 або раніше - то все спрацює, потрібно зробити наступне:
- В адресному рядку браузера набираємо chrome: // version /. Відкриється сторінка з інформацією про версію Chrome: У самому верхньому рядку дивимося версію, якщо вказана вище 32-й (як на скрінщоте- 42-я версія) - просто забуваємо про цю ідею =). На цій сторінці нас цікавить шлях до профілю.
Google Chrome: версія і шлях до профілю
- Відкриваємо шлях до профілю в провіднику, знаходимо там папку User StyleSheets. В папці знаходимо файл Custom.css - він за замовчуванням буде порожнім
- Додаємо в файл наші стилі, зберігаємо його, чистимо кеш браузера і милуємося результатом.
Якщо у вас Internet Explorer
Якщо ж вийшло так, що ви користуєтеся Explorer - висловлю вам глибоке співчуття. Але нічого - зробимо глибокий вдих, потім видих і додамо в нього призначені для користувача стилі.
Для цього заходимо в Сервіс-> Властивості обозревателя-> Загальні, тиснемо кнопку Оформлення. У діалозі вибираємо наш файл Custom.css. Тиснемо кнопку «OK«.
Inernet Explorer: настройка призначених для користувача стилів
Результат наведено на скріншоті:
Сторінка після застосування призначених для користувача стилів
Як видно, заголовок h1 став червоного кольору, IExplorer застосував стилі з файлу Custom.css.
Без призначених для користувача стилів ця ж сторінка відобразиться наступним чином:
Сторінка без застосування призначених для користувача стилів
Як видно на малюнку, без користувальницьких стилів, заголовок <h1> відображається браузером за замовчуванням чорним напівжирним шрифтом.
Залишайте ваші коментарі під темою, поки!
Читайте також
