Здрастуйте, шановні читачі блогу . Вирішив написати невеликий пост по темі використання CSS в цілях поліпшення сприйняття відвідувачами сайту.
Ні з того, ні з сього в голову прийшла думка, що якщо пункти в правому меню мого блогу оживити за допомогою чергування фонового кольору (зробити різні кольори для парних і непарних рядків), то це може підвищити юзабіліті. Надії я покладаю на зручність сприйняття великої кількості інформації при її розбиття на блоки (як це, наприклад, відбувається при використанні абзаців у тексті).
Подібну практику дуже часто застосовують при стильовому оформленні таблиць, коли хочуть підвищити наочність виведеної інформації. По ходу пошуку рішення виявилося, що ця задача вирішується досить просто і засобами одного лише CSS.
Не потрібно позначати класами парні і непарні елементи списку (праве меню у мене на основі маркованого Html списку функціонує). Достатньо лише дописати пару рядків коду з використанням псевдокласу nth-child файл CSS, який відповідає за стильове оформлення сайту. Однак, nth-child має і масу інших застосувань, про що теж не премину згадати в пості.
Можливості псевдокласу nth-child та його застосування на сайті
Власне, після анонсування псеводкласса nth-child можна було б посаду і завершувати, бо ви й самі можете нагуглити масу інформації з нього. Але це не наш шлях, тому продовжимо. Отже, спочатку я опишу свої дії по перетворенню правого меню в «смугасте». Досить було з’ясувати за допомогою вбудованих в браузери інструментів для розробників (викликається з контекстного меню потрібного елемента на веб-сторінці вибором пункту подібного «Перегляд код елемента») в якому місці файлу стилів задається зовнішній вигляд рядків цього списку.
Принцип роботи з інструментами розробників аналогічний тому, що я описував у статті про Фаербаг. Клікаєм правою кнопкою по будь-якого пункту в лівому меню мого блогу і дивимося на панелі результуючий звіт:
Зліва ви побачите Html код цього елемента (нас цікавить елемент з тегами LI — рядок списку), а в правій колонці наведено CSS правила, які браузер використовує для його стильового оформлення. Де знаходиться стильовий файл ви зможете негайно дізнатися, підвівши курсор миші до його назви.
У моєму випадку це буде файл style.css з папки з вашою темою оформлення, який можна відкрити підключившись до сайту по ФТП і пройшовши по наступному шляху (правити файли шаблону з адмінки WordPress я б не радив, бо немає можливості зробити крок назад, як це дозволяє, наприклад, Нотепад++).
/wp-content/themes
Власне, на панелі інструментів для розробників в області CSS стилів ви навіть рядок знайдете, на якій потрібне правило прописано в файлі стилів. У моєму випадку це 281 рядок. Тому, відкривши style.css в Нотепаде (він у мене призначений редактором за промовчанням для всіх файлів, які зустрічаються в движку сайту), я на цю рядок негайно перемістився.
І дописав відразу під нею ще кілька правил з псевдоклассом hover (це правило відповідає за зміну кольору фону рядка правого меню, коли прямо над нею знаходиться курсор миші — це робить меню більш «живим», чи що) і з згаданим вище псевдоклассом nth-child. Якщо про hovver ми вже говорили (див. посилання трохи вище), то про nth-child поговоримо зараз. Якщо звернули увагу, що в круглих дужках для цього псевдокласу прописаний параметр 2n.
nth-child(2n)
У загальному вигляді значення цього псевдокласу nth-child задається з допомогою виразу: an+b, де a і b — цілі числа, а n — лічильник, що приймає цілі значення від 0 і більше: 0,1,2,3… В нашому випадку при зміна лічильника n ми будемо отримувати цифри 0, 2, 4, 6 і т. д. Це означає, що призначене для цього псевдокласу властивість (в нашому випадку це правило для завдання фону рядка списку за допомогою background-color) nth-child (2n) дозволить замінити фон парних рядків у списку на #E4F2FA.
Цей шістнадцятковий формат запису коду кольору використовується в css і Html найбільш часто. Для пошуку підходящих кольорів я використовував програму Contrast Analyser 2.0, описану за наведеним посиланням. Вона дозволяє захопити колір з екрана і підібрати його більш світлі тони, що я, власне, і зробив.
Для фону рядка меню, при наведенні на них курсором миші (псевдоклас hover), я вибрав ще більш світлий відтінок з того ж ряду.
Інші приклади використання nth-child
Якщо захочете змінити фон або яким ще чином впливати на зовнішній вигляд непарних рядків (наприклад, додати їм відступи, збільшити шрифт або зробити ще щось непристойне), то використовуйте вираз nth-child (2n+1). Можете перевірити, підставляючи замість n цілі числа, починаючи з нуля, ви отримаєте в результаті тільки непарні числа. Можна використовувати відразу обидва варіанти (для парних і непарних рядків списків, таблиць або чого-небудь ще).
Ще кілька прикладів використання nth-child для виділення різних рядків списків, таблиць і тому подібних елементів:
Ну ось десь так. Штука може виявитися вельми корисною. У всякому разі, мені знадобилася.
Удачі вам! До зустрічей на сторінках блогу