Duyarlı Bir Web Sitesi Oluşturmak için 7 Yeni Özellik

Modern CSS, gerekli JavaScript yardımıyla web sitesi stilinin tüm kontrolünü ele alır. Bu yazıda, stilin geleceğini basitleştirmek için yedi yeni CSS güncellemesini vurgulayacağız. Ayrıca Chrome, Edge ve Firefox'un tarayıcı desteğini de düşünüyoruz. Son olarak, sorunları, çözümleri ve hemen başlamak için ihtiyaç duyacağınız hemen hemen her şeyi tartışacağız.

Tüm püf noktaları ve teknikleri göz önünde bulundurarak, zaman ayırmaya değer, özenle seçilmiş bazı CSS özellikleri burada. O halde lafı daha fazla uzatmadan hemen konuya girelim.

1. CSS Alt Izgarası

CSS flexbox'ın yalnızca bir yönde hareket etme yeteneğinin aksine, her iki boyutu da ızgaralarda tanımlayabilirsiniz. Önümüzdeki yıllarda güçlenmeye ve popüler olmaya başladıkça, web tasarımlarında muazzam değişikliklere tanık olunuyor. İç içe ızgaralar, ızgaraların içine ızgaralar çizmek için kullanılır. Ancak, CSS alt ızgaraları için bir çağrıyı artıran ana dezavantajlar nelerdir?

• 2. seviyeden sonra iç içe ızgaralar, bir web sitesinin yanıt verme hızını büyük ölçüde etkileyen daha büyük ızgara dışındaki içeriğin taşması için kullanılırdı.
  instagram viewer
• İç içe ızgaralar, daha büyük ızgara kabının içinde bağımsız öğeler olarak işlev gördü. Herhangi bir değişiklik için ana konteynere hiç referans yoktu.

Alt ızgaralar olmadan:

Alt ızgaralardan sonra:

Alt ızgaraları şu şekilde uygulayabilirsiniz:

.konteyner {
genişlik: 700 piksel;
yükseklik: 500 piksel;
arka plan: rgb (214, 255, 139);
ekran: ızgara;
ızgara şablonu sütunları: 1fr 1fr 1fr 1fr;
ızgara şablonu satırları: 1fr 1fr 1fr 1fr;
}
.container div {
arka plan: rgb (72, 170, 137);
ızgara sırası: 2/3;
ızgara sütunu: 2 / 5;
ekran: ızgara;
ızgara şablonu sütunları: alt ızgara;
ızgara şablonu satırları: alt ızgara;
}

Birden çok alt ızgara yerleştirebilirsiniz. Dikkate değer istisna, alt ızgaraların üst ızgara aralığı özelliğini devralmasıdır. Her ana ızgara içinde aynı boşluk özelliklerine sahip tüm alt ızgaraların oluşturulmasıyla sonuçlanacaktır.

Alt ızgaralarla ilgili en iyi şey, son derece duyarlı, ayarlanabilir ve ölçeklenebilir olmalarıdır.

Tarayıcı uyumluluğu: Firefox

2. en boy oranı Özellik

Belirli bir kapsayıcının en boy oranını değiştirerek tüm ayarlama ve hesaplama sorunlarını ortadan kaldırabilirsiniz. Bir video eklemeyi hedefliyorsanız, tek yapmanız gereken değişen ekran boyutuna göre bir en-boy oranını düzeltmektir. Ancak, iki boyutlu çoklu ızgaralarla çalışırken, taşma ve varsayılan görünüm olasılığı vardır.

En boy oranı özelliğini genişlik özelliği ile destekleyerek düzeltebilirsiniz. Yükseklik veya genişlik tanımlayabileceğiniz için duyarlı görüntüler için kullanışlı hale gelir.

En boy oranı özelliğini şu şekilde uygulayabilirsiniz:

.konteyner {
genişlik: 700 piksel;
en-boy oranı: 16 / 9;
arka plan: rgb (72, 170, 137);
}

Oranı belirtmek yerine en boy oranı: otomatik de girebilirsiniz. Varsayılan otomatik değerin dezavantajı, tarayıcının görüntünün orijinal boyutunu seçmesidir. Kuşkusuz, sitenin yanıt vermesini engeller.

Tarayıcı uyumluluğu: Chrome, Edge, Firefox (kısmi)

3. Flexbox Boşluğu

Izgara aralığı, her ızgara arasında eşit boşluk oluşturmak için oldukça popülerdir. Ancak, her esnek öğe arasındaki boşluğu işlemek için negatif kenar boşlukları, sözde sınıf seçiciler ve karmaşık seçiciler uygulamanız gerekiyordu. Böylece, Flexbox boşluğu, daha yüksek ölçeklenebilirlik ile daha az kod satırı ile sonuçlanır.

Flexbox boşluğunu şu şekilde uygulayabilirsiniz:

.konteyner {
genişlik: 700 piksel;
yükseklik: 500 piksel;
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
boşluk: 1em;
}

Çıktı:

Tarayıcı uyumluluğu: Chrome, Edge ve Firefox dahil tüm büyük tarayıcılar.

Kaydırma, web kopyasını karmaşıklaştırmadan tek bir web sitesi hakkında daha fazla bilgi paylaşmaya yardımcı olur. Ancak kaydırmanın en büyük dezavantajı, para veya görüntünün yarısında durabilmesidir. Bazen sayfalandırılmış içeriğin kontrolü yarıda bırakılır. JavaScript, kaydırma özelleştirmesini önlemek için düşünceli bir şekilde kullanılır. Ancak CSS Scroll Snap gelene kadar tamamen tatmin edici bir sonuç değildi.

Kaydırmalı Yakalamayı kullanarak, belirli bir kapsayıcının düzenini ve görünürlüğünü düzeltmek için belirli sınırlar tanımlayabilirsiniz. Örneğin, atlıkarıncalar ve belirli web sitesi bölümleri oluşturmak harika çalışıyor. Herhangi bir ayar için JS'ye ihtiyacınız olmayacağını unutmayın.

Kaydırma ekini şu şekilde uygulayabilirsiniz:

.konteyner {
genişlik: %100;
yükseklik: %100;
ekran: esnek;
taşma-x: kaydırma;
kaydırmalı-snap tipi: x zorunlu;
}
Bölüm {
esnek: yok;
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
yazı tipi boyutu: 15em;
yazı tipi ailesi: Arial, Helvetica, sans-serif;
kaydırma-snap-hizalama: bitiş;
genişlik: %100;
yükseklik: %100;
}

Çıktı:

CSS kaydırma eki, ebeveyn ve alt özelliğine sahiptir. parent veya container özelliği, kaydırmanın yönüne (x veya y) ve kaydırma yakalamasının davranışına karar verir. Örneğin, kaydırmalı-snap-type: x zorunlu olarak ayarlayabilirsiniz. Kaydırma konumunu dikkate almadan kaydırma noktasına karar verme yetkisini kullanıcıya verir.

Öte yandan, kaydırmalı yakalama türü: y yakınlığı yalnızca web sitesi ziyaretçisi kaydırma noktasına daha yakın olduğunda çalışır.

Child özelliği, CSS kaydırma yakalaması sırasında öğeleri hizalamak için kaydırma-snap-hizalamadır. Öğeleri uygun şekilde hizalamak için başlangıç, bitiş ve merkez değerlerini girer.

5. Özellik Sorguları

Özellik sorguları, zarif bozulma ile başa çıkmak için kullanılır. Örneğin, CSS ızgaraları günümüzde oldukça popülerdir. Ancak, eski tarayıcıların onu oluşturamayacağını belirtmekte fayda var.

Burada, özellik sorguları, söz konusu tarayıcının belirli bir özelliği destekleyip desteklemediğini kontrol eder ve bir CSS özelliğine atıfta bulunulmasını teşvik eden bir destek sistemi sağlar, ancak bu özellik destekleniyorsa tarayıcı. Aksi takdirde, varsayılan değer kabul edilir. Bu durumda, öngörülen herhangi bir geri dönüş için ızgaralar yerine bloklar yerleştirebilirsiniz.

Özellik sorgularını şu şekilde uygulayabilirsiniz:

@supports (içerik görünürlüğü: otomatik) {
vücut{
arka plan: deniz mavisi;
genişlik: %100;
yükseklik: %100;
}
}

Bu nedenle, yalnızca içerik görünürlüğü özelliklerini oluşturan tarayıcılar deniz mavisi arka plan rengine sahip olacaktır; aksi takdirde, varsayılan değer dikkate alınacaktır. @ öğesinin, geçici ayarlamalar için bir maksimum genişlik veya minimum genişlik ayarlamanız gereken medya sorgularının @media'sına benzer olduğunu unutmayın. @supports sorgularını hatırlamayı kolaylaştırır.

Devamını oku: HTML ve CSS'de Medya Sorguları Nasıl Kullanılır?

Tarayıcı uyumluluğu: Chrome, Edge ve Firefox dahil tüm büyük tarayıcılar.

6. içerik-görünürlük Özellik

Hızlı oluşturma, kullanıcı etkileşimli bir web sitesi için bir omurga görevi görür. Mobil cihazların artan popülaritesi ile bir web sitesinin oluşturma performansı, çekici bir web sitesi elde etmek için bir darboğaz görevi görür.

Burada içerik-görünürlük özelliği çok önemli bir rol oynar. Çünkü tarayıcılar varsayılan olarak web sitesinin tüm öğelerini bir kerede işler. Özellikle web sitenizde çok sayıda ağır animasyon varsa, yükleme süresini ve genel site performansını azaltır. Öte yandan, içerik-görünürlük özelliği yalnızca görünüm alanı öğelerini işler ve siz sayfada kaydırdıkça diğer öğeleri gösterir.

#ana {
içerik görünürlüğü: otomatik;
/* include-intrinsic-size: 0 500px; */
}

İçerik-görünürlük özelliği üç değer girer. içerik-görünürlük: görünür hiçbir etki göstermezken, içerik-görünürlük: gizli, öğenin erişilemeyen içeriği atladığı display: none işlevine benzer. İçerik görünürlüğü: alakasız içeriği otomatik olarak atlar, ancak kullanıcı aracısı özellikleri için normal bir sayfa olarak kullanılabilir.

İçerik görünürlüğünün gücünü ölçelim. İşte sonuç:

7. Geçiş, Dönüşüm ve Animasyon

CSS'de animasyon uygulamak için iki yolumuz var. Geçiş, elemanların görsel özelliklerinde düzgün değişiklikler yapmak için kullanılır. Öte yandan, geçiş olmadan, dönüşüm aniden bir durumdan diğerine geçiş yapacaktır.

Animasyonlar, animasyon süresi boyunca birkaç noktada stiller ayarlayan @keyframe'lerle kullanılır. İlginç olan şu ki @keyframes, değişikliğin ne zaman olacağını tanımlar, dönüştürme ve animasyon değişikliğin kontrolünü alır ve geçiş, değişikliğin nasıl olacağıyla ilgilenir (ör. fareyle üzerine gelme efektleri).

.çocuk {
arka plan: deniz mavisi;
yükseklik: 150 piksel;
genişlik: 150 piksel;
Beyaz renk;
geçiş: 0.2s kolay giriş-çıkış dönüşümü;
animasyon: myAnimation 2s sonsuz;
}
.child: üzerine gelin {
dönüştürme: ölçek (2, 2) döndürme (45 derece);
}
@keyframes myAnimation {
0% {
}
50% {
dönüştürmek: translateX(400px)
}
100% {
dönüştürmek: translateX(0px)
}
}

Tarayıcı uyumluluğu: Chrome, Edge ve Firefox dahil tüm büyük tarayıcılar.

Toplama

Basamaklı stil sayfası işaretlemesi, daha iyi özelliklerle sürekli olarak gelişmektedir. Şimdiye kadar, CSS alt ızgarası, en-boy oranı özelliği, esnek kutu boşlukları, kaydırma yakalama, özellik sorguları, içerik görünürlük özelliği, geçiş, dönüştürme ve animasyon.

Günün sonunda, hangi özelliklerin web sitenizin stilini basitleştirdiğinden emin olmalısınız.

Bootstrap 5'te Dikkat Edilmesi Gereken 7 Yeni Özellik

Bootstrap CSS çerçevesini kullanarak web siteleri ve uygulamalar geliştiriyorsanız, Bootstrap 5'teki yenilikler burada.

Sonrakini Oku

Yazar hakkında