Geçen yıl blog yayınını paylaştık
CSS düzeni ve kaynak sırası bağlantısının kesilmesi sorununu çözme.
Bu, şu kaynakta tartışılmakta olan bir teklifi
yeniden düzenlemenin neden olduğu sorunu çözmek üzere
Esnek kutudaki ve ızgaradaki öğeler, sekme tuşunun bağlantısının kesilmesine neden olur. İlgili içeriği oluşturmak için kullanılan
Bu yayının başlangıç bölümü, çalışma grubunun bağımsız olarak
arıyoruz. O zamandan bu yana bazı şeyler değişti. Bu gönderi,
güncel bilgi sahibi olmanızı sağlar. Ayrıca, sizden hizmet alacağımız belirli
geri bildirim: display-contents
içeren öğeleri nasıl ele alırız?
Teklifteki güncellemeler
Artık var
taslak spesifikasyon metni
geri dönelim.
Bu işlem sonucunda reading-flow
adlı yeni bir özellik kullanıma sunulmuştur.
Bu özellik, esnek veya ızgara düzeni için kapsayıcı öğeye eklenir
(display: grid
veya display: flex
içeren öğe).
Mülk aşağıdaki değerleri kabul eder:
normal
: DOM'deki öğelerin sırasını takip edin. Bu, gösterir.flex-visual
: Yalnızca esnek kapsayıcılarda geçerli olur. İzleme Esnek öğelerin görsel okuma sırası, yazma modunu dikkate alır.flex-flow
: Yalnızca esnek kapsayıcılarda geçerli olur. Esnek akışı izler girin.grid-rows
: Yalnızca ızgara kapsayıcılarında geçerli olur. Görseli takip eder tablo öğelerini satır bazında sıralayabilirsiniz.grid-columns
: Yalnızca ızgara kapsayıcılarında geçerli olur. Görsel sıralamayı takip eder ızgara öğesinin sütuna göre ayrılmış sayısını gösterir.grid-order
: Yalnızca ızgara kapsayıcılarında geçerli olur.order
mülkünü dikkate alır. ancak aksi takdirdenormal
gibi davranır.
Örneğin, bir kapsayıcıda üç esnek öğeniz varsa,
ve flex-direction
cihazını şuna ayarla:
row-reverse
ise esnek kapsayıcının sonundan ve sekme sırasının sonuna doğru sıralanırlar
sağdan sola hareket eder.
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse
ile varsayılan esnek öğe akışı.flex-flow: visual
ekleyin, ardından okuma akışı şurada görsel sıra takip eder:
İngilizceden soldan sağa.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
reading-flow:flex-visual
ile.Izgara düzenlerinde, görsel satır veya sütunları takip etmek için reading-flow
kullanın.
daha iyi performans gösterir. Aşağıdaki örnekte okuma akışı,
satır.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-areas: "d b b"
"c c a";
reading-flow: grid-rows;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
reading-flow: grid-rows
ile.Deneyin
Bu CSS mülkü şu anda deneyseldir ancak etkinleştirilebilir
kullanmaya karar verebilir. Denemek için Chrome Dev veya Canary'nin 128 ya da sonraki bir sürümünü yükleyin.
ve
çalışma zamanı işareti CSSReadingFlow
.
Burada başlayabilmeniz için bazı örnekler vardır.
Bunların tümü Canary'de bayrak etkinken çalışır.
display: contents
destek kaydının davranışı üzerinde çalışmalar devam etmektedir ve
aşağıdaki bölümü okuduktan sonra verdiğiniz geri bildirimlere göre
bu gönderiyi takip edin.
display: contents
ve web bileşenleri içeren öğeler
Bekleyen bir sorun var
bir karara varmasını istediğinize karar vermesi için
okuma akışına sahip bir öğenin alt öğeleri display: contents
ve
Öğe <slot>
ise benzer şekilde.
Aşağıdaki örnekte, <div>
öğelerinde display: contents
bulunmaktadır. Kaynak:
bunun sonucunda, tüm <button>
öğeleri esnekliğe dahil edilmeye hazırlanır.
dolayısıyla reading-flow
bunların sırasını dikkate alır.
.wrapper {
display: flex;
reading-flow: flex-visual;
}
<div class="wrapper">
<div style="display: contents" id="contents1">
<button style="order: 3" id="o3">3</button>
<button style="order: 1" id="o1">1</button>
<div style="display: contents" id=contents2>
<button style="order: 4" id="o4">4</button>
<button style="order: 2" id=o2>2</button>
</div>
</div>
</div>
Bu duruma neden olan gerçek hayattan örnekleriniz olup olmadığını bilmek isteriz
örnek olarak verilebilir. Bir veya daha fazla
nedeniyle kardeş olmayan öğelerle display: contents
öğesinin yer aldığı öğe
display: contents
öğesinin kardeşleri olmalarıdır.
Ayrıca, display: contents
ile ilgili sorunları çözmeye çalışıyoruz.
display: contents
ile reading-flow
mülk. Gerçek dünyayı anlama
kullanım alanlarınız, ihtiyaçlarınızı karşılayan bir çözüm tasarlamamıza yardımcı olacaktır.
Kullanım alanlarını CSS çalışma grubu sorunu. Canlı sitelerinizde örnekleriniz varsa veya CodePen'de bir demo oluşturabiliyorsanız veya JSFiddle, bu konuyu tartışmaya geldiğimizde çok yararlı olacak bir seçim yapabilirsiniz. Ne olacağıyla ilgili düşünceleriniz varsa çok faydalı olur. Ancak gerçek kullanım alanlarını görmektir.