Bu gönderide, işin büyük bir kısmını üstlenen 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ş vuruşuyla gerçekten anlamlı ve sağlam stil kuralları yazmasına olanak tanır. Yukarıdaki konuşma ve bu sonraki gönderi, ciddi işler yapan 10 güçlü CSS satırını inceliyor.
Bu demoları takip etmek veya kendi başınıza denemek için yukarıdaki site yerleştirmesini inceleyin ya da 1linelayouts.com adresini ziyaret edin.
01. Super Centered: place-items: center
İlk "tek satırlık" düzen için CSS dünyasındaki en büyük gizemi, yani öğeleri ortalamayı çözelim. place-items: center ile bu işlemin düşündüğünüzden daha kolay olduğunu bilmenizi isterim.
Önce grid yöntemini display olarak 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 bir kısaltmadır. center olarak ayarladığınızda hem align-items hem de justify-items, center olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu sayede, içerik boyutundan bağımsız olarak üst öğe içinde mükemmel şekilde ortalanır.
02. Sökülmüş Pankek: flex: <grow> <shrink> <baseWidth>
Sırada ise sökülmüş pankek var. Bu, pazarlama sitelerinde yaygın olarak kullanılan bir düzendir. Örneğin, genellikle bir resim, başlık ve ardından ürünün bazı özelliklerini açıklayan bir metinle birlikte 3 öğeden oluşan bir satır olabilir. Mobil cihazlarda bu öğelerin düzgün bir şekilde sıralanmasını ve ekran boyutu arttıkça 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ı şu anlama gelir: flex: <flex-grow> <flex-shrink> <flex-basis>.
Bu nedenle, kutularınızın <flex-basis> boyutuna kadar dolmasını, daha küçük boyutlarda küçülmesini ancak ek alanı doldurmak için uzamamasını istiyorsanız flex: 0 1 <flex-basis> yazın. Bu durumda, <flex-basis> değeriniz 150px olduğundan şu şekilde görünür:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Kutuların bir sonraki satıra kaydırılırken alanı dolduracak şekilde genişlemesini istiyorsanız <flex-grow> değerini 1 olarak ayarlayın. Bu durumda, aşağıdaki gibi görünür:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Artık ekran boyutunu büyüttüğünüzde veya küçülttüğünüzde bu esnek öğeler hem küçülür hem de büyür.
03. Kenar çubuğunda şunlar yazıyor: grid-template-columns: minmax(<min>, <max>) …)
Bu demoda, ızgara düzenleri için minmax işlevinden yararlanılmaktadır. Burada yaptığımız işlem, minimum kenar çubuğu boyutunu 150px olarak ayarlamak ancak daha büyük ekranlarda bu boyutun 25%'e kadar genişlemesine izin vermektir. Kenar çubuğu, 25% değeri 150px değerinden küçük olana kadar her zaman üst öğesinin yatay alanının 25%'ını kaplar.
Bunu, aşağıdaki değerle birlikte grid-template-columns değeri olarak ekleyin:
minmax(150px, 25%) 1fr. İlk sütundaki öğe (bu örnekte kenar çubuğu) 25% konumunda minmax 150px alır ve ikinci öğe (buradaki 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
Bu örnek, Deconstructed Pancake'in aksine ekran boyutu değiştiğinde alt öğelerini sarmalamaz. Genellikle yapışkan altbilgi olarak adlandırılan bu düzen, hem web siteleri hem de uygulamalar için, mobil uygulamalarda (altbilgi genellikle bir araç çubuğudur) ve web sitelerinde (tek sayfalık uygulamalar genellikle bu genel düzeni kullanır) yaygın olarak kullanılır.
Bileşene display: grid eklediğinizde tek sütunlu bir ızgara elde edersiniz ancak ana alan yalnızca altbilginin altındaki içerik kadar yüksek olur.
Altbilginin en altta sabit kalmasını sağlamak için şunu ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu, üstbilgi ve altbilgi içeriğinin boyutunu otomatik olarak alt öğelerinin boyutuna göre ayarlar ve kalan alanı (1fr) ana alana uygular. auto boyutlu satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Bu nedenle, içerik boyutu arttıkça satır da buna göre büyür.
05. Klasik Holy Grail Düzeni: grid-template: auto 1fr auto / auto 1fr auto
Bu klasik holy grail düzeninde başlık, altbilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik bulunur. Önceki düzene benzese de artık kenar çubukları var.
Bu ızgaranın tamamını tek bir kod satırıyla 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. İlk ve ikinci boşlukla ayrılmış listeler arasındaki eğik çizgi, satırlar ve sütunlar arasındaki ayraçtır.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Son örnekte olduğu gibi, burada da üstbilgi ve altbilgi otomatik olarak boyutlandırılmış içeriğe sahipti. Burada ise sol ve sağ kenar çubukları, alt öğelerinin doğal boyutuna göre otomatik olarak boyutlandırılıyor. Ancak bu kez dikey (yükseklik) yerine yatay (genişlik) boyut kullanılır.
06. 12 sütunlu ızgara: grid-template-columns: repeat(12, 1fr)
Bir sonraki klasik ise 12 sütunlu ızgara. repeat() işleviyle CSS'de hızlıca ızgaralar yazabilirsiniz. Izgara şablonu sütunları için repeat(12, 1fr); kullanıldığında her biri 1fr olan 12 sütun elde edilir.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Artık 12 sütunlu bir parça ızgaranız var. Alt öğelerinizi ızgaraya yerleştirebilirsiniz. Bunu yapmanın bir yolu, öğeleri ızgara çizgilerini kullanarak yerleştirmektir. Örneğin, grid-column: 1 / 13 ilk satırdan son satıra (13.) kadar uzanır ve 12 sütunu kapsar. grid-column: 1 / 5; ilk dört öğeyi kapsayacak.
Bu ifadeyi yazmanın bir diğer yolu da span anahtar kelimesini kullanmaktır. span ile başlangıç satırını ve bu başlangıç noktasından itibaren kaç sütun kapsanacağını ayarlarsınız. Bu durumda, grid-column: 1 / span 12, grid-column: 1 / 13'ye, grid-column: 2 / span 6 ise grid-column: 2 / 8'e eşit olur.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Tekrar, Otomatik, MinMaks): 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 bazı kavramları birleştirin. Çok kullanışlı. Burada hatırlamanız gereken temel terimler repeat, auto-(fit|fill) ve minmax()''dir. Bunları RAM kısaltmasıyla hatırlayabilirsiniz.
Hepsi birlikte şu şekilde görünür:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Yine tekrar etme işlevini kullanıyorsunuz ancak bu kez açık bir sayısal değer yerine auto-fit anahtar kelimesini kullanıyorsunuz. Bu, alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu alt öğelerin maksimum değeri 1fr, minimum değeri ise 150px'dır. Bu nedenle, daha küçük ekranlarda 1fr genişliğinin tamamını kaplar ve her biri 150px genişliğe ulaştığında aynı satırda yer almaya başlar.
auto-fit ile kutular, yatay boyutları 150 pikseli aştığında kalan alanın tamamını dolduracak şekilde genişler. Ancak bunu auto-fill olarak değiştirirseniz minmax işlevindeki temel boyutları aşıldığında genişlemezler:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
Bir sonraki düzende, burada gösterilmesi gereken asıl nokta justify-content: space-between'dır. Bu özellik, ilk ve son alt öğeleri sınırlayıcı kutularının kenarlarına yerleştirir ve kalan boşluğu öğeler arasında eşit şekilde dağıtır. Bu kartlar, flex-direction: column kullanılarak yönü sütun olarak ayarlanmış bir Flexbox görüntüleme moduna yerleştirilir.
Bu işlem, başlığı, açıklamayı ve resim bloğunu üst kartın içinde 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 aradaki açıklayıcı metin, her uç noktaya eşit aralıklarla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Tarzımı Sabitleme: 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çlar doğuran bazı tekniklere değineceğiz. Bu demoda, genişliği şu şekilde clamp işlevini kullanarak ayarlıyorsunuz: width: clamp(<min>, <actual>, <max>).
Bu, mutlak bir minimum ve maksimum boyut ile gerçek bir boyut belirler. Değerlerle ilgili örnekler:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Buradaki minimum boyut 23ch veya 23 karakter birimi, maksimum boyut ise 46ch veya 46 karakterdir. Karakter genişliği birimleri, öğenin yazı tipi boyutuna (özellikle 0 glifinin genişliğine) göre belirlenir. "Gerçek" boyut %50'dir. Bu, öğenin üst öğe genişliğinin% 50'sini temsil eder.
Buradaki clamp() işlevi, bu öğenin 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) olana kadar %50 genişliği korumasını sağlar. Üst öğenin boyutunu büyütüp küçülttükçe 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, ortalamak için ek özellikler uyguladığımızdan üst öğede ortalanmış olarak kalır. Bu sayede metin çok geniş (46ch'dan fazla) veya çok sıkıştırılmış ve dar (23ch'dan az) olmayacağından daha okunaklı düzenler elde edilir.
Bu, duyarlı tipografi uygulamak için de harika bir yöntemdir. Örneğin, şunları 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 kalır ancak görüntü alanının genişliğine sığacak şekilde 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 bu tekniğin tüm modern tarayıcılarda desteklenmediğini unutmayın. Bu nedenle, yedeklerinizin 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ı, diğerleri arasında en deneysel olanıdır. Bu özellik, kısa süre önce Chromium 84'te Chrome Canary'ye eklendi. Firefox da bu özelliği uygulamak için aktif olarak çalışıyor ancak özellik şu anda kararlı tarayıcı sürümlerinde kullanılamıyor.
Ancak bu sorunla çok sık karşılaşıldığı için bahsetmek istiyoruz. Bu, yalnızca bir resmin en boy oranını korumakla ilgilidir.
aspect-ratio özelliğiyle, kartı yeniden boyutlandırdığımda yeşil görsel blok 16 x 9 en boy oranını koruyor. aspect-ratio: 16 / 9 ile En Boy Oranına Saygı Duyuyoruz.
.video {
aspect-ratio: 16 / 9;
}
Bu özellik olmadan 16:9 en-boy oranını korumak için padding-top geçici çözümünü kullanmanız ve genişliğe göre üst oran belirlemek için 56.25% dolgusu vermeniz gerekir. Bu durumu önlemek ve yüzde hesaplama ihtiyacını ortadan kaldırmak için yakında bir özellik sunacağız. 1 / 1 oranıyla kare, 2 / 1 ile 2:1 oranı 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 geliştirilme aşamasında olsa da özellikle video ve iFrame'ler söz konusu olduğunda, geliştiricilerin birçok kez karşılaştığı sorunları çözdüğü için hakkında bilgi sahibi olmanızda fayda var.
Sonuç
Bu yolculuğu 10 satırlık CSS koduyla takip ettiğiniz için teşekkür ederiz. Daha fazla bilgi edinmek için videonun tamamını izleyin ve demoları kendiniz deneyin.