Mantıksal Özellikleri ve Değerleri Anlama

Geçmişte, CSS kendisini fiziksel boyutlara ve yönlere bağlayarak, öğelerin yerleşimini sola, sağa ve yukarıya ve aşağıya fiziksel olarak eşledi. Bir float left veya right , top , left , bottom ve right konumlandırma ofset özelliklerini kullanırız. Kenar boşluklarını, dolguyu ve kenarlıkları margin-top ve padding-left olarak ayarladık. Bu fiziksel özellikler ve değerler, yatay, yukarıdan aşağıya, soldan sağa yazma modunda ve yönünde çalışıyorsanız anlamlıdır.

Tüm mizanpajınız veya bazı öğeler için dikey yazma modunu kullanırsanız daha az anlamlı olurlar. Bu makalede, CSS'nin yazma modlarını desteklemek için nasıl değiştiğini açıklayacağım ve bunu yaparken, Flexbox ve Grid hakkında kafanızı karıştırabilecek bazı şeyleri açıklayacağım.

CSS Grid ile çalışmaya ve insanlara yeni spesifikasyonu açıklamaya başladığımda, grid-area özelliğinin dört satırı da ayarlamak için tek satırlık bir kestirme yol olarak kullanılabileceğini fark ettim. Bu nedenle, aşağıdaki üç örnek aynı öğe yerleşimiyle sonuçlanacaktır. Birincisi longhand özelliklerini kullanır, ikincisi her bir boyut için başlangıç ​​ve bitiş çizgilerini belirtir ve üçüncüsü grid-area kullanır.

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

grid-area kullandığımızda çizgilerin sırası aşağıdaki gibidir:

• ızgara-satır-başlangıç
• ızgara-sütun-başlangıç
• ızgara satır sonu
• ızgara-sütun-ucu

Benim (ve izleyicilerimdeki birçok kişinin) sorduğu ilk soru şuydu: "Bunlar neden CSS'deki diğer her şeyden alışık olduğumuz Üst, Sağ, Alt, Sol sırasını takip etmiyor?" Aslında bu değerlere ters sırada giderler: Üst, Sol, Alt, Sağ! CSS Çalışma Grubu aktif olarak işleri zorlaştırmaya mı çalışıyor?

Cevap, bu değerlerin, web'deki içeriğin ekranın fiziksel boyutlarıyla eşleştiği ve bir cümlenin ilk kelimesinin bulunduğu kutunun sol üst köşesinde yer aldığı varsayımından uzaklaşmış olmasıdır. grid-area satırların sırası grid-area , bu değerleri kısaca belirlediğimiz mevcut yöntemle hiç karşılaşmadıysanız tam anlamıyla mantıklıdır. Önce iki başlangıç ​​çizgisini, sonra iki bitiş çizgisini belirledik.

Bu, belgemizin yazma modunu dikey olarak değiştirirsek, bir bloğun konumunun ekranın fiziksel özelliklerinden ziyade belgenin yazma moduna göre kaldığı anlamına gelir. Bunu aşağıdaki örnekte deneyebilir, mizanpajımız için yazma modu değerini değiştirebilir ve tüm ızgaranın döndüğünü görebilirsiniz.

Yazma modları hakkındaki bu gerçeği bilmek, CSS Izgarası ve Flexbox'ın, ızgarayı mutlak konumlandırma ile kullanacağımız gibi üst, sağ, alt ve sol fiziksel boyutlarıyla eşleştirmek yerine neden start ​​ve end çizgilerine atıfta bulunduğunu da açıklar. Yukarıdaki örnekte, ilk öğe grid-area ve çizgi tabanlı konumlandırma kullanılarak konumlandırılmıştır.

 grid-area: 1 / 2 / 3 / 4;

Longhand'i kullanacak olsaydık, bu şöyle görünürdü:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

Her iki başlangıç ​​çizgisini, önce blok ekseni, ikinci satır içi ekseni ayarladık, ardından her boyutta bitiş çizgileri için aynı modeli takip ettik. Kılavuz hangi şekilde düzenlenirse düzenlensin, başlangıç ​​ve bitiş çizgileri kılavuza ve belgenin yazma moduna göre kalır.

Blok ve Satır İçi Ölçüler

Yeni yerleşimi anlamanın anahtarı olan Blok ve Satır içi boyutları kavramından daha önce bahsetmiştim. Siz yeni CSS ile çalışırken bu terimler ortaya çıkmaya devam edecek. Grid Layout'ta çalışırken her zaman bir blok ve bir satır içi eksen ile çalıştığımız için, iki boyutun Grid Layout bağlamında anlaşılması oldukça kolaydır, bu yüzden açıklamak için bir Grid demosu kullanacağım.

Blok boyutu, blokların sayfada düzenlendiği sıraya karşılık gelir. İngilizce bir metin paragrafı düşünürseniz. Her paragraf birbirinin altına yerleştirilir, bunların düzenlendiği yön blok boyutudur ve dolayısıyla Izgara Düzeninde bu Blok Eksenidir.

CSS Izgara Düzeninde Blok Ekseni, Satır Ekseni olarak da adlandırılır, bu nedenle Blok Ekseni özellikleri grid-row-start ve grid-row-end şeklindedir.

Bu nedenle satır içi eksen, kelimelerin bir cümlede düzenlendiği yönde blok ekseni boyunca ilerler. İngilizce'de bu eksen soldan sağa doğru çalışır. Izgara Düzeninde, Satır İçi Eksen, grid-column-start ve grid-column-end özelliklerine sahip Sütun Ekseni'dir.

Örneğimizin yazma modunu vertical-lr olarak değiştirirsek, yazma modu artık dikeydir, bu da blok ekseninin dikey olarak çalıştığı ve satır içi ekseninin çizgiler boyunca (yukarıdan aşağıya) çalıştığı anlamına gelir.

Dolayısıyla, Blok boyutu hakkında konuşursak, normal belge akışında metin paragraflarının düzenleneceği yönü tanımlıyoruz, Satır İçi boyut bir cümlenin çalıştığı yöndür.

Mantıksal Özellikler

Blok ve Satır içi boyutlar, başlangıç ​​ve bitiş çizgileriyle çalışmaya alıştığınızda, CSS'nin geri kalanındaki fiziksel boyutlara bağlantı garip gelmeye başlar. Ancak, var olan tüm fiziksel özelliklerin mantıksal sürümlerini tanımlayan bir belirtim vardır - İlk Genel Çalışma Taslağı olan CSS Mantıksal Özellikler ve Değerler belirtimi. Şu anda bu özellikleri iyi destekleyen tek tarayıcı Firefox'tur, ancak bunların nasıl çalıştığını anlamak yeni CSS hakkında düşünmenin iyi bir yolu olabilir, o yüzden bir göz atalım.

Her bölümü CodePen örnekleriyle resimledim, bu çalışmaları görmek için Firefox kullanmanız gerekecek!

Mantıksal Boyutlar

Mantıksal özellikler, blok ve satır içi boyut için bir başlangıç ​​ve bitiş özelliği tanımlar. Yükseklik ve genişlik özellikleri için bunun yerine block-size ve inline-size kullanırız. Ayrıca max-block-size , min-block-size , max-inline-size ve min-inline-size ayarlarını yapabiliriz. İngilizce çalışıyorsanız, yatay yukarıdan aşağıya bir dil, ardından block-size , ekranınızdaki bloğun fiziksel height , inline-size öğenin fiziksel width ifade eder. Blokların dikey olarak çalıştığı bir dilde çalışıyorsanız, ekranınıza baktığınızda width ve inline-size yüksekliği kontrol etmek için block-size görünecektir.

Bunu aşağıdaki demoda çalışırken görebilirsiniz. Bloğumun blok block-size 150 piksel ve inline-size 250 pikseldir. Düzenin nasıl ayarlanacağını görmek için writing-mode özelliğini değiştirin.

Mantıksal Sınırlar

Daha sonra aynı şekilde çalışan sınırları kontrol edecek özelliklere sahibiz. Sınırların fiziksel özellikleri şunlardır:

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Bunlar daha sonra longhands gibi biraz ayrıntılı hale gelen mantıksal eşlemelere sahiptir, ancak bunlar:

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

Aşağıdaki örnekte iki blok vardır; ilki yeşil bir border-block-start-color ve noktalı border-inline-end-style ayarlamak için mantıksal özellikleri kullanır. İkinci blok, border-top-color ve border-right right'ın fiziksel özelliklerini kullanır. Bunların nasıl davrandığını görmek için yazma modunu değiştirin.

Kenar Boşlukları ve Dolgu

Kenar boşlukları ve dolgu, sınır özelliklerimize benzer uzun ellere sahiptir, fiziksel özellikler şu şekildedir:

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Bunlar aşağıdaki gibi mantıksal özelliklere sahiptir:

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

Bu sonraki örnekte, ilk blokta padding-block-start ve ikinci blokta padding-top olarak ayarladım, Blok ve Satır içi eksenler değiştirildiğinde farkı görmek için yazma modunu değiştirdim.

Konumlandırma Ofsetleri

Fiziksel özelliklerin kullanıldığı başka bir yer de, position özelliğini kullanarak nesneleri konumlandırırken. position: absolute veya static varsayılan dışında başka bir position değerini ayarladıktan sonra, ya görünüm alanından ya da yeni bir konumlandırma bağlamı oluşturan bir üst öğeden ofsetleri kullanarak bir öğeyi konumlandırabiliriz.

Ofset fiziksel özellikleri şunlardır:

• top
• right
• bottom
• left

Diğer mantıksal özelliklerimizin modelini takip ederek aşağıdakilere sahibiz:

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Bunları aşağıdaki örnekte deneyin. Kenarlıklı kutunun position: relative ve küçük mor kare position: absolute . Fiziksel örnekte kare top: 50px piksel ve right: 20px olarak konumlandırılmıştır. Mantıksal sürümde offset-block-start: 50px ve offset-inline-end: 20px .

Mantıksal Değerler

Fiziksel boyutları kullanmaya alıştığımız bir başka yer de, bir şeyleri yüzdüğümüz veya temizlediğimiz zamandır. float için clear , left ve right değerlerin bazı mantıksal sürümlerine sahibiz.

• inline-start
• inline-end

Demoda, inline-start mantıksal sürümündeki mor bloğu yüzüyorum. Ayrıca kenar boşluğu için mantıksal özellikler kullanıyorum; bu, kenar boşluğunun her zaman bloktan sonra ve onu saran içerikten önce gelmesini sağlar. Açılır menüden vertical-rl değerini seçerek, fiziksel örnekte kenar boşluğunun -end yönünde uygulanmak yerine bloğun sağında nasıl bittiğini görebilirsiniz.

text-align için start ​​ve end değerleri de vardır. Başlamak için bir şeyi hizalamak, yazma modunun yatay veya dikey olmasına bakılmaksızın, onu satır içi eksenin başlangıcına, satır içi eksenin end kadar hizalayacaktır.

Mantıksal Özellikler ve Değerleri Bugün Kullanmak

Daha önce de belirtildiği gibi, şu anda mantıksal özellikler ve değerler için çok az tarayıcı desteği bulunmaktadır. Bununla birlikte, şimdi onlarla çalışmaya başlamak istiyorsanız ve seçenek, CSS'nizi bunları kullanarak yazmak ve ardından mantıksal özellikleri ve değerleri fiziksel karşılıklarına dönüştürmek için bir PostCSS eklentisi kullanmak olacaktır. Jonathan Neal'ın bu eklentisi, bu makalede anlattığım tüm özellikleri ve değerleri kapsar.

Ayrıca, Chrome hatasını ekleyerek ve bunları Edge Geliştirici Geri Bildirimi sitesinde oylayarak bu özelliklerin tarayıcı satıcıları tarafından benimsenmesini teşvik etmeye de yardımcı olabilirsiniz.

Bu özellikleri şimdi kullanmamaya karar verseniz bile, nasıl çalıştıklarını anlamak, yeni bir düzen ile çalışmak için önemli bir anlama parçasıdır. Grid veya Flex düzeninizi başlangıç ​​ve bitiş çizgilerine sahip olarak tanımlayan, blok ve satır içi boyutları düşünerek bu şeyler, düzenin nasıl çalıştığını anlamayı çok daha kolay hale getirecektir.

Daha fazla okuma

• MDN Web Belgeleri, ek örneklerle birlikte listelenen tüm mantıksal özelliklere ve değerlere sahiptir.
• CSS Izgarası, mantıksal değerler ve Yazma Modları, MDN
• CSS Yazma Modları, Jen Simmons, 24 yol