Bu yayında, ciddi miktarda iş yapan ve güçlü, modern düzenler oluşturmanıza yardımcı olan birkaç güçlü CSS satırı vurgulanmaktadır.
Modern CSS düzenleri, geliştiricilerin yalnızca birkaç tuş vuruşuyla gerçekten anlamlı ve güçlü stil kuralları yazmasını sağlar. Yukarıdaki konuşma ve sonraki gönderide, ciddi düzeyde ağır işler yapan 10 etkili CSS satırı incelenmektedir.
Bu demoları kendi başınıza takip etmek veya oynamak için yukarıdaki Glitch yerleşimine göz atın ya da 1linelayouts.glitch.me adresini ziyaret edin.
01. Süper Merkezlenmiş: place-items: center
İlk "tek satır" düzeninde, CSS dünyasındaki en büyük gizemi çözelim: Öğeleri hizalama. place-items: center ile bu işlemin düşündüğünüzden daha kolay olduğunu bilmenizi isteriz.
Önce display yöntemi olarak grid'ü belirtin, ardından aynı öğeye place-items: center yazın. place-items, hem align-items hem de justify-items değerini aynı anda ayarlamak için kullanılan kısa bir ifadedir. Bu değer center olarak ayarlandığında hem align-items hem de justify-items center olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu sayede içerik, doğal boyutundan bağımsız olarak ana öğe içinde mükemmel şekilde ortalanır.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Bir sonraki yemeğimiz, parçalara ayrılmış krep. Bu, pazarlama siteleri için yaygın bir düzendir. Örneğin, genellikle bir resim, başlık ve ardından bir ürünün bazı özelliklerini açıklayan metin içeren 3 öğe satırı olabilir. Mobil cihazlarda bunların güzelce yığılmasını ve ekran boyutunu artırdıkça genişlemesini isteriz.
Bu efekt için Flexbox'u kullandığınızda ekran boyutu değiştiğinde bu öğelerin yerleşimini ayarlamak için medya sorgularına ihtiyacınız olmaz.
flex kısayolu şu anlama gelir: flex: <flex-grow> <flex-shrink> <flex-basis>.
Bu nedenle, kutularınızın <flex-basis> boyutuna kadar doldurulmasını, daha küçük boyutlarda küçülmesini ancak ek alanı doldurmak için uzanmasını istemiyorsanız flex: 0 1 <flex-basis> yazın. Bu durumda <flex-basis> değeriniz 150px olduğundan sonuç şöyle görünür:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Kutuların bir sonraki satıra sarmalanırken esnemesini ve alanı doldurmasını istiyorsanız <flex-grow> değerini 1 olarak ayarlayın. Böylece, aşağıdaki gibi görünür:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Artık ekran boyutunu artırdığınızda veya azalttığınızda, bu esnek öğeler hem küçülür hem de büyür.
03. Kenar çubuğunda: grid-template-columns: minmax(<min>, <max>) …)
Bu demoda, ızgara düzenleri için minmax işlevinden yararlanılmıştır. Burada, minimum kenar çubuğu boyutunu 150px olarak ayarlıyoruz ancak daha büyük ekranlarda bu boyutun 25%'e kadar uzamasına izin veriyoruz. Kenar çubuğu, 25% 150px'ten küçük olana kadar her zaman üst öğesinin yatay alanının 25%'ini kaplar.
Bunu, grid-template-columns değerine aşağıdaki değerle ekleyin:
minmax(150px, 25%) 1fr. İlk sütundaki öğe (bu durumda kenar çubuğu), 25%'de 150px boyutunda bir minmax alır ve ikinci öğe (burada main bölümü), alanın geri kalanını tek bir 1fr parçası olarak kaplar.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pankek Grubu: grid-template-rows: auto 1fr auto
Yapışılmış Pancake'den farklı olarak bu örnekte, ekran boyutu değiştiğinde alt öğeleri sarmalanmamaktadır. Genellikle yapışkan altbilgi olarak adlandırılan bu düzen, hem web siteleri hem de uygulamalar için sıklıkla kullanılır. Mobil uygulamalarda (altbilgi genellikle bir araç çubuğudur) ve web sitelerinde (tek sayfalık uygulamalar genellikle bu genel düzeni kullanır) bu düzene sıklıkla rastlanır.
Bileşene display: grid eklendiğinde tek sütunlu bir ızgara elde edersiniz, ancak ana alan yalnızca alt kısmında altbilgi bulunan içeriğin yüksekliği kadar olur.
Altbilginin en altta kalmasını sağlamak için şunları ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu sayede başlık ve altbilgi içeriği, alt öğelerinin boyutunu otomatik olarak alacak şekilde ayarlanır ve kalan alan (1fr) ana alana uygulanır. auto boyutundaki satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Böylece, içerik boyutu arttıkça satır da buna uyum sağlayacak şekilde büyür.
05. Klasik Kutsal Kase Düzeni: grid-template: auto 1fr auto / auto 1fr auto
Bu klasik "kutsal grail" düzeninde başlık, altbilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik bulunur. Önceki düzene benzer ancak artık kenar çubukları var.
Bu ızgaranın tamamını tek bir kod satırı kullanarak yazmak için grid-template özelliğini kullanın. Bu sayede hem satırları hem de sütunları aynı anda ayarlayabilirsiniz.
Özellik ve değer çifti: grid-template: auto 1fr auto / auto 1fr auto. Boşlukla ayrılmış ilk ve ikinci listeler arasındaki eğik çizgi, satırlar ile sütunlar arasındaki boşluğu gösterir.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Başlıkta ve altbilgi bölümünde otomatik boyutlandırılmış içeriğin bulunduğu son örnekte olduğu gibi, burada da sol ve sağ kenar çubuğu, alt öğelerinin doğal boyutuna göre otomatik olarak boyutlandırılır. Ancak bu sefer dikey (yükseklik) yerine yatay boyut (genişlik) kullanılır.
06. 12 sütunlu ızgara: grid-template-columns: repeat(12, 1fr)
Sırada bir başka klasik var: 12 aralıklı ızgara. repeat() işlevini kullanarak CSS'de hızlıca ızgaralar yazabilirsiniz. repeat(12, 1fr); değerini kullanarak ızgara şablonu sütunları için 1fr boyutunda 12 sütun elde edersiniz.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Artık 12 sütunlu bir parça ızgarasına sahipsiniz. Alt öğelerimizi ızgaraya yerleştirebiliriz. Bunu yapmanın bir yolu, ızgara çizgilerini kullanarak öğeleri yerleştirmektir. Örneğin, grid-column: 1 / 13 ilk satırdan son satıra (13. satır) kadar ve 12 sütun boyunca uzanır. grid-column: 1 / 5;, ilk dördü kapsar.
Bunu yazmanın bir diğer yolu da span anahtar kelimesini kullanmaktır. span ile başlangıç satırını ve ardından bu başlangıç noktasından kaç sütuna yayılacağını belirlersiniz. Bu durumda grid-column: 1 / span 12, grid-column: 1 / 13 ile eşdeğer olur ve grid-column: 2 / span 6, grid-column: 2 / 8 ile eşdeğer olur.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Tekrar, Otomatik, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Bu yedinci örnekte, otomatik olarak yerleştirilmiş ve esnek alt öğeler içeren duyarlı bir düzen oluşturmak için daha önce öğrendiğiniz kavramlardan bazılarını birleştirin. Çok güzel. Burada hatırlamanız gereken temel terimler repeat, auto-(fit|fill) ve minmax()''dir. Bu terimleri RAM kısaltmasıyla hatırlayabilirsiniz.
Tüm bunlar birlikte şöyle görünür:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Tekrarlamayı tekrar kullanıyorsunuz, ancak bu kez açık bir sayısal değer yerine auto-fit anahtar kelimesini kullandınız. Bu, bu alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu alt yayıncılar da maksimum 1fr değerine sahip taban minimum 150px değerine sahiptir. Yani daha küçük ekranlarda, bu öğeler 1fr genişliğinin tamamını kaplar ve her biri 150px genişliğe ulaştıkça aynı satıra akmaya başlar.
auto-fit ile kutular, yatay boyutları 150 pikseli aştığında kalan alanın tamamını dolduracak şekilde uzatılır. Ancak bunu auto-fill olarak değiştirirseniz minmax işlevindeki temel boyutları aşıldığında uzamazlar:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Satır: justify-content: space-between
Bir sonraki düzen için burada gösterilecek ana nokta justify-content: space-between, ilk ve son alt öğeleri sınırlayıcı kutuların kenarlarına yerleştirir ve kalan alan öğeler arasında eşit olarak dağıtılır. Bu kartlar, Flexbox görüntüleme moduna yerleştirilir ve yön, flex-direction: column kullanılarak sütuna ayarlanır.
Bu işlem, başlığı, açıklamayı ve resim bloğunu ana kartın içindeki dikey bir sütuna yerleştirir. Ardından, justify-content: space-between uygulandığında ilk (başlık) ve son (resim bloğu) öğeleri flexbox'ın kenarlarına sabitlenir ve bunların arasındaki açıklayıcı metin her uç noktaya eşit boşlukla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Daha az tarayıcı desteği sağlayan bazı teknikleri ele alıyoruz, ancak düzenler ve duyarlı kullanıcı arayüzü tasarımı konusunda heyecan verici birkaç etki yaratıyoruz. Bu demoda, genişliği clamp kullanarak şu şekilde ayarlıyorsunuz: width: clamp(<min>, <actual>, <max>).
Bu, mutlak minimum ve maksimum boyutu ve gerçek boyutu belirler. Değerlerle bu durum şöyle görünebilir:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Buradaki minimum boyut 23ch veya 23 karakterlik birim, maksimum boyut ise 46ch olan 46 karakterdir. Karakter genişliği birimleri, öğenin yazı tipi boyutuna (özellikle 0 glifinin genişliğine) bağlıdır. "Gerçek" boyut %50'dir ve bu öğenin üst öğesinin% 50'sini temsil eder.
clamp() işlevi burada, bu öğenin% 50 genişliği ta ki% 50, 46ch'ten (daha geniş görüntü alanlarında) veya 23ch'ten (daha küçük görüntü alanlarında) büyük olana kadar korumasını sağlar. Ana boyutu uzatıp küçülttüğümüzde bu kartın genişliğinin, sınırlandırılmış maksimum noktasına kadar arttığını ve sınırlandırılmış minimum noktasına kadar azaldığını görebilirsiniz. Daha sonra, hizalamak için ek özellikler uyguladığımızdan üst öğede hizalı kalır. Metin çok geniş (46ch'ün üzerinde) veya çok sıkışık ve dar (23ch'ün altında) olmadığından bu, daha okunaklı düzenler sağlar.
Bu, duyarlı yazı tiplerini uygulamak için de mükemmel bir yoldur. Örneğin, font-size: clamp(1.5rem, 20vw, 3rem) yazabilirsiniz. Bu durumda, bir başlığın yazı tipi boyutu her zaman 1.5rem ile 3rem arasında sabit kalır ancak görüntü alanının genişliğine sığması için 20vw gerçek değerine göre büyür ve küçülür.
Bu, minimum ve maksimum boyut değeriyle okunabilirliği sağlamak için harika bir tekniktir. Ancak tüm modern tarayıcılarda desteklenmediğini unutmayın. Bu nedenle, yedekleriniz olduğundan ve testlerinizi yaptığınızdan emin olun.
10. En boy oranına saygı: aspect-ratio: <width> / <height>
Son olarak, bu son düzen aracı, bu alandaki en deneysel olanıdır. Bu özellik kısa süre önce Chromium 84'te Chrome Canary'da kullanıma sunuldu. Firefox bu özelliğin uygulanması için aktif olarak çalışıyor ancak şu anda kararlı tarayıcı sürümlerinde bulunmuyor.
Ancak bu sorunla sık sık karşılaşıldığı için bu konuyu belirtmek isterim. Bu, bir resmin en boy oranını korumaktır.
aspect-ratio özelliğini kullanarak kartı yeniden boyutlandırdığımda yeşil görsel blok, bu 16 x 9 en boy oranını korur. aspect-ratio: 16 / 9 ile en boy oranına uyuyoruz.
.video {
aspect-ratio: 16 / 9;
}
Bu özellik olmadan 16 x 9 en boy oranını korumak için bir padding-top saldırısı kullanmanız ve üst-genişlik oranını ayarlamak için 56.25% dolgusunu sağlamanız gerekir. Yakın zamanda, saldırıdan kaçınmak ve yüzdeyi hesaplama ihtiyacını ortadan kaldıracak bir özelliğimiz olacak. 1 / 1 oranında kare, 2 / 1 oranında 2'ye 1 resim ve bu resmin belirli bir boyut oranında ölçeklendirilmesi için ihtiyacınız olan her şeyi oluşturabilirsiniz.
.square {
aspect-ratio: 1 / 1;
}
Bu özellik henüz kullanıma sunulmamış olsa da özellikle video ve iframe'ler söz konusu olduğunda geliştiricilerin karşılaştığı birçok sorunu çözdüğü için bilgi sahibi olmanız faydalı olacaktır.
Sonuç
10 güçlü CSS satırı boyunca bu yolculuğa katıldığınız için teşekkür ederiz. Daha fazla bilgi edinmek için videonun tamamını izleyin ve demoları kendiniz deneyin.