CSS: задръжте курсора на мишката. Оригинални ефекти на движение

Основно нова беше идеята да се раздели представянето на информацията от кода за нейното създаване и обработка. Това беше едно силно решение по онова време, но този момент не бе признат в най-голяма степен. Когато програмирането е било отделено от един компютър, но не е спечелило локална мрежа или една зона на домейна, но се е разпространило навсякъде, едва тогава стана очевидно, че представянето на информацията (в дизайнерската част) и работата с нея (в кодовата част) Страни в същата равнина.

Три страни на строителството на обекта

От официална гледна точка съществуват три основни компонента (в различни синтаксични форми), които съставят сайта: PHP код, JavaScript код и CSS стил описания. Няма значение как се използва версията и коя версия се използва, коя версия на HTML маркера се използва и каква версия на браузъра си струва. Съвместимостта не се спазва сега, следователно във всеки момент от времето е действително: какво е кодирано и от кое кодирано може да се показва и изпълнява .

Ако по-рано идеите се водят с езици, днес те по-скоро приличат на производителите на стандарти в областта на интернет технологиите и браузърите.

Лично и обществено

Средствата, чрез които интернет е достъпен, много (компютри, лаптопи, таблети, смартфони), браузъри също са изобилни. Няма гаранция, че едно устройство ще покаже сайта във формата, в която е създаден от програмиста. Не винаги усилията на последния достигат до целта и осигуряват уеб дизайн с една многоцветна, т.е. единство на дисплея на обекта, където и да се отваря до посетителя.

Споделянето на личните и обществеността, като се използва в последната само това, което работи, можете да постигнете забележителен успех в дизайна. Красотата, художественият момент и уеб дизайна са част от съответните специалисти и таланти. CSS е код, въпреки че е много особен. Неговата загриженост е да опише стиловете (опции за показване на информация). С появата на мобилните устройства CSS беше зареден с истинско кодиране под формата на заявки за медии. Така че възможността за нов брак между дизайна и кода не е такава нереалистичност, каквато би могла да изглежда само преди няколко години.

Разработчикът, работещ по разработването на стилове на CSS, разчита на своя лично доказан опит и на тези проекти на CSS, които работят върху повечето браузъри, удовлетворяват по-голямата част от посетителите на сайта. Необходимо е максимално да се използва първият и минимумът на втория, след това има много по-голям шанс да се получи резултата, работещ почти винаги и навсякъде.

Първото правило е: разчитайте на стандарта, но не е и лошо

CSS: Hover - това е, когато мишката "отиде" на елемента на страницата. Когато мишката кликне върху елемента, той стане активен, но когато курсорът се приближи до него, той отново може да се промени и да се покаже в активно състояние. ": Hover", "active" и "visited" са най-популярните псевдо-класове при описване на стилове.

Много е удобно в кода на сайта да не се грижи за такива дреболии като движението на мишката върху елементите. Представени в таблицата на описанията на стиловете две описания:

Елемент {

Цвят: черен;

}

Елемент: задръжте {

Цвят: бял;

Цвят на фона: зелен;

}

Получете, когато задръжте курсора на мишката върху елемента, автоматично да промените цвета на текста от черно на бяло и да промените фона на този елемент на зелено. Псевдокласите могат да се приложат към всеки елемент и да се постигнат различни визуални ефекти.

Второто правило: да се доверите на стандартите, да се фокусирате върху вашия код

Всичко би било добре, ако напредъкът се запази на нивото на компютрите и лаптопите, оборудвани с мишка, и напредъкът в клетъчната комуникация не доведе до появата на смартфони, таблети и други мобилни устройства, с които е много трудно да се свърже такова устройство.

От друга страна, само при джаджи, оборудвани със специални джаджи със сензорен екран, е възможно ръцете да се манипулират директно върху сензорния екран, както вече се случва на смартфони, таблети и други подобни устройства.

Съществува значителна разлика и: усещането тук не работи по начина, по който бихме искали. Тук не можете да правите без код и не всички въпроси разрешават използването на заявки за медии.

Съвместимостта е твърде скъпа в съвременния информационен свят и затова, за да се осигури правилна функционалност на сайта в рамките на установените изисквания за уеб дизайн и внедряване на функционалността, е за предпочитане да се съсредоточи върху минимално необходимите случаи на използване: CSS hover, CSS hover active, , Колкото повече код (както в браузъра, така и на сървъра) контролирате уеб дизайна, толкова по-добре. Програмата е контрол, по-добре е, когато този контрол не се предава на действащи стандарти, от които често не знаете какво да очаквате.

Бутони и други елементи на страницата

Button hover CSS е чудесно решение, но като цяло всеки елемент на страницата е "бутон". Сайтът трябва да е на първо място и ако не е включен в кода, ако задачата е да създадете сайт, който да се развива адекватно в областта на приложение и да работи според поведението на посетителя, тогава най-малкото използването на CSS стилове може да даде жизненост на елементите на страницата.

Използвайте ефекта на ходенето удобно. С тяхна помощ можете лесно да направите страниците по-живи, но кодът не знае какво прави мишката на екрана, ако няма възможност да проследява движението си. От тази гледна точка, т.е. когато кодът контролира движението на мишката (= движение на пръста на смартфона), той може независимо да открои елемента или да го преобразува. Това няма нищо общо с псевдо-класовете, но дава пълен контрол над кода на външния вид на страницата, ви позволява да я показвате адекватно на различни устройства в различни браузъри.

Клопки в стил листове

Да се каже, че те са стандартни в описанието на стиловете, CSS не знаят какво правят, това е невъзможно, но не може да се каже, че напълно взаимодействат с останалите стандарти в областта на интернет програмирането.

Стилове и псевдо-класове могат да бъдат описани на етапа на кодиране на страницата, в момента, когато сървърът формира страницата и в динамиката: вече е в браузъра, лесно е да създадете нов стил и да промените съществуващия.

Използвайки AJAX, когато няма нужда да регенерирате страницата, за да отрази реакцията на действието на посетителя, а просто да промените елемента си или няколко елемента, добавете малко "пипер". Кодовете "Приятелство" - фактът, че вече в браузъра (JavaScript) и факта, че сървърът (PHP) - съдбата на автора (програмист) сайт.

От начина, по който алгоритъмът на това взаимодействие ще бъде изпълнен, по същество зависи не само от показването на страницата на нейните елементи, но и от по-нататъшното им възприемане по код. Просто казано, псевдо-класовете (по-специално) са много добри за статиката, нещо като ветроходна яхта в чисто море с лек вятър - всичко е очевидно, достъпно и управляемо. Ако времето се промени, или когато вятърът се увеличи, или посетителят причини непредвидена ситуация, можете бързо да летите в рифа и да загубите посетителя.

Стандарт и неговата емулация

CSS стила може да бъде емулирана чрез JavaScript, като се използват onmouseover и onmouseout събития. Често всичко това свършва. От гледна точка на здравия разум, когато става въпрос за създаването на истински работен обект, по-добре е да държите контрол в ръцете си, отколкото да го отдадете на милостта на митичните стандарти, които се променят извън волята и желанието на разработчика.

Понякога можете да прочетете нещо като "тази функция е налице дори в IE", но по-често можете да прочетете кои описания на стил се възприемат от този или този браузър. Много по-малко вероятно е да научите как JavaScript се различава в някои браузъри.

Оценявайки натрупания опит, възхищавайки се на възможностите на "Chrome" и "Opera", критикувайки забавянето и инертността на браузъра от производителя (незабравимият, скъп сърцето на всеки програмист IE от Microsoft: "Добрият стар Internet Explorer не се смущаваше само на мързеливите. Само знае как да играе в "Scythe" " - цитирано от неизвестен автор на интернет), трябва да се придържаме към златната среда: да използваме това, което работи навсякъде и винаги.

Хората се нуждаят от пари, за да работят, когато трябва да получат тръпката, която обикновено отиват в кантората или в театъра, но не и в интернет.

Емулация и контрол

По-рано, когато програмирането ставаше на крака, обичайно е да слушаш старейшините и да пишеш правилно. Сега има твърде много старейшини, всичко се променя твърде бързо и ако слушате всички, тогава няма да има достатъчно време дори за една много проста работа, на минимално функционален уебсайт.

Програмирането е предимно контрол, а в случаите, когато стандартите обективно установяват правилата или можете да очаквате рязка промяна в правилото, елиминирането му и появата на нова, най-доброто решение винаги е било да не вземате никакви решения, а да изпълнявате необходимата функционалност на сайта с възможно най-малко, но действително работещ код ,