Kullanmayı denemeniz gereken 10 CSS özelliği

Aşağıdaki makale size yardımcı olacaktır:Kullanmayı denemeniz gereken 10 CSS özelliği

Bu makale, yıllık CSS Durumu anketinde belirtilen ilgili CSS özelliklerinden bazılarını inceleyecektir. Bu anket, mevcut CSS ekosistemini anlamayı ve aldığı ana yönler hakkında bizi bilgilendirmeyi amaçlamaktadır. Bu yıl, W3C çalışma grubunun bir üyesi ve meydana gelen tüm değişikliklerin ön saflarında yer alan bir kişi olan Lea Verou, soruların hazırlanmasına yardımcı olmak için katıldı. Muhtemelen kısmen katılımından dolayı, bu yılın anketi yeni ve gelecek CSS özelliklerine odaklandı.

Öncelikle günümüzde kullanılabilecek özellik ve yeteneklere odaklanalım. Popüler tarayıcılar tarafından iyi desteklenirler ve kullanışlılıkları uygulama yoluyla doğrulanır. Hazır gelmişken, yakın gelecekte beklenen bazı yenilikleri de ele alacağız.

en-boy oranı

En boy oranı özelliği, bir öğe için en boy oranını ayarlamak için basit, kullanışlı ve doğrudan bir yöntem sunar. Bir elemanın genişliğinin yüksekliğine oranı olarak tanımlanır ve bilinenin boyutuna göre diğer tarafı hesaplar.

En boy oranı özelliği, yeniden boyutlandırırken en boy oranını korumanın önemli olduğu haritaların, kartların, videoların, iframe’lerin ve diğer öğelerin uyarlanabilir düzeni için yararlı olacaktır.

Burada aynı en boy oranına sahip iki blok görebilirsiniz. Biri 600 x 900 piksel ve diğeri 200 x 300 piksel – her ikisi de 2:3 en boy oranına sahip

Kod örneği

Ana öğenin genişliğinin %100’ü kadar olan ve genişlik-yükseklik oranı 2’ye 3 olan bir öğe oluşturalım:

.item {genişlik: %100 en-boy oranı: 2 / 3;}

Resimler ve videolar için, en-boy oranı ile mülkiyet nesneye uygun mülk, nerede en-boy oranı bir öğenin en boy oranını tanımlar ve nesneye uygun içeriğin onu nasıl dolduracağını belirtir.

Önceki yaklaşımlar

Önce en-boy oranı özelliği, kullandık dolgu üstü en boy oranını koruma özelliği. bu mümkün çünkü dolgu malzemesi yüzde olarak ifade edilen özellik, üst öğenin genişliğini temel alır.

Örneğin, 16/9 videonun en boy oranını ayarlamak için aşağıdakileri yazmamız gerekiyordu:

.video { genişlik: %100; üst dolgu: %56,25;}}

Böyle bir giriş, temel bir dil özelliğinden çok bir hack’e benzeyen mantıksız ve belirsizdir.

Bugün böyle bir oranı nasıl tanımlayabileceğimizle karşılaştırın:

.video { genişlik: %100; en-boy oranı: 16 / 9;}

Kullanım çok daha net hale geldi ve normal kapsamının dışında bir şey uygulamak için padding özelliğinin gözden geçirilmesini gerektirmiyor.

Tarayıcı desteği: %91,23

Caniuse.com'dan başlıca tarayıcılarda mdn-css__properties__aspect-ratio özelliği desteğine ilişkin veriler

Şartname: W3C Editör Taslağı

içerik görünürlüğü

bu içerik görünürlüğü özelliği, içeriğin geri kalanının yüklenmesini beklemeden yeni oluşturulan içerikle hemen etkileşim kurabilmeniz için web sayfasının ilk yüklenmesini ve ilk oluşturulmasını hızlandırmayı amaçlar.

kullanarak içerik görünürlüğü özelliği sayesinde, geliştiriciler bir tarayıcıya sayfanın hangi bölümlerinin yalıtılmış içerik içerdiğini söyleyebilir. Bu da, tarayıcının gecikmeli hesaplamalar yoluyla sayfa oluşturmayı optimize etmesine izin verecektir.

Geliştiriciler, bölümlenmiş içeriğe uygulanan content-visibility: auto özelliğinin işleme hızını 232 ms'den 30 ms'ye 7 kat artırdığını gösterdi.Geliştiriciler, bölümlenmiş içeriğe uygulanan content-visibility: auto özelliğinin işleme hızını 232 ms’den 30 ms’ye 7 kat artırdığını gösterdi.

Kod örneği

Bölümlerin yüklenmesini optimize edelim. bu içerik görünürlüğü auto değerine sahip özellik, minimum çabayla mümkün olan maksimum performans kazancını sağlar. Tarayıcının bölüm için yer ayırabilmesi için bölümün yüksekliği (bu durumda 1000 piksel) belirtilmelidir.

.bölüm { içerik görünürlüğü: otomatik; içerik-intrinsic-size: 1000px;}

İle içerik görünürlüğü özelliği, bir tarayıcı kullanıcının o anda ekranda gördüğü içeriği yükleyecek ve biçimlendirecektir. İçeriğin geri kalanı için yüksekliğini belirtmeniz yeterlidir. Bu durumda, içerik-iç-boyutu yer tutucu görevi görür.

Önceki yaklaşımlar

olmadan içerik görünürlüğü özelliği, bir tarayıcı o anda kullanıcılar tarafından görülüp görülmediğine bakmaksızın sayfanın tüm bölümlerini yükler ve biçimlendirir. Ancak uygulandığında, tarayıcı yalnızca kullanıcı tarafından o anda (ekranda) görülebilen içeriği yükleyecek ve biçimlendirecek, içeriğin geri kalanını boş bölümler içeriyormuş gibi ele alacaktır. Bu, işleme hızında önemli bir artışa yol açar.

Tarayıcı desteği: %72,95

bu içerik görünürlüğü özelliği Ağustos 2020’de duyuruldu. Chrome ve Opera’da çalışır ancak Safari ve Firefox tarafından desteklenmez.

Caniuse.com'dan başlıca tarayıcılarda css-content-visibility özelliği desteğine ilişkin veriler

Şartname: W3C Çalışma Taslağı

flexbox için boşluk özelliği

bu açıklık flexbox özelliği, flexbox öğeleri arasındaki mesafeyi ayarlamak için kullanılır.

Satırlar ve sütunlar arasındaki aynı mesafeyi belirtmek için, açıklık tek değerli özellik. Satırlar ve sütunlar arasındaki mesafe farklıysa, şunu kullanırız: açıklık iki değerle, önce satırlar arasındaki mesafeyi ve ardından sütunlar arasındaki mesafeyi belirtir. Kodu daha net ve şeffaf yapmak için iki özelliği kullanabilirsiniz: satır aralığı Ve sütun aralığı.

Row-gap özelliğini satırlar arasındaki mesafeyi ayarlamak için kullanırız ve column-gap özelliği sütunlar arasındaki mesafeyi ayarlar.Row-gap özelliğini satırlar arasındaki mesafeyi ayarlamak için kullanırız ve column-gap özelliği sütunlar arasındaki mesafeyi ayarlar.

Kod örneği

Biz belirtiyoruz açıklık esnek kapsayıcıya özellik. kullanarak satır aralığı Ve sütun aralığı özelliklerde, esnek elemanların satırları ve sütunları arasındaki mesafeyi ayarlayabiliriz:

.item-container { display: flex; satır aralığı: 30px; sütun aralığı: 20px;}

Aynı kod parçası daha kısa yapılabilir:

.item-container { display: flex; boşluk: 30 piksel 20 piksel;}

Tavsiye Edilen:  YouTube Analytics Nasıl Kullanılır: Önemli 17 Metrik

Önceki yaklaşımlar

mülkten önce açıklık, marj özelliği, esnek öğeler arasındaki mesafeyi ayarlamak için kullanıldı. Bu yaklaşımın dezavantajı, marj özelliği ayrıca öğe ile kabın kenarı arasına bir girinti ekledi.

Bu sorunu çözmek için çeşitli yöntemler kullanılabilir:

  • bu : son çocuk sözde sınıf, son öğenin girintili olmadığını belirtmeye izin verir;
  • için negatif bir değer ayarlamak marj mülk.
  • Genellikle “lobotomiye baykuş seçici” olarak adlandırılan üç karakterli CSS seçici. Şuna benzer: * + *, bir baykuşun boş bakışına benzer, bu nedenle adı. Bu seçici, yalnızca bir öğe için özellikler belirlemenizi sağlar. aynı türden başka bir öğeden sonra gelirse.

Karmaşıklıklarına ve belirgin olmamalarına ek olarak, tüm bu yöntemlerin başka bir dezavantajı vardı – yalnızca esnek elemanlar tek bir hatta düzenlendiğinde çalışıyorlardı ve çok hatlı yapılar için uygun değillerdi.

Gap özelliği, esnek öğelerin hem tek satırlı hem de çok satırlı dizileri için çalışır ve yalnızca dilin temel özelliklerine güvenmek yerine, bu tür hilelere başvurmadan öğeler arasındaki girintiyi belirtmenize olanak tanır.

Tarayıcı desteği: %95,42

Flexbox’taki boşluk özelliği, bir ızgaradan geçişin bir sonucu olarak oldukça yakın bir zamanda 2021’de tanıtıldı, ancak basitliği ve kullanım kolaylığı nedeniyle hızla popüler oldu.

Başlıca tarayıcılarda flexbox-gap özelliği desteğine ilişkin veriler caniuse.com'dan alınmıştır.

Şartname: W3C Editör Taslağı

nesne görüntüleme kutusu

bu nesne görüntüleme kutusu özelliği, bir görüntünün veya videonun yalnızca belirtilen bölümünün bir web sayfasında görüntülenmesine izin verir. Etki olarak biraz benzer görünüm kutusu svg bağlanmak.

bu nesne görüntüleme kutusu özelliği, bir görüntünün veya videonun yalnızca belirli bölümlerini farklı öğeler için veya farklı çözünürlüklerde görüntülemek istediğinizde yararlı olacaktır. Görüntüleri ve videoları yakınlaştırmak veya kaydırmak için de kullanılabilir.

Bu örnekte, kırpılması gereken bir görüntümüz var.  Bu görüntünün yalnızca belirli bir kısmına ihtiyacımız olduğunu unutmayın.Bu örnekte, kırpılması gereken bir görüntümüz var. Bu görüntünün yalnızca belirli bir kısmına ihtiyacımız olduğunu unutmayın.

Kod örneği

Bir görselden üst kenardan %25, sağ kenardan %20, alt kenardan %15 ve sol kenardan %5 boşluk bırakarak bir kare kesmemiz gerektiğini varsayalım. Bunu yapmamıza izin veren kod şöyle görünür:

.img { en-boy oranı: 1; genişlik: 300 piksel; nesne görüntüleme kutusu: ek (%25 %20 %15 %5); nesne sığdırma: kapak;}

bu ek (%25 %20 %20 %15 %5) değerler, görüntülenecek orijinal görüntü içindeki çerçevenin üst, sağ, alt ve sol konumlarını gösterir. Ve nesneye uygun kapak değerine sahip özellik, ortaya çıkan parçanın bozulmamasını sağlar.

Şu anda animasyon yapamıyoruz nesne görüntüleme kutusu aracılığıyla mülkiyet geçiş özelliği, ancak ölçek veya görünüm alanında düzgün bir değişiklik elde etmek için @keyframes kullanılarak canlandırılabilir.

Önceki yaklaşımlar

olmadan nesne görüntüleme kutusu görüntülerin veya videoların kırpılması sorununu çözmek için, taşma: gizli; özelliği, içindeki içeriği konumlandırma ve ölçekleme. Resimler için ayrıca arka plan görüntüsü mülkiyet yerine img etiketi uygulayarak arka plan pozisyonu Ve arka plan boyutu konumlandırma ve ölçeklendirme özellikleri. Belki yetersiz olsa da bir diğer yaygın çözüm, aynı görüntünün farklı parçaları için farklı dosyalar kullanmaktır.

Tarayıcı desteği:

bu nesne görüntüleme kutusu özelliği tamamen yenidir ve Mayıs 2022’de kullanıma sunulmuştur. Buna rağmen Google Chrome ve Opera’nın en son sürümleri tarafından zaten desteklenmektedir.

Şartname: W3C Editör Taslağı

ek

bu ek property, diğer dört özelliğin yerine geçer: tepe, Sağ, alt, Ve solaynı anda dört kenardaki konumlandırılmış öğenin ekini belirtmenize olanak tanır.

bu ek property için bir kısaltma gibidir marj Ve dolgu malzemesi özellikler. Konumlandırılmış öğenin ekini üstten, sağdan, alttan ve soldan belirtmenize olanak tanır.

Top, right, bottom ve left özelliklerini kullanmak yerine tek bir ek özelliği kullanabilirsiniz.Top, right, bottom ve left özelliklerini kullanmak yerine tek bir ek özelliği kullanabilirsiniz.

Kod örneği

Bu, tarayıcının tüm alanını kaplayan, mükemmel şekilde konumlandırılmış bir açılır pencerenin kodudur:

.modal { pozisyon: mutlak; iç metin: 0;}

Bu kısa giriş, tamamen konumlandırılmış bir öğeyi sayfanın tam genişliğine ve yüksekliğine uzatmak gibi yaygın bir sorunu çözer.

Önceki yaklaşımlar

Önce ek özelliğini kullanarak, konumlandırılmış bir öğeyi görünüm penceresinin tüm alanına yayma sorununu şu şekilde çözeriz:

.modal { pozisyon: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0;}

Dört yerine bir özellik kullanmanın uygun ve kompakt olduğunu söylemeye gerek yok.

Tarayıcı desteği: %92,12

Caniuse.com'dan başlıca tarayıcılarda mdn-css__properties__inset özelliği desteğine ilişkin veriler

Şartname: W3C Editör Taslağı

kaydırma çubuğu-oluk

bu kaydırma çubuğu-oluk özelliği, kaydırma çubuğu alanı ayırmaya izin verir. Bu özelliği kullandığımızda kaydırma çubuğu olup olmamasına bağlı olarak içerik yeniden düzenlenmiyor.

bu kaydırma çubuğu-oluk özelliği, dinamik içerikle dolu tek sayfalık uygulamaların geliştiricileri için kullanışlıdır. Önceden, böyle bir uygulamada bir kaydırma çubuğu görünürse, tüm içerik kaydırma çubuğu genişliği boyunca sola kayardı.

Tavsiye Edilen:  Hedef Pazarlama – Kaçırılmaması Gereken 12 Unsur
İçerik miktarı arttığında, sağda bir kaydırma çubuğu görünür ve tüm içerik keskin bir şekilde sola kayar.İçerik miktarı arttığında, sağda bir kaydırma çubuğu görünür ve tüm içerik keskin bir şekilde sola kayar.
scrollbar-gutter özelliği ile kaydırma çubuğu alanını ayırabilirsinizscrollbar-gutter özelliği ile kaydırma çubuğu alanını ayırabilirsiniz

Kod örneği

Bu kod, kaydırma çubuğu alanı için yer ayırır ve içeriğin göründüğünde yerinden oynamamasını sağlar.

html { scrollbar-gutter: her iki kenar sabit;}

Önceki yaklaşımlar

tanıtımından önce kaydırma çubuğu-oluk özelliği, kaydırma çubuğu göründüğünde içeriğin kaymasını önlemek için, negatif bir hack’e başvurmak zorunda kaldık. marj ve taşma-x: gizlenmiş HTML için özellik:

html { taşma-x: gizli; sağ kenar boşluğu: calc(-1 * (100vw – 100%));}

Tarayıcı desteği: %74,6

Bu özellik, tüm eskimeyen tarayıcılar tarafından desteklenir.

Şartname: W3C Editör Taslağı

metin taşması ve satır kelepçesi

bu metin taşması Ve hat kelepçesi özellikler, görünümün içine sığmayan metni kesmek için kullanılır. kullanabilirsiniz metin taşması özelliği, tek satırlık metni kırpmak istiyorsanız ve hat kelepçesi özelliği, çok satırlı metni kesmek için kullanışlıdır.

Bu örnekte, makalelerin içeriği yalnızca ilk iki satır görünür kalacak şekilde kırpılmıştır - tümü line-clamp CSS özelliği sayesindeBu örnekte, makalelerin içeriği yalnızca ilk iki satır görünür kalacak şekilde kırpılmıştır – tümü line-clamp CSS özelliği sayesinde

Kod örnekleri

bu metin taşması ile mülkiyet üç nokta value metnin bir satırını kabın genişliğine göre keser ve sonunda üç nokta bırakır:

.title { ekran: blok; genişlik: 350 piksel; taşma: gizli; metin taşması: üç nokta; boşluk: şimdi rap;}

bu metin taşması özellik, öğe de verilirse yalnızca blok kaplar için çalışır Beyaz boşluk olan bir mülk şimdi rap değer ve taşma olan bir mülk gizlenmiş, taslak, veya Oto değer.

için mevcut değerler metin taşması mülkiyet klips (metin tam olarak ana bloğun kenarından kırpıldığında) ve üç nokta (satırın sonuna bir üç nokta eklendiğinde).

bu hat kelepçesi özellik ile birlikte kullanılır -webkit önek. 2 değeri, metnin yalnızca iki satırının görünür kalacağı anlamına gelir.

.text { ekran: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: dikey; taşma: gizli;}

bu hat kelepçesi özellik, yalnızca bir blok kapsayıcısı için çalışır ve şu özellik ile birlikte çalışır: görüntülemek ve -webkit-box-orient mülk. Ayrıca ihtiyacınız olacak taşma ile mülkiyet gizlenmiş içeriği belirtilen sayıda satırdan sonra kesmek için değer.

Önceki yaklaşımlar

Metni belirtilen sayıda karaktere kısaltmak, JavaScript ile kolayca yapılabilir:

const cutText = (metin, sayı) => { dönüş metni.slice(0, sayı) + ‘…’;}

Burada, saymak metnin kesilmesi gereken karakter sayısı anlamına gelir. Bu yöntem yeterince basittir, ancak bir dezavantajı vardır. CSS’den farklı olarak, JavaScript metin satırları hakkında hiçbir şey bilmez. Belirtilen sayıda karakter bırakarak onu kesebilir, ancak aynı sayıda karakter içeren metin farklı sayıda satır alabilir. Sonuç olarak, metni JavaScript ile kesmek, CSS’ye kıyasla daha az güvenilir olacaktır.

Tarayıcı desteği: %96,24

Özellik aşağıdaki önekle kullanılır: -webkit-line-clamp

Başlıca tarayıcılarda css-line-clamp özelliği desteğine ilişkin veriler caniuse.com'dan alınmıştır.

Şartname: W3C Editör Taslağı

değişken yazı tipleri

Değişken yazı tiplerinin, herhangi bir stil için bir yazı tipi dosyasının kullanıldığı belirli bir özelliği vardır. Normal bir yazı tipi söz konusu olduğunda, düzeniniz aşağıdaki gibi iki stil kullanıyorsa düzenli Ve gözü pek, iki yazı tipi dosyası yüklemeniz gerekir. Değişken bir yazı tipi için, tüm yazı tipi değişkenlerini içeren yalnızca bir dosyanın yüklenmesi gerekir.

Değişken yazı tipleri tıpkı normal yazı tipleri gibi kullanılabilir, ancak gerçekte çok daha fazlasını sunabilirler. Normal yazı tipleri için, yazı tipi ağırlığı özelliği, 100’lük artışlarla 100 ile 900 arasında değerler alırken, değişken yazı tipleri için 1 ile 999 arasında herhangi bir tamsayı olabilir. Normal yazı tipleri için, yazı stili mülk iki tane alır normal Ve italik değerler, oysa değişken yazı tipleri için eğik açıyı –90 derece ile 90 derece. bu yazı tipi uzatma Değişken yazı tiplerinin özelliği, normal oranın %100’e karşılık geldiği %50 (dar yazı tipi) ile %200 (geniş yazı tipi) arasında değişir. Ve sonra var yazı tipi-optik-boyutlandırma boyutuna bağlı olarak bir yazı tipinin görünümünü değiştiren özellik.

Statik yazı tiplerinin farklı yazı biçimleri ayrı dosyalarda saklanır, ancak değişken yazı tipleri söz konusu olduğunda tek bir dosya yeterlidir.Statik yazı tiplerinin farklı yazı biçimleri ayrı dosyalarda saklanır, ancak değişken yazı tipleri söz konusu olduğunda tek bir dosya yeterlidir.

Kod örneği

Değişken yazı tipi yükleme kodu:

@font-face { font-ailesi: Inter; src: url(“varlıklar/yazı tipleri/Inter.woff2”);}

Inter bu tür bir değişken yazı tipidir ve tüm yazı biçimleri için bir yazı tipi dosyası yüklemek yeterlidir.

Önceki yaklaşımlar

Statik yazı tipi yüklemek için kod:

@font-face { font-ailesi: Roboto; src: url(“varlıklar/yazı tipleri/RobotoThin.woff2”); yazı tipi ağırlığı: 100; } @font-face { font-family: Roboto; src: url(“varlıklar/yazı tipleri/RobotoRegular.woff2”); yazı tipi ağırlığı: 400;}

Roboto statik bir yazı tipidir ve her yazı tipi için ayrı bir yazı tipi dosyası yüklememiz gerekir.

Tarayıcı desteği: %95,95

Değişken yazı tipleri ilk olarak 2016’nın sonunda tanıtıldı ve mükemmel tarayıcı desteğine sahiptir.

Başlıca tarayıcılarda değişken yazı tipi özelliği desteğine ilişkin veriler caniuse.com'dan alınmıştır.

Şartname: W3C Editör Taslağı

Tavsiye Edilen:  2023'te İhtiyacınız Olan Amazon Storefront Optimizasyon İpuçları

CSS özel özellikleri (değişkenler)

CSS değişkenleri, bir belgede yeniden kullanılabilmeleri için kod yazarı tarafından bildirilen, belirtilen değerlere sahip CSS özellikleridir. Ayrıca kod tekrarını önlemeye yardımcı olurlar. Bir değişkeni yalnızca bir kez tanımlayabilir ve ardından gerektiğinde kodda yeniden kullanabilirsiniz. Bir değişiklik yapmak istiyorsanız, bir değişkenin değerini tek bir yerde değiştirmeniz yeterlidir.

CSS değişkenleri JavaScript’ten yönetilebilir.

CSS değişkeninin değerini almak:

element.style.getPropertyValue(‘–ana-renk’);

CSS değişkeninin bir değerini ayarlamak:

element.style.setProperty(‘–translate’, `${currentScroll}px`);

Uygulamalara koyu ve açık temalar arasında geçiş eklemeyi çok kolay ve kullanışlı hale getiriyorlar.

CSS değişkenleri, :root öğesinde (değişkenler uygulama boyunca kullanılabilir olacak) veya herhangi bir seçici içinde (yalnızca seçilen öğe ve alt öğeleri için kullanılabilir olacak) tanımlanabilir.CSS değişkenleri, :root öğesinde (değişkenler uygulama boyunca kullanılabilir olacak) veya herhangi bir seçici içinde (yalnızca seçilen öğe ve alt öğeleri için kullanılabilir olacak) tanımlanabilir.

Kod örneği

Bir değişken bildirmek:

:root { –color-red: #79142B;}

Bir CSS değişken değeri nasıl alınır:

.item { renk: var(–renk-kırmızı);}

Önceki yaklaşımlar

Değişkenler ilk olarak CSS çerçevelerinde ortaya çıktı. Normal CSS’ye eklenmesi, kodu optimize etmeyi, okunabilirliğini artırmayı ve daha fazla esneklik sağlamayı mümkün kılan önemli bir gelişmeydi.

Tarayıcı desteği: %96,7

CSS değişkenleri 2017’de önerildi. Şu anda W3C’nin aday tavsiyesi (CR) aşamasındalar, yani bu makalede açıklanan diğer özellikler arasında gerçek uygulamaya en yakın olanlardır. Tüm popüler tarayıcılar tarafından desteklenir.

Başlıca tarayıcılarda css değişkenleri özelliği desteğine ilişkin veriler caniuse.com'dan alınmıştır.

Şartname: W3C Aday Tavsiyesi

min(), max(),lamp() CSS işlevleri

bu dk(), maks(), Ve kelepçe() CSS işlevleri, bir grup karşılaştırma işlevi oluşturur. Birkaç değer alırlar ve bunlardan birini döndürürler. dk() işlev, değerlerin minimumunu döndürürken, maks() işlev, tahmin ettiğiniz gibi maksimum olanı döndürür. bu kelepçe() işlevi üç değer alır: minimum, önerilen ve maksimum ve belirtilen sınırlar içindeyse önerilen değeri döndürür.

Bu karşılaştırma işlevleri, dinamik düzenler oluşturma ve esnek bileşenler tasarlama yeteneğimizi genişletebilir. Öğe boyutlarını, yazı tiplerini, girintileri ve daha fazlasını ayarlamak için bunları kullanabilirsiniz. Bir elemanın genişliği ve yüksekliği için zaten minimum ve maksimum değerler belirleyebilmemize rağmen, aynısını yazı tipi boyutu ve girinti için yapmayı mümkün kılan karşılaştırma işlevleridir.

En üstteki örnek, çeşitli ekran çözünürlükleri için farklı değerler belirterek sayfaların bugün nasıl tasarlandığını gösterir.  En altta, karşılaştırma işlevleri sayesinde gelecekte neler bekleyebileceğimiz yer alıyor.En üstteki örnek, çeşitli ekran çözünürlükleri için farklı değerler belirterek sayfaların bugün nasıl tasarlandığını gösterir. En altta, karşılaştırma işlevleri sayesinde gelecekte neler bekleyebileceğimiz yer alıyor.

Kod örnekleri ve önceki yaklaşımlar

Ortak bir görev vardır – üst öğenin tüm genişliği boyunca uzanan ve maksimum boyutunu sınırlayan bir kapsayıcı öğe oluşturmak. Geleneksel çözüm aşağıdaki gibi görünür:

.container { genişlik: %100; maksimum genişlik: 1024px;}

Ve işte min() işlevinin yardımıyla tek satırlık bir çözüm:

.container {genişlik: min(100%, 1024px);}

İşte başka bir gerçek zorluk — minimum yüksekliğini belirtirken 100vh yüksek bir bölüm oluşturmak:

.bölüm { yükseklik: 100vh; minimum yükseklik: 680px;}

İşte max() işleviyle tek satırlık bir çözüm:

.bölüm { yükseklik: maks(100vh, 680px);}

için unutmayın dk() Ve maks() işlevler, bağımsız değişkenlerin sırası önemli değildir. Her durumda, ilki daha küçük bir değer döndürür ve ikincisi daha büyük bir değer döndürür. Aynı şey, değerlerin küçükten büyüğe gitmesi gereken kelepçe() işlevi için söylenemez:

.design {genişlik: kelepçe(350 piksel, %50, 650 piksel);}

Üst öğenin genişliğinin yarısını kaplayan bir tasarım öğemiz var, ancak genişliği 350 pikselden az veya 650 pikselden fazla olamaz.

Önce kelepçe() işlevi, bunu genellikle farklı ekran çözünürlükleri için farklı öğe genişlikleri belirleyerek medya sorgularını kullanarak çözerdik. İle kelepçe() işlev, görev çok daha basit hale geldi ve öğe boyutundaki değişiklik, belirli bir değer aralığında sürekli.

Tarayıcı desteği: %94,44

Karşılaştırma işlevleri için destek 2020’de geldi ve tüm popüler tarayıcılarda çalışıyorlar.

Başlıca tarayıcılarda css-math-functions özelliği desteğine ilişkin veriler caniuse.com'dan alınmıştır.

Şartname: W3C Editör Taslağı

Çözüm

CSS, en basit ve aynı zamanda en karmaşık dillerden biri olarak kabul edilir. Başlangıçta yeterince basit – belirli öğeler için stil özelliklerini ve bunların değerlerini tanımlarsınız ve bilmeniz gereken hemen hemen tek şey bu!

Ancak, CSS sürekli olarak güncellenmektedir; yaklaşımlar değişiyor ve eski sorunlara yeni çözümler bulmak için yeni özellikler ve işlevler sunuluyor. Bu, geliştiricilerin sürekli olarak mevcut değişikliklerden haberdar olmalarını ve gelişmelerini ve gelişmelerini gerektirir.

Umarım bu makalede açıklanan özellikler ve yetenekler ilginizi çekmiştir ve işinizde faydalı olacaktır.