Розніца паміж «дысплеем: не» і «бачнасць: схаваны» ў CSS

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

Два найбольш распаўсюджаныя спосабы схаваць элемент, які ў HTML будуць выкарыстоўваць ўласцівасці CSS для «адлюстравання» або «бачнасьці». На першы погляд, гэтыя два ўласцівасці могуць, здаецца, робяць у асноўным тое ж самае, але кожны з іх мае пэўныя адрозненні, якія вы павінны ведаць. Давайце паглядзім на адрозненні паміж дысплеем: долі не мае і бачнасць: схаваны.

бачнасць

Выкарыстанне CSS ўласцівасць / значэнне пары бачнасці: прыхаваная хавае элемент з браўзэра. аднак, што схаваны элемент па-ранейшаму займае месца ў макеце. Гэта, як вы зрабілі ў асноўным элемент нябачны, але ён па-ранейшаму застаецца на месцы і займае месца, якое ён заняў бы, калі б было пакінутае ў спакоі.

Калі вы змесціце DIV на старонцы і выкарыстоўваць CSS, каб надаць яму памеры заняць 100x100 пікселяў, бачнасць: схаваны ўласцівасць будзе зрабіць DIV не паказваць на экране, але наступны за ёй тэкст будзе дзейнічаць, як ён усё яшчэ там, паважаючы, што 100x100 адлегласць.

Шчыра кажучы, ўласцівасць бачнасці не тое, што мы выкарыстоўвалі вельмі часта, і, вядома, не самі па сабе. Калі мы таксама выкарыстоўваем іншыя ўласцівасці CSS, як пазіцыянаванне для дасягнення макета, які мы хацелі для пэўнага элемента, мы маглі б выкарыстоўваць бачнасць, каб схаваць гэты пункт на пачатковым этапе, толькі "уключыць" яго зноў пры навядзенні курсора мышы. Гэта адна магчымасць выкарыстання гэтага ўласцівасці, але зноў жа, гэта не тое, што мы пераходзім да з любой частатой.

дысплей

У адрозненні ад уласнасці бачнасці, што пакідае элемент у нармальным патоку дакумента, дысплей: не выдаляе элемент цалкам з дакумента. Ён не займае ніякага месца, нават калі HTML для яго ўсё яшчэ знаходзіцца ў зыходным кодзе. Гэта адбываецца таму, што гэта, сапраўды, выдаляецца з патоку дакумента. Для ўсіх намераў і мэтаў, пункт знік. Гэта можа быць добра ці дрэнна, у залежнасці ад таго, што вашыя намеры. Яна таксама можа быць разбуральнай для вашай старонкі, калі вы няправільна выкарыстоўваць гэта ўласцівасць!

Мы часта выкарыстоўваем «дысплей: няма» пры тэставанні старонкі. Калі нам патрэбна вобласць «сысці» на некаторы час, пакуль так што мы можам праверыць іншую вобласць старонкі, мы не можам выкарыстоўваць дысплей: ні за што. Важна памятаць, аднак, з'яўляецца тое, што элемент павінен быць вернуты назад на старонку да фактычнага запуску гэтага сайта. Гэта адбываецца таму, што элемент, які выдаляецца з патоку дакументаў у гэтым метадзе не разглядаецца пошукавымі сістэмамі або чытання з экрана, нават калі ён можа заставацца ў HTML разметцы. У мінулым, гэты метад быў выкарыстаны ў якасці метаду чорных капелюшоў, каб паспрабаваць паўплываць на ранжыраванне пошукавай машыны, таму элементы, якія не адлюстроўваюцца можа быць чырвоны сцяг для Google, каб паглядзець у той, чаму гэты падыход выкарыстоўваецца.

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

Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 3/3/17