Выкарыстанне ўласцівасці CSS "display: none"

Каскадныя табліцы стыляў (CSS) дазваляюць арганізаваць знешні выгляд і афармленне інтэрнэт-старонкі. Адным з найбольш часта ужывальных уласцівасцяў і яго значэнняў з'яўляецца "display: none".

вызначэнне ўласцівасці

Само ўласцівасць з'яўляецца шматмэтавым і вызначае тып адлюстравання элемента ў дакуменце. У залежнасці ад абранага значэння пэўны ўчастак старонкі можа адлюстроўвацца блокава, лінейна, як пункты спісу, як частка табліцы і т. Д. Такім чынам, дзякуючы ўласцівасці "display", можна змяняць тып самага блока ў дакуменце.

Што тычыцца звязка "ўласцівасць-значэнне display: none", то яна дазваляе выдаліць элемент або блок з дакумента. Пры гэтым месца пад дадзены кавалак старонак без рэзервуецца, гэта значыць ён выпадае з патоку. Усе элементы, якія знаходзяцца па-за «выдаленым», папросту не бачаць яго і ігнаруюць памеры і становішча такога блока. Для вяртання схаванага аб'екта неабходна звярнуцца да дакумента праз скрыпты, якія проста зменяць значэнне ўласцівасці на неабходны фармат. Пры гэтым адбудзецца аўтаматычнае фарматаванне старонкі з улікам новага аб'екта на ёй.

Розніца паміж ўласцівасцямі "display" і "visibility"

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

У сваю чаргу, ўласцівасць "visibility: hidden" хавае элемент ад карыстальніка, але не выдаляе яго з мадэлі дакумента. Такім чынам, на старонцы застаецца зарэзерваваныя месца пад дадзены блок. То ёсць паток дакумента будзе ўспрымаць і ўлічваць размяшчэнне і памеры элемента з уласцівасцю "visibility: hidden" роўна гэтак жа, як і без яго.

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

Выкарыстанне CSS - display: none

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

У загалоўку дакумента

Другім варыянтам з'яўляецца вызначэнне стыляў у загалоўнай частцы дакумента паміж тэгамі style. Эфектыўнасць такога спосабу значна менш. Яго рэкамендуецца ўжываць толькі толькі ў крайніх выпадках, бо пры наяўнасці вялікай колькасці стыляў чытальнасць старонкі вэб-дызайнерам значна пагаршаецца. А гэта прыводзіць да ўзнікнення памылак і запаволення працэсу распрацоўкі інтэрнэт-дакумента. Такі падыход рэкамендуецца выкарыстоўваць толькі ў выпадку дадання ў гэты тэг малога ліку стыляў або для адладкі дакумента.

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

Блок div. Display: none

Яшчэ адным спосабам з'яўляецца даданне непасрэдна ў тэг элемента кода "style = display: none;". Падобны падыход часцяком ужываюць пры працы з рознымі фреймворк, мэта якіх - зніжэнне колькасці уласцівасцяў непасрэдна ў табліцы стыляў і адлюстраванне іх у самым інтэрнэт-дакуменце. Акрамя таго, падобная запіс часта ўзнікае пры праглядзе старонкі «інспектарам кода». Важна памятаць, што выкарыстоўваючы гэты падыход, можна змяніць ўласцівасць і яго значэнне, прапісаныя ў табліцы стыляў. Таму варта быць асцярожным, так як у выніку можна стварыць сабе дадатковыя праблемы і выдаткаваць некаторы час на пошук і ўхіленне памылкі ў кодзе старонкі.

JavaScript

Варта таксама згадаць і аб дадатковай магчымасці змены гэтага ўласцівасці. Яно адносіцца ўжо не да табліцы стыляў і html-кодзе, а да скрыптовай мовы. Таму для яго прымянення неабходна мець хоць нейкія веды ў гэтай галіне. Для таго каб прыбраць элемент з патоку дакумента, можна выкарыстоўваць ўласцівасць JavaScript "display = none". Яно дазваляе змяніць структуру дакумента пры наступе пэўнага падзеі. Таксама дзякуючы выкарыстанню скрыптоў можна дынамічна ( "на ляту") змяніць параметр ўласцівасці і тым самым абнавіць выгляд старонкі без неабходнасці яе перазагрузкі. Такі падыход з'яўляецца карысным пры арганізацыі выпадаючых меню, мадальных вокнаў і формаў.

SEO

У вобласці аптымізацыі вэб-кантэнту пад пошукавыя машыны існуе шмат забабонаў і невыразных момантаў. Так, шматлікія пачаткоўцы сошнікі лічаць выкарыстанне ўласцівасці "display" дрэнны манерай. Тлумачаць яны гэта тым, што пошукавікі, бачачы схаваны кантэнт, пачынаюць лічыць старонку спамам. У іх словах ёсць доля логікі, але не больш за тое. На дадзены момант часу ўласцівасць ўтойвання аб'екта выкарыстоўваецца досыць часта для фарматавання выпадаючых меню і ўтойвання частак дакумента, якія ў дадзены момант не цікавыя карыстачу (напрыклад, пры выбары адной катэгорыі інфармацыя аб іншых выдаляецца). Такі падыход выкарыстоўваюць дастаткова магутныя інтэрнэт-парталы (адзін з іх - "Амазон"). Такім чынам, пошукавыя робаты не могуць лічыць выкарыстанне ўласцівасці "display: none" спамам.

Іншая справа, калі такі падыход выкарыстоўваецца для ўтойвання асобных слоў і знакаў. Нягледзячы на тое што цяпер пошукавыя робаты яшчэ не маюць дасканалых алгарытмаў распазнання падобнага «спаму» ў дакументах, верагоднасць таго, што старонка будзе злоўлены на гэтым, досыць высокая. Таму рэкамендуецца выкарыстоўваць ўласцівасць "display" строга па прызначэнні - для змены тыпу блока або яго часовага ўтойвання ад вачэй карыстальніка.