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şmada ve bu gönderide, ciddi miktarda iş yapan 10 güçlü 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 Ortalanmış: 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 sığdırılırken esnemesini ve boşluğu 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. Pancake Stack: grid-template-rows: auto 1fr auto
"Daha az pancake" örneğinin aksine bu örnekte, ekran boyutu değiştiğinde alt öğeler sarmalanmaz. 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 eklediğinizde tek sütunlu bir ızgara elde edersiniz. Ancak ana alan, alt bilgisinin bulunduğu içeriğin yüksekliğinden fazla olmaz.
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ık ve altbilginin otomatik olarak boyutlandırıldığı 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ört öğeyi 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ı ayarlarsınız. 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 (Yinele, 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. Oldukça kullanışlı. 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));
}
Tekrar işlevini tekrar kullanıyorsunuz ancak bu kez açık bir sayısal değer yerine auto-fit anahtar kelimesini kullanıyorsunuz. Bu, bu alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu alt öğelerin, 150px olan minimum taban değeri ve 1fr olan maksimum değeri de vardır. Bu, daha küçük ekranlarda 1fr genişliğinin tamamını kaplayacakları ve her biri 150px genişliğe ulaştığında aynı satıra akmaya başlayacakları anlamına gelir.
auto-fit ile kutular, yatay boyutları 150 pikseli aştığında kalan alanın tamamını dolduracak şekilde uzar. 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üzende gösterilen ana nokta, ilk ve son alt öğeleri sınırlayıcı kutularının kenarlarına yerleştiren ve kalan alanı öğeler arasında eşit olarak dağıtan justify-content: space-between öğesidir. Bu kartlar, flex-direction: column kullanılarak yön sütun olarak ayarlanarak Flexbox görüntüleme moduna yerleştirilir.
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) öğeler esnek kutunun kenarlarına sabitlenir ve bu öğeler arasındaki açıklayıcı metin, her uç noktaya eşit aralıkla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Burada, daha az tarayıcı desteği olan ancak düzenler ve duyarlı kullanıcı arayüzü tasarımı açısından gerçekten heyecan verici sonuçlara yol açan bazı tekniklerden bahsedeceğiz. 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);
}
Burada minimum boyut 23ch veya 23 karakter birimi, maksimum boyut ise 46ch (46 karakter)'tır. 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 genişliğinin% 50'sini temsil eder.
clamp() işlevi burada, bu öğenin %50 genişliği 46ch'ten (daha geniş görüntü alanlarında) veya 23ch'ten (daha küçük görüntü alanlarında) daha 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, yedek seçenekleriniz 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ı, gruptaki en deneysel araçtır. Bu özellik kısa süre önce Chromium 84'te Chrome Canary'da kullanıma sunuldu. Firefox'ta da bu özelliğin uygulanması için aktif çalışmalar devam ediyor ancak şu anda kararlı tarayıcı sürümlerinde kullanılamıyor.
Ancak bu sorunla sık karşılaşıldığı için bu konuyu belirtmek isterim. Bu, bir resmin en boy oranını korumaktır.
aspect-ratio mülkü ile 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 hilesi kullanmanız ve üstten genişliğe oran belirlemek için 56.25% dolgu eklemeniz gerekir. Yakında, saldırıları ve yüzdeyi hesaplama ihtiyacını önlemek için bu özelliği kullanıma sunacağız. 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.