CSS Özellikleri: Görüntü ve Görünürlük

Görüntülü Reklam ve Görünürlük özellikleri arasındaki fark nedir?

visibilityÖzellik yalnızca bir öğeyi görüntüleme edip etmeyeceğine tarayıcısına anlatır. Ya görünür ( visible- görebilirsin ) ya da görünmez ( hidden- göremezsin).

displayMülkiyet tarayıcıya bildirir nasıl çizmek ve hiç eğer, bir öğeyi görüntüleme - bu şekilde gösterilip gösterilmemesi gerektiğini inlineeleman veya (yani o metin ve diğer satır içi unsurlarla akar) block-seviye elemanın (yani o yükseklik ve genişlik özelliklerine sahip olduğunu siz) o, vb yüzebilen var, ayarlayabilir veya bir inline-block(bir blok kutusu gibi davranan ama satır içi yerine serilir) ve bazı diğerleri (yani list-item, table, table-row, table-cell, flex, vs).

Bir öğeyi olarak ayarladığınızda , display: blockaynı zamanda ayarladığınızda visibility: hidden, tarayıcı onu bir blok öğe olarak görmeye devam eder, ancak siz onu görmezsiniz. Görünmez bir kutunun üstüne kırmızı bir kutuyu yığmanız gibi: Kırmızı kutu, gerçekte göremediğiniz bir fiziksel kutunun üstünde dururken havada yüzüyormuş gibi görünür.

Başka bir deyişle, bu display, görünmeyen noneöğelerin, görünür olup olmadıklarına bakılmaksızın bir sayfadaki öğelerin akışını yine de etkilemeyeceği anlamına gelir . Bir öğeyi çevreleyen kutular display: none, bu öğe hiç orada olmamış gibi davranacaktır (DOM'da kalmasına rağmen).

görünürlük: gizli;

• öğe boyanmayacak VE tıklama / dokunma olaylarını almayacak, ancak kapladığı alan hala dolu
• yerleşim amacıyla hala orada olduğundan, görünür olmadan ölçebilirsiniz
• içeriği değiştirmek, sayfayı yeniden düzenlemek / düzenlemek için yine de zamana mal olacaktır
• görünürlük miras alınır, yani bu, onlara görünürlük sağlayarak alt çocukları görünür kılabileceğiniz anlamına gelir: görünür;

görüntü yok;

• öğenin akışa / düzene katılmamasını sağlar
• Flash filmleri ve iframe'leri (kullanılan tarayıcıya bağlı olarak) öldürebilir (tekrar gösterildikten sonra yeniden başlatılır / yeniden yüklenir), ancak bunun iframe'lerle olmasını önleyebilirsiniz
• eleman hiç yer kaplamaz. yerleşim amacıyla sanki yokmuş gibi
• animasyonlar sırasında hiçbiri ve başka bir değer arasında geçiş yaparsanız, bazı tarayıcıların / cihazların (iPad gibi) doğrudan o öğe tarafından kullanılan belleği geri almasını sağlar.

ekstra notlar:

• gizli içerikteki resimler: tüm popüler tarayıcılarda, görünürlüğü olan herhangi bir öğenin içinde olsalar bile resimler hala yüklenir: gizli; veya display: none;
• Gizli içerikteki yazı tipleri: webkit tarayıcıları (Chrome / Safari), görünürlük veya görüntüleme dahil olmak üzere yalnızca gizli öğelerde kullanılan özel yazı tiplerinin yüklenmesini geciktirebilir. Bu, özel yazı tipi yüklenene kadar hala yedek yazı tipi kullanan öğeleri ölçmenize neden olabilir.

display: none öğeyi html akışından kaldırmazken visibility: hidden bunu yapmaz.

görüntü yok; DOM öğelerinin görsel stilini / fiziksel alanını DOM'dan kaldırırken visibility: hidden; öğeyi kaldırmayacak, basitçe gizleyecektir. Dolayısıyla, DOM'nuzda 300 piksel dikey alan kaplayan bir div, görünürlük ayarlandığında HALA 300 piksel dikey genişlikte yer kaplar: gizli; ancak görüntülenecek şekilde ayarlandığında: yok; görsel stilleri ve kapladığı alan gizlenir ve daha iyi bir kelime olmadığı için alan "serbest bırakılır".

[DÜZENLE] - Bir süre önce yukarıdakileri yazdım ve yeterince bilgili olmadığım veya kötü bir gün geçirdiğimden emin değilim, ama gerçek şu ki, öğe DOM hiyerarşisinden ASLA kaldırılmıyor. Tüm blok seviyesi ekran 'stilleri' display kullanılırken tamamen 'gizlidir': hiçbiri, oysa görünürlük ile: gizli; öğenin kendisi gizlidir, ancak yine de DOM'da görsel bir alan kaplar. Umarım bu işleri düzeltir