Chromium için yeni mantıksal özelliğin kısaltmaları ve yeni eklenen özellikler.
Chromium 69'dan (3 Eylül 2018) beri mantıksal özellikler ve değerler, kullanıcıların geliştiriciler uluslararası düzenlerinde mantıksal yön ve boyut stillerine kıyasla daha fazla önem taşır. Chromium 87'de, kısaltmalar ve bu mantıksal özellikleri ve değerlerin daha kolay yazılmasını sağlamak için ofsetler gönderilmiştir. Bu, Chromium'u kısaltma desteği sunan Firefox'a kadar yakalar. 66'dan beri. Safari, bu dosyaları teknoloji önizlemesinde hazırlıyor.
Belge akışı
Mantıksal özelliklere aşinaysanız, satır içi ve blok eksenler konusunda bilgi sahibiyseniz bilgilerinizi tazelemek istiyorsanız ileriye geçebilirsiniz. Bilgilerinizi tazeleyelim.
İngilizcede harfler ve kelimeler soldan sağa doğru giderken paragraflar yukarıdan aşağıya doğru yığılır. Geleneksel Çincede harfler ve kelimeler yukarıdan aşağıya doğru, paragraflar ise yığılır sağdan sola. Sadece bu 2 örnekte, "margin top" değerini yayan CSS yazarsak bir paragrafta, yalnızca 1 dil stili arasında uygun şekilde boşluk bırakıyoruz. Sayfa geleneksel dile çevrilmişse Çince'yi İngilizce olarak kullanıyorsanız, yeni dikey yazma modunda kenar boşluğu pek anlamlı olmayabilir.
Bu nedenle, kutunun fiziksel tarafı uluslararası olarak pek kullanışlı değildir. Böylece birden çok dili destekleme süreci; kutu modelinin fiziksel ve mantıksal taraflarını öğrenme.
Chrome Geliştirici Araçları'nda p öğesini hiç incelediniz mi? Cevabınız evet ise
varsayılan User Agent stillerinin
fiziksel değil, mantıksaldır.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Chromium'un Kullanıcı Aracısı 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 okuyucularınkine benzerdir.
ancak aynı zamanda sağ ve sol olarak Japon okuyuculara benzer. Bir kez yazılır, her yerde çalışır.
Normal akış, web sayfasının bilinçli olarak bu çok yönlülüğün bir parçası olması anlamına gelir. Sayfa içeriği, dokümanın yönü değiştiği şekilde güncellendiğinde, düzen ve sayfa içeriği öğeler akışta kabul edilir. "içinde" hakkında daha fazla bilgi ve "out" (dışı) akış MDN'de veya CSS Ekran Modülü'nün özellikleri. Mantıksal özellikler olması gerekmez. Yön değiştikçe işin zor kısmını üstlenirler. Akış, harflerin, kelimelerin ve içeriğin hangi yönde ilerlemesi gerektiğini ifade eder. Bu, bizi mantıksal yol tariflerini engellememize ve satır içi yapmaya yönlendirir.
Engelleme yönü, yeni içerik bloklarının izlediği yöndür. Örneğin, kendinize
"sonraki paragrafı nereye koymalıyım?". Bunu bir "içerik bloku" veya "metin bloğu" olarak düşünebilirsiniz.
Her dil blokları düzenler ve birlikte sıralar
ilgili block-axis. block-start, bir paragrafın ilk yerleştirildiği taraftır.
block-end ise yeni paragrafların akışının yan tarafıdır.
Örneğin, geleneksel Japonca 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. Yönlendirmeyi
yazı yazarken kolunuzun ve elinizin hareket etmesi; inline-axis boyunca seyahat ediyorlar.
inline-start, yazmaya başladığınız taraf, inline-end ise yan taraftır
sona erebilir. Yukarıdaki video, inline-axis yukarıdan aşağıya doğrudur.
Ancak bir sonraki videoda inline-axis sağdan sola doğru akar.
flow-relative olma
tek bir dil için yazılan stillerin bağlamsal ve uygun olacağı anlamına gelir.
diğer dillere de uygulanır. İçeriklerin akışı, yayınlandığı dile göre belirlenir.
Yeni kısaltmalar
Aşağıdaki kısaltmalardan bazıları tarayıcı için yeni özellikler değildir ve
Her iki blokta da değerleri ayarlayabilmenin avantajından yararlanarak stil yazma yöntemleri
satır içi kenarlara dokunun. inset-* mantıksal özellikleri yeni yetenekler getirir.
çünkü mantıksal özelliklerle mutlak konumları belirtmenin uzun soluklu bir yolu yoktu.
girin. Ekler ve kısaltmalar çok iyi uyum sağlıyor.
Chromium 87'de gelen tüm yeni mantıksal özelliklerin tamamı hakkında bilgi verir.
Kenar boşlukları
Yeni yetenekler gönderilmedi, ancak çok kullanışlı bazı kısaltmalar eklendi:
margin-block ve
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
"Üst ve alt" için bir kısaltma yoktur veya "sol ve sağ"... şimdiye kadar!
Muhtemelen margin: 10px; işlevinin kısaltmasını kullanarak 4 tarafın da tümüne referans vermişsinizdir.
mantıksal özellik kısaltmasını kullanarak 2 tamamlayıcı tarafa kolayca referans verebilir.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Dolgu stensitleri
Yeni yetenekler gönderilmedi, ancak daha kullanışlı kısaltmalar 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 için ücretsiz steno seti:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Ek ve kısaltmalar
top, right, bottom ve left fiziksel özelliklerinin tümü yazılabilir
inset özelliğinin değerleri olarak kullanılır. Tüm position değerleri şunlardan yararlanabilir:
içine eklenmiş olan tarafları seçin.
.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. Inset, fiziksel tarafların kısaltmasıdır, Kenar boşluğu ve dolgu gibi çalışır.
Yeni özellikler
Fiziksel yönlerden ne kadar heyecan verici olursa olsun,
mantıksal özellikler ek inset kısaltmaları ile getirilir. Bu kısaltmalar,
daha kolay şekilde yazmalarına yardımcı olur (yazmaları daha kısadır) ancak daha
düzenin 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 ek steno ve kısaltmaların tam listesi MDN'de kullanılabilir.
Kenarlık kısaltmaları
Kenarlık ile iç içe yerleştirilmiş color, style ve width özelliklerinin tümü
mantıksal kısaltmalar da kullanabilirsiniz.
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ısaltmasının tam listesi ve uzun el yazısı MDN'de kullanılabilir.
<figure> mantıksal özelliğine örnek
Hepsini küçük bir örnekte bir araya getirelim. Mantıksal özellikler farklı yazı ve belge yol tarifleri için altyazı içeren bir resim.
Veya deneyin!
Bir kartı uluslararası ölçekte duyarlı hale getirmek için
<figure> ve birkaç mantıksal özellik. Tüm bunların uluslararası düzeyde nasıl
olduğunu merak ediyorsanız
bir girişim olduğunu umuyorum. Umarım bu kısa ve anlamlı bir giriştir.
Çoklu doldurma ve tarayıcılar arası desteği
Cascade veya derleme araçları hem eski hem yeni tarayıcılara sahip olmak için uygun seçeneklerdir, . Yedekleri basamakla için fiziksel bir mülkü takip edin mantıksal bir tane eklerseniz, tarayıcı "son"u stil sırasında bulduğu özellik belirler.
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. El yazısıyla yazılmış bir yedeği burada bulabilirsiniz
belirli dilleri hedeflemek için :lang() sözde seçicisinden yararlanan,
uygun şekilde ayarlamak isterseniz sonda mantıksal
Destekleyen tarayıcılar için boşluk:
/* 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, fiziksel erişim izni verilip verilmeyeceğine karar vermek için de @supports kullanılabilir.
yedekler:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Duygu ve diğerleri otomatik birleştirici ve/veya çok çeşitli yedeklere veya çözümlere sahip zaman teklifleri. Her birine göz atın ve genel site stratejinizle hangisinin eşleştiğini görebilirsiniz.
Sırada ne var?
Daha fazla CSS mantıksal özellikler sunacak, ancak henüz tamamlanmadı. Bir kampanyada büyük bir eksik, ve bu GitHub sorunu için hâlâ bir çözüm beklemede. Taslakta geçici bir çözüm vardır. Tüm reklam öğelerinin stil özelliklerini mantıksal kenarları var mı?
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 teklife göre her günde logical
(kolayca yanlış bir şekilde sonuçlandırıldığında)
bazıları için çok DURUM.
Bunu engelleme veya sayfa düzeyinde değiştirmek için başka teklifler de vardır. Ancak bu durum, fiziksel tarafları varsayan stillere mantıksal kullanımlar 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 soru. Oyunuzu verin, görüşlerinizi dile getirin ve görüşlerinizi bizimle paylaşın.
Mantıksal özellikleri daha fazla öğrenmek veya incelemek ister misiniz? O halde ayrıntılı bir referans: kılavuzlar ve örneklerle birlikte MDN'de 🤓
Geri bildirim
- Akışa bağlı kısaltmaların CSS söz diziminde değişiklik önermek için önce csswg-drafts deposundaki mevcut sorunları kontrol edin. Mevcut sorunların hiçbiri teklifinizle eşleşmiyorsa yeni bir sorun oluşturun.
- Chromium'un akışa göre kısaltmalar kullanmasıyla ilgili hataları bildirmek için önce Chromium Hata İzleyici'deki mevcut sorunları kontrol edin. Mevcut sorunların hiçbiri hatanızla eşleşmiyorsa yeni bir sorun oluşturun.