КампутарыПраграмаванне

Before CSS - арыгінальна, зручна, практычна

Псевдоэлементы і псевдокласс CSS: before, after, hover, active і г.д. - эфектыўная магчымасць якасна палепшыць і спрасціць выкананне сайта, не ўключаючы ў код JavaScript-апрацоўшчыкі на відавочныя, не патрабуюць складанай рэакцыі дызайнерскія рашэнні, падзеі элементаў, дыялогі і дзеянні наведвальніка.

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

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

Адметная асаблівасць псевдоэлементов

Псевдоэлементы (:: before CSS, :: after) адрозніваюцца ад элементаў, селектараў і псевдоклассов тым, што першапачаткова не існуюць у дрэве дакумента. Магчыма, на практыцы гэта не асабліва важна, але, калі разглядаць пытанне размяшчэння кантэнту на старонках сайта, то давяраць ўласцівасці content нешта значнае для пошукавіка не мае сэнсу.

Псевдоэлемент :: before CSS дазваляе дадаць ўтрыманне перад элементам, а :: after - пасля. Змест можа быць розным, ад простага тэксту да складанага фарматавання з пункту гледжання уласцівасцяў CSS, але не тэгаў HTML. Псевдоэлемент можа быць абсалютна пазіцыянаваны ўнутры таго элемента, да якога прымацаваны, таму сэнс before і after адносны і мабільны. Можна не толькі паказаць пазіцыю, але і памеры, колеру, фон, шрыфты і выкарыстоўваць іншыя ўласцівасці CSS.

Як і псевдокласса CSS, before і after папярэднічаюцца сімвалам ":", але па стандарце CSS3 рэкамендуецца "::". Пратэставаць канкрэтнае выкарыстанне на старонцы ніколі не будзе лішнім: некаторыя браўзэры або іх версіі могуць проста не заўважыць той ці іншы псевдоэлемент.

Агульныя правілы выкарыстання

Змясціўшы, напрыклад, div элемент з апісаннем class = 'scElement' і зместам "Element" на старонку, паказаўшы ў табліцы стыляў CSS-апісанне:

.scElement {
POSITION ...;
z-index ...;
...

},

можна прымяніць да яго псевдокласс ": hover" і псевдоэлемент ":: before" CSS:

.scElement: hover :: before {content: 'prefix'; color ...; background-color ...;}.

Тады пры навядзенні курсора мышкі перад словам 'Element' будзе з'яўляцца слова 'prefix', у якім зменіцца колер літар і фону.

Варыянты ўтрымання псевдоэлемента

Калі не ўказваць ўласцівасці ў псевдоэлементе, яны застануцца такімі ж, як у асноўнага элемента - scElement. Можна паказаць url, і тады ўласцівасць content: url ( '/ scBox / rm-v / sc-rights.png') пры навядзенні курсора пакажа карцінку на элеменце. У выпадку content: "\ 03B1" з'явіцца матэматычны знак "alfa", але выкарыстаць спецыяльныя знакі: "& nbsp;", "& lt;", "& laquo;", "& raquo;" і іншыя не варта - яны адлюструюцца як ёсць.

Дапускаецца шмат варыянтаў ўказанні ўтрымання псевдоэлементов: звычайны "тэкст", url (), паслядоўнасць шаснаццатковых сімвалаў, абазначэння: open-quote / close-quote або no-open-quote / no-close-quote і інш. Паколькі дапускаецца ўказанне абсалютнай пазіцыі ўтрымання пасродкам уласцівасцяў стыляў, то, ужываючы before, CSS дазволіць размясціць псевдоэлемент ў любым месцы элемента, да якога ён прывязаны.

Можна камбінаваць адначасовае выкарыстанне before і after. Таму, размяшчаючы пры дапамозе CSS before content сімвалы, можна атрымаць розныя эфекты, а камбінуючы розныя псевдокласс і псевдоэлементы, здзівіць наведвальніка, не выдаткаваўшы пры гэтым ніводнага байта JavaScript-кода.

асаблівасці псевдоэлементов

Для іх абазначэння прыняты сімвал ":", як і для абазначэння псевдоклассов, але ў CSS3 адрозненне псевдоэлементов прынята пазначаць "::". Браўзэры, якія разумеюць гэта, успрымаюць абодва абазначэння. Прабелы ў запісе не дапускаюцца, радок, у якой запісаны псевдокласс і (або толькі) псевдоэлемент, запісваецца разам:

scElement: hover :: before {content: 'prefix'; ...}

scElement: active: after {content: 'suffix'; ...}

Важна не забываць: CSS before працуе па-за кантэнту сайта. Стылі не маюць дачынення да зместу старонкі. Псевдоэлементы - не выключэнне. Яны не прысутнічаюць у дрэве DOM і непажадана іх выкарыстоўваць у значных участках сайта - у кантэнт яны не трапяць.

Выкарыстанне ":" і "::" падтрымліваецца мабільнымі платформамі і сучаснымі браўзэрамі, але праверыць працу на састарэлых версіях часта не бывае лішнім.

Змест псевдоэлемента не ўключаецца ў кантэнт сайта. Яго не ўбачаць пашукавікі. Як выкарыстоўваць гэтую акалічнасць - залежыць ад канкрэтнай сітуацыі, але магчымасці выкарыстоўваць CSS before, як і after, незалежна або ў комплексе, цікава, калі content ўяўляе сабой url (). Прамое выкарыстанне ўтрымання псевдоэлемента, як спасылкі на сайт, дазволіць спампаваць з яго файл, напрыклад, карцінку.

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

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.delachieve.com. Theme powered by WordPress.