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

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

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

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

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

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

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

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

Розробник, займаючись розробкою CSS-стилів,спирається на свій особистий перевірений досвід і на ті конструкції CSS, які працюють на більшості браузерів, задовольняють більшість відвідувачів сайту. Слід максимально використовувати перше і мінімально Друге, тоді набагато більше шансів отримати результат, який працює практично завжди і скрізь.

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

CSS:hover - це коли мишка «зайшла» на елемент сторінки. Коли мишка то покликала людей на елементі, він стає активним, але коли курсор йде в бік, він знову може змінитися і показати себе в активному стані. ": Hover", "active" і "visited" - найбільш затребувані псевдокласи при описі стилів.

Дуже зручно в коді сайту не піклуватися про такі дрібниці, як рух мишки над елементами. Передбачивши в таблиці опису стилів два опису:

element {

color: black;

}

element: hover {

color: white;

background-color: green;

}

Отримаємо при наведенні мишки на elementавтоматичну зміну кольору тексту з чорного на білий і зміна фону цього елементу на зелений. Псевдокласи можна застосовувати до будь-якого елементу і досягати при цьому самих різних візуальних ефектів.

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

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

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

Є істотна різниця і: hover тут спрацьовує зовсім не так, як хотілося б. Без коду тут не обійтися, а використання медіазапросов вирішує в повному обсязі питання.

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

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

Button hover CSS - чудове рішення, але повеликим рахунком кожен елемент сторінки є «кнопка». Сайт повинен бути перш за все живим і якщо в коді це не закладено, якщо завдання створити сайт, який розвивається адекватно області застосування і діє з урахуванням поведінки відвідувача, то як мінімум засобами CSS-стилів можна додати жвавість елементів сторінки.

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

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

Сказати, що стандартні в сфері опису стилівCSS не знають, що творять, не можна, але стверджувати, що вони повноцінно взаємодіють з іншими стандартами в області інтернет-програмування, теж не можна.

Стилі і псевдокласи можна описати на етапікодування сторінки, в момент, коли сервер формує сторінку і в динаміці: вже перебуваючи всередині браузера, можна легко створити новий стиль і змінити існуючий.

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

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

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

CSS style hover може бути емулюватисяза допомогою JavaScript, шляхом використання подій onmouseover і onmouseout. Часто цим все і закінчується. З позицій здорового глузду, коли мова йде про створення реально працюючого сайту, краще тримати управління в своїх руках, ніж дарувати його на відкуп міфічним стандартам, які змінюються поза волі й бажання розробника.

Іноді можна прочитати щось на зразок «данаможливість доступна навіть в IE », але частіше можна прочитати про те, які опису стилів сприймаються тим чи іншим браузером. Значно рідше можна дізнатися про те, як відрізняється JavaScript в тих чи інших браузерах.

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

Людям потрібні кошти для роботи, коли їм потрібно отримати гострі відчуття вони зазвичай йдуть в загс або театр, але не в Інтернет.

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

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

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

</ P>>