Görüntüleme Özelliğini Kazmak: Kutu Oluşturma

Bu, CSS'deki display özelliğiyle ilgili kısa bir dizi makalenin ikincisidir. Serinin ilk yazısını “Görüntünün İki Değeri” bölümünde okuyabilirsiniz. display özelliği, sahip olduğumuz tüm farklı yerleşim yöntemlerinin temelini oluşturduğu için anlaşılması çok faydalı bir özelliktir.

display değerlerinin birçoğunun kendi özellikleri olsa da, birçok terim ve fikir display detaylandırılmıştır. Bu, bu belirtimi anlamanın, esasen display değerlerini ayrıntılandıran belirtimleri anlamanıza yardımcı olduğu anlamına gelir. Bu yazıda, display — none ve contents kutu oluşturma değerlerine bir göz atacağım.

Her şey Bir Kutu

CSS'de her şey kutular oluşturur. Bir web sayfası aslında bir dizi blok ve satır içi kutudur; DevTools'u favori tarayıcınızda açarsanız ve sayfadaki öğeleri seçmeye başlarsanız çok iyi anlayabilirsiniz. Düzeni oluşturan kutuları ve bunların kenar boşluklarının, dolgularının ve kenarlıklarının nasıl uygulandığını görebilirsiniz.

Kontrol Kutusu Üretimi

none ve contents display , kutuların görünüp görünmeyeceğini belirler. İşaretlemenizde öğeleriniz varsa ve bunların CSS'de bir kutu oluşturmasını istemiyorsanız, kutunun oluşturulmasını bir şekilde bastırmanız gerekir. Yapmak isteyebileceğiniz iki olası şey vardır. Hangileri:

• Bir kutunun ve tüm çocuklarının oluşumunu önleyin.
• Bir kutunun oluşturulmasını önleyin, ancak yine de çocukları görüntüleyin.

Bu senaryoların her birine sırayla bakabiliriz.

görüntü yok

display none değeri, bir kutunun ve o kutunun tüm alt öğelerinin oluşmasını nasıl engellediğimizdir. Sanki eleman orada yokmuş gibi davranır. Bu nedenle, bir bağlantıyı etkinleştirdikten sonra daha sonra ortaya çıkacağı için, bu içeriği tamamen gizlemeyi düşündüğünüz durumlarda yararlıdır.

Paragraf, sırasız liste ve başka bir paragraf içeren bir örneğim varsa, öğelerin normal akışta görüntülendiğini görebilirsiniz. ul , uygulanan bir arka plana ve kenarlığa ve ayrıca bir miktar dolguya sahiptir.

ul öğesine display: none eklersem, ul öğesinin alt ul artı arka planı ve kenarlığı alarak görsel ekrandan kaybolur.

display: none kullanırsanız, içeriği web sitesinin tüm kullanıcılarından gizler. Buna ekran okuyucu kullanıcıları da dahildir. Bu nedenle, bunu yalnızca niyetiniz kutunun ve içindeki her şeyin herkese tamamen gizlenmesiyse kullanmalısınız.

Ekran okuyucular gibi yardımcı teknoloji kullanıcıları için ek bilgiler eklemek isteyebileceğiniz ancak diğer kullanıcılar için gizlemek isteyebileceğiniz durumlar vardır; bu gibi durumlarda farklı bir teknik kullanmanız gerekir. Scott O 'Hara, “Inclusively Hidden” adlı makalesinde bazı mükemmel önerilerde bulunuyor.

display: none kullanmak bu nedenle oldukça basittir. Bir kutunun ve içeriğin ekrandan, gişe ağacından ve erişilebilirlik ağacından (sanki hiç orada olmamış gibi) kaybolmasını istediğiniz bir durumda kullanın.

ekran: içindekiler

İkinci senaryo için, görüntülemenin çok daha yeni bir değerine bakmamız gerekiyor. Değer display: contents , uygulandığı kutuyu kutu ağacından kaldırır, aynı şekilde display: none yapar, ancak çocukları yerinde bırakır. Bu, daha sonra düzenlerimizde yapabileceğimiz şeyler açısından bazı yararlı davranışlara neden olur. Basit bir örneğe bakalım ve sonra daha fazlasını keşfedelim.

Daha önce olduğu gibi aynı örneği kullanıyorum, ancak bu sefer ul üzerinde display: contents content kullandım. Liste öğeleri artık görünür durumda, ancak arka planları ve kenarlıkları yok ve sayfaya herhangi bir ul eklemeden li öğeleri eklemişsiniz gibi davranıyorlar.

Bir kutuyu çıkarmanın ve çocukları tutmanın yararlı olmasının nedeni, diğer display değerlerinin davranış biçiminden kaynaklanmaktadır. display değerini değiştirdiğimizde bunu bir kutu üzerinde yapıyoruz ve son makalede anlattığım gibi o kutunun doğrudan çocukları. Bir öğenin CSS kurallarına display: flex , o öğe blok düzeyinde bir kutu olur ve doğrudan çocuklar esnek öğeler olur. Bu esnek öğelerin çocukları normal akışa döner (esnek düzenin parçası değildirler).

Bu davranışı sonraki örnekte görebilirsiniz. Burada flex gösterecek şekilde ayarlanmış bir içeren öğem var, dört doğrudan çocuğu, üç div öğesi ve a ul . ul iki liste öğesi vardır. Doğrudan çocukların tümü esnek yerleşime katılır ve esnek öğeler olarak düzenlenir. Liste öğeleri doğrudan alt öğeler değildir ve bu nedenle ul kutusunun içinde liste öğeleri olarak görüntülenir.

Bu örneği alıp ul display: contents eklersek, kutu görsel gösterimden kaldırılır ve şimdi çocuklar esnek yerleşime katılırlar. Doğrudan çocuk olmadıklarını görebilirsiniz. Doğrudan alt evrensel seçici ( .wrapper > * ) tarafından div ve ul öğelerinin olduğu gibi seçilmezler ve kendilerine verilen arka planı korurlar. Olan tek şey, ul içeren kutunun kaldırılmış olması, diğer her şey normal şekilde devam ediyor.

Erişilebilirlik ve anlamsal veriler için önemli olan, ancak içeriği esnek veya ızgara düzeniyle düzenlememizi engelleyebilecek ek bir kutu oluşturan HTML öğelerini dikkate alırsak, bunun potansiyel olarak çok yararlı etkileri vardır.

Bu Bir CSS “Sıfırlama” Değildir

display: contents kullanmanın bir yan etkisinin, öğe üzerindeki kenar boşluğu ve dolgunun kaldırılması olduğunu fark etmiş olabilirsiniz. Bunun nedeni, CSS Kutu Modelinin bir parçası olan kutuyla ilgili olmalarıdır. Bu, display: contents öğesinin bir öğedeki dolgu ve kenar boşluğundan hızla kurtulmanın iyi bir yolu olduğunu düşünmenize yol açabilir.

Bu, Adrian Roseli'nin vahşi doğada gördüğü bir kullanımdır; bunu yapmanın sorunlarını açıklayan ayrıntılı bir yazı yazacak kadar endişeliydi — “ display: contents bir CSS sıfırlaması değildir.” Ortaya koyduğu sorunlardan bazıları, şu anda görüntülü tarayıcılarda bulunan talihsiz bir erişilebilirlik sorunundan kaynaklanmaktadır: aşağıda tartışacağız. Bununla birlikte, bu sorunlar çözüldüğünde bile, yalnızca kenar boşluğundan ve dolgudan kurtulmak için kutu ağacından bir öğeyi çıkarmak biraz aşırıdır.

Başka bir şey olmazsa, sitenin gelecekteki bakımı için sorunlu olurdu, gelecekteki bir geliştirici neden bu gizemli kutuya herhangi bir şey uygulayamadıklarını merak edebilir - kaldırılmış olduğu gerçeğini gözden kaçırabilir! Kenar boşluğuna ve dolgunun 0 olmasına ihtiyacınız varsa, gelecekteki kendinize bir iyilik yapın ve onları her zamanki gibi 0 ayarlayın. display: contents .

Ayrıca display: contents content ve CSS Grid Layout alt ızgarası arasındaki farkı belirtmekte fayda var. Burada display: contents , kutuyu, arka planı ve kenarlığı ekrandan tamamen kaldırır, bir ızgara öğesini bir alt ızgara yapmak, o öğedeki herhangi bir kutu stilini korur ve iç içe geçmiş öğelerin aynı ızgarayı kullanabilmesi için iz boyutlandırmasından geçer. “CSS Grid Level 2: Here Comes Subgrid” başlıklı makalemde daha fazla bilgi edinin.

Erişilebilirlik Sorunları ve görüntüleme: içerikler

Şu anda ciddi bir sorun display: contents , en yararlı olacağı şey için kullanışlı değil. Görüntüleme için bariz durumlar display: contents , içeriğinizin ekran okuyucuları veya diğer yardımcı cihazları kullananlar tarafından daha kolay anlaşılmasını sağlayan işaretleme eklemek için ek kutuların gerekli olduğu durumlardır.

İlk ekrandaki listemizin ul öğesi display: contents CodePen mükemmel bir örnektir. Aynı görsel sonucu, işaretlemeyi düzleştirerek ve hiç liste kullanmayarak elde edebilirsiniz . Bununla birlikte, içerik anlamsal olarak bir listeyse, en iyi şekilde bir ekran okuyucu tarafından bir liste olarak anlaşılır ve okunursa, bir liste olarak işaretlenmelidir.

Daha sonra alt öğelerin bir esnek veya ızgara düzeninin parçası olmasını istiyorsanız, tıpkı ul kutusu orada değilmiş gibi, kutuyu büyülemek ve öyle yapmak için display: contents kullanabilmelisiniz - yine de bırakın anlambilim yerinde. Şartname, durumun böyle olması gerektiğini söylüyor,

“ display özelliğinin bir öğenin semantiği üzerinde hiçbir etkisi yoktur: bunlar belge dili tarafından tanımlanır ve CSS'den etkilenmez. Bir öğenin ve onun soyundan gelenlerin işitsel/konuşma çıktısını ve etkileşimini de etkileyen none değerinin yanı sıra, display özelliği yalnızca görsel düzeni etkiler: amacı, tasarımcıların bir öğenin düzen davranışını, altta yatan öğeyi etkilemeden değiştirme özgürlüğüne izin vermektir. belge semantiği.”

Daha önce tartıştığımız gibi, none değeri öğeyi ekran okuyuculardan gizlemez, ancak diğer display değerleri yalnızca işlerin görsel olarak nasıl görüntüleneceğini değiştirmemize izin vermek için vardır. Belgenin semantiğine dokunmamalıdırlar.

Bu nedenle, display: contents aslında onu uygulayan iki tarayıcıdaki (Chrome ve Firefox) erişilebilirlik ağacından öğeyi kaldırmak olduğunu fark etmek çoğumuzu şaşırttı. Bu nedenle, belge semantiğini değiştirerek, ekran okuyucunun, display: contents kullanılarak ul kaldırıldıktan sonra bir listenin liste olduğunu bilmemesini sağlamak. Bu bir tarayıcı hatasıdır ve bunda ciddi bir hatadır.

Geçen yıl, Hidde de Vries bu sorunu “ display:contents ile Daha Erişilebilir İşaretleme” yazısında yazdı ve farkındalığı artırmak ve bir düzeltme üzerinde çalışmalarını sağlamak için çeşitli tarayıcılara karşı yararlı bir şekilde sorunları dile getirdi. Firefox, sorunu kısmen düzeltti, ancak düğme gibi belirli öğelerle ilgili sorunlar devam ediyor. Sorun, Chrome'da aktif olarak çalışılıyor. WebKit için de bir sorun var. Sorunlardan etkilenecek olan görüntüleme: içerikler için kullanım örnekleriniz varsa, bu hataları yıldızla işaretlemenizi tavsiye ederim.

Bu sorunlar düzeltilene ve sorunu gösteren tarayıcı sürümleri kullanım dışı kalana kadar, anlamsal bilgi taşıyan ve yardımcı teknolojiye maruz bırakılması gereken herhangi bir şeyde display: content kullanırken çok dikkatli olmanız gerekir. Adrian Roseli'nin belirttiği gibi,

"Şimdilik, lütfen yalnızca görüntüleme: içeriğini yardımcı teknolojiyle test edecekseniz ve sonuçların kullanıcılar için işe yaradığını onaylayacaksanız kullanın."

display: contents bu endişe olmadan güvenle kullanabileceğiniz yerler var. Bunlardan biri, eski tarayıcılarda esnek mizanpajlar ızgaranız için yedekler oluşturmak üzere ek işaretleme eklemeniz gerekirse olabilir. display: contents content'i destekleyen tarayıcılar ayrıca grid ve flexbox'ı da destekler, bu nedenle eklenen gereksiz div öğelerinin display: contents . Aşağıdaki örnekte, satır sarmalayıcılarla tamamlanmış, kayan nokta tabanlı bir ızgara oluşturdum.

Daha sonra, tüm öğelerin ızgara öğeleri haline gelmesine ve dolayısıyla ızgara düzeninin bir parçası olabilmesine izin vermek için satır sarmalayıcılarını kaldırmak için display: contents content'i kullanırım. Bu, gelişmiş mizanpajlar için yedekler oluştururken size ek bir araç sağlayabilir, çünkü fazladan işaretleme eklemeniz gerekirse, ızgara veya esnek mizanpajınızı yaparken display: content ile kaldırabilirsiniz. Bu kullanımın herhangi bir soruna yol açması gerektiğine inanmıyorum - ancak herhangi biri benden daha iyi erişilebilirlik bilgisine sahipse ve bir soruna işaret edebilirse, lütfen bunu yorumlarda yapın.

Toplama

Bu makale, display özelliğinin kutu oluşturma değerlerine bir göz atmıştır. Umarım şimdi display: none - bir kutuyu ve tüm çocukları tamamen kaldıran ve display: contents yalnızca kutunun kendisini kaldıran farklı davranışını anlamışsınızdır. Erişilebilirlik söz konusu olduğunda bu yöntemleri kullanmanın olası sorunlarını da anlamalısınız.