Bu yayında, ciddi çaba gerektiren ve sağlam 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şa basarak gerçekten anlamlı ve sağlam biçimlendirme kuralları yazmaları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ştirme öğesine göz atın ya da 1linelayouts.glitch.me adresini ziyaret edin.
01. Süper Merkezlenmiş: place-items: center
İlk "tek satır" düzeni için tüm CSS ülkesindeki en büyük gizemi çözelim: şeyleri merkeze alma. place-items: center ile işinizin sandığınızdan daha kolay olduğunu bilmenizi isterim.
İlk olarak display yöntemi olarak grid değerini belirtin ve ardından 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. Politika center olarak ayarlandığında hem align-items hem de justify-items, center olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu, içeriğin gerçek boyutundan bağımsız olarak üst öğenin içinde mükemmel bir şekilde ortalanmasını sağlar.
02. Yapışkanlı Pankek: flex: <grow> <shrink> <baseWidth>
Sırada, sökülmüş krep var. Bu, pazarlama siteleri için yaygın bir düzendir. Bu düzen, genellikle bir ürünün bazı özelliklerini açıklayan bir resim, başlık ve ardından metin içeren 3 öğeden oluşan bir satır içerebilir. Mobil cihazlarda ise düzgün bir şekilde üst sıralarda yer almasını ve ekran boyutu büyüdükçe genişlemesini isteriz.
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> boyutlarına göre doldurulmasını istiyorsanız, daha küçük boyutlarda küçülmeye çalışın, ancak fazla alanı doldurmak için esneme yapmamaya dikkat edin, şunu yazın: flex: 0 1 <flex-basis>. Bu durumda, <flex-basis> metriğiniz 150px şöyle görünür:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Kutuların sonraki satıra kaydırılırken boşluğun genişletilmesini ve doldurulmasını istiyorsanız <flex-grow> için 1 değerini belirleyin. Böylece alan 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ğunun Mesajı: 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 olacak şekilde, daha büyük ekranlarda da 25%'a yayılmasını sağlıyoruz. Kenar çubuğu, bu 25% boyutu 150px değerinden küçülene kadar her zaman üst öğesinin yatay alanının 25% kadarını kaplar.
Bu değeri, aşağıdaki değere sahip ızgara-şablonu-sütunları değeri olarak ekleyin:
minmax(150px, 25%) 1fr. İlk sütundaki (bu örnekte kenar çubuğu) öğe, 25% konumunda minmax 150px ve ikinci öğe (buradaki main bölümü) tek bir 1fr parça olarak alanın geri kalanını 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 örnek, ekran boyutu değiştiğinde alt öğelerini kapsamaz. Genellikle yapışkan alt bilgi olarak adlandırılan bu düzen, çoğu zaman hem web sitelerinde hem de uygulamalarda, mobil uygulamalarda (altbilgi 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 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 alta sabitlenmesi için şunu ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu durumda, üstbilgi ve altbilgi içeriği otomatik olarak alt öğelerinin boyutunu alacak şekilde ayarlanır ve kalan alan (1fr) ana alana uygulanır. auto boyutlu satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Böylece, içerik boyutu büyüdükçe satırın kendisi ayarlanacak şekilde büyür.
05. Klasik Kutsal Kase Düzeni: grid-template: auto 1fr auto / auto 1fr auto
Bu klasik kutsal düzende bir başlık, alt bilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik bulunur. Önceki düzene benziyor, ancak şimdi kenar çubuklarıyla birlikte!
Tek bir kod satırı kullanarak bu tablonun tamamını yazmak için grid-template özelliğini kullanın. Bu, hem satırları hem de sütunları aynı anda ayarlamanıza olanak tanır.
Ö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ır ve sütunlar arasındaki aralıktır.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Üstbilgi ve altbilgide otomatik olarak boyutlandırılmış içeriklerin bulunduğu son örnekte olduğu gibi, burada sol ve sağ kenar çubuğu, çocuklarının doğuştan gelen boyutlarına göre otomatik olarak boyutlandırılır. Ancak, bu kez dikey (yükseklik) yerine yatay boyuta sahiptir (genişlik).
06. 12 Aralıklı Izgara: grid-template-columns: repeat(12, 1fr)
Sırada başka bir klasiğimiz var: 12 aralıklı ızgara. repeat() işleviyle CSS'de hızlı bir şekilde ızgara yazabilirsiniz. Izgara şablonu sütunlarında repeat(12, 1fr); kullanıldığında, her bir 1fr sütunu için 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 raylı çizelgeniz var ve alt öğelerimizi çizelgeye yerleştirebiliriz. Bunu yapmanın bir yolu da çizgileri ızgara çizgileri kullanarak yerleştirmektir. Örneğin, grid-column: 1 / 13 ilk satırdan sonuncuya (13. satır) kadar 12 sütun kaplar. grid-column: 1 / 5; ilk dördünü kapsar.
Bunu yazmanın diğer bir yolu span anahtar kelimesini kullanmaktır. span ile, başlangıç çizgisini ve ardından bu başlangıç noktasından kaç sütunun dahil edileceğini ayarlarsınız. Bu durumda grid-column: 1 / span 12, grid-column: 1 / 13 ile eşdeğer olur; grid-column: 2 / span 6 ise grid-column: 2 / 8 ile eş değerdir.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Tekrar, Otomatik, Min.): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Bu yedinci örnekte, önceden öğrendiğiniz kavramlardan bazılarını birleştirerek, otomatik olarak yerleştirilen ve esnek alt öğeleri içeren duyarlı bir düzen oluşturun. Çok kullanışlı. Burada unutulmaması gereken anahtar terimler şunlardır: repeat, auto-(fit|fill) ve minmax()'. RAM kısaltmasından hatırlanır.
Hepsi bir araya geldiğinde:
.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 işlem, 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 daha küçük ekranlarda 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. Bununla birlikte, bunu auto-fill olarak değiştirirseniz minmax işlevindeki taban boyutları aşıldığında uzantı uzatılmaz:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Kanal Listesi: justify-content: space-between
Bir sonraki düzen için burada gösterilen 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ık, açıklama ve resim bloğunu üst kartın içinde dikey bir sütuna yerleştirir. Daha sonra, 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 aralıkla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Stilimle Bağlantı Kurma: clamp(<min>, <actual>, <max>)
Daha az tarayıcı desteği içeren 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, kelepçeyi kullanarak genişliği şu şekilde ayarlıyorsunuz: width: clamp(<min>, <actual>, <max>).
Bu değer, mutlak bir minimum ve maksimum boyut ile gerçek bir boyutu belirler. Değerlerle birlikte bu durum aşağıdaki gibi 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ğindeki birimler, öğenin yazı tipi boyutuna (özellikle 0 glifinin genişliği) bağlıdır. "Gerçek" boyut %50'dir ve bu, bu öğenin üst genişliğinin% 50'sini temsil eder.
Burada clamp() işlevinin yaptığı işlem, bu öğenin %50'si 46ch değerinden büyük (geniş görüntü alanlarında) veya 23ch değerinden küçük (daha küçük görüntü alanlarında) %50'ye kadar %50 genişliği korumasını sağlar. Üst boyutu genişletip küçülttüğümde kartın genişliğinin, sabitlenmiş maksimum noktasına yükseldiğini ve sabitlenen minimum değere küçüldüğünü görebilirsiniz. Daha sonra, ortalamak için ek özellikler uyguladığımız için öğe, üst öğede ortalanmış olarak kalır. Metin çok geniş (46ch üstü) veya çok sıkışık ve dar (23ch değerinden az) olmayacağından bu görünümün daha okunaklı olmasını sağlar.
Bu, duyarlı yazı biçimi uygulamanın da harika bir yoludur. Örneğin, şunu yazabilirsiniz: font-size: clamp(1.5rem, 20vw, 3rem). Bu durumda, bir başlığın yazı tipi boyutu her zaman 1.5rem ile 3rem arasında sabitlenir ancak görüntü alanının genişliğine uyması için gerçek 20vw değerine göre büyüyüp 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 ölçüsü: aspect-ratio: <width> / <height>
Son olarak, bu son düzen aracı, bu alandaki en deneysel olanıdır. Kısa süre önce Chromium 84'teki Chrome Canary'de kullanıma sunuldu. Firefox'un bunu uygulamak için etkin bir çalışması var, ancak şu anda hiçbir kararlı tarayıcı sürümünde mevcut değil.
Sıkça karşılaşılan bir sorun olduğu için bundan bahsetmek istiyorum. Bu, resmin en boy oranını korumaktan ibarettir.
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, En Boy Oranına Saygı Gösteriyor.
.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ıyla, 2 / 1 ile 2:1 oranında bir kare oluşturabilir ve bu resmin belirli bir boyut oranıyla ölçeklenmesi için ihtiyacınız olan her şeyi yapabilirsiniz.
.square {
aspect-ratio: 1 / 1;
}
Bu özellik henüz yeni kullanıma sunulmakta olsa da, özellikle video ve iframe'ler söz konusu olduğunda, birçok kez karşılaştığım geliştirici sıkıntılarını giderdiği için yararlı olduğunu bilmek yararlı olacaktır.
Sonuç
10 etkili CSS satırından oluşan bu yolculuğu takip ettiğiniz için teşekkür ederiz. Daha fazla bilgi edinmek için videonun tamamını izleyin ve demoları kendiniz deneyin.