Mindannyian el akarunk tűnni néha. A HTML elemek nem különböznek egymástól. Néha el akarnak bujkálni egy ideig. Nem szűnik meg teljesen létezni - csak tartsa a dolgokat alacsony szinten.
Szerencsére, amikor a HTML elemek eltűnnek, a CSS számos lehetőséget kínál.
A láthatatlanná váló CSS
Vegyünk egy HTML elemet a „ghost” osztályba, és rejtsük el.
//index.htmlI’m friendly!
//style.css.ghost {}Holt pixelek
Alapértelmezés szerint a HTML elemek láthatók. Az alapértelmezett láthatósági CSS tulajdonságuk látható , de megfordíthatja a szkriptet, és folytathatja:
.ghost { visibility: hidden;}Most a szellem el van rejtve, de így is helyet foglal az oldalon.
Nyom nélkül
Ha valamit láthatatlanná akar tenni, és nem is foglal helyet, használhatja a CSS display tulajdonságot is.
A fejlesztők általában a display tulajdonság segítségével diktálják, hogy egy HTML elemet blokk elemként vagy inline elemként kell-e megjeleníteni, de az elemet teljesen el is rejtheti:
.ghost { display: none;}A láthatósággal ellentétben : rejtett , a kijelzővel rejtett elem : egyik sem foglal helyet az oldalon.
Átlátszó lelkek
Az elemet olyan átlátszóvá is teheti, hogy láthatatlan legyen az opacitás CSS tulajdonság használatával.
.ghost { opacity: 0.0;}A láthatósághoz hasonlóan : rejtett, átlátszatlanság: 0.0 üres helyet hagy a HTML elem helyén. Ne feledje, hogy mindezen technikákkal az elem a DOM része marad - egyszerűen nem látható a normál felhasználók számára a böngészőjükben.
Elfutni! Szaladj messzire, messzire!
Egy elem elrejtésének utolsó módja az, ha olyan messzire helyezi az oldaltól, hogy annak megtekintéséhez óriási kicsinyítésre lenne szüksége.
Ehhez először használja a helyzetben CSS tulajdonság, hogy az elem egy abszolút pozícióját az oldalon (szemben a relatív más HTML-elemeket).
Ezután tetszőlegesen nagy számú pixelt mozgathat az elemről az oldalról:
.ghost { position: absolute; left: -999999px;}Miért tennéd ezt? Nos, ez jót tesz a tartalom hozzáférhetőségének. A képernyőolvasók - amelyeket látássérült emberek használnak az internet böngészéséhez - felvehetik ezt a tartalmat, és mindenki más nem fogja tudni, hogy a tartalom ott van-e.
A legjobb eredmény elérése érdekében helyezze ezeket a láthatatlan elemeket balra, felül vagy alul, ami megzavarhatja a képernyőolvasókat.
Szellemnek lenni Halloweenkor
Ha mind a négy technikát összerakja, akkor egy nagyon klassz, kis erőfeszítéssel járó Halloween-jelmez van:
Ezt Wes Searan austini tervező és táborozó segítségével készítettem.
Választhat egyet a hétvége végéig - férfi és fitnesz méretben.
Csak a programozásról és a technológiáról írok. Ha követsz a Twitteren, nem fogom pazarolni az idődet. ?