Görüntü Özelliğini Kazmak: Görüntünün İki Değeri

Bir esnek veya ızgara düzeni, display: flex veya display: grid beyan etmenizle başlar. Bu düzen yöntemleri, CSS display özelliğinin değerleridir. Bu özellik hakkında kendi başına çok fazla konuşmama eğilimindeyiz, bunun yerine flex veya grid değerlerine odaklanıyoruz, ancak display ve nasıl tanımlandığı hakkında anlamanız gereken ve kullandıkça hayatınızı çok daha kolaylaştıracak bazı ilginç şeyler var. Düzen için CSS.

Kısa bir serinin ilki olan bu makalede, Level 3 spesifikasyonunda display değerlerinin nasıl tanımlandığına bir göz atacağım. Bu, CSS'nin önceki sürümlerinde display nasıl tanımladığımızla ilgili bir değişikliktir. İlk başta, uzun yıllardır CSS yapan bizler için olağandışı görünse de, bu değişikliklerin bir öğe üzerindeki display değerini değiştirdiğimizde neler olduğunu açıklamaya gerçekten yardımcı olduğunu düşünüyorum.

Blok ve Satır İçi Öğeler

CSS'de yeni olan insanlara öğrettiğimiz ilk şeylerden biri blok ve satır içi öğeler kavramlarıdır. Sayfadaki bazı öğelerin display: block olduğunu ve bu nedenle belirli özelliklere sahip olduklarını açıklayacağız. Kendilerine mümkün olduğu kadar çok yer kaplayarak satır içi yönde uzanırlar. Yeni bir hatta geçerler; onlara genişlik, yükseklik, kenar boşluğu ve dolgu verebiliriz ve bu özellikler sayfadaki diğer öğeleri onlardan uzaklaştırır.

Ayrıca bazı öğelerin display: inline olduğunu da biliyoruz. Satır içi öğeler bir cümledeki kelimeler gibidir; yeni bir satıra geçmezler, bunun yerine aralarında bir beyaz boşluk karakteri ayırırlar. Kenar boşlukları ve dolgu eklerseniz, bu görüntülenir ancak diğer öğeleri uzaklaştırmaz.

Blok ve satır içi öğelerin davranışı, CSS için esastır ve doğru şekilde işaretlenmiş bir HTML belgesinin varsayılan olarak okunabilir olacağı gerçeğidir. Bu düzen, "Blok ve Satır İçi Düzen" veya "Normal Akış" olarak adlandırılır, çünkü onlara başka bir şey yapmazsak, öğelerin kendilerini düzenleme şekli budur.

display İç ve Dış Değerleri

Blok ve satır içi öğeleri anlıyoruz, ancak bir öğe display: grid ? Bu tamamen farklı bir şey mi? Üzerinde display: grid belirttiğimiz bir bileşene bakarsak, mizanpajdaki ana öğe açısından block level bir öğe gibi davranır. Öğe uzar ve satır içi boyutta mümkün olduğu kadar yer kaplar, yeni bir satırda başlar. Düzenin geri kalanıyla birlikte nasıl davrandığı açısından tıpkı bir block öğesi gibi davranır. Yine de display: block demedik, değil mi?

Sahip olduğumuz ortaya çıkıyor. Görüntü özelliğinin 3. Düzeyinde, display değeri iki anahtar kelime olarak tanımlanır. Bu anahtar sözcükler, inline veya block olacak olan ekranın dış değerini tanımlar ve bu nedenle, öğenin diğer öğelerle birlikte mizanpajda nasıl davranacağını tanımlar. Ayrıca, öğenin iç değerini veya bu öğenin doğrudan çocuklarının nasıl davrandığını da tanımlarlar.

Bu, display: grid dediğinizde, gerçekte söylemek istediğiniz şeyin display: block grid olduğu anlamına gelir. Blok düzeyinde bir ızgara kabı istiyorsunuz. Tüm blok özniteliklerine sahip olacak bir öğe — ona yükseklik ve genişlik, kenar boşluğu ve dolgu verebilirsiniz ve kapsayıcıyı doldurmak için gerilir. Bununla birlikte, bu kabın çocuklarına grid iç değeri verilmiştir, böylece ızgara öğeleri haline gelirler. Bu ızgara öğelerinin nasıl davrandığı CSS Izgara Spesifikasyonunda tanımlanmıştır: display özelliği, tarayıcıya kullanmak istediğimiz düzen yönteminin bu olduğunu söylememiz için bir yol sağlar.

display hakkında bu şekilde düşünmenin inanılmaz derecede faydalı olduğunu düşünüyorum; çeşitli mizanpaj yöntemleriyle ne yaptığımızı doğrudan açıklar. display: inline flex belirtecek olsaydınız, ne beklerdiniz? Umarım, esnek öğeler olan çocuklarla satır içi öğe gibi davranan bir kutu.

Bu yeni şekilde display hakkında düşünülerek düzgünce açıklanan birkaç şey daha var ve bunlardan bazılarına bu makalenin geri kalanında bir göz atacağım.

Daima Normal Akışa Dönüyoruz

Bu iç ve dış görüntü özelliklerini düşünürken, görüntü değeriyle hiç uğraşmazsak ne olacağını düşünmek yardımcı olabilir. Biraz HTML yazıp bir tarayıcıda görüntülerseniz, Blok ve Satır İçi Düzen veya Normal Akış elde edersiniz. Öğeler, block veya inline öğeler olarak görüntülenir.

Aşağıdaki örnek, div display: flex (iki doğrudan çocuk) artık esnek öğeler haline getirerek bir medya nesnesine dönüştürdüğüm bazı işaretlemeleri içeriyor, bu nedenle görüntü artık içerikle aynı sırada. Ancak içerikte görüyorsanız, yine normal akışta görüntülenen bir başlık ve bir paragraf var. Medya nesnesinin doğrudan çocukları esnek öğeler haline geldi; flex öğesindeki display değerini değiştirmediğimiz sürece çocukları normal akışa döner. Esnek kapsayıcının kendisi, sınırın ebeveyninin kenarına kadar uzanmasından da görebileceğiniz gibi bir blok kutudur.

Bu işlemle çalışırsanız, sayfanızdaki öğelerin bu güzel okunabilir normal akış düzeniyle kendini düzene sokması, buna karşı savaşmak ve her şeyi yerleştirmeye çalışmak yerine CSS'yi çok daha kolay hale getirir. Ayrıca, bir ekran okuyucunun veya belgede sekme yapan bir kişinin tam olarak yaptığı şey olan belge düzeniyle çalıştığınız için erişilebilirlik sorunlarına düşme olasılığınız daha düşüktür.

flow-root ve inline-block açıklama

inline-block değeri, bir süredir CSS yapan çoğumuza da aşinadır. Bu değer, inline bir öğede bazı blok davranışlarını elde etmenin bir yoludur. Örneğin, bir inline-block elemanının genişliği ve yüksekliği olabilir. display: inline-block özelliğine sahip bir öğe, B kilidi F ormatlama İçeriği (BFC) oluşturması bakımından da ilginç bir şekilde davranır.

Bir BFC, düzen açısından bazı yararlı şeyler yapar, örneğin, kayan noktalar içerir. Blok Biçimlendirme Bağlamları hakkında daha ayrıntılı bilgi almak için önceki makaleme bakın "CSS Düzenini ve Blok Biçimlendirme Bağlamını Anlamak". Bu nedenle display: inline-block demek size aynı zamanda bir BFC oluşturan bir satır içi kutu verir.

Keşfedeceğiniz gibi (yukarıda Blok Biçimlendirme Bağlamıyla ilgili makaleyi okursanız), açıkça bir BFC oluşturan daha yeni bir görüntüleme değeri vardır. Bu, flow-root değeridir. Bu değer, bir satır içi öğe yerine bir blokta bir BFC oluşturur.

• display: inline-block , satır içi kutuda size bir BFC verir.
• display: flow-root size bir blok kutusunda bir BFC verir.

Şimdi muhtemelen bunların biraz kafa karıştırıcı olduğunu düşünüyorsunuz: neden burada tamamen farklı iki anahtar kelimemiz var ve daha önce bahsettiğimiz iki değerli sözdizimine ne oldu? Bu, açıkça, display hakkında açıklamam gereken bir sonraki şeye, yani CSS'nin display özelliği açısından ele almamız gereken bir geçmişi olduğu gerçeğine götürür.

Ekranın Eski Değerleri

CSS2 Spesifikasyonu, display özelliği için aşağıdaki değerleri detaylandırdı:

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

Ayrıca, bu makalede ele almadığımız table-cell gibi çeşitli tablo iç özellikleri de tanımlanmıştır.

Daha sonra esnek ve ızgara düzenini desteklemek için bu değerlere görüntüleme için bazı değerler ekledik:

• grid
• inline-grid
• flex
• inline-flex

Not : Belirtim ayrıca Ruby belirtiminde okuyabileceğiniz Ruby Metnini desteklemek için ruby ve inline-ruby yakutu tanımlar.

Bunların tümü, CSS Mizanpajını bu şekilde açıklamak için spesifikasyon güncellenmeden önce tanımlanan display özelliği için tek değerlerdir. CSS ile ilgili çok önemli olan bir şey, web'i kırıp dökmememizdir; şeyleri basitçe değiştiremeyiz . Herkesin bu yeni iki değerli sözdizimini kullanması gerektiğine aniden karar veremiyoruz ve bu nedenle, bir geliştirici geri dönüp düzeltmedikçe, tek değerli sözdizimini kullanan şimdiye kadar yapılmış her web sitesi bozulacak!

Bu sorunu düşünürken, çoğu durumda daha az hata olan CSS tasarımındaki bu hatalar listesinin tadını çıkarabilirsiniz, çünkü geleceği görmek için bir kristal küre olmadan tasarlanmış şeyler! Ancak gerçek şu ki, web'i kıramayız, bu nedenle şu anda tarayıcıların görüntüleme için bir dizi tek değeri desteklediği ve belirtimin görüntüleme için iki değere geçtiği bu duruma sahibiz.

Bunu aşmanın yolu, tüm bu tek değerleri içeren eski ve kısa değerleri görüntülemek için belirtmektir. Bu, tek değerler ile yeni iki anahtar kelime değeri arasında bir eşlemenin tanımlanabileceği anlamına gelir. Bu da bize aşağıdaki değerler tablosunu verir:

Bunun nasıl çalıştığını açıklamak için bir ızgara kapsayıcı düşünebiliriz. İki değerli dünyada, aşağıdakileri içeren blok düzeyinde bir ızgara kabı oluştururuz:

 .container { display: block grid; }

Ancak, eski anahtar kelime, aşağıdakilerin aynı şeyi yaptığı anlamına gelir:

 .container { display: grid; }

Bunun yerine, bir satır içi ızgara kabı isteseydik, iki değerli dünyada şunu kullanırdık:

 .container { display: inline grid; }

Ve eski değerleri kullanıyorsanız:

 .container { display: inline-grid; }

Artık bu konuşmanın başladığı yere dönebilir ve display: inline-block 'a bakabiliriz. Tabloya baktığınızda, bunun iki değerli dünyada display: inline flow-root olarak tanımlandığını görebilirsiniz. Şimdi, iki değerli bir dünyada display: block flow-root olacak olan display: flow-root ile eşleşiyor. Bu şeylerin nasıl tanımlandığına dair biraz toparlama ve açıklama. İsterseniz, CSS'nin yeniden düzenlenmesi.

İki Değerli Sözdizimi için Tarayıcı Desteği

Henüz, tarayıcılar display özelliği için iki değerli sözdizimini desteklememektedir. Firefox için uygulama hatası burada bulunabilir. Uygulama - gerçekleştiğinde - esas olarak eski değerleri iki değerli sürümlere takmayı içerir. Bu nedenle, bu iki değerli sürümleri kodunuzda gerçekten kullanabilmeniz için uzun bir süre geçmesi muhtemeldir. Ancak, bu gerçekten bu makalenin konusu değil. Bunun yerine, iki-değerli modelin ışığında teşhir değerlerine bakmanın, neler olup bittiğini açıklamaya yardımcı olduğunu düşünüyorum.

CSS'de bir kutunun düzenini tanımladığınızda, düzendeki diğer tüm kutulara göre nasıl davranacağı açısından bu kutuya ne olacağını tanımlarsınız. Ayrıca o kutunun çocuklarının nasıl davranacağını da tanımlıyorsunuz. Eski anahtar kelimeler bu değerlerle eşleştiğinden, değerleri açıkça iki ayrı şey olarak beyan etmeden çok önce bu şekilde düşünebilirsiniz ve bu, display değerini değiştirdiğinizde ne olduğunu anlamanıza yardımcı olacaktır.