Chromium için yeni mantıksal özellik kısayolları ve yeni ek özellikleri.
Chromium 69'dan (3 Eylül 2018) bu yana mantıksal özellikler ve değerler, geliştiricilerin uluslararası düzenlerini fiziksel, yön ve boyut stilleri yerine mantıksal aracılığıyla kontrol etmelerine yardımcı oldu. Chromium 87'de, bu mantıksal özellikleri ve değerleri yazmayı biraz daha kolaylaştırmak için sustalar ve ofsetler eklenmiştir. Bu, Chromium'u ve 66'dan beri kısaltmaları destekleyen Firefox'a kadar uzanıyor. Safari, teknik önizlemesinde bunları hazır halde sunar.
Belge akışı
Mantıksal özellikler, satır içi ve blok eksenler hakkında zaten bilginiz varsa ve bilgilerinizi tazelemek istemiyorsanız bu adımı atlayabilirsiniz. Kısa bir hatırlatma yapmak isterim.
İngilizcede harfler ve kelimeler soldan sağa doğru, paragraflar yukarıdan aşağıya doğru yığılır. Geleneksel Çincede, paragraflar sağdan sola doğru sıralanırken harfler ve kelimeler yukarıdan aşağıya doğru sıralanır. Sadece bu 2 örnekte, bir paragrafa "margin top" değerini yerleştiren bir CSS yazarsak yalnızca 1 dil stili arasında uygun şekilde boşluk bırakırız. Sayfa, İngilizceden geleneksel Çinceye çevrilmişse yeni dikey yazma modunda kenar boşluğu anlamlı olmayabilir.
Bu nedenle fiziksel yönün uluslararası olarak kullanımı pek kullanışlı değildir. Böylece birden çok dili destekleme süreci, kutu modelinin fiziksel ve mantıksal yanlarını öğrenme süreciyle başlar.
Chrome Geliştirici Araçları'nda p öğesini hiç incelediniz mi? Öyleyse varsayılan User Agent 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ısı Stil Sayfası'ndan CSS
Kenar boşluğu, İngilizce okuyucuların tahmin edebileceği gibi üst veya alt kısımda değildir.
Bugün block-start ve block-end! Bu mantıksal özellikler, İngilizce okuyucuların üst ve alt bölümlerine benzeseler de Japonca okuyucularda sağ ve sol olmak üzere de işlevlere 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ıdır. Sayfa içeriği doküman yönü değişikliklerine göre güncellendiğinde, düzen ve öğeleri akışta kabul edilir. MDN'de veya CSS Ekran Modülü spesifikasyonunda akışın "giden" ve "çıkışı" hakkında daha fazla bilgi edinin. Mantıksal özelliklerin akışta olması gerekmese de yön değişiklikleri nedeniyle işin büyük kısmını sizin yerinize yaparlar. Akış, harflerin, kelimelerin ve içeriğin hangi yönde ilerlemesi gerektiğini ifade eder. Bu, bizi mantıksal yönlendirmeleri engellemeye ve satır içi olarak oluşturur.
Engelleme yönü, yeni içerik bloklarının izlediği yöndür. Örneğin, kendinize "sonraki paragrafı nereye koyacaksınız?" diye sorabilirsiniz. Bunu bir "içerik bloğu" veya "metin bloğu" olarak düşünebilirsiniz.
Her dil, bloklarını düzenler ve ilgili block-axis boyunca sıralar. block-start, bir paragrafın ilk yerleştirildiği kenardır. block-end ise yeni paragrafların doğrulandığı taraftır.
Örneğin geleneksel Japonca el yazısında blok yönü sağdan sola yazılır:
Satır içi yön, harflerin ve kelimelerin gittiği yöndür. Yazarken kolunuzun ve elinizin hareket ettiği yönü göz önünde bulundurun; bunlar inline-axis boyunca hareket ediyordur.
inline-start, yazmaya başladığınız taraftır. inline-end ise yazmanın sona erdiği veya tamamlandığı yerdir. Yukarıdaki videoda inline-axis yukarıdan aşağıya doğrudur ancak bu sonraki videoda inline-axis sağdan sola doğru akmaktadır.
flow-relative olmak, bir dil için yazılan stillerin bağlamsal olduğu ve diğer dillere uygun şekilde uygulanacağı anlamına gelir. İçeriğin akışı, yayınlandığı dile göre değişir.
Yeni stenografiler
Aşağıdaki kısaltmalardan bazıları tarayıcı için yeni özellikler değildir. Hem blok hem de satır içi kenarlarda aynı anda değer ayarlama olanağından yararlanarak stil yazmanın daha kolay bir yoludur. inset-* mantıksal özellikleri, kendilerinden önce mantıksal özelliklerle mutlak konumları belirtmenin uzun vadeli yolları olmadığından yeni yetenekler getirir. Ekler ve stenografiler birlikte o kadar güzel ki size Chromium 87'ye giren
tüm yeni mantıksal özellikleri tek seferde anlatacağım.
Marj kısaltmaları
Yeni özellikler kullanıma sunulmadı, ancak çok kullanışlı bazı kısaltmalar kullanıma sunuldu:
margin-block ve
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Şu ana kadar "üst ve alt" veya "sol ve sağ"ın bir kısaltması yok!
Muhtemelen margin: 10px; kısaltmasını kullanarak 4 tarafın tamamına da referans verirsiniz. Artık mantıksal özellik kestirmesini kullanarak 2 tamamlayıcı tarafa kolayca referans verebilirsiniz.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Dolgu stenleri
Yeni özellikler kullanıma sunulmadı, ancak çok daha kullanışlı kestirmeler geliştirildi:
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 seti:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
İnset ve kısaltmalar
top, right, bottom ve left fiziksel özelliklerinin tümü inset özelliğinin değerleri olarak yazılabilir. Herhangi bir position değeri, kenarların içe doğru 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 işlem hemen işinizi görecektir. Inset, fiziksel kenarların kısaltmasıdır ve kenar boşluğu ve dolgu gibi çalışır.
Yeni özellikler
Fiziksel yanlar kısaltmaları ne kadar heyecan verici olsa da ek inset kısaltmaların getirdiği mantıksal özelliklerden çok daha fazlası bulunuyor. Bu kısaltmalar geliştiricilere kolaylık sağlar (yazılması daha kısadır) ancak akışa bağlı 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;
MDN'de daha fazla okuma yapabilir ve inset stenografinin ve uzun ellerin tam listesini bulabilirsiniz.
Kenarlık kısaltmaları
Kenarlığın yanı sıra iç içe yerleştirilmiş color, style ve width özelliklerinin tümü yeni mantıksal kısaltmalar kullanmaktadır.
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;
MDN'de daha fazla bilgi edinmek ve kenarlık kısaltması ve boylam öğelerinin tam listesini bulabilirsiniz.
<figure> mantıksal özelliği örneği
Hepsini küçük bir örnekte toplayalım. Mantıksal özellikler, farklı yazma ve belge yönlerini işlemek için altyazılı bir görüntü düzenleyebilir.
İsterseniz deneyin!
Bir kartı <figure> ve birkaç mantıksal özellikle uluslararası düzeyde duyarlı hale getirmek için çok fazla işlem yapmanız gerekmez. Tüm bu uluslararası düzeyde değerlendirmeye alınan CSS'nin birlikte
nasıl çalıştığını merak ediyorsanız umarım bu küçük ve anlamlı bir giriştir.
Çoklu doldurma ve tarayıcılar arası destek
Basamaklama veya derleme araçları, hem eski hem de yeni tarayıcılara, güncellenmiş mantıksal özelliklerle uygun aralıklarla yerleştirilmiş uygun seçeneklerdir. Cascade yedekleri için, mantıksal bir özelliği olan fiziksel bir özelliği izlersiniz. Tarayıcı, stil çözümlemesi sırasında bulduğu "son" özelliği 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çiciden yararlanan, fiziksel aralıklarını uygun şekilde ayarlayan ve sonda tarayıcıları desteklemek için mantıksal boşluk sunan el yazısı yedeği gösterilmektedir:
/* 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ülklerin yedeklerini sağlayıp sağlamayacağınızı belirlemek için de @supports kullanabilirsiniz:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion ve diğerleri, çok çeşitli yedek ya da çözümler içeren otomatik paketleyici ve/veya derleme süresi tekliflerine sahiptir. 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'nin diğer türleri mantıksal özellikler sunacaktır, ancak henüz iş bitirilmedi! Yine de eksik büyük bir kısaltma var ve bu GitHub sorununda hâlâ bir çözüm bekleniyor. Taslakta geçici bir çözüm vardır. Bir kutunun tüm mantıksal taraflarını kısayolla biçimlendirmek 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 teklif, mantıksal eşdeğerinin uygulanması için her kısaltmaya logical yazmanız gerektiği anlamına gelir. Bu, bazılarına pek DRY gelmiyor.
Blok veya sayfa düzeyinde bunu değiştirmek için başka teklifler de vardır, ancak bu mantıksal kullanımları, fiziksel kenarlar olduğu varsayılarak 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 ..? */
Şu anda zor bir soru. Oy verin, görüşlerinizi dile getirin, görüşlerinizi duymak istiyoruz.
Mantıksal özellikleri daha fazla öğrenmek veya incelemek mi istiyorsunuz? Burada MDN hakkında kılavuzlar ve örneklerle birlikte ayrıntılı bir referans 🤓
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 sorunların hiçbiri teklifinizle eşleşmiyorsa yeni bir sorun oluşturun.
- Chromium'un akışa bağlı kısaltmalar uygulamasıyla ilgili hataları bildirmek için önce Chromium Bug Tracker'daki mevcut sorunları kontrol edin. Mevcut sorunların hiçbiri hatanızla eşleşmiyorsa yeni bir sorun oluşturun.