Pot ser que hi hagi temps, mentre treballeu en el desenvolupament de pàgines web, que heu de "ocultar" àrees específiques d'elements per una o altra raó. Podríeu, per descomptat, eliminar l'element (s) en qüestions del marcat HTML , però, si voleu que romanguin al codi, però no es mostrin a la pantalla del navegador per qualsevol motiu (i revisarem els motius pels quals feu-ho en breu). Per conservar un element en el vostre codi HTML, però amagar-lo per visualitzar, es tornaria a CSS.
Les dues maneres més habituals d'ocultar un element que es troba a l'HTML estarien utilitzant les propietats CSS per a "mostrar" o "visibilitat". A primera vista, aquestes dues propietats poden semblar, en gran part, el mateix, però cadascuna té diferències diferents que vostè ha de tenir en compte. Fem una ullada a les diferències entre la visualització: cap i la visibilitat: amagada.
Visibilitat
Utilitzar el parell de visibilitat de propietat / valor CSS: ocults amaga un element del navegador. Tanmateix, aquest element ocult encara ocupa espai en el disseny. És com si hagués fet l'element invisible bàsicament, però encara roman en el lloc i ocupa l'espai que hauria tingut si s'hagués deixat sol.
Si col·loqueu un DIV a la vostra pàgina i utilitzeu CSS per donar-li dimensions per ocupar 100x100 píxels, la visibilitat: propietat oculta farà que el DIV no es mostri a la pantalla, però el text que segueix actuarà com si continués allà, respectant-lo Espaiat de 100x100.
Sincerament, la propietat de la visibilitat no és una cosa que hem utilitzat amb molta freqüència i, sens dubte, no per si mateixa. Si també estem utilitzant altres propietats CSS com ara el posicionament per aconseguir el disseny que volíem per a un determinat element, podríem utilitzar la visibilitat per ocultar aquest element inicialment, només per "tornar-lo a encendre". Aquesta és una possible utilització d'aquesta propietat, però de nou, no és una cosa que recorrem amb freqüència.
Mostra
A diferència de la propietat de visibilitat, que deixa un element en el flux de documents normal, es mostra: cap elimina l'element completament del document. No té cap espai, tot i que el codi HTML encara està en el codi font. Això es deu a que, de fet, s'elimina del flux del document. Per a tots els efectes, l'article s'ha desaparegut. Això pot ser una cosa bona o una mala cosa, depenent de quines siguin les vostres intencions. També pot ser perjudicial per a la vostra pàgina si feu mal ús d'aquesta propietat.
Sovint utilitzem "display: none" al provar una pàgina. Si necessitem una àrea per "desaparèixer" una mica perquè puguem provar altres àrees de la pàgina, podem utilitzar la visualització: cap d'aquestes. El que cal recordar, però, és que l'element es torni a la pàgina abans del llançament real d'aquest lloc. Això es deu a que els motors de cerca o lectors de pantalla no veuen un element que s'elimina del flux de documents d'aquest mètode, tot i que pot romandre al marcat HTML. En el passat, aquest mètode es va utilitzar com a mètode de barret negre per intentar influir en el rànquing dels motors de cerca, de manera que els elements que no es mostren poden ser una marca vermella per a Google per examinar per què s'utilitza aquest enfocament.
Una de les maneres que trobem mostra: cap d'elles és útil, i on ho fem en directe, llocs web de producció, és quan estem construint un lloc sensible que pugui tenir elements disponibles per a una mida de pantalla, però no per a d'altres. Podeu utilitzar la visualització: cap per ocultar aquest element i, a continuació, tornar-lo a activar amb consultes de mitjans més endavant. Aquest és un ús acceptable de la visualització: cap, perquè no esteu tractant d'ocultar res per motius nefreus, però tenen una necessitat legítima de fer-ho.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 3/3/17