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 özelliklerin ve değerlerin yazılmasını biraz daha kolaylaştırmak için kısayollar ve ofsetler kullanıma sunuldu. Bu sayede Chromium, kısaltmaları 66 sürümünden beri destekleyen Firefox'a yetişmiş oldu. 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ı alanda çok 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 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
Kenarlık, İngilizce okuyucunun düşündüğü gibi üstte veya altta değildir.
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 nedenle, mantıksal yönleri engelleyip satır içi hale getiriyoruz.
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 taraftır. inline-end
ise yazmanın bittiği veya sarıldığı taraftır. Yukarıdaki videoda inline-axis
yukarıdan aşağıya doğru akarken sonraki videoda sağdan sola doğru akar.inline-axis
flow-relative
olması, bir dil için yazılan stillerin bağlama uygun şekilde diğer dillere uygulanacağı anlamına gelir. İçerik, yayınlandığı dile göre akacaktır.
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.
Marj kısaltmaları
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, hemen kullanışlı görünecektir. İç 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ısayollar, geliştiricilere içerik oluşturma kolaylığı sağlar (yazması daha kısadır) ancak akışa göre oldukları için düzenin potansiyel erişimini de 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 işlemek için bir resmi altyazı ile düzenleyebilir.
Dilerseniz deneyebilirsiniz.
Bir <figure>
ve birkaç mantıksal mülkle bir kartı uluslararası olarak duyarlı hale getirmek için çok fazla şey yapmanız gerekmez. Uluslararası CSS'lerin birlikte nasıl çalıştığını merak ediyorsanız bu küçük ve anlamlı girişin işinize yarayacağını umuyoruz.
Poli doldurma ve tarayıcılar arası destek
Eski ve yeni tarayıcıların, güncellenmiş mantıksal özelliklerle düzgün şekilde aralıklı olması için Cascade veya derleme araçları 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 vardır. 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 öneri, mantıksal eşdeğerin uygulanmasını sağlamak için her kısaltmada logical
yazmanız gerektiği anlamına gelir. Bu da bazı kullanıcılar için çok DRY 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 ..? */
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 göre kısaltmaların CSS söz diziminde değişiklik önermek için önce 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.