CSS :hover. Оригінальні hover-ефекти

Кардинально нової стала ідея розділити подання інформації від коду її створює і обробного. Це було сильне рішення в свій час, але цей момент був не визнаний тоді в повній мірі. Коли програмування відокремилося від окремо взятого комп'ютера, але не стало перемагати в локальній мережі або окремо взятої доменній зоні, а відразу поширилася повсюдно, лише тоді стало очевидно, що подання інформації (в частині дизайну) та робота з нею (в частині коду) – дві сторони в одній площині.

Три грані сайтобудування

З формальної точки зору є три основних компоненти (у різних синтаксичних вигляді), які складають сайт: PHP-код, javascript-код і опису стилів CSS. Абсолютно не важливо, як називається і якої версії використовується той або інший компонент, яка версія HTML розмітки використовується і яка версія браузера варто. Сумісність нині не в пошані, бо у кожен момент часу актуально: що закодовано і що з того, що закодовано, може бути відображено і виконано . Якщо раніше ідеї билися мови, то сьогодні воювати по-пустому більше подобається виробникам стандартів у сфері інтернет-технологій та браузерів.

Особисте і суспільне

Засобів, за допомогою яких доступний Інтернет, багато (комп'ютери, ноутбуки, планшети, смартфони), браузерів теж предостатньо. Немає ніякої гарантії, що окремо взяте пристрій відобразить сайт в тому вигляді, в якому його створив розробник. Не завжди зусилля останнього досягають мети і забезпечують веб-дизайн єдиної багатоликістю, тобто єдністю відображення сутності, де б вона не відкривалася відвідувачу.


Поділяючи особисте і громадське, використовуючи в останньому тільки те, що працює, можна досягти помітних успіхів в дизайні. Краса, художній момент і веб-дизайн – доля відповідних фахівців і талантів. CSS – це код, хоча і вельми своєрідний. Його турбота описати стилі (варіанти відображення інформації). З появою мобільних пристроїв CSS подгрузили реальним кодуванням у вигляді медіа-запитів. Так що варіант повторного шлюбу між дизайном і кодом - це не така вже нереальність, як могло здатися всього пару років тому. Розробник, займаючись розробкою CSS-стилів, спирається на свій особистий перевірений досвід і на ті конструкції CSS, які працюють на більшості браузерів, задовольняють більшість відвідувачів сайту. Слід максимально використовувати перше і мінімально друге, тоді набагато більше шансів отримати результат, який працює практично завжди і скрізь.

Перше правило: на стандарт сподівайся, але й сам не зівай

CSS:hover - це коли мишка «зайшла» на елемент сторінки. Коли мишка клікнула на елементі, він стає активним, але коли курсор йде в бік, він знову може змінитися і показати себе в активному стані. ":hover", "active" і "відвідали" – найбільш затребувані псевдокласи при описі стилів. Дуже зручно в коді сайту не піклуватися про таких дрібницях, як рух мишки над елементами. Передбачивши в таблиці опису стилів два описи: element { color: black; } element:hover { color: white; background-color: green; } Отримаємо при наведенні мишки на element автоматичне зміна кольору тексту з чорного на білий і зміна фону елемента на зелений. Псевдокласи можна застосовувати до будь-якого елементу і досягати при цьому різних візуальних ефектів.

Друге правило: довіряючи стандартам, орієнтуйся на свій код

Все було б чудово, якби прогрес залишився на рівні комп'ютерів і ноутбуків, оснащених пахвами, і прогрес у стільникового зв'язку не привів до появи смартфонів, планшетів та інших мобільних пристроїв, до яких підключити такий пристрій вельми проблематично. З іншого боку, тільки на оснащених спеціальним сенсорним екраном гаджетах стає доступним маніпулювання безпосередньо пальцями на сенсорному екрані, як це вже стало звичним на смартфонах, планшетах і їм подібним пристроям. Є суттєва різниця :hover тут спрацьовує зовсім не так, як хотілося б. Без коду тут не обійтися, а використання медиазапросов не вирішує всі питання. Сумісність - занадто дороге задоволення в сучасному інформаційному світі, тому, щоб забезпечити належний функціонал сайту в межах встановлених вимог до веб-дизайну та реалізації функціоналу, переважно орієнтуватися на мінімально необхідні варіанти використання: CSS hover, CSS hover focus, CSS hover active (visited). Чим більше код (як всередині браузера, так і на сервері) контролює веб-дизайн, тим краще. Програма – це контроль, краще коли цей контроль не здається на відкуп чинним стандартам, від яких часто не знаєш чого чекати.

Кнопки та інші елементи сторінки

Hover Button CSS – чудове рішення, але за великим рахунком, кожен елемент сторінки є кнопка». Сайт повинен бути насамперед живим і якщо в коді це не закладено, якщо завдання створити сайт, який розвивається адекватно області застосування і діє з урахуванням поведінки відвідувача, то як мінімум засобами CSS-стилів можна надати жвавість елементів сторінки.
Використовувати hover-ефекти зручно. З їх допомогою можна легко надати сторінок жвавість, але код не відає, що робить мишка на екрані, якщо в ньому немає можливості відслідковувати її рух. З цієї точки зору, тобто коли код контролює рух мишки (= рух пальця на смартфоні), він може самостійно виділяти елемент або перетворювати його. Це не має ніякого відношення до псевдоклассам, але дає повний контроль коду над зовнішнім виглядом сторінки, дозволяє адекватно відображати її на різних пристроях в різних браузерах.

Підводні камені в таблицях стилів

Сказати, що стандартні у сфері опису стилів CSS не знають, що творять, не можна, але стверджувати, що вони повноцінно взаємодіють з іншими стандартами в області інтернет-програмування, теж не можна. Стилі і псевдокласи можна описати на етапі кодування сторінки, в момент, коли сервер формує сторінку і в динаміці: вже перебуваючи всередині браузера, можна легко створити новий стиль і змінити існуючий. Використання AJAX, коли немає потреби знову генерувати сторінку щоб відобразити реакцію на дію відвідувача, а достатньо змінити її елемент або кілька елементів додає трохи «перцю». «Дружба» кодів - того що вже в браузері (javascript) і того що на сервері (PHP) – доля автора (програміста) сайту. Від того, як буде виконаний алгоритм цієї взаємодії, істотно залежить не тільки відображення на сторінці її елементів, але і їх подальше сприйняття кодом. Простіше кажучи, псевдокласи (зокрема) дуже гарні для статики, ніби як для парусної яхти в чистому морі при легкому вітрі – все очевидно, доступно і керовано. Якщо погода зміниться, або коли вітер посилиться, або відвідувач викличе непередбачену ситуацію, можна швидко налетіти на риф і втратити відвідувача.

Стандарт і його емуляція

CSS style hover може бути емулировано допомогою javascript, шляхом використання подій onmouseover і onmouseout. Часто цим все і закінчується. З позицій здорового глузду, коли мова йде про створення реально працюючого сайту, краще тримати управління у своїх руках, ніж дарувати його на відкуп міфічним стандартам, які змінюються поза волі й бажання розробника. Іноді можна прочитати щось на кшталт «ця можливість доступна навіть в IE», але частіше можна прочитати про те, які описи стилів сприймаються тим чи іншим браузером. Значно рідше можна дізнатися про те, як відрізняється javascript в тих чи інших браузерах. Оцінюючи накопичений досвід, захоплюючись можливостями "Хрому" і "Опери", критикуючи повільність і інертність браузера від виробника (незабутнього, дорогого серцю всякого програміста IE від "Майкрософт": «Старий добрий Internet Explorer не критикував тільки ледачий. Або той, хто на комп'ютері вміє тільки грати в "Косинку"», - цитата невідомого інтернет-автора), слід дотримуватися золотої середини: використовувати те що працює скрізь і завжди. Людям потрібні засоби для роботи, коли їм потрібно отримати гострі відчуття вони зазвичай йдуть в загс або театр, але не в Інтернет.

Емуляція і контроль

Раніше, коли програмування ставало на ноги, прийнято було слухати старших і писати правильно. Нині занадто багато старших, дуже швидко все змінюється, і, якщо слухати всіх, то часу не вистачить навіть на дуже просту роботу, на мінімально функціональний сайт. Програмування - це насамперед контроль, а у випадках, коли стандарт необ'єктивно встановлює правила, чи можна очікувати різкої зміни правила, його ліквідації та появи нового, найкращим рішенням було завжди не приймати жодних рішень, а реалізувати необхідний функціонал сайту мінімально можливим, але реально працюючим кодом.