Bilmeniz Gereken İlginç CSS Özellikleri

Geçen hafta CSS'deki sözde öğelerden ve sözde sınıflardan bahsediyorduk. Bu gönderide, bu CSS özelliklerinin nasıl daha kısa, anlaşılır ve bakımı kolay kodlar oluşturmamıza izin verdiğini gördük. Bugün , ziyaretçilerinizin tercihlerini dikkate alan uyarlanabilir web siteleri oluşturmak için bazı ek CSS özelliklerini sizinle paylaşmak istiyorum.

object-fit ve object-position ile En Boy Oranları

object-fit , bir yedek öğenin (örneğin bir görüntünün) kabına sığacak şekilde nasıl yeniden boyutlandırılacağını ayarlamanıza olanak tanıyan bir CSS özelliğidir. Bunun ne anlama geldiğini somut bir örnekle görelim değil mi?

Aşağıdaki dikey resme sahip olduğumuzu varsayalım:

ve onu aşağıdaki alanda görüntülemek istiyoruz:

15em yüksekliğindedir ve mevcut genişliğin 80% alır. Prensip olarak, tek yapmamız gereken imajımıza belirli bir width ve height ayarlamak olduğunu düşünebilirsiniz, değil mi?

 .custom-size { height: 15em; width: 80%; }

Bunu yaparsanız, görüntünün en boy oranının bozulduğunu göreceksiniz:

Belirli genişlik ve yükseklik kullanırken bir görüntünün bozulmasını önlemek için, geliştiriciler eskiden bir div CSS background özelliğine güvenirdi (ve bazıları hala kullanır). Bu nedenle, img etiketini kullanarak görüntüyü eklemek yerine, bir div kapsayıcı oluştururduk:

 <div></div>

doğru boyutları söz konusu div olarak ayarlayın ve ardından background-size ve background-position özelliklerini kullanarak gerçek görüntüyü CSS aracılığıyla ekleyin:

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

Ve burada sonucu görebilirsiniz:

Bir div etiketinde CSS background özelliklerini kullanarak görüntüleri ölçeklemek ve kırpmak kötü bir çözümdür, çünkü artık anlamsal olarak doğru HTML etiketini kullanmıyorsunuz: img . Ayrıca, img etiketleri, daha hızlı ve daha erişilebilir web siteleriyle sonuçlanacak bir dizi harika özellik içerir: görüntüyü tanımlayan bir alt özelliği, duyarlı hale getirmek için srcset , tembel yüklemek için loading vb.

Bir görüntüyü, görüntüyü bozmadan belirli boyutlara sığacak şekilde ölçeklemek ve kırpmak istiyorsanız, tek yapmanız gereken, background-size ve background-position gibi davranan nesne object-fit ve object-position CSS özelliklerini kullanmaktır. yapmak:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Önceki kuralları bir img etiketine uygularsanız:

 <img class="custom-size" src="…/image.jpg" />

aldığınız sonuç şudur:

tam olarak ilgilendiğin şey buydu, değil mi?

Bu mülk hakkında daha fazla bilgi edinmek istiyorsanız, gerekli tüm bilgileri içeren bir bağlantı burada.

Medya Sorgularıyla Uyarlanabilir Tasarım

Medya sorguları, ziyaretçilerinizin web'e eriştiği cihazın veya uygulamanın özelliklerine göre web sitenize CSS kuralları eklemenize olanak tanıyan bir mekanizmadır. Duyarlı web siteleri oluşturmanın temeli medya sorguları olduğundan, bunlara biraz aşina olduğunuzdan oldukça eminim, ancak bunlarla yapabileceğiniz daha pek çok şey var!

Klasik Medya Sorguları

Bir CSS stil sayfasında bir medya sorgusu kullanmak, @media anahtar sözcüğünü iki şeyle eklemek kadar kolaydır: bir yanda, medya sorgusunun ne zaman etkin olduğunu açıklayan bir koşul ve diğer yanda, olması gereken CSS kuralları kümesi. koşul sağlandığında yüklenir. Bu nedenle, duyarlı tasarımlar oluşturmanın temeli medya sorgularıdır: ziyaretçinin tarayıcısının width bağlı olarak bir dizi kural veya başka bir kural uygulamanız yeterlidir.

Örneğin, aşağıdaki paragrafın kenar çubuğunu değiştirmek istediğinizi varsayalım:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Verandadaki aslan bazen yumuşak çirkindir, ancak dış mekan öğesinde titrer. Ancak girişimcilerin ihtiyaç duyduğu termal stres. Ayrılmış mikrodalga, ancak kapım her zaman veya bazen kitle yazarıdır. Android ve Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Ancak, ultricies ac, arcu metus Sed congue. Kolaylık için leo gelişmiş proteinden korkun. Bir tellus orci, tempor id egestas nec, en azından bazı oyuncular olsun.

böylece tarayıcının genişliğine bağlı olarak gökkuşağındaki tüm renkleri kullanır. Bu davranışı CSS aracılığıyla şu şekilde gerçekleştirebilirsiniz:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Oldukça kolay, değil mi? Tarayıcının genişliği belirli bir eşiğin üzerine çıktığında her seferinde farklı bir renk uygulamamız gerekiyor. Ekran büyüdükçe "yeni" kurallar uygulandığından, bunu önce mobil yaklaşımı kullanarak uyguladığımızı unutmayın. Pencerenin genişliğini değiştirin ve sonucu göreceksiniz.

Karanlık Mod CSS ile Nasıl Uygulanır?

Karanlık modlar artık hem mobil hem de masaüstünde moda. Kullanıcıların karanlık modları tercih edip etmediğini görmek için bir medya sorgusu olduğunu biliyor muydunuz? Medya sorgusunu prefers-color-scheme kullanarak, kullanıcının light renk düzeni mi yoksa dark renk düzeni mi tercih ettiğini görebilirsiniz. Bu, artık tüm ziyaretçilerinizin tercihleriyle eşleşmesi için web sitenizin iki sürümünü oluşturma gücüne sahip olduğunuz anlamına gelir.

Örneğin, aşağıdaki HTML parçacığını göz önünde bulundurun:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

ve bu CSS kuralları:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

Kurulumunuza bağlı olarak, önceki HTML snippet'inin "Dinamik" bölümünün Açık Tema veya Koyu Tema gibi göründüğünü göreceksiniz:

Oldukça havalı, ha? Ve basit!

Medya Sorguları ile Diğer İlginç Kullanım Örnekleri

Kullanabileceğiniz birçok medya sorgusu var (burada tam bir liste var), ancak özellikle bir tanesine odaklanmak istiyorum. Özellikle, sayfanın tarayıcıda görüntülenmesine veya yazdırılmak üzere olmasına bağlı olarak farklı stillerin nasıl uygulanacağını size açıklamak istiyorum. Tek yapmanız gereken medya sorgusu için print veya screen anahtar sözcüğünü aşağıdaki gibi kullanmaktır:

 @media print { … } @media screen { … }

veya her kullanım durumu için bir tane olmak üzere iki ayrı CSS dosyası oluşturun ve bunları bir link etiketinin media özelliğini kullanarak HTML'nize ekleyin:

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Bununla ilgili ilginç olan şey, sitenizi yazdırılmak üzere tasarlanmış bir içeriğe dönüştüren bir stil sayfası oluşturabilmenizdir. Böylece, örneğin, web'in basılı versiyonunda bir anlam ifade etmeyen dinamik kısımlarını (menüler veya formlar gibi) gizleyebilirsiniz. Veya, örneğin bir bağlantının hedef URL'si gibi, yazdırıldığında kaybolan bazı şeylerin görünür hale gelmesini bile sağlayabilirsiniz:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

kimin sonucu aşağıdaki gibidir:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum mollis leo turpis interdum'da, pharetra velit elementum'da. İsim eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque ve Massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

CSS Değişkenleri

Son olarak, başka bir harika CSS özelliğinden bahsedelim: CSS özel özellikleri (CSS değişkenleri olarak da bilinir). Karmaşık web sitelerinde çok büyük miktarda CSS bulunur ve aynı değerin defalarca tekrarlanması oldukça yaygındır. Örneğin, renk paletiniz, kenarlıklar, dolgular vb. her yerde kullanılır. Peki, CSS değişkenleri bu karmaşıklığı basitleştirir. Ve karanlık modu kolayca uygulamak için son derece kullanışlıdırlar!

CSS değişkenleri tam olarak düşündüğünüz şeydir: belirli bir CSS değerini anlamlı bir ad arkasında saklamanın ve yeniden kullanmanın bir yolu. --main-text-color ne olduğunu anlamak #333 333'ten çok daha kolay, değil mi?

Özel bir özelliğin bildirilmesi, çift tire ( -- ) ile başlayan bir özel özellik adı ve herhangi bir geçerli CSS değeri olabilen bir özellik değeri kullanılarak yapılır. Diğer tüm özellikler gibi, bu da bir kural kümesinin içinde şöyle yazılır:

 element { --main-color: red; --main-padding: 2em 1em; }

CSS değişkenini tanımladığınız kural bloğunda kullandığınız seçici, kapsamını belirler. Yani bir div.banner kuralı içinde bir değişken tanımlarsanız, o değişken sadece o kapsamda kullanılabilir olacaktır. Bununla birlikte, en yaygın olanı, :root sözde sınıfını kullanarak global kapsamda değişkenler oluşturmaktır:

 :root { --main-color: red; --main-padding: 2em 1em; }

Bir CSS değişkeni kullanmak için, onun adını var işlevi içinde belirtmeniz yeterlidir:

 p { color: var(--main-color); padding: var(--main-padding); }

CSS Size Yardımcı Olmak İçin Burada

Bir web sayfasının HTML yapısı bir evin temeli gibidir; sağlam bir şey inşa etmek istiyorsanız sağlam bir temele ihtiyacınız vardır. Bir web sayfası oluştururken anlamsal olarak doğru ve temiz bir HTML ağacı kullandığınızdan emin olun. Bu, tüm ziyaretçiler için tüm tarayıcılarda çalışacak bir sayfayla sonuçlanacak ve üstüne CSS hileleri uygulamak basit ve etkili olacaktır.

Umarım bugünkü yazımı beğenmişsinizdir. Yaptıysanız, arkadaşlarınızla paylaşın

Unsplash'ta William Daigneault tarafından öne çıkan görsel.