Gwahaniaeth Rhwng "arddangos: dim" a "gwelededd: cudd" yn CSS

Efallai y bydd amseroedd, wrth i chi weithio ar ddatblygu tudalennau gwe, bod angen i chi "guddio" ardaloedd penodol o eitemau am un rheswm neu'r llall. Gallech, wrth gwrs, symud yr eitem (au) mewn cwestiynau o'r marc HTML , ond beth os ydych am iddyn nhw aros yn y cod, ond peidio â dangos ar sgrin y porwr am ba bynnag reswm (a byddwn yn adolygu'r rhesymau i gwnewch hyn yn fuan). I gadw elfen yn eich HTML, ond cuddiwch hi i'w harddangos, byddech yn troi at CSS.

Y ddwy ffordd fwyaf cyffredin o guddio elfen sydd yn yr HTML fyddai defnyddio eiddo CSS ar gyfer "arddangos" neu "gwelededd". Ar yr olwg gyntaf, mae'n debyg bod y ddau eiddo hyn yn gwneud yr un peth i raddau helaeth, ond mae gan bob un ohonynt wahaniaethau gwahanol y dylech fod yn ymwybodol ohonynt. Gadewch i ni edrych ar y gwahaniaethau rhwng arddangos: dim a gweladwy: cudd.

Gwelededd

Gan ddefnyddio pwerau gwelededd yr eiddo / gwerthfawrogiad CSS: mae cudd yn cuddio elfen o'r porwr. Fodd bynnag, mae'r elfen gudd honno'n dal i gymryd lle yn y cynllun. Mae'n debyg eich bod chi wedi gwneud yr elfen anweledig yn y bôn, ond mae'n dal i fod yn ei le ac yn cymryd y lle y byddai wedi ei gymryd pe bai wedi'i adael ar ei ben ei hun.

Os ydych chi'n gosod DIV ar eich tudalen a defnyddio CSS i roi dimensiynau iddo gymryd 100x100 picsel, bydd y gwelededd: bydd eiddo cudd yn gwneud y DIV ddim yn cael ei ddangos ar y sgrin, ond bydd y testun sy'n dilyn yn gweithredu fel ei fod yn dal i fod yno, gan barchu hynny 100x100 o le.

Yn onest, nid yw'r eiddo gwelededd yn rhywbeth a ddefnyddiwyd gennym yn aml iawn, ac yn sicr nid ar ei ben ei hun. Os ydym hefyd yn defnyddio eiddo CSS eraill fel lleoliad i gyflawni'r cynllun yr oeddem ei eisiau ar gyfer elfen benodol, gallem wedyn ddefnyddio gwelededd i guddio'r eitem honno i ddechrau, dim ond i "droi" yn ôl ymlaen ar hofran. Dyna un defnydd posibl o'r eiddo hwn, ond eto, nid yw'n rhywbeth yr ydym yn ei droi gydag unrhyw amlder.

Arddangos

Yn wahanol i'r eiddo gwelededd, sy'n gadael elfen yn llif y ddogfen arferol, arddangos: nid oes yr un yn tynnu'r elfen yn llwyr o'r ddogfen. Nid yw'n cymryd unrhyw le, er bod yr HTML ar ei gyfer yn dal i fod yn y cod ffynhonnell. Mae hyn oherwydd ei fod, yn wir, wedi'i dynnu oddi ar lif y ddogfen. Ar gyfer pob pwrpas a dibenion, mae'r eitem wedi mynd. Gall hyn fod yn beth da neu'n beth drwg, yn dibynnu ar beth yw'ch bwriadau. Gall hefyd fod yn niweidiol i'ch tudalen os ydych yn camddefnyddio'r eiddo hwn!

Rydym yn aml yn defnyddio "arddangos: dim" wrth brofi tudalen. Os oes angen ardal arnom i "fynd i ffwrdd" am ychydig er mwyn i ni allu profi ardaloedd eraill o'r dudalen, gallwn ni ddefnyddio arddangosfa: dim ar gyfer hynny. Y peth i'w gofio, fodd bynnag, yw y dylid dychwelyd yr elfen yn ôl i'r dudalen cyn lansiad gwirioneddol y safle hwnnw. Y rheswm am hyn yw nad yw peiriannau chwilio na darllenwyr sgrin yn gweld eitem sy'n cael ei dynnu o'r llif dogfen yn y dull hwn, er ei fod yn parhau i fod yn y marc HTML. Yn y gorffennol, defnyddiwyd y dull hwn fel dull het du i geisio dylanwadu ar safleoedd peiriannau chwilio, felly gallai eitemau nad ydynt yn cael eu harddangos fod yn faner goch i Google edrych i mewn pam mae'r dull hwnnw'n cael ei ddefnyddio.

Un ffordd yr ydym yn dod o hyd i'r arddangosfa: nid oes unrhyw un yn ddefnyddiol, a lle rydym yn ei ddefnyddio ar wefannau cynhyrchu byw, pan fyddwn ni'n adeiladu gwefan ymatebol a allai fod ag elfennau sydd ar gael ar gyfer un maint arddangos ond nid i eraill. Gallwch chi ddefnyddio arddangosfa: dim i guddio'r elfen honno ac yna ei droi yn ôl gydag ymholiadau cyfryngau yn nes ymlaen. Mae hwn yn ddefnydd derbyniol o arddangos: dim, oherwydd nad ydych chi'n ceisio cuddio unrhyw beth am resymau anffafriol, ond bod gennych angen cyfreithlon i wneud hynny.

Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 3/3/17