Web-sivujen kehittämisessä voi olla aikoja, jolloin sinun tarvitsee "piilottaa" tiettyjä elementtikohtia syystä tai toisesta. Tietenkin voit yksinkertaisesti poistaa HTML- merkinnän kohteisiin kuuluvat kysymykset, mutta jos haluat, että ne pysyvät koodissa, mutta eivät näy selaimen näytöllä mistä tahansa syystä (ja tarkastelemme syitä siihen, että tee tämä pian). Jos haluat pitää elementin HTML-muodossasi, mutta piilottaisit sen näytölle, siirryt CSS: hen.
Kaksi yleisintä tapaa piilottaa elementti, joka on HTML: ssä, käyttää CSS-ominaisuuksia "näyttö" tai "näkyvyys". Ensi silmäyksellä nämä kaksi ominaisuutta voivat vaikuttaa suurelta osin samanlaiselta, mutta niillä kaikilla on erilainen ero, jonka pitäisi olla tietoinen. Katsotaanpa eroja näytön välillä: none ja näkyvyyttä: piilotettu.
näkyvyys
Visuaalisen CSS-ominaisuuden / arvon parin käyttäminen: piilotettu piilottaa elementin selaimesta. kuitenkin piilotettu elementti vie tilaa tilaa. Se on kuin olet periaatteessa tehnyt elementin näkymätön, mutta se on edelleen paikallaan ja vie tilaa, jonka se olisi pitänyt ottaa, jos se olisi jätetty yksin.
Jos sijoitat DIV: n sivusi ja käytät CSS: tä antamaan sille ulottuvuudet 100x100 pikselin käyttämiseksi, näkyvyys: piilotettu ominaisuus tekee DIV: n näkymästä näytöllä, mutta sen jälkeinen teksti toimii kuten se on vielä olemassa, kunnioittamalla sitä 100 x 100 välimatka.
Rehellisesti, näkyvyysominaisuus ei ole sellainen jota käytimme hyvin usein, eikä itsekään. Jos käytämme myös muita CSS-ominaisuuksia, kuten paikannusta, halutun ulkoasun saavuttamiseksi tietyllä elementillä, voimme sitten käyttää näkyvyyttä piilottaaksemme kyseisen kohteen aluksi vain "käännä" sen takaisin päälle. Tämä on yksi mahdollinen käyttö tähän ominaisuuteen, mutta jälleen, se ei ole jotain, mitä käännymme mihinkään taajuuteen.
Näyttö
Toisin kuin näkyvyysominaisuus, joka jättää elementin tavalliseen dokumenttivirtaan, näytetään: mikään ei poista elementtiä kokonaan asiakirjasta. Se ei vie tilaa, vaikka HTML-koodi on vielä lähdekoodissa. Tämä johtuu siitä, että se on todellakin poistettu asiakirjan virtauksesta. Kaikki kohteet ja tarkoitukset ovat poissa kohteesta. Tämä voi olla hyvä asia tai huono asia riippuen siitä, mitä teidän aikomuksesi ovat. Se voi myös vahingoittaa sivusi, jos käytät väärin tätä omaisuutta!
Käytämme usein "näyttö: ei mitään" testattaessa sivua. Jos tarvitsemme aluetta "mennä pois" vähän aikaa, jotta voimme testata sivun muita alueita, voimme käyttää näyttöä: ei mitään. Muista kuitenkin muistaa, että elementti on palautettava takaisin sivulle ennen kyseisen sivuston varsinaista käynnistämistä. Tämä johtuu siitä, että hakutoiminnolla tai näytönlukijalla ei näy kohdetta, joka poistetaan asiakirjavirrasta tässä menetelmässä, vaikka se pysyy HTML-merkinnässä. Aiemmin tätä menetelmää käytettiin mustan hatun menetelmänä, jolla pyrittiin vaikuttamaan hakukoneiden sijoituksiin, joten kohteet, joita ei näytetä, voivat olla punainen lippu Googlelle, jotta voidaan tutkia, miksi tätä lähestymistapaa käytetään.
Yksi tapa, jolla löydämme näytön: mikään ei ole hyödyllinen, ja jos käytämme sitä elävillä tuotanto-sivustoilla, rakennamme vastaavaa sivustoa, jolla voi olla elementtejä, jotka ovat käytettävissä yhden näytön kokoa, mutta ei muille. Voit käyttää näyttöä: none, jos haluat piilottaa kyseisen elementin ja ottaa sen myöhemmin takaisin mediakyselyihin . Tämä on hyväksyttävä näyttökäyttö: ei mitään, koska et yritä piilottaa mitään pahasta syystä, mutta sillä on oikeutettu tarve tehdä niin.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija: Jeremy Girard 3/3/17