Patru mai multe moduri de a ascunde și de elemente de show folosind HTML si CSS
Prequel la acest articol - „Patru moduri de a face elemente dispară (și de a primi) folosind CSS» - a fost axat pe tehnici clasice pentru a ascunde elemente din pagină; de data aceasta, folosind tehnici care lucreaza in browserele moderne, cu unele restricții pentru IE. Utilizați marcare care este similar cu structura din exemplul anterior:
În acest articol, am folosi tehnici diferite pentru a ascunde elementul
Element Scaling 0
Evident, dacă faci ceva infinit de mic, acest „ceva“ în cele din urmă dispar. Acesta ar trebui să anuleze zona inițială a elementului este menținută, deoarece efectul transformării este în esență similar cu comportamentul unui element cu poziția: relativă;
scară Valoarea returnata este setat la 1 va apărea din nou elementul; Această tranziție poate fi, de asemenea animate.
Contra: Suporta toate browserele moderne, dar numai incepand cu IE9 +. Nu poate fi aplicat la elementul rând. Pentru versiunile mai vechi ale browserelor sunt prefixe necesare.
atribut HTML5-ascuns
Deși vizual acționează ca ecran: nici unul, acest articol înregistrează starea elementului
La instalarea elementului, ascuns indică faptul că elementul nu a fost încă sau nu mai are o legătură directă cu starea curentă a paginii.
Atributul ascuns este deja utilizat pentru aceste elemente de detalii cu HTML5, cum ar fi. Spre deosebire de alte metode, atribute ascunse sunt descrise aici pentru a ascunde elementele de la oricare dintre metodele de prezentare, inclusiv de imprimare. cititoare mobile și ecran. Sprijinit de toate browserele moderne, cu excepția uneia.
Contra: Încă nu sunt acceptate în IE, deși este ușor de rezolvat selectorul CSS pentru atributul:
Zero înălțime și preaplin: ascuns
Soluția tradițională. De fapt, „se prăbușește“, în direcția verticală și face invizibil; lucrări cu condiția ca elementul nu are nici un chenar vizibil. Este de remarcat că unele spațiu pe pagina elementului ascuns este probabil să fie „rezervat“, în ciuda faptului că elementul nu are o înălțime, el are încă lățimea și, probabil, un domeniu care poate continua să afecteze aspectul paginii.
Contra: Nu se aplică la elementul rând. Valoarea înălțimii nu poate fi animat, deși max - înălțime poate.
blur
Cea mai recentă abordare, care nu va funcționa în IE (cel puțin pentru moment). Cu toate acestea, estompa - o opțiune interesantă, care merită luat în considerare pentru viitor. neclaritate suficientă face ca elementul complet invizibil, reducând în același timp valorile neclaritățile de la 0 elementul din nou, este „în centrul atenției“
- Blur text mic funcționează mai bine decât imaginea
- imaginile încețoșate pot adăuga restul paginii, nuanța de culoare, în funcție de dimensiunea lor relativă și importanța neclaritate.
- Cu cât neclaritatea. Este nevoie de mai multe cicluri de calcul pentru ao realiza; suficient de ridicate valori pot încărca în mod semnificativ procesorul grafic, ceea ce face ca aceasta tehnica nepractică pentru dispozitive mobile în acest moment.
- Este acceptată numai în cea mai recentă versiune de Firefox (versiunea 35 - cca Perevi ..) (Deși este posibil să se utilizeze SVG ca soluție de rezervă)
- Cu toate acestea necesită o prefixe browser pentru Chrome și Safari.
- După cum sa menționat deja, acesta nu va funcționa în toate versiunile de IE.