2022'de Beklenecek Yeni CSS Özellikleri

Az bilinen kaydırmalı yakalama özelliklerinden çarpıcı yeni renk paletlerine kadar, kaçırmak istemeyeceğiniz bazı Basamaklı Stil Sayfaları güncellemelerini burada bulabilirsiniz.

CSS (Basamaklı Stil Sayfaları) 1996'da piyasaya sürüldü ve hala web geliştirme yığınının önemli, gelişen bir bileşenidir. CSS, diğer yaşayan diller gibi, gerçek dünyadaki uygulamalara yanıt olarak her zaman yeni özellikler ekler. Hızlı evrim nedeniyle, kendini işine adamış geliştiriciler bile yeni özellikleri kaçırabilir. Yakın gelecekte CSS'ye gelecek en kullanışlı özelliklerden bazılarına göz atın.

alt ızgara

CSS, başlangıcından bu yana bir dizi korkunç kusur nedeniyle eleştirildi. Bir şeyi CSS'de ortalamak gibi bazı basit görevler, aşırı karmaşık geçici çözümler ve sonlandırma gerektirir.
Bir diğer önemli konu, en azından CSS Izgara Düzeni modülü devreye girene kadar makul bir ızgara düzeni elde etmekti.

Bir ızgara düzeni display: grid bildirimi ile belirtilir ve ızgaranızı iki boyutlu olarak kontrol ederken dikdörtgen düzenleri tanımlamanıza izin vermesi açısından Flexbox'a benzer.
Araştırmaya göre, çoğu CSS geliştiricisi Grid Layout'un farkındadır ve çoğumuz onu kullanırız. (Denemediyseniz denemeyi unutmayın!)

Subgrid, Grid Layout modülü için yepyeni ve son derece kullanışlı bir özelliktir. Alt ızgara özelliği, üst ızgarasının düzenini devralacak bir alt ızgara oluşturmanıza olanak tanır.

Bir ızgara görüntüsünü diğerinin içine yerleştirmenin aksine, alt ızgara kendi boyutlarını ve boşluklarını tanımlar. Alt ızgara kullanılırken ebeveynin düzeni alt ızgaraya uygulanır, ancak gerekirse alt ızgara yine de düzenin özelliklerini geçersiz kılabilir.

Alt ızgara şu anda yalnızca Firefox 71 ve üzeri sürümlerde mevcuttur, ancak Safari WebKit, Google Chrome ve Microsoft Edge için planlanmıştır. Bir Alt Izgara, gelecekte çok kullanışlı bir yerleşim özelliği olacaktır.

vurgu rengi

Popülerliklerine rağmen, bazı ekran öğelerinin stillendirilmesi oldukça zordur. Örneğin, onay kutuları ve radyo düğmeleri, tarayıcının uygulamasını gizlerken davranışlarını taklit eden özel bir widget ile sıklıkla değiştirilir. Bu öğeleri yeni CSS vurgu rengi seçeneğiyle hedefleyebilirsiniz.

Örneğin, Liste 1'de gösterildiği gibi, sayfanızdaki tüm radyo düğmelerine macenta rengi uygulayabilirsiniz (ayrıca bu canlı örneğe bakın).

Liste 1: Radyo Düğmeleri için CSS Renk Kontrolü

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Kaydır

CSS, bir web tarayıcısında kaydırma ek eylemini kontrol etmek için kullanışlı bir dizi özellik sunar. Bu özelliklerin birçoğu son tarayıcı sürümlerinde zaten mevcutken, diğerleri hala kullanıma sunuluyor.

CSS kullanıcılarının üçte birinden fazlasının kaydırma ekinden hala habersiz olduğunu belirtmekte fayda var.

scroll-snap-* özellikleri komutu, kaydırma konumunun bir kapsayıcıda nasıl çalıştığını ince ayarlamak için çeşitli seçenekler sunar. Geliştiriciler artan hassasiyetten yararlanırken, son kullanıcılar daha sorunsuz, daha kontrollü bir kullanıcı deneyiminden yararlanır.

Liste 2, bir div üzerindeki kaydırma çıtçıtının nasıl kontrol edileceğine dair basit bir örnek gösterir (ayrıca bu canlı örneğe bakın).

Liste 2, basit bir kaydırma yakalama örneğidir.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

Liste 3'teki y kaydırma konumu, kaydırma hareketini nerede bırakırsanız bırakın otomatik olarak alt öğeye hareket eder. Bunun nedeni, kaydırma kabının scroll-snap-type özelliğinin y olarak ayarlanması ve alt öğelerin scroll-snap-align: start bildirimine sahip olmasıdır.

Bu davranış da değiştirilebilir. Örneğin scroll-snap-type özelliğini y yakınlığına ayarlayabilirsiniz. Bu beklendiği gibi çalışır, yalnızca kaydırma öğeye yakın olduğunda yapışır.

Ek olarak, ilgili overscroll-behavior özelliği, iç içe kaydırma kapsayıcılarının nasıl davranacağını kontrol eder.

Mantıksal CSS Özellikleri

Muhtemelen sol ve sağda veya altta bir kapsayıcı kenarlığı ayarlamak istediyseniz, border-sol ve border-right veya border-top, border-bottom özelliklerini kelimesi kelimesine yazmak zorunda kalmanın sıkıntısını yaşamışsınızdır. tepe. Sorun, değiştirmek istemediğiniz sınırları etkilemeden kısayol özelliğini kullanmanın bir yolu olmamasıdır. Bu, dolgu ve kenar boşlukları gibi öğeler için de geçerlidir.

CSS Mantıksal Özellikler modülü, satır içi ve blok anahtar sözcüklerini kullanarak şeylere soyut bir şekilde başvurmanıza olanak tanır. Sol ve sağdan bahsederken satır içi kullanın; üst ve alttan bahsederken blok kullanın. Örneğin, bir div'in sol ve sağ taraflarına kenarlık eklemek için Liste 3'teki kodu kullanın (ayrıca burada canlı bir örneğe bakın).

Liste 3: Satır içi mantıkla sol ve sağ dolgu

 div { border- inline : 10px dashed seagreen; }

Bunlar, kenarlıklar için yararlı kısayollardır, ancak satır içi ve blok mantıksal anahtar sözcükleri ayrıca çeşitli başka özelliklerde de bulunabilir.

Geliştiricilerin çoğu, metin yönü ve yazma modu sorunlarıyla başa çıkmak için bu kısayolları kullanır. Bu durumlarda padding-inline-end gibi bir özellik, metin yönünden bağımsız olarak sondaki dolguyu hedeflemenize olanak tanır.

Esasen, satır içi ve blok soyutlama, çeşitli durumlara uygulanabilecek genelleştirilmiş stillerin oluşturulmasına izin verir. Daha fazla bilgi, CSS Mantıksal Özellikleri ve Değerleri'nde bulunabilir.

Kapsayıcı aramaları

Kapsayıcı sorguları CSS'de henüz tam olarak kararlı değil, ancak yakında olacaklar. Duyarlı tasarım hakkında düşünme şeklimiz üzerinde önemli bir etkiye sahip olacaklar. Temel fikir, yalnızca görüntü alanı ve medya yerine bir ana kapsayıcının boyutuna dayalı bir kesme noktası ayarlayabilmenizdir.

Sözdiziminin net bir tanımı yoktur, ancak muhtemelen Liste 4'e benzeyecektir.

@container Listeleme 4.

 @container (max-width: 650px){ … }

Bir kullanıcı arabiriminin iç içe katmanları boyunca görünen çeşitli kapsayıcıların boyutuna dayalı olarak bir düzende ince ayar yapmanın ne kadar güçlü olacağını düşünün. Bu, neredeyse kesinlikle bir arayüz yenilikleri dalgasını ateşleyecek oldukça önemli bir değişiklik.

Üç yeni renk şeması

CSS uygulayıcıları, çok eski zamanlardan beri cihaz ekranlarını güzelleştirmek ve canlandırmak için RGB, HEX ve adlandırılmış renkleri kullandılar. HSL tarzı renk bildirimi yakın zamanda tanıtıldı. CSS spesifikasyonu şimdi hwb, lab ve lch gibi yeni renk tanımlayıcılarını tanıtıyor.

HWB, renk tonu, beyazlık ve siyahlığın kısaltmasıdır. İnsan tarafından okunabilirliği ile öne çıkan hoş bir dokunuş; bir renk seçiyorsunuz ve ardından beyaz ve siyah ekliyorsunuz. Chrome, Firefox ve Safari'nin en son sürümleriyle uyumludur. (Microsoft Edge özellik referansı bu konuda garip bir şekilde sağır edici bir şekilde sessizdir.) HWB hakkında daha fazla bilgi edinmek için bkz. hwb() – insanlar için bir renk gösterimi? RGB ve HWL gibi şeffaflık için bir alfa kanalına sahiptir.

Hafiflik, kroma ve renk tonu anlamına gelen LCH, mevcut renk paletini genişletmek için dikkate değerdir. CSS'de LCH renkleri ne, neden ve nasıl kullanılır? Bu, CSS'de renk teorisinin ufuk açıcı bir tartışmasını içeren iyi bir genel bakıştır. Şu anda yalnızca Safari LCH'yi desteklemektedir.

Yeni renk uzaylarının en teorik olanı, CIE LAB renk teorisinden türetilen LAB'dir. Laboratuvar renk tanımlayıcısı, cesur bir iddia olan, insan tarafından algılanabilir renklerin tüm spektrumunu kapsadığını iddia ediyor. LCH gibi, şu anda yalnızca Safari tarafından desteklenmektedir. CSS için LAB hakkında daha fazla bilgi Mozilla CSS belgelerinde bulunabilir.