CSS: hover. Арыгінальныя hover-эфекты

Кардынальна новай стала ідэя падзяліць прадстаўленне інфармацыі ад кода яе які стварае і апрацоўвае. Гэта было моцнае рашэнне ў свой час, але гэты момант быў ня прызнаны тады ў поўнай меры. Калі праграмаванне аддзялілася ад асобна ўзятага кампутара, але не стала перамагаць у лакальнай сеткі або асобна ўзятай даменнай зоне, а адразу распаўсюдзілася паўсюдна, толькі тады стала відавочна, што прадстаўленне інфармацыі (у частцы дызайну) і праца з ёй (у частцы кода) - дзве боку ў адной плоскасці.

Тры грані сайтостроения

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

Калі раней за ідэі біліся мовы, то сёння ваяваць па-пустому больш падабаецца вытворцам стандартаў у сферы інтэрнэт-тэхналогій і браўзэраў.

Асабістае і грамадскае

Сродкаў, з дапамогай якіх даступны Інтэрнэт, шмат (кампутары, ноўтбукі, планшэты, смартфоны), браўзэраў таксама звышдастаткова. Няма ніякай гарантыі, што асобна узятае прылада адлюструе сайт у тым выглядзе, у якім яго стварыў распрацоўшчык. Не заўсёды намаганні апошняга дасягаюць мэты і забяспечваюць вэб-дызайн адзінай шматаблічнасцю, то ёсць адзінствам адлюстравання сутнасці, дзе б яна не адкрывалася наведвальніку.

Падзяляючы асабістае і грамадскае, выкарыстоўваючы ў апошнім толькі тое, што працуе, можна дасягнуць прыкметных поспехаў у дызайне. Прыгажосць, мастацкі момант і вэб-дызайн - доля адпаведных спецыялістаў і талентаў. 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 не лаяў толькі лянівы. Або той, хто на кампутары умее толькі гуляць у "Касынку" », - цытата невядомага інтэрнэт-аўтара), варта прытрымлівацца залатой сярэдзіны: выкарыстоўваць тое што працуе ўсюды і заўсёды.

Людзям патрэбныя сродкі для працы, калі ім трэба атрымаць вострыя адчуванні яны звычайна ідуць у загс або тэатр, але не ў Інтэрнэт.

Эмуляцыя і кантроль

Раней, калі праграмаванне станавілася на ногі, прынята было слухаць старэйшых і пісаць правільна. Сягоння занадта шмат старэйшых, занадта хутка ўсё мяняецца, і, калі слухаць усіх, то часу не хопіць нават на вельмі простую працу, на мінімальна функцыянальны сайт.

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