[ad_1]
Basamaklı Stil Sayfaları (CSS) ilk olarak 1996’da çıkarıldı ve web geliştirme yığınının önemli, gelişen bir parçası olmaya devam ediyor. Diğer yaşayan diller gibi, CSS de gerçek dünyadaki uygulamalara yanıt olarak sürekli olarak yeni özellikler sunuyor. Bu hızlı gelişme, kendini işine adamış geliştiricilerin bile yeni özellikleri kaçırmasını kolaylaştırabilir. İşte CSS’deki en kullanışlı yeni ve gelecek özelliklere bir bakış.
alt ızgara
Başlangıcından bu yana, geliştiriciler CSS’deki bazı korkunç eksikliklerden şikayet ettiler. gibi bazı sıradan görevler CSS’de bir şeyi ortalamak, aşırı karmaşık geçici çözümler ve sonlandırma gerektirir. Bir diğer büyük sorun da makul bir ızgara düzeni elde etmekti, en azından CSS Izgara Düzeni modül ihlale girdi.
Bir ızgara düzeni ile gösterilir display: grid beyanı ve bir tür kuzenidir esnek kutu, bu sayede dikdörtgen düzenleri tanımlamanıza ve aynı zamanda ızgaranızı iki boyutta kontrol etmenize olanak tanır. Araştırma gösteriyor ki Ellerimiz CSS’de olan çoğu geliştirici Grid Layout’un farkındadırve çoğumuz bunu kullanıyoruz. (Henüz kullanmıyorsanız, buna bir bak!)
alt ızgara Grid Layout modülü için yeni ve çok faydalı bir özelliktir. bu subgrid özelliği, üst öğesinin düzenini devralacak bir alt ızgara tanımlamanıza olanak tanır. Bu, bir ızgara görüntüsünü diğerinin içine yerleştirmekten farklıdır; bu durumda, alt ızgara kendi boyutlarını ve boşluklarını tanımlar. İle birlikte subgridüst öğenin düzeni alt ızgaraya uygulanır, ancak alt ızgara gerekirse düzenin özelliklerini yine de geçersiz kılabilir.
Yazma tarihi itibariyle, subgrid yalnızca Firefox 71 veya üzeri sürümlerde uygulanmaktadır, ancak Safari Web KitiGoogle Chrome ve Microsoft Kenarı. Alt ızgara, ileriye dönük çok yararlı bir düzen özelliği olacak.
vurgu rengi
Bazı görüntüleme öğeleri, yaygın olarak kullanılmasına rağmen geleneksel olarak stil vermek zordur. Örneğin, onay kutuları ve radyo düğmeleri, genellikle tarayıcının uygulamasını gizlerken bu öğelerin davranışını taklit eden özel bir pencere öğesi ile değiştirilir. yeni CSS accent-color seçeneği, bu öğeleri hedeflemenize olanak tanır.
Örneğin, Liste 1’de gösterildiği gibi sayfanızdaki tüm radyo düğmelerine macenta rengi uygulayabilirsiniz (ayrıca bkz. canlı örnek).
Liste 1. CSS’de radyo düğmesi renklerini kontrol etme
<style>
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>
Hızlı kaydırma
CSS, bir web tarayıcısında kaydırmalı yakalama eylemini kontrol etmek için kullanışlı bir dizi özellik sunar. Bu işlevselliğin bazı bölümleri birkaç yıldır yürürlükteyken, diğerleri hala kullanıma sunuluyor. daha yeni tarayıcı sürümleri.
İlginç olan, CSS kullanıcılarının üçte birinden fazlasının hala kaydırma çıtçıtının farkında değil.
bu scroll-snap-* properties komutu, kaydırma konumunun bir kapsayıcıda nasıl çalıştığına ince ayar yapmanın birkaç yolunu sunar. Geliştiriciler daha fazla hassasiyet elde eder ve son kullanıcılar daha sorunsuz, daha kontrollü bir kullanıcı deneyimi elde eder.
Liste 2, bir bilgisayardaki kaydırma çıtçıtını kontrol etmenin küçük bir örneğini verir. div (buna da bakın canlı örnek).
Liste 2. Basit kaydırmalı yakalama örneği
<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>
Kaydırma hareketini nerede bırakırsanız bırakın, y Liste 3’teki kaydırma konumu otomatik olarak alt öğeye taşınır. Bunun nedeni, kaydırma kabının scroll-snap-type mülk olarak ayarlandı y mandatoryve alt öğeler scroll-snap-align: start beyanname.
Bu davranışı da değiştirebilirsiniz. Örneğin, scroll-snap-type mülk y proximity. Bu, beklediğiniz gibi olur ve yalnızca kaydırma, öğenin yakınlığına yaklaştığında yakalanır.
Ek not olarak, ilgili aşırı kaydırma davranışı özelliği, iç içe kaydırma kapsayıcılarının nasıl davranacağını tanımlamanıza olanak tanır.
CSS Mantıksal Özellikleri
Sağda ve solda veya altta ve üstte bir kapsayıcı kenarlığı ayarlamak istediyseniz, bunları yazmak zorunda kalmanın sıkıntısını yaşadınız. border-left ve border-rightveya border-top, border-bottom özellikler kelimesi kelimesine. Sorun, değiştirmek istemediğiniz sınırları da etkilemeden kısayol özelliğinden yararlanmanın bir yolu olmamasıdır. Bu rahatsızlık, dolgu ve kenar boşlukları gibi öğeler için de geçerlidir.
bu CSS Mantıksal Özellikleri modülü kullanmanıza izin verir. inline ve block soyut bir şekilde şeylere atıfta bulunmak için anahtar kelimeler. Sol ve sağ hakkında konuşmak istediğinizde, inline; yukarıya ve aşağıya başvurmak istediğinizde, block. Örneğin, bir çerçevenin soluna ve sağına bir sınır koymak için divListe 3’teki kodu kullanabilirsiniz (ayrıca canlı bir örneğe bakın burada).
Liste 3. Mantıksal satır içi ile sol ve sağ dolgu
div {
border-inline: 10px dashed seagreen;
}
Bunlar, kenarlıklar için kullanışlı kısayollardır, ancak aşağıdakileri de bulabilirsiniz: inline ve block mantıksal anahtar kelimeler diğer mülklerin ev sahibi.
Çoğu geliştirici, bunlarla başa çıkmak için bu kısayolları kullanır. Metin yönü ve yazma modu düşünceler. Bu durumlarda, gibi bir özellik kullanarak padding-inline-end hangi metin yönünün etkin olduğuna bakılmaksızın sondaki dolguyu hedeflemenizi sağlar. Temel olarak, satır içi ve blok soyutlama, çeşitli ayarlara uygulanan genelleştirilmiş stillerin yazılmasına izin verir. Görmek CSS Mantıksal Özellikleri ve Değerleri daha derinlemesine bir tartışma için.
Kapsayıcı sorguları
Kapsayıcı sorguları CSS’de tam olarak stabilize edilmemiştir, ancak yakında kullanıma sunulacaktır. Duyarlı tasarım hakkında nasıl düşündüğümüz üzerinde büyük bir etki yapacaklar. Temel fikir, yalnızca görüntü alanı ve medyaya dayalı olarak değil, aynı zamanda bir ana kapsayıcının boyutuna dayalı olarak bir kesme noktası ayarlayabilmenizdir.
Sözdizimi tam olarak tanımlanmamıştır, ancak muhtemelen Liste 4 gibi bir şey olacaktır.
Liste 4. @container
@container (max-width: 650px){ … }
Bir kullanıcı arabiriminin iç içe katmanlarında kendini gösteren farklı kapsayıcıların boyutuna dayalı olarak bir düzende ince ayar yapmanın ne kadar güçlü olacağını düşünün. Bu, muhtemelen bir arayüz yenilikleri dalgasını başlatacak oldukça kapsamlı bir değişikliktir.
@ne zaman ve @else
Biz yeniyi düşünürken @container sorgu, koşullu olduğunu biliyor muydunuz? @ne zaman ve @else Ufukta sorgu desteği de var mı? Henüz büyük tarayıcıların hiçbiri tarafından desteklenmiyor, ancak çok uzak olmayan bir gelecekte gelecek bir özellik.
bu @when ve @else sorgular, medya ve destek sorgularıyla ilgilenirken koşullu if/then tarzı mantık akışı sağlar. Birçok karmaşık CSS durumu ve düzeninde hayatınızı kolaylaştıracaklar.
Üç yeni renk paleti
Çok eski zamanlardan beri, CSS uygulayıcıları cihaz ekranlarını güzelleştirmek ve canlandırmak için RGB, HEX ve adlandırılmış renkleri kullandılar. Daha yakın zamanlarda, HSL tarzı renk bildirimi tanıtıldı. Şimdi, CSS spesifikasyonu renkleri belirtmek için yeni yollar sunuyor; yani, hwb, labve lch.
HWB, renk tonu, beyazlık ve siyahlık anlamına gelir. İnsan tarafından okunabilirliği ile dikkat çeken zarif bir eklemedir; bir renk seçersiniz ve ardından beyaz ve siyah eklersiniz. Chrome, Firefox ve Safari’nin son sürümlerinde desteklenir. (Microsoft Edge özellik başvurusu bu konuda garip bir şekilde sessizdir.) Bkz. hwb() – insanlar için bir renk gösterimi mi? HWB hakkında daha fazla bilgi edinmek için. RGB ve HWL gibi, şeffaflık için bir alfa kanalını destekler.
Lightness, chroma ve ton kelimelerinin kısaltması olan LCH, mevcut renklerin aralığını arttırması açısından dikkate değerdir. CSS’de LCH renkleri: ne, neden ve nasıl? CSS’de renk teorisine dair göz açıcı bir tartışma ile güzel bir genel bakış. Şu anda yalnızca Safari LCH’yi desteklemektedir.
LAB, elde edilen CIE LAB renk teorisi, yeni renk uzaylarının en zihin açıcı teorik olanıdır. bu lab renk tanımlayıcısı, insan tarafından algılanabilen tüm renk aralığını kapsadığını iddia eder ve bu oldukça iddialıdır. LCH gibi, şu anda yalnızca Safari tarafından desteklenmektedir. CSS için LAB hakkında daha fazla bilgiyi şuradan edinebilirsiniz: Mozilla CSS belgeleri.
Telif Hakkı © 2022 IDG Communications, Inc.
[ad_2]
Kaynak : https://www.infoworld.com/article/3663513/the-best-new-css-features-for-2022.html#tk.rss_all