Bu yayında, ciddi anlamda ağır işler yapan ve sağlam modern düzenler oluşturmanıza yardımcı olan birkaç etkili CSS satırı vurgulanmaktadır.
Modern CSS düzenleri, geliştiricilerin yalnızca birkaç tuşa basarak gerçekten anlamlı ve sağlam stil kuralları yazmalarına olanak tanır. Yukarıdaki konuşmada ve sonraki gönderide, ciddi anlamda ağır işler yapan 10 etkili CSS satırı ele alınıyor.
Bu demoları takip etmek veya kendi başınıza oynamak için yukarıdaki Glitch yerleştirmesine göz atın veya 1linelayouts.glitch.me adresini ziyaret edin.
01. Süper Ortalanmış: place-items: center
İlk "tek satırlı" düzen için tüm CSS dünyasının en büyük gizemini çözelim: şeyleri ortalama. place-items: center ile bunun düşündüğünüzden daha kolay olduğunu bilmenizi istiyorum.
İlk olarak display yöntemi olarak grid öğesini belirtin ve daha sonra aynı öğe üzerine place-items: center yazın. place-items, aynı anda hem align-items hem de justify-items için kullanılan bir kısaltmadır. center olarak ayarlandığında hem align-items hem de justify-items center olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu, doğal boyutundan bağımsız olarak içeriğin üst öğe içinde mükemmel bir şekilde ortalanmasını sağlar.
02. Parçalanmış Pancake: flex: <grow> <shrink> <baseWidth>
Sırada, parçalanmış krep var. Bu düzen, örneğin, ürünün bazı özelliklerini açıklayan genellikle bir resim, başlık ve daha sonra bir metin içeren 3 öğeden oluşan bir satır içerebilen, pazarlama sitelerinde yaygın olarak kullanılan bir düzendir. Mobil cihazlarda, bunların düzgün bir şekilde üst üste yığılmasını ve ekran boyutunu büyüttükçe genişlemesini istiyoruz.
Bu efekt için Flexbox'ı kullandığınızda, ekran yeniden boyutlandırıldığında bu öğelerin yerleşimini ayarlamak için medya sorgularına ihtiyacınız olmaz.
flex kısaltması: flex: <flex-grow> <flex-shrink> <flex-basis> anlamına gelir.
Bu nedenle, kutularınızın <flex-basis> boyutuna kadar doldurulmasını, daha küçük boyutlarda küçültülmesini ancak fazla alanı dolduracak şekilde esnememesini istiyorsanız şunu yazın: flex: 0 1 <flex-basis>. Bu durumda <flex-basis>, 150px olduğu için şöyle görünür:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Kutuların bir sonraki satıra geçerken uzatılıp alanı doldurmasını istiyorsanız <flex-grow> değerini 1 olarak ayarlayın.
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Şimdi, ekran boyutunu artırdığınızda veya azalttıkça bu esnek öğeler hem küçülür hem de büyür.
03. Kenar Çubuğunda Şöyle yazıyor: grid-template-columns: minmax(<min>, <max>) …)
Bu demo, ızgara düzenleri için minmax işlevinden faydalanır. Burada minimum kenar çubuğu boyutunu 150px olarak ayarlıyoruz ancak daha büyük ekranlarda bu boyut 25% değerine genişletiliyor. 25%, 150px değerinden küçülünceye kadar kenar çubuğu her zaman üst öğesinin yatay alanının 25% kadarını kaplar.
Bu değeri, şu değerle birlikte bir ızgara-şablonu-sütunu değeri olarak ekleyin: minmax(150px, 25%) 1fr. İlk sütundaki (bu örnekte kenar çubuğu) öğe, 25% için 150px minmax alır ve ikinci öğe (buradaki main bölümü) alanın geri kalanını tek bir 1fr kanal olarak kaplar.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Krep Grubu: grid-template-rows: auto 1fr auto
Destructed Pancake'den farklı olarak bu örnek, ekran boyutu değiştiğinde alt öğelerini sarmalamaz. Genellikle yapışkan altbilgi olarak adlandırılan bu düzen, genellikle hem web siteleri hem de uygulamalar için, mobil uygulamalarda (alt bilgi genellikle bir araç çubuğudur) ve web sitelerinde (tek sayfalık uygulamalar genellikle bu genel düzeni kullanır) kullanılır.
Bileşene display: grid eklediğinizde tek sütunlu bir ızgara elde edersiniz ancak ana alan yalnızca altında altbilgi bulunan içeriğin yüksekliği kadar olur.
Altbilginin en alta sığması için şunu ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu işlem, üstbilgi ve altbilgi içeriğini otomatik olarak alt öğelerinin boyutunu alacak şekilde ayarlar ve kalan alanı (1fr) ana alana uygular; auto boyutundaki satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Bu nedenle, içerik boyutu büyüdükçe satırın kendisi de ayarlanacak şekilde büyür.
05. Klasik Kutsal Kase Düzeni: grid-template: auto 1fr auto / auto 1fr auto
Bu klasik kutsal çizelge düzeni için bir başlık, altbilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik bulunmaktadır. Önceki düzene benziyor ancak şimdi kenar çubukları var!
Bu tablonun tamamını tek bir satır kod kullanarak yazmak için grid-template özelliğini kullanın. Böylece 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ış birinci ve ikinci listeler arasındaki eğik çizgi, satırlar ve sütunlar arasındaki boşluktur.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Üstbilgi ve altbilginin otomatik olarak boyutlandırıldığı son örnekte olduğu gibi, buradaki sol ve sağ kenar çubuğu çocuklarının doğuştan gelen boyutuna göre otomatik olarak boyutlandırılıyor. Ancak bu kez boyut, dikey (yükseklik) yerine yatay boyuttur (genişlik).
06. 12 Aralıklı Izgara: grid-template-columns: repeat(12, 1fr)
Sırada başka bir klasik var: 12 aralıklı tablo. repeat() işleviyle CSS'de hızlıca ızgara yazabilirsiniz. Izgara şablonu sütunları için repeat(12, 1fr); kullanıldığında 1fr değerinin her biri için 12 sütun sağlanır.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Artık 12 sütunlu bir ızgaranız var ve alt öğelerimizi ızgaraya yerleştirebiliriz. Bunu yapmanın bir yolu, bunları kılavuz çizgileri kullanarak yerleştirmektir. Örneğin, grid-column: 1 / 13, ilk satırdan sonuncuya (13.) kadar ve 12 sütuna kadar yayılır. grid-column: 1 / 5;, ilk dördü kapsar.
Bunu yazmanın diğer bir yolu da span anahtar kelimesini kullanmaktır. span ile, başlangıç çizgisini ve ardından bu başlangıç noktasından kaç sütunun içine dahil edileceğini belirlersiniz. Bu durumda grid-column: 1 / span 12 değeri grid-column: 1 / 13, grid-column: 2 / span 6 ise grid-column: 2 / 8 olarak karşılık gelir.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Tekrar, Otomatik, Min.): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Bu yedinci örnek için, otomatik olarak yerleştirilmiş ve esnek alt öğeleri içeren duyarlı bir düzen oluşturmak üzere daha önce öğrendiğiniz kavramlardan bazılarını birleştirin. Çok kullanışlı. Burada unutulmaması gereken temel terimler, RAM kısaltmasından hatırladığınız repeat, auto-(fit|fill) ve minmax()''dir.
Tümü birlikte şöyle görünür:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Tekrar tekrar kullanıyorsunuz, ancak bu kez açık bir sayısal değer yerine auto-fit anahtar kelimesini kullanıyorsunuz. Bu, söz konusu alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu çocukların taban minimum değeri de 1fr maksimum değerine sahiptir. Yani, daha küçük ekranlarda 1fr genişliğinin tamamını kaplarlar ve her biri 150px genişliğe ulaştıkça aynı çizgiye yönelmeye başlarlar.150px
auto-fit kullanıldığında, kutular, yatay boyutu 150 pikseli aştığı için kalan tüm alanı dolduracak şekilde uzatılır. Ancak bunu auto-fill olarak değiştirirseniz minmax işlevindeki taban boyutları aşıldığında genişlemez:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Diziliş: justify-content: space-between
Bir sonraki düzende, burada ilk ve son alt öğeleri sınırlayıcı kutularının kenarlarına yerleştiren ve kalan boşluk öğeler arasında eşit olarak dağıtılacak şekilde burada gösterilecek olan justify-content: space-between yer alır. Bu kartlar için Flexbox görüntü moduna yerleştirilir ve yön, flex-direction: column kullanılarak sütuna ayarlanır.
Böylece başlık, açıklama ve resim bloğu, üst kartın içindeki dikey bir sütuna yerleştirilir. Daha sonra, justify-content: space-between uygulandığında ilk (başlık) ve son (resim bloğu) öğeler flexbox'ın kenarlarına sabitlenir ve bunların arasındaki açıklayıcı metin, her uç noktayla eşit aralıkla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Stilimi Sabitleme: clamp(<min>, <actual>, <max>)
Burada daha az tarayıcı desteğine sahip bazı teknikleri ele alıyoruz, ancak düzenler ve duyarlı kullanıcı arayüzü tasarımı için gerçekten heyecan verici bazı etkileri var. Bu demoda, genişliği sabitleyiciyi kullanarak şu şekilde ayarlayacaksınız: width: clamp(<min>, <actual>, <max>).
Bu, mutlak bir minimum ve maksimum boyut ile gerçek bir boyut ayarlar. Değerler kullanılarak aşağıdakiler gibi görünebilir:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Burada minimum boyut 23ch veya 23 karakter, maksimum boyut ise 46ch 46 karakterdir. Karakter genişliği birimleri, öğenin yazı tipi boyutuna (özellikle 0 glifin genişliği) bağlıdır. "Gerçek" boyut %50'dir ve bu, bu öğenin üst genişliğinin% 50'sini temsil eder.
clamp() işlevinin burada yaptığı, bu öğenin %50 genişliği 46ch değerinden büyük (daha geniş görüntü alanlarında) veya 23ch değerinden küçük (daha küçük görüntü alanlarında) %50'ye kadar %50'yi korumasını sağlamaktır. Üst öğe boyutunu genişletip daralttıkça, bu kartın genişliğinin sabitlenmiş maksimum noktasına yükseldiğini, sabitlenmiş minimum değerine düştüğünü görebilirsiniz. Daha sonra, ortalamak için ek özellikler uyguladığımızdan, üst öğede ortalanmış olarak kalır. Metin çok geniş (46ch üzerinde) veya çok dar ve dar (23ch boyutundan az) olmayacağından, bu şekilde düzenler daha okunaklı olur.
Bu, duyarlı yazı biçimi uygulamak için de harika 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 sabitlenmiş olarak kalır ancak görüntü alanının genişliğine sığacak şekilde 20vw gerçek değerine göre büyüyüp daralı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, yedeklerinizin olduğundan emin olun ve testlerinizi yapın.
10. En Boy Oranına Saygı: aspect-ratio: <width> / <height>
Son olarak, bu son düzen aracı, bu diğerleri arasında en deneysel olanıdır. Kısa süre önce Chromium 84'te Chrome Canary'de kullanıma sunulmuştur ve Firefox'un bunu uygulamak için aktif bir çabası vardır, ancak şu anda kararlı hiçbir tarayıcı sürümünde bulunmamaktadır.
Fakat bu çok sık karşılaşılan bir sorun olduğu için bahsetmek istiyorum. Bu da basitçe, resmin en boy oranını korumaktan ibarettir.
aspect-ratio özelliği ile kartı yeniden boyutlandırırken 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 en yüksek genişlik oranını ayarlamak üzere 56.25% değerine sahip bir dolgu vermeniz gerekir. Saldırıyı ve yüzdeyi hesaplama zorunluluğunu önlemek için kısa süre içinde buna yönelik bir özelliğimiz de olacak. 1 / 1 oranında bir kare, 2 / 1 oranıyla 2'ye 1 oranında bir kare ve bu resmin belirli bir boyut oranıyla ölçeklenmesi için ihtiyacınız olan her şeyi oluşturabilirsiniz.
.square {
aspect-ratio: 1 / 1;
}
Bu özellik hâlâ geliştirmede ve yakında kullanıma sunulacak olsa da özellikle video ve iframe'ler söz konusu olduğunda, birçok kez geliştirici mücadelesiyle karşılaştığım gerçeği ortadan kaldırdığı için bilinmesi faydalıdır.
Sonuç
10 güçlü CSS satırındaki bu yolculuğu izlediğiniz için teşekkür ederiz. Daha fazla bilgi edinmek için videonun tamamını izleyin ve demoları kendiniz deneyin.