Chromium için yeni mantıksal mülk kısaltmaları ve yeni içe yerleştirilmiş mülkler.
Chromium 69'dan (3 Eylül 2018) beri mantıksal özellikler ve değerler, geliştiricilerin fiziksel yön ve boyut stilleri yerine mantıksal yön ve boyut stilleri aracılığıyla uluslararası düzenlerinin kontrolünü sürdürmesine yardımcı oldu. Chromium 87'de, bu mantıksal özellikleri ve değerlerin daha kolay yazılmasını sağlamak için kısaltmalar ve ofsetler kullanılmıştır. Bu sayede Chromium, 66 yılından beri kısaltmaları destekleyen Firefox'a yetişmiştir. Safari, teknik önizlemesinde bu özellikleri kullanıma sunmuştur.
Belge akışı
Mantıksal özellikler, satır içi ve blok eksenler hakkında bilgi sahibiyseniz ve bu bilgileri tekrar gözden geçirmek istemiyorsanız ileri atlayabilirsiniz. Aksi takdirde, kısa bir hatırlatma yapalım.
İngilizcede harfler ve kelimeler soldan sağa doğru ilerlerken paragraflar yukarıdan aşağıya doğru dizilir. Geleneksel Çince'de harfler ve kelimeler yukarıdan aşağıya, paragraflar ise sağdan sola doğru yazılır. Yalnızca bu 2 durumda, bir paragrafa "margin top" yazan CSS yazarsak yalnızca 1 dil stilini uygun şekilde boşluklandırırız. Sayfa İngilizceden geleneksel Çince'ye çevrildiyse yeni dikey yazma modunda kenar boşluğu anlamlı olmayabilir.
Bu nedenle, kutunun fiziksel tarafı uluslararası olarak pek kullanışlı değildir. Böylece, kutu modelinin fiziksel ve mantıksal yönleri hakkında bilgi edinerek birden fazla dili destekleme süreci başlar.
Chrome Geliştirici Araçları'nda p öğesini hiç incelediniz mi? Bu durumda, varsayılan kullanıcı aracısı stillerinin fiziksel değil mantıksal olduğunu fark etmiş olabilirsiniz.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Chromium'un Kullanıcı Aracı Stil Sayfası'ndan CSS
Kenar boşluğu, İngilizce okuyucuların inanabileceği gibi üstte veya altta değil.
block-start ve block-end! Bu mantıksal özellikler, İngilizce okuyucunun üst ve alt kısmına benzer ancak aynı zamanda Japon okuyucunun sağ ve sol kısmına da benzer. Bir kez yazılır, her yerde çalışır.
Normal akış, web sayfasının bu çok yönlülüğün parçası olduğunda kasıtlı olarak gerçekleşir. Sayfa içeriği, belge yön değişikliklerine göre güncellendiğinde akışta düzen ve öğeleri dikkate alınır. Akışın "içinde" ve "dışında" olma hakkında daha fazla bilgiyi MDN'de veya CSS Görüntü Modülü spesifikasyonunda bulabilirsiniz. Mantıksal özelliklerin akışta olması gerekmese de yön değiştikçe ağır işlerin çoğunu sizin için onlar yapar. Akışın anlamı, harflerin, kelimelerin ve içeriğin ilerlemesi gereken yöndür. Bu, bizi mantıksal yol tariflerini engellememize ve satır içi yapmaya yönlendirir.
Blok yönü, yeni içerik bloklarının izlediği yöndür. Örneğin, "Sonraki paragrafı nereye koyacağım?" diye kendinize sorabilirsiniz. Bunu bir "içerik bloğu" veya "metin bloğu" olarak düşünebilirsiniz.
Her dil, bloklarını düzenler ve ilgili block-axis'ye göre sıralar. block-start, paragrafın ilk yerleştirildiği taraftır. block-end ise yeni paragrafların aktığı taraftır.
Örneğin, geleneksel Japon el yazısında blok yönü sağdan sola doğrudur:
Satır içi yön, harflerin ve kelimelerin gittiği yöndür. Yazarken kolunuzun ve elinizin gittiği yönü düşünün. Bunlar inline-axis boyunca hareket eder.
inline-start yazmaya başladığınız taraf, inline-end ise yazının sona erdiği veya kaydırıldığı taraftır. Yukarıdaki videoda inline-axis yukarıdan aşağıya doğru akarken sonraki videoda sağdan sola doğru akar.
flow-relative olması, bir dil için yazılan stillerin bağlama uygun olacağı ve diğer dillere uygun şekilde uygulanacağı anlamına gelir. İçeriklerin akışı, yayınlandığı dile göre belirlenir.
Yeni kısayollar
Aşağıdaki kısayollardan bazıları tarayıcı için yeni özellikler değil, aynı anda hem blok hem de satır içi kenarlarda değer ayarlayabilme avantajından yararlanarak stilleri yazmanın daha kolay yollarıdır. inset-* mantıksal özellikleri, mutlak konumları mantıksal özelliklerle belirtmenin daha önce uzun yolları olmadığından yeni olanaklar sunmaktadır. Ancak ek açıklamalar ve kısayollar o kadar iyi bir uyum içindedir ki Chromium 87'de kullanıma sunulan tüm yeni mantıksal mülk özelliklerinden bahsedeceğim.
Kenar boşlukları
Yeni özellikler sunmadık ancak bazı kullanışlı kısayollar ekledik:
margin-block ve
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
"Üst ve alt" veya "sol ve sağ" için kısaltma yoktu… ta ki şimdiye kadar!
Muhtemelen margin: 10px; kısaltmasını kullanarak 4 tarafın tümüne referans veriyorsunuzdur. Artık mantıksal mülk kısaltmasını kullanarak 2 tamamlayıcı tarafa kolayca referans verebilirsiniz.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Dolgu kısayolları
Yeni özellikler sunulmasa da çok kullanışlı kısayollar eklendi:
padding-block ve
padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Ayrıca inline ücretsiz kısaltma grubu:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Ekleme ve kısayollar
top, right, bottom ve left fiziksel mülklerinin tümü inset mülkü için değer olarak yazılabilir. position değerinin herhangi biri, kenarların içe yerleştirilmesiyle ayarlanmasından yararlanabilir.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
Bu size hemen kolaylık sağlar. İç içe ekleme, fiziksel kenarların kısaltmasıdır ve kenar boşluğu ve dolgu gibi çalışır.
Yeni özellikler
Fiziksel taraf kısaltmaları ne kadar heyecan verici olursa olsun, ek inset kısaltmalarının sunduğu mantıksal özelliklerden daha da fazlası var. Bu kısaltmalar, geliştiricilere yazma kolaylığı sağlar (yazmak daha kısadır) ancak akışla ilgili oldukları için sayfa düzeninin potansiyel erişimini artırır.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Daha fazla bilgi ve yer paylaşımlı kısa ve uzun biçimlerin tam listesi için MDN'yi ziyaret edin.
Kenarlık kısaltmaları
Kenarlık ve iç içe yerleştirilmiş color, style ve width özelliklerinin tümü de yeni mantıksal kısayollara sahiptir.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
Daha fazla bilgi ve kenarlık kısa ve uzun biçimlerinin tam listesi için MDN'yi ziyaret edin.
Mantıksal mülk <figure> örneği
Tüm bunları küçük bir örnekte bir araya getirelim. Mantıksal mülkler, farklı yazım ve doküman yönlerini ele almak için bir resmi altyazı ile düzenleyebilir.
Veya deneyin!
Bir <figure> ve birkaç mantıksal mülkle bir kartı uluslararası olarak duyarlı hale getirmek için çok fazla şey yapmanız gerekmez. Uluslararası ölçekteki tüm bu CSS'lerin birlikte nasıl
çalıştığını merak ediyorsanız bunun küçük ve anlamlı bir giriş olduğunu umuyorum.
Poli doldurma ve tarayıcılar arası destek
Cascade veya derleme araçları, hem eski hem de yeni tarayıcılara, güncellenmiş mantıksal özelliklerle uygun şekilde ayrılmış olmalarına uygun seçeneklerdir. Şelale yedekleri için fiziksel bir mülkü mantıksal bir mülkle takip edin. Tarayıcı, stil çözümleme sırasında bulduğu "son" mülkü kullanır.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Ancak bu, herkes için tam bir çözüm değildir. Aşağıda, belirli dilleri hedeflemek için :lang() sözde seçicisinden yararlanan, fiziksel aralıkları uygun şekilde ayarlayan ve destekleyen tarayıcılar için mantıksal aralığı sunan elle yazılmış bir yedek verilmiştir:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
Fiziksel mülk yedekleri sağlayıp sağlamayacağınızı belirlemek için @supports değerini de kullanabilirsiniz:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion ve diğerlerinde, çok çeşitli yedek çözümler veya çözümler sunan otomatik paketleyici ve/veya derleme zamanı teklifleri bulunur. Araç zincirinizle ve genel site stratejinizle hangilerinin eşleştiğini görmek için her birine göz atın.
Sırada ne var?
CSS'de mantıksal özellikler sunulacak. Bu özellik henüz kullanıma sunulmadı. Ancak kısaltmaların büyük bir kısmı hâlâ eksik. Bu GitHub sorunu için çözüm henüz bulunamadı. Taslakta geçici bir çözüm var. Bir kutunun tüm mantıksal taraflarına kısayol kullanarak stil uygulamak isterseniz ne olur?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
Mevcut taslak öneriye göre, mantıksal eşdeğerin uygulanmasını sağlamak için her kısaltmada logical yazmanız gerekir. Bu da bazı kullanıcılar için çok KURU bir yöntem gibi görünebilir.
Bunu blok veya sayfa düzeyinde değiştirmeyle ilgili başka öneriler de var ancak bu, fiziksel taraflar varsayılarak stillerdeki mantıksal kullanımlara sızabilir.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
Bu zor bir soru. Oy verin, fikrinizi belirtin. Görüşlerinizi öğrenmek isteriz.
Mantıksal mülkler hakkında daha fazla bilgi edinmek veya bu konuyu daha ayrıntılı incelemek ister misiniz? MDN'de kılavuz ve örneklerle birlikte ayrıntılı bir referans bulabilirsiniz. 🤓
Geri bildirim
- Akışa bağlı kısaltmaların CSS söz diziminde değişiklik önermek için öncelikle csswg-drafts deposundaki mevcut sorunları kontrol edin. Mevcut sorunlardan hiçbiri önerinizle eşleşmiyorsa yeni bir sorun oluşturun.
- Chromium'un akışa göre kısayollar uygulamasındaki hataları bildirmek için önce Chromium Hata İzleyici'de mevcut sorunları kontrol edin. Mevcut sorunlardan hiçbiri hatanızın açıklamasıyla eşleşmiyorsa yeni bir sorun oluşturun.