Разлика помеѓу "екран: нема" и "видливост: скриен" во CSS

Може да има моменти, додека работите на развојот на веб-страниците, дека треба да "скриете" одредени области на предмети од една или друга причина. Вие, се разбира, едноставно може да ги отстраните ставките во прашањата од HTML- ознаката, но што ако сакате да останат во кодот, но не и да се прикажуваат на екранот на прелистувачот поради која било причина (и ние ќе ги разгледаме причините за направете го ова наскоро). За да задржите елемент во вашиот HTML, но да го скриете за прикажување, ќе се свртите кон CSS.

Двата најчести начини да се скрие елемент кој е во HTML е користење на својствата на CSS за "прикажување" или "видливост". На прв поглед, овие две својства можеби изгледаат како да прават иста работа, но секоја од нив има различни разлики за кои треба да бидете свесни. Ајде да ги разгледаме разликите помеѓу екранот: нема и видливоста: скриена.

Видливост

Користење на CSS сопственост / вредност пар на видливост: скриени крие елемент од прелистувачот. сепак, тој скриен елемент сè уште зазема простор во изгледот. Тоа е како што во основа го направивте елементот невидлив, но тој сè уште останува на место и го зазема просторот што ќе го преземе ако биде оставена сама.

Ако поставите DIV на вашата страница и користете CSS за да му дадете димензии за да заземат 100x100 пиксели, видливоста: скриената сопственост ќе го направи DIV да не се прикажува на екранот, но текстот што следи ќе дејствува како да е сè уште таму, почитувајќи го тоа 100x100 растојание.

Искрено, сопственоста за видливост не е нешто што ние често се користевме, и сигурно не самостојно. Ако исто така користиме други CSS особини како позиционирање за да го постигнеме изгледот што го посакувавме за одреден елемент, тогаш можеме да ја искористиме видливоста за да ја скриеме оваа ставка на почетокот, само за да го "вратиме" назад на лебди. Тоа е една можна употреба на овој имот, но повторно, тоа не е нешто што се свртуваме кон ниедна фреквенција.

Екран

За разлика од својството за видливост, кое остава елемент во нормален проток на документи, прикажи: ниту еден целосно не го отстранува елементот од документот. Не зазема никаков простор, иако HTML за него сè уште е во изворниот код. Тоа е затоа што, всушност, е отстранета од протокот на документот. За сите намери и цели, предметот е нема. Ова може да биде добра работа или лоша работа, во зависност од тоа какви се вашите намери. Исто така може да биде штетно за вашата страница ако го злоупотреби овој имот!

Ние често користиме "екран: нема" при тестирање на страница. Ако ни е потребна област за да си отидеме малку за да можеме да ги тестираме другите области од страната, можеме да користиме приказ: нема за тоа. Меѓутоа, нешто што треба да се запомни е дека елементот треба да се врати назад на страницата пред да биде стартуван овој сајт. Ова е затоа што елемент што е отстранет од протокот на документот во овој метод не го гледаат пребарувачите или читачите на екранот, иако може да остане во HTML-ознаката. Во минатото, овој метод се користеше како метод со црно-капа, за да се обиде да влијае врз рангот на пребарувачот, така што елементите што не се прикажани може да биде црвено знаме за Google да се осврне на тоа зошто тој пристап се користи.

Еден начин на кој можеме да најдеме приказ: никој да не биде корисен и каде што го употребуваме во живо, производствени веб-страници, е кога градиме одговорен сајт кој може да има елементи кои се достапни за една големина на екранот, но не и за други. Можете да го користите приказот: нема да го скрие тој елемент, а потоа да го вклучите повторно со медиумски пребарувања подоцна. Ова е прифатлива употреба на приказот: нема, бидејќи не се обидувате да сокриете нешто за злонамерни причини, но имате легитимна потреба да го направите тоа.

Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар на 03.03.17