e
sv

Yeni CSS stili sorgularını anlama ve kullanma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

En son CSS gelişmelerini takip ediyorsanız, duyarlı web geliştirmenin geleceği konusunda muhtemelen oldukça heyecanlısınızdır. Kapsayıcı sorguları, çoğu ön uç geliştiricinin konuştuğu CSS'ye yapılan en heyecan verici eklemelerden biridir. Kapsayıcı sorgularına aşina değilseniz, yukarıdaki bağlantıdan onlar hakkında bilgi edinebilirsiniz.

Kapsayıcı sorgularıyla ilgili heyecanın çoğu, kapsayıcı boyutu sorgularına odaklanmıştır. Ancak, çoğu geliştiricinin bilmediği, kapsayıcı sorgularının daha da heyecan verici bir yanı vardır: kapsayıcı stili sorgular. Bu makalede, stil sorguları hakkında bilmeniz gereken her şeye bakacağız.

Bu makale, tercihen CSS olmak üzere en az bir programlama dili hakkında temel bilgilere sahip olduğunuzu ve Chrome Canary gibi deneysel bir tarayıcıya erişiminiz olduğunu varsayar.

Bu yazıda şunları ele alacağız:

Lafı fazla uzatmadan hemen konuya geçelim.

Stil sorguları nelerdir?

Kapsayıcı sorguları, medya sorguları gibi çalışır, ancak bir bileşeni doğrudan cihazın görünümü yerine boyutuna veya stiline göre sorgulamanıza olanak tanır. Boyutuna göre bir kapsayıcının nasıl sorgulanacağı hakkında daha fazla bilgi edinmek isterseniz, yukarıdaki bağlantıya bakın. Çoğu geliştirici, bir kapsayıcıyı boyutuna göre sorgulamak için kapsayıcı sorgularını kullanır, bunun gibi:

 .kart {
  /* bu ebeveynin satır içi boyutunu sorgula */
  kapsayıcı türü: satır içi boyut;
  Ekran bloğu;
  arka plan: mavi;
}

@container (min genişlik: 600 piksel) {
  .kart {
    /* kart kapsayıcı 600 piksel veya daha büyük olduğunda uygulanacak stiller */
    ekran: esnek;
    arka plan: yeşil;
  }
}

Yukarıdaki kod, kart kapsayıcısını boyutuna göre sorgular ve efektler yalnızca kartın genişliği 420 piksel veya üzerinde olduğunda değişir.

Stil sorguları aynı şekilde çalışır, ancak bir sorgu kabı içindeki bir üst öğenin hesaplanan değerlerini veya stilini sorgulamanıza ve ardından stilleri üst öğelerine göre çocuklara uygulamanıza olanak tanır.

Daha basit bir ifadeyle, bir kapsayıcıyı yalnızca boyutundan ziyade stiline göre sorgulamak için stil sorgularını kullanabilirsiniz. İşte nasıl çalıştığı:

 @container stili(renk: mor) {
      /* Kart kabının rengi mor olduğunda uygulanacak stiller */
  .kart {
    /* Arka planı yeşil yapmak için: */
    arka plan: yeşil;
  }
}

Ana bölüm mor renge sahipse, yukarıdaki kod bir kartın veya bölümün arka planını yeşile çevirecektir. Bir öğeyi container-type etiketiyle bir sorgu kapsayıcısı olarak oluşturmanız gereken boyut sorgularının aksine, aksi belirtilmedikçe tüm öğeler stil sorguları için bir sorgu kapsayıcı olarak kabul edilir.

Ardından, stil sorgularının nerede ve ne zaman kullanılacağına bakacağız.

CSS stili sorgularının nerede ve ne zaman kullanılacağı

CSS stil sorguları, bir üst kapsayıcının kalıtsal olmayan stillerini sorgulayabilir ve söz konusu stili çocuklara uygulayabilir. CSS'de kalıtsal olmayan stiller yükseklik, genişlik, kenarlık, kenar boşluğu, dolgu vb. içerir. Bunun nasıl çalıştığını görmek için bir kart oluşturalım:

 <!DOCTYPE html>
<html lang="tr">
<kafa>
  <meta karakter kümesi="UTF-8">
  <meta http-equiv="X-UA-Uyumlu" content="IE=edge">
  <meta name="viewport" content="width=cihaz genişliği, ilk ölçek=1.0">
  <title>Belge</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="kart">
      <div class="kart başlığı">
        <img src="https://images.unsplash.com/photo-1657664042448-c955b411d9d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=cropq="&format&fit=crop"class="&format&fit=cropq="-" >
      </div>
      <div class="kart gövdesi">
        <h5 class="title">Bir kart</h5>
        <p class="text">Lorem ipsum dolor sit amet conectetur adipisicing elit. Sint facere, neque fugit rem recusandae libero aliquid do</p>
        <button class="btn">Başlayın</button>
      </div>
    </div>


</body>
</html>

Şimdi kartın stilini oluşturalım:

 .kart{
    genişlik:400 piksel;
    dolgu: 20 piksel;
    sınır yarıçapı: 4 piksel;
    kenarlık: düz 3 piksel kırmızı;
    arka plan rengi: blueviolet;
    sınır rengi: kırmızı;
}

.kart başlığı{
    kenar boşluğu: -20px -20px 0 -20px;

}

.kart-img{
    genişlik: %100;
    yükseklik: otomatik;
}

.Başlık {
    yazı tipi boyutu: 1.5rem;
    kenar boşluğu-alt: 0.5rem;
}

.btn{
    kenarlık: düz 2 piksel;
    genişlik: %100;
    dolgu: 0.75rem 1rem;
    sınır yarıçapı: 4 piksel;
    arka plan rengi: açık mavi;
    siyah renk;
    yazı tipi ağırlığı: 600;
    imleç: işaretçi;
    sınır rengi: siyah;
}

.btn: fareyle üzerine gelin{
    arka plan rengi: kahverengi;
}

Yukarıdaki kod şöyle görünecektir:

Stil Sorgusu Kullanarak Kart Oluşturma

Kartın kenarlık renginin buton tarafından miras alınmasını istiyorsak aşağıdaki kodu çalıştıracağız:

 @container style(border-color: red) {
  .btn {
    sınır rengi: kırmızı;
  }
}

Sonuç şöyle görünecektir:

Kapsayıcı Stilini Düzenleme

Boyut sorgularının aksine, stil sorgularının sağlam bir kullanım durumu yoktur. Elbette harika görünüyorlar, yeniler ve kodunuzun daha iyi görünmesini sağlıyorlar, ancak şu anda belirli bir sorunu çözmüyorlar. Stil sorgularının yaptığı hemen hemen her şey bir sınıf veya veri özniteliği ile yapılabilir.

Örneğin, yukarıdaki işlevsellik, düğmeyi doğrudan hedefleyerek ve kenarlığına kırmızı renk atayarak veya özel değişkenler oluşturup bunları düğme stiline ekleyerek elde edilebilir.

Bununla birlikte, stil sorguları, boyut sorgularıyla birleştirildiğinde parlayabilir; bu, yalnızca daha yüksek dereceli değişkenler (özel özellikler) kullanıldığında gerçekten yararlıdır. İşte bir örnek:

 @container kartı (min-width: 600px) ve style(--responsive: true) {
  /* minimum 600 piksel genişliğinde duyarlı bileşenler için stiller */
}

Boyut sorgularıyla stil sorgularını kullanmak, belirli bir mantığı uygulamanıza olanak tanıyarak bileşene ait daha esnek stil oluşturmanıza olanak tanır. Stil sorguları sonunda gönderilirse popüler hale geldiğini görebileceğimiz kullanışlı bir numara.

Stil sorgularıyla ilgili sorunlar

Halihazırda, stil sorguları gönderilmeden önce, eğer yaparlarsa, yapılacak çok iş var. Stil sorguları, beta testçilerinden birçok olumsuz eleştiri aldı, ancak en önemli sorun, özel olmayan CSS özellikleri için özgünlük eksikliğidir .

Örneğin, hiç kimse style(width: calc(…)) nasıl davranacağını veya stil sorgularının style(color: inherit) gibi kestirme özelliklerle nasıl başa çıkacağını anlamıyor. Bu sorunlar kodlama süreçlerinde önemli sorunlara neden olabilir ve geliştiricilerin stil sorguları kullanmamasına neden olabilir.

Üzerinde çalışılan bu sorunlara bazı çözümler bulunabilse de, kapsayıcı boyutu sorguları stil sorguları olmadan hala birçok işlevi koruduğundan, stil sorgularının bu sorunlar çözülene kadar boyut sorgularıyla birlikte gönderilmesi olası değildir.

Deneysel olmayan tarayıcılarda kullanılacak stil sorguları için çoklu dolgular var mı?

Şimdilik, stil sorguları için kullanılabilecek çoklu dolgu yok. Kapsayıcı sorguları için mevcut olan tek çoklu doldurma, yalnızca kapsayıcı boyutu sorgularını kapsar, ancak yazma sırasında kapsayıcı stili sorgular için henüz hiçbir şey yapılmamıştır.

CSS dünyasına bir iyilik yapmak ve stil sorguları için bir çoklu dolgu oluşturmak istiyorsanız, kullanabileceğiniz bir kılavuz burada.

Çözüm

Stil sorguları, medya sorgularından bu yana duyarlı web tasarımının başına gelen en iyi şey olmasa da, yine de çok fazla potansiyele sahiptir. Tüm sorunları gönderildiklerinde çözülürse, geliştiriciler için değerli hale gelebilirler.

Yeni CSS stili sorgularını anlama ve kullanma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Yeni CSS stili sorgularını anlama ve kullanma