Sådan får du HTML til at forsvinde helt

Vi ønsker alle at forsvinde nogle gange. HTML-elementer er ikke forskellige. Nogle gange vil de gemme sig et stykke tid. Ikke ophør med at eksistere fuldstændigt - bare hold tingene nede.

Heldigvis, når det kommer til at få HTML-elementer til at forsvinde, tilbyder CSS en række muligheder.

CSS for at blive usynlig

Lad os tage et HTML-element med klassen "spøgelse" og skjule det.

//index.html

I’m friendly!

//style.css
.ghost {
}

Døde pixels

Som standard er HTML-elementer synlige. Deres standard CSS-egenskab for synlighed er synlig , men du kan vende scriptet og gå:

.ghost {
 visibility: hidden;
}

Nu er spøgelset skjult, men det vil stadig tage plads på siden.

Uden spor

Hvis du vil gøre noget usynligt og heller ikke tage plads, kan du også bruge CSS- skærmegenskaben .

Udviklere bruger normalt skærmegenskaben til at diktere, om et HTML-element skal vises som et blokelement eller et inline-element, men det kan også skjule elementet fuldstændigt:

.ghost {
 display: none;
}

Og i modsætning til synlighed: skjult , et element skjult med display: ingen tager ikke plads på siden.

Gennemskuelige sjæle

Du kan også gøre et element så gennemsigtigt, at det er usynligt ved hjælp af opacitet CSS-ejendommen.

.ghost {
 opacity: 0.0;
}

Ligesom synlighed: skjult, vil opacitet: 0.0 efterlade et tomt rum, hvor HTML-elementet er. Husk, med alle disse teknikker forbliver elementet en del af DOM - det er bare ikke synligt for normale brugere i deres browsere.

Løb væk! Kør langt, langt væk!

En sidste måde, du kan skjule et element på, er bare at flytte det så langt væk fra siden, at du bliver nødt til at zoome enormt ud for at se det.

For at gøre dette skal du først bruge egenskaben position CSS til at give elementet en absolut position på siden (i modsætning til i forhold til andre HTML-elementer).

Derefter kan du flytte elementet fra siden et vilkårligt stort antal pixels:

.ghost { position: absolute; left: -999999px;}

Hvorfor ville du gøre dette? Nå, det er godt for tilgængeligheden af ​​dit indhold. Skærmlæsere - som synshandicappede bruger til at surfe på internettet - kan hente dette indhold, og alle andre ved ikke, at indholdet er der.

For de bedste resultater skal du placere disse usynlige elementer til venstre i stedet for øverst eller nederst, hvilket kan forvirre skærmlæsere.

At være et spøgelse til Halloween

Når du sætter alle disse 4 teknikker sammen, har du et ret cool Halloween-kostume med lav indsats:

Jeg lavede dette ved hjælp af den Austin-baserede designer og autocamper Wes Searan.

Du kan samle en op i slutningen af ​​denne weekend - i herrestørrelser og kvinders størrelser.

Jeg skriver kun om programmering og teknologi. Hvis du følger mig på Twitter, spilder jeg ikke din tid. ?