Yeni CSS Medya Sorgu Aralığı Sözdizimi

Güveniyoruz CSS Medya Sorguları Hedeflenen bir koşula göre öğeleri seçmek ve şekillendirmek için. Bu durum her türden olabilir, ancak genellikle iki kampa ayrılır: (1) kullanılan medyanın türü ve (2) tarayıcının, cihazın ve hatta kullanıcının ortamının belirli bir özelliği.

Diyelim ki basılı bir belgeye belirli bir CSS stili uygulamak istiyoruz:

@media print {
  .element {
    /* Style away! */
  }
}

Stilleri belirli bir görüntü alanı genişliğinde uygulayabilmemiz, CSS Medya Sorgularını Ethan Marcotte'den bu yana duyarlı web tasarımının temel bir bileşeni haline getirdi. terimi icat etti. Tarayıcının görüntü alanı genişliği belirli bir boyuttaysa, tarayıcının boyutuna yanıt veren öğeler tasarlamamıza olanak tanıyan bir dizi stil kuralı uygulayın.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Dikkat and Orada? Bu, ifadeleri birleştirmemize izin veren bir operatör. Bu örnekte, ortam türünün bir screen ve bu min-width özellik olarak ayarlandı 30em (ya da üzerinde). Aynı şeyi bir dizi görüntü alanı boyutunu hedeflemek için de yapabiliriz:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Artık bu stiller, tek bir genişlik yerine açık bir görünüm alanı genişliği aralığı için geçerlidir!

Ancak Medya Sorguları Düzey 4 spesifikasyonu, yaygın matematiksel karşılaştırma operatörlerini kullanarak bir dizi görüntü alanı genişliğini hedeflemek için yeni bir sözdizimi sundu. <, >, ve = - daha az kod yazarken sözdizimsel olarak daha mantıklı.

Bunun nasıl çalıştığını inceleyelim.

Yeni karşılaştırma operatörleri

Bu son örnek, koşulları birleştirerek nasıl "sahte" aralıklar oluşturduğumuzun iyi bir örneğidir. and Şebeke. Medya Sorguları Düzey 4 belirtimindeki büyük değişiklik, değerleri birleştirmek yerine karşılaştıran yeni operatörlere sahip olmamızdır:

• < bir değer olup olmadığını değerlendirir daha kısa başka bir değer
• > bir değer olup olmadığını değerlendirir daha büyük başka bir değer
• = bir değer olup olmadığını değerlendirir eşit başka bir değere
• <= bir değer olup olmadığını değerlendirir t'den küçük veya ona eşito başka bir değer
• >= bir değer olup olmadığını değerlendirir t'den büyük veya ona eşito başka bir değer

Tarayıcı şu şekildeyse stilleri uygulayan bir medya sorgusunu şu şekilde yazmış olabiliriz: 600px geniş veya daha büyük:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Bir karşılaştırma operatörü kullanarak aynı şeyi yazmanın nasıl göründüğü aşağıda açıklanmıştır:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Bir dizi görüntü alanı genişliğini hedefleme

Genellikle CSS Medya Sorguları yazarken, kesme noktası — tasarımın "kırıldığı" ve onu düzeltmek için bir dizi stilin uygulandığı bir durum. Bir tasarımın bir sürü kesme noktası olabilir! Ve genellikle bakış açısının iki genişlik arasında olmasına dayanırlar: kesme noktasının başladığı ve kesme noktasının bittiği yer.

Bunu kullanarak bunu nasıl yaptığımız aşağıda açıklanmıştır. and iki kesme noktası değerini birleştirmek için operatör:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Boolean'ı bıraktığımızda bir medya sorgusu yazmanın ne kadar kısa ve kolay olduğuna dair iyi bir fikir edinmeye başlıyorsunuz. and operatör yeni aralık karşılaştırma sözdizimi lehine:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Çok daha kolay, değil mi? Ve bu medya sorgusunun tam olarak ne yaptığı açık.

Tarayıcı desteği

Bu geliştirilmiş medya sorgusu sözdizimi, bu yazının yazıldığı sırada hala ilk günlerindedir ve şu anda bir araya getiren yaklaşım kadar yaygın olarak desteklenmemektedir. min-width ve max-width. Yaklaşıyoruz ama! Safari, bu noktada tek önemli nokta, ancak bunun için açık bir bilet var ki takip edebilirsiniz.

Bir örneğe bakalım

Masaüstü gibi daha büyük ekranlar için oldukça uygun bir düzen:

Bu düzen, tüm kesme noktalarında ortak olan temel stillere sahiptir. Ancak ekran daraldıkça, tabletler ve cep telefonları için ideal olan farklı küçük kesme noktalarında koşullu olarak uygulanan stilleri uygulamaya başlıyoruz:

Neler olduğunu görmek için, düzenin iki küçük kesme noktası arasında nasıl yanıt verdiği aşağıda açıklanmıştır. Gizli gezinme listesi de görüntüleniyor title içinde main artar font-size.

Bu değişiklik, görünümün değişiklikleri bir ortamın koşullarını eşleştirmekten diğerine geçtiğinde tetiklenir:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Ele aldığımız konseptlerden birkaçını birleştirdik! olan cihazları hedefliyoruz. screen ortam türü, yeni ortam özellik aralığı sözdizimini kullanarak görünüm alanı genişliğinin belirli bir değerden büyük veya ona eşit olup olmadığını değerlendirme ve iki koşulu and operatörü.

Tamam, bu, aşağıdaki mobil cihazlar için harika 768px ve buna eşit veya daha büyük diğer cihazlar için 768px. Peki ya şu masaüstü düzeni… oraya nasıl gideceğiz?

Düzen gittiği sürece:

• The main eleman 12 sütunlu bir ızgara olur.
• Görüntüde bir düğme görüntülenir.
• Büyüklüğü .title elemanın yazı tipi artar ve görüntüyle örtüşür.

Ödevimizi yaptığımızı ve bu değişikliklerin tam olarak nerede olması gerektiğini belirlediğimizi varsayarsak, bu stilleri, görüntü alanı, görünümle eşleştiğinde uygulayabiliriz. width bu kesme noktası için koşul. Kırılma noktasının olduğunu söyleyeceğiz 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Onunla bir oyun oyna:

Yeni sözdiziminin anlaşılması neden daha kolay?

Sonuç olarak: bir karşılaştırma operatörünü ayırt etmek daha kolaydır (örn. width >= 320px) arasındaki farkı anlatmaktan daha min-width ve max-width ile and Şebeke. arasındaki nüansı ortadan kaldırarak min- ve max-, bizde bir tane var width çalışılacak parametre ve operatörler bize gerisini söyler.

Bu sözdizimlerinin görsel farklılıklarının ötesinde, biraz farklı şeyler de yapıyorlar. kullanma min- ve max- matematiksel karşılaştırma operatörlerini kullanmaya eşdeğerdir:

• max-width eşittir <= operatör (örn. (max-width: 320px) aynıdır (width <= 320px)).
• min-width eşittir >= operatör (örn. (min-width: 320px) aynıdır (width >= 320px)).

Hiçbirinin eşdeğer olmadığına dikkat edin. > or < operatörler.

Doğrudan Medya Sorguları Düzey 4 belirtiminden bir kesme noktasına göre farklı stiller tanımladığımız bir örnek alalım. 320px kullanarak görünüm alanı genişliğinde min-width ve max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Her iki medya sorgusu da görüntü alanı genişliği şuna eşit olduğunda bir koşulla eşleşir: 320px. Tam olarak istediğimiz bu değil. İstiyoruz ya aynı anda ikisini birden yerine bu koşullardan biri. Bu örtük değişiklikleri önlemek için, sorguya aşağıdakilere dayalı olarak bir piksel ekleyebiliriz: min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Bu, görünüm alanı genişliği ayarlandığında iki stil kümesinin aynı anda uygulanmamasını sağlar. 320px, arasında kalan herhangi bir görüntü alanı genişliği 320px ve 321px her iki sorgudaki stillerin hiçbirinin uygulanmadığı süper küçük bir bölge ile sonuçlanacaktır - garip bir "stillenmemiş içeriğin flaşı" durumu.

Bir çözüm, ikinci karşılaştırma ölçeği değerini (ondalık noktadan sonraki sayılar) artırmaktır. 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Ama bu aptalca ve aşırı karmaşıklaşıyor. Bu nedenle yeni medya özellik aralığı sözdizimi daha uygun bir yaklaşımdır:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Tamamlayan

Hay aksi, CSS Medya Sorgularında görüntü alanı genişliği aralıklarını hedeflemek için yeni sözdizimi üzerinde epey yol kat ettik. Medya Sorguları Düzey 4 spesifikasyonu sözdizimini sunduğuna ve Firefox ve Chromium tarayıcılarında benimsendiğine göre, yeni karşılaştırma operatörlerini kullanmaya ve bunları diğer aralık medya özellikleriyle birleştirmeye yaklaşıyoruz. width, sevmek height ve aspect-ratio

Ve bu, Seviye 4 spesifikasyonunun sunduğu yeni özelliklerden sadece biri. kullanıcı tercihlerine göre yapabileceğimiz bir sürü sorgu. Orada bitmiyor! Kontrol et CSS Medya Sorguları için Eksiksiz Kılavuz bir göz atmak için Medya Sorguları Düzey 5'e neler dahil edilebilir?.