Chromium 69’dan beri (3 Eylül 2018), mantıksal özellikler ve değerler, geliştiricilerin uluslararası mizanpajlarını fiziksel yerine mantıksal, yön ve boyut stilleri aracılığıyla kontrol etmelerine 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 sevk edildi. Bu, Chromium’u kısayolları destekleyen Firefox’a kadar yakalar 66’dan beri. Safari onları kendi teknik önizleme.
Belge akışı #
Mantıksal özelliklere, satır içi ve blok eksenlere zaten aşina iseniz ve tazeleme istemiyorsanız, şunları yapabilirsiniz: atlayabilirsiniz. Aksi takdirde, burada kısa bir tazeleme var.
İngilizce’de, harfler ve sözcükler soldan sağa doğru akarken, paragraflar yukarıdan aşağıya istiflenir. Geleneksel Çince’de harfler ve kelimeler yukarıdan aşağıya, paragraflar sağdan sola istiflenir. Yalnızca bu 2 durumda, bir paragrafa “kenar boşluğunu üste” koyan CSS yazarsak, yalnızca 1 dil stilini uygun şekilde ayırırız. Sayfa İngilizce’den geleneksel Çince’ye çevrilirse, yeni dikey yazma modunda kenar boşluğu pekala bir anlam ifade etmeyebilir.
Bu nedenle, kutunun fiziksel tarafı uluslararası alanda pek kullanışlı değil. Böylece birden çok dili destekleme süreci başlar; kutu modelinin fiziksel ve mantıksal taraflarını öğrenmek.
hiç incelediniz mi p Chrome DevTools’daki öğe? Eğer öyleyse, fark etmiş olabilirsiniz ki, varsayılan Kullanıcı Aracısı stilleri fiziksel değil, mantıksaldır.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS’den Chromium’un Kullanıcı Aracısı Stil Sayfası
Kenar boşluğu, bir İngiliz okuyucunun inanabileceği gibi üstte veya altta değildir. Onun block-start Ve block-end! Bu mantıksal özellikler, bir İngiliz okuyucunun üst ve alt özelliklerine benzer, ancak Ayrıca sağ ve sol olarak bir Japon okuyucuya benzer. Bir kez yazılır, her yerde çalışır.
Normal akış, web sayfasının kasıtlı olarak bu çok yönlülüğün parçası olduğu zamandır. Sayfa içeriği, belge yönü değişikliklerine göre güncellendiğinde, düzen ve öğeleri akışta kabul edilir. Akışın “in” ve “out” hakkında daha fazlasını okuyun MDN’de veya içinde CSS Ekran Modülü özellikleri. Mantıksal özelliklerin akışta olması gerekmese de, yön değiştikçe sizin için ağır yükün çoğunu onlar üstlenir. Akış, harflerin, kelimelerin ve içeriğin birlikte hareket etmesi gereken yön anlamına gelir. Bu bizi blok ve satır içi mantıksal yönlere götürür.
Blok yönü, kendinize “sonraki paragrafı nereye koyacağınızı” sormak gibi, yeni içerik bloklarının izlediği yöndür. Bunu bir “içerik bloğu” veya “metin bloğu” olarak düşünebilirsiniz. Her dil bloklarını düzenler ve kendi bloklarına göre sıralar. block-axis. block-start paragrafın ilk yerleştirildiği taraftır, block-end yeni paragrafların aktığı taraftır.
Örneğin, geleneksel Japon el yazısında blok yönü sağdan sola doğru akar:
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; boyunca seyahat ediyorlar inline-axis. inline-start yazmaya başladığınız taraftır, inline-end yazının bittiği veya sarıldığı taraftır. Yukarıdaki video, inline-axis yukarıdan aşağıya, ancak bu sonraki videoda inline-axis sağdan sola akar.
Yapı flow-relative bir dil için yazılan stillerin bağlamsal olacağı ve diğer dillere uygun şekilde uygulanacağı anlamına gelir. İçerik, sunulduğu dile göre akacaktır.
Yeni kısaltmalar #
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 stiller yazmanın daha kolay yollarıdır. bu inset-* mantıksal özellikler Yapmak kendisinden önce mantıksal özelliklerle mutlak konumları belirlemenin uzun yol olmadığı için yeni yetenekler getirin. Ekler ve kısaltmalar birlikte o kadar iyi akıyor ki (hehe), size Chromium 87’ye gelen tüm yeni mantıksal özellikler özelliklerinden bir kerede bahsedeceğim.
Kenar boşluğu kısayolları #
Yeni yetenekler gönderilmedi, ancak bazı süper kullanışlı stenolar işe yaradı: margin-block Ve margin-inline.
uzun el
margin-block-start: 2ch;
margin-block-end: 2ch;
yeni steno
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;
“Üst ve alt” veya “sol ve sağ” için bir kısaltma yok… şimdiye kadar! Muhtemelen kısaltmasını kullanarak 4 tarafa da atıfta bulunuyorsunuz. margin: 10px;ve artık mantıksal özellik stenosunu kullanarak birbirini tamamlayan 2 tarafa kolayca başvurabilirsiniz.
Dolgu kısayolları #
Yeni yetenekler gönderilmedi, ancak daha süper kullanışlı stenolar şunları yaptı: padding-block Ve padding-inline.
uzun el
padding-block-start: 2ch;
padding-block-end: 2ch;
yeni steno
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;
Ve inline ücretsiz kısayol seti:
uzun el
padding-inline-start: 4ch;
padding-inline-end: 2ch;
yeni steno
padding-inline: 4ch 2ch;
İç metin ve kısaltmalar #
fiziksel özellikler top, right, bottom Ve left için değerler olarak yazılabilir. inset mülk. herhangi bir değer position ekli kenarların ayarlanmasından faydalanabilir.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
Fiziksel el yazısı
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Yeni fiziksel steno
position: absolute;
inset: 1px 2px 3px 4px;
Bu hemen uygun görünmelidir! Ek, fiziksel taraflar için bir kısaltmadır ve tıpkı kenar boşluğu ve dolgu gibi çalışır.
Yeni özellikler #
Kısa yoldan fiziksel taraflar ne kadar heyecan verici olsa da, ek özelliklerin getirdiği mantıksal özelliklerden çok daha fazlası var. inset stenolar. Bu kısayollar, geliştirici yazma kolaylığı sağlar (yazmak için daha kısadırlar), ancak aynı zamanda akışa bağlı oldukları için mizanpajın potansiyel erişimini artırır.
Fiziksel el yazısı
position: absolute;
top: 10px;
bottom: 10px;
mantıksal steno
position: absolute;
inset-block: 10px;
Fiziksel el yazısı
position: absolute;
left: 10px;
right: 20px;
mantıksal steno
position: absolute;
inset-inline: 10px 20px;
Daha fazla okuma ve bir ek stenografi ve uzun el yazısının tam listesi MDN’de mevcuttur.
Sınır kısaltmaları #
Kenarlık ve içiçe color, styleVe width özelliklerin hepsinde de yeni mantıksal kısayollar var.
Fiziksel el yazısı
border-top-color: hotpink;
border-bottom-color: hotpink;
mantıksal steno
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;
Fiziksel el yazısı
border-left-style: dashed;
border-right-style: dashed;
mantıksal steno
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;
Fiziksel el yazısı
border-left-width: 1px;
border-right-width: 1px;
mantıksal steno
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;
Daha fazla okuma ve bir border steno ve longhand’in tam listesi MDN’de mevcuttur.
mantıksal özellik <figure> örnek #
Küçük bir örnekte hepsini bir araya getirelim. Mantıksal özellikler, farklı yazma ve belge yönlerini işlemek için bir resmi resim yazısı ile düzenleyebilir.
Veya deneyin!
Uluslararası uyumlu bir kart yapmak için fazla bir şey yapmanıza gerek yok. <figure> ve birkaç mantıksal özellik. Tüm bu uluslararası düşünceli CSS’nin birlikte nasıl çalıştığını merak ediyorsanız, umarım bu küçük, anlamlı bir giriştir.
Polyfilling ve çapraz tarayıcı desteği #
Basamakla veya derleme araçları, güncellenmiş mantıksal özelliklerle düzgün aralıklarla yerleştirilmiş eski ve yeni tarayıcılara sahip olmak için uygun seçeneklerdir. Basamaklı geri dönüşler için, fiziksel bir özelliği mantıksal bir özellik ile takip edin ve tarayıcı, stil çözümlemesi sırasında bulduğu “son” özelliği kullanacaktı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;
}
Yine de bu herkes için tam bir çözüm değil. İşte el yazısıyla yazılmış bir geri dönüş. :lang() belirli dilleri hedeflemek için sözde seçici, fiziksel boşluklarını uygun şekilde ayarlar ve sonunda, destekleyen tarayıcılar için mantıksal aralığı sunar:
/* 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;
}
Ayrıca kullanabilirsiniz @supports fiziksel özellik yedeklerinin sağlanıp sağlanmayacağını belirlemek için:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
şımarık, PostCSS, Duygu ve diğerleri, çok çeşitli geri dönüşler veya çözümler içeren otomatik paketleyici ve/veya oluşturma süresi tekliflerine sahiptir. Araç zincirinize ve genel site stratejinize hangisinin uyduğunu görmek için her birine göz atın.
Sıradaki ne #
Daha fazla CSS mantıksal özellikler sunacak, henüz bitmedi! Yine de büyük bir eksiklik var ve bu konuda hala bir karar bekleniyor. GitHub sorunu. geçici bir çözüm var bir taslakta. Bir kutunun tüm mantıksal taraflarını bir steno ile biçimlendirmek isterseniz ne olur?
Fiziksel steno
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
mantıksal steno
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;
Mevcut taslak teklif, yazmanız gerektiği anlamına gelir. logical mantıklı eşdeğeri uygulamak için her kısaltmada, ki bu kulağa pek hoş gelmiyor KURU bazılarına
Bunu blok veya sayfa düzeyinde değiştirmek için başka öneriler var, ancak bu, mantıksal kullanımları hala fiziksel tarafları olan stillere sızdırabilir.
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 şey! Oyunuzu verin, fikrinizi söyleyin, sizden haber almak istiyoruz.
Mantıksal özellikleri daha fazla öğrenmek veya çalışmak ister misiniz? İşte kılavuzlar ve örneklerle birlikte ayrıntılı bir referans, MDN’de 🤓