Atšķirība starp CSS "display: none" un "visibility: hidden"

Iespējams, ka, strādājot pie tīmekļa lapu izstrādes, ir reizes, ka jums kādā vai citā iemesla dēļ ir nepieciešams "paslēpt" noteiktas vienības. Jūs, protams, varat vienkārši noņemt vienumu (-s) HTML marķējuma jautājumos, bet, ja jūs vēlaties, lai tie paliktu kodā, bet nerādītu pārlūkprogrammas ekrānā kāda iemesla dēļ (un mēs pārskatīsim iemeslus do it shortly). Lai saglabātu elementu jūsu HTML, bet paslēptu tā rādīšanai, jūs vērsieties pie CSS.

Divi visbiežāk sastopamie HTML elementā esošā elementa slēpšanas veidi ir "CSS" rekvizīti, kas tiek izmantoti "rādīšanai" vai "redzamībai". No pirmā acu uzmetiena, šīs divas īpašības var likties lielā mērā viena un tā pati lieta, taču katrai no tām ir atšķirīgas izpausmes, kas jāzina. Apskatīsim atšķirības starp displeju: neviens un redzamība: slēpta.

Redzamība

Izmantojot CSS īpašuma / vērtības pārredzamību: slēpts slēpj elementu no pārlūka. tomēr šis slēptais elements vēl aizņem telpu izkārtojumā. Tas ir tāpat kā jūs būtībā padarījis elementu neredzamu, bet tas joprojām ir spēkā un aizņem vietu, ko tā būtu uztvērusi, ja tā tiktu atstāta viena pati.

Ja savā lapā ievietojat DIV un izmantojat CSS, lai piešķirtu izmēriem 100x100 pikseļus, redzamība: slēptais īpašums padara DIV neparādītu ekrānā, bet teksts pēc tam darbojas tāpat kā tas joprojām pastāv, ievērojot šo 100 x 100 atstatums.

Godīgi sakot, redzamības īpašums nav tas, ko mēs izmantojām ļoti bieži, un, protams, ne viens pats. Ja mēs arī izmantojam citas CSS īpašības, piemēram, pozicionēšanu, lai sasniegtu izkārtojumu, kādu mēs vēlējāmies noteiktam elementam, mēs pēc tam varētu izmantot redzamību, lai sākotnēji to slēptu, tikai lai to "pagrieztu" atpakaļ uz kursoru. Tas ir viens no iespējamiem šī īpašuma lietojumiem, bet atkal tas nav tas, uz ko mēs vēršamies, izmantojot jebkuru frekvenci.

Displejs

Atšķirībā no redzamības īpašības, kas atstāj elementu normālā dokumentu plūsmā, displejs: neviens nenoņem elementu no dokumenta pilnīgi. Tas neaizņem nekādu vietu, lai gan tā HTML joprojām ir avota kodā. Tas ir tāpēc, ka tas ir, protams, noņemts no dokumentu plūsmas. Visiem nolūkiem šis vienums ir pagājis. Tas var būt laba lieta vai slikta lieta, atkarībā no tā, kādi ir jūsu nodomi. Tas var arī kaitēt jūsu lapai, ja jūs nepareizi lietojat šo īpašumu!

Testējot lapu, mēs bieži lietojam "displejs: neviens". Ja mums ir nepieciešams apgabals, kas mazliet nedaudz pazūd, lai mēs varētu pārbaudīt citas lapas daļas, mēs varam izmantot displeju: neviens par to nav. Tomēr jāatceras, ka elementam ir jāatgriežas atpakaļ lapā pirms faktiskās šīs vietnes palaišanas. Tas ir tādēļ, ka šajā metodē objektu, kas tiek noņemts no dokumenta plūsmas, neredz meklētājprogrammas vai ekrāna lasītāji, pat ja tas var palikt HTML atzīmēšanā. Agrāk šī metode tika izmantota kā melnā cepure metode, lai mēģinātu ietekmēt meklētājprogrammu klasifikāciju, tāpēc priekšmeti, kas netiek rādīti, varētu būt sarkans karodziņš, lai uzņēmums Google varētu izpētīt, kāpēc šī pieeja tiek izmantota.

Viens no veidiem, kā mēs atrodam ekrānu: neviens nav lietderīgs un kur to mēs izmantojam tiešraidē, produkcijas vietnēs, ir tas, kad mēs veidojam atsaucīgu vietni, kurā var būt elementi, kas ir pieejami vienam displeja izmēram, bet ne citiem. Jūs varat izmantot displeju: neviens nav, lai to paslēptu, un pēc tam to vēlreiz ieslēdziet, izmantojot mediju vaicājumus . Tas ir pieņemams displeja izmantojums: nav, jo jūs nevēlaties kaut ko paslēpt nelabvēlīgu iemeslu dēļ, bet tam ir likumīga vajadzība to darīt.

Jennifera Krīnina oriģinālais raksts. Rediģējis Jeremijs Girards 3./3