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" için Şimdi CSS topraklarındaki 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.
Bunu, aşağıdaki değere sahip bir ı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 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ö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ık, açıklama 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) öğ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. 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, bu öğenin üst genişliğinin %50'sini temsil eden% 50'dir.
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.