Durumunuzu, bir seçimin kontrollerin, metnin ve davranışın tutarlı kalmasını gerektirdiği durumlarda güncelleyin. Yalnızca sunumu değiştireceğiniz zaman CSS’i geçersiz kılın. Bu kılavuzda, her iki yaklaşımın nasıl seçilip doğrulanacağını göstermek için Mac’te Safari’de yerel bir kutucuk önizlemesi kullanılıyor.

Okuyucuya yönelik görev belirli: şekil kontrolleri senkronize kalırken dekoratif stilini kolayca düzenleyebileceğiniz küçük bir web sayfasını değiştirin. Burada bileşen durumu, sayfanın kendi güncelleme işlevi tarafından yönetilen bir JavaScript nesnesi anlamına gelir. Herhangi bir çerçeve veya ürüne özgü düzenleme özelliği varsayılmıyor.

Hangi değişiklikler bileşen durumuna aittir?

Değişiklikten sonra hangi öğelerin birbiriyle uyumlu olması gerektiğini sorarak başlayın. Yuvarlak bir kutucuk seçmek bir onay kutusunu, önizlemeyi ve yazılı açıklamayı güncellemeliyse, bu seçimin durum içinde tek bir sahibi olsun. Ardından üçünü de bu seçimden türetin. Bu bir uygulama önerisidir: seçim ile görüntülenen sonuçlar arasındaki ilişkiyi açık hâle getirir.

--tile-size gibi bir CSS özel özelliğinin rolü farklıdır. Bu özellik, var() ile kendisine başvuran bildirimlere bir değer sağlar. Özel özellikler basamaklandırmaya katılır ve genellikle kalıtılır; JavaScript tarafından ayarlansalar bile davranışları CSS kurallarına uyar. CSS Özel Özellikler belirtimi bu sözleşmeyi tanımlar.

Düzenlemeye başlamadan önce bu karar yardımcısını kullanın:

İstenen değişiklik Tercih edilen sahip Bu örnekteki gerekçe
Okuyucu yuvarlak veya kare bir kutucuk seçer Bileşen durumu Onay kutusu, açıklama ve şekil uyumlu olmalıdır
Okuyucu kutucuk boyutunu seçer Bileşen durumu, CSS’e işlenir Kaydırıcı, açıklama ve boyutlar aynı değeri paylaşır
Her kutucukta farklı bir dekoratif renk kullanılmalı Stil sayfası bildirimi Seçili bir değer veya metin güncellenmesi gerekmez
Önizlemenin çevresinde daha fazla boşluk olmalı Stil sayfası bildirimi Bu, kutucuk çevresindeki düzeni değiştirir
İnceleme sırasında geçici bir boyut gerekli Yerel CSS geçersiz kılması Bu, daha sonra kaldırılacak görsel bir denemedir

Ayrım, göreve bağlıdır. Bu önizlemede renk CSS’e aittir çünkü sabit bir dekorasyondur. Sonradan bir renk seçici ve seçili rengin açıklamasını eklerseniz, bu seçimi durum olarak ele alın ve görsel etkisini işleyin. Aynı seçim için birbirinden bağımsız olarak düzenlenebilen iki değer oluşturmaktan kaçının.

Yerel kontrollerin de kendi durumları vardır. Bir onay kutusu için geçerli checked özelliğini okuyun. HTML checked özniteliği varsayılan işaretli olma durumunu belirtir ve kullanıcının sonraki değişikliklerini takip etmez. Bu ayrım MDN’nin onay kutusu özellikleri başvurusunda belgelenmiştir.

Mac’inizde tek başına çalışan bir önizleme oluşturun

Düz metin düzenleyici kullanarak aşağıdaki belgenin tamamını tile-preview.html adıyla kaydedin, ardından Safari’de açın. .html uzantısını koruyun. Örnek CSS ve JavaScript kodunu içerir, sistem yazı tiplerini kullanır ve harici kaynaklara başvurmadan sade, geometrik bir kutucuk çizer.

Stil sayfası belgenin baş bölümünde yer alır. HTML, style öğesini CSS’i yerleştirmenin bir yolu olarak tanımlar ve kendi içinde bulunan stiller ile ek kaynaklara başvuran stil sayfalarını birbirinden ayırır. Bu örneği tek başına çalışır durumda tutmak, stil girdilerini açık hâle getirir. HTML Standardı’nın stil ve betik bölümlerine bakın.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tile preview</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 2rem;
      color: #222;
      background: #fff;
    }
    label { display: block; margin-block: 1rem; }
    .preview { padding: 24px; background: #eee; }
    .tile {
      width: 80px;
      height: 80px;
      border-radius: 0;
      width: var(--tile-size, 80px);
      height: var(--tile-size, 80px);
      border-radius: var(--tile-radius, 0);
      background-color: #547899;
    }
  </style>
</head>
<body>
  <h1>Tile preview</h1>
  <label>
    <input id="round" type="checkbox"> Round tile
  </label>
  <label>
    Tile size
    <input id="size" type="range" min="40" max="160"
           step="1" value="80">
  </label>
  <button id="reset" type="button">Reset choices</button>
  <p id="summary"></p>
  <div class="preview">
    <div id="tile" class="tile" aria-hidden="true"></div>
  </div>
  <script>
    const state = { rounded: false, size: 80 };
    const round = document.getElementById('round');
    const size = document.getElementById('size');
    const summary = document.getElementById('summary');
    const tile = document.getElementById('tile');
    const reset = document.getElementById('reset');

    function render() {
      round.checked = state.rounded;
      size.value = String(state.size);
      tile.style.setProperty('--tile-size', `${state.size}px`);
      tile.style.setProperty('--tile-radius', state.rounded ? '50%' : '0');
      summary.textContent = `Tile A: ${state.rounded ? 'round' : 'square'}, ${state.size}px.`;
    }

    function update(patch) {
      const next = { ...state, ...patch };
      if (typeof next.rounded !== 'boolean' ||
          !Number.isInteger(next.size) ||
          next.size < 40 || next.size > 160) {
        throw new RangeError('Use a boolean and a size from 40 to 160.');
      }
      Object.assign(state, next);
      render();
    }

    round.addEventListener('change', () => {
      update({ rounded: round.checked });
    });
    size.addEventListener('input', () => {
      update({ size: Number(size.value) });
    });
    reset.addEventListener('click', () => {
      update({ rounded: false, size: 80 });
    });
    render();
  </script>
</body>
</html>

Burada kullanılan stil arayüzü belgelenmiştir: element.style.setProperty(), özel özellikler dâhil olmak üzere satır içi bir bildirim yazar. Özellik adlarında --tile-size gibi CSS yazımı kullanılır. MDN’nin setProperty başvurusuna bakın.

Round tile seçmeyi, Tile size değerini değiştirmek için kaydırıcıyı hareket ettirmeyi ve Reset choices seçeneğini kullanmayı deneyin. İlk iki işlem hem şekli hem de açıklamayı güncellemelidir; sıfırlama ise 80 piksel boyutunda bir kareyi geri getirmelidir. Bu programda state içindeki bir alanı tek başına atamak, render() işlevini çağırmaz. Doğrulama ve görüntüleme birlikte gerçekleşsin diye değişiklikleri update() üzerinden yönlendirin.

Güncelleme ve görüntüleme mantığı; başlangıç değerleri, değiştirilmiş değerler, geçersiz boyutlar ve sıfırlama için sahte kontroller ve sahte bir stil nesnesi kullanılarak Node’da kontrol edildi. Bu kontroller başarılı oldu; ancak tarayıcıda görüntülemeyi doğrulamıyor. Dosyayı Safari’de doğrulamak için yukarıdaki görünür kontrolleri kullanın.

CSS bildirimini ne zaman geçersiz kılmalısınız?

Kalıcı bir dekoratif değişiklik için kaydedilmiş stil sayfasını düzenleyin. Örneğin .tile öğesinin background-color özelliğini başka bir CSS rengiyle değiştirin veya .preview öğesinin iç boşluğunu ayarlayın. Bu programda bu değişikliklerin hiçbiri yeni bir durum alanı gerektirmez çünkü hiçbiri seçilmiş bir tercihi temsil etmez.

Geçici bir deneme için Safari → Settings… → Advanced → Show features for web developers yolunu izleyerek Safari denetçisini etkinleştirin. Develop → Show Web Inspector seçeneğini açın veya Option-Command-I tuşlarına basın. Bunlar WebKit’in denetçi kılavuzunda belgelenmiş Mac adımlarıdır.

Örnek açıkken aşağıdaki tam konsol kodu parçacığı kutucuğun rengini geçici olarak değiştirir ve ardından bu geçersiz kılmayı kaldıran bir işlev sunar:

const previewTile = document.getElementById('tile');
if (!previewTile) throw new Error('Open tile-preview.html first.');
previewTile.style.setProperty('background-color', '#8069a6');
function restoreTileColor() {
  previewTile.style.removeProperty('background-color');
}
// Run restoreTileColor() when finished comparing colors.

Bu satır içi bildirimin kaldırılması, rengi belirlemeyi basamaklandırmanın geri kalanına bırakır. Stil sayfasındaki renk bildirimini silmez. Kaldırma yöntemi MDN’nin removeProperty başvurusunda tanımlanmıştır. Bu örnekte seçilen bir rengi sayfa yeniden yüklendikten sonra korumak için CSS kaynağını düzenleyip kaydedin.

Geçici geçersiz kılmaları, görüntüleyicinin sahip olduğu değerlerden uzak tutun. --tile-size değerini elle değiştirirseniz açıklama yine durum değerini gösterir ve sonraki render() çağrısı denemenizin üzerine yazar. Tüm bileşenin tutarlı olmasını istediğinizde boyutu kontrol veya güncelleme işlevi üzerinden değiştirin.

Bir geçersiz kılma neden hiçbir şey yapmıyor gibi görünebilir?

Seçici özgüllüğünü artırmadan önce değerin izlediği yolu inceleyin. Bir bildirim geçerli olduğu hâlde basamaklandırmada kaybedebilir veya artık kazanan bildirimin kullanmadığı bir özel özelliği hedefleyebilir.

  1. Hedefi kontrol edin. Şekli gösteren öğeyi seçtiğinizi doğrulayın.
  2. Girdiyi kontrol edin. Örnekte boyut, 40 ile 160 arasında bir tam sayı olmalıdır. Geçersiz güncellemeler durumu değiştirmeden hata verir.
  3. Tüketiciyi kontrol edin. Kutucuğun boyutları var(--tile-size) kullanır. Kazanan bir doğrudan width bildirimi, genişlik için bu değeri devre dışı bırakabilir; yükseklik ise onu kullanmaya devam eder.
  4. Önceliği kontrol edin. Uygulanabilir bildirimleri, önem durumunu, katmanları ve özgüllüğü karşılaştırın.
  5. Sonraki etkileşimi kontrol edin. Bir kontrolü hareket ettirdikten sonra değişiklik kayboluyorsa render() işlevinin ne yazdığını inceleyin.

Normal satır içi bildirimler, normal yazar stil sayfası kurallarına göre önceliklidir. Ancak önem durumu, animasyonlar ve geçişler genel sıralamayı etkiler. Daha sonraki bir bildirim otomatik olarak kazanmaz ve daha özgül bir seçici her çakışmayı çözemez. MDN’nin basamaklandırma kılavuzu bu koşulları belgeler.

Satır içi değerleri çözümlenmiş değerlerden de ayırın. element.style satır içi stilleri gösterir; bu nedenle satır içi değerin boş olması, öğenin hiç stili olmadığı anlamına gelmez. getComputedStyle(), etkin stil sayfaları uygulandıktan sonraki çözümlenmiş değerleri okur. MDN’nin stil başvurusuna ve getComputedStyle başvurusuna bakın.

Örnek sayfanın konsolunda aşağıdaki tanılama kodunun tamamını çalıştırın:

const inspectedTile = document.getElementById('tile');
if (!inspectedTile) throw new Error('Open tile-preview.html first.');
console.table({
  inlineSizeToken: inspectedTile.style.getPropertyValue('--tile-size'),
  inlineWidth: inspectedTile.style.getPropertyValue('width'),
  resolvedWidth: getComputedStyle(inspectedTile).width,
  resolvedHeight: getComputedStyle(inspectedTile).height
});

Değiştirilmemiş örnek ilk açıldıktan hemen sonra beklenen değerler, satır içi boyut belirteci olarak 80px, boş bir satır içi genişlik ve çözümlenmiş boyutlar olarak 80px değerleridir. Bu, satır içi bir özel özelliğin, satır içi bir width bildirimi oluşturmadan stil sayfasındaki bir bildirime nasıl değer sağlayabileceğini gösterir.

Tarayıcı ve kaynak sınırlarında neler önemlidir?

MDN, CSS özel özelliklerinin Nisan 2017’den beri tarayıcılarda geniş ölçüde kullanılabildiğini belirtir. Bu, tüm eski tarayıcılarda desteklendiklerini göstermez. Örnek, özel özellik kullanılamadığında kutucuğun sabit bir görünümü olması için var() bildirimlerinden önce sıradan boyut bildirimlerini içerir. MDN’nin özel özellikler başvurusuna bakın.

var(--tile-size, 80px) içindeki yedek değer, özel özellikleri yorumlayamayan bir tarayıcıyla uyumluluk sağlamaz. Ayrıca verilen her belirteci doğrulamaz: blue gibi tanımlı bir değer, sırf bir yedek değer bulunduğu için geçerli genişliğe dönüşemez. Bu sınırlamalar MDN’nin özel özellikler kılavuzunda açıklanmıştır.

Hedeflediğiniz eski bir tarayıcıda özel özellik desteği yoksa, desteklenen alternatif görüntüleyiciyi değiştirerek setProperty() ile sıradan satır içi width, height ve border-radius bildirimlerini yazmaktır. Durum doğrulamasını ve kontrol senkronizasyonunu aynı şekilde koruyun. Bu, görüntüleme sözleşmesini değiştirir; bu nedenle çakışan görüntüleyici yazımlarını kaldırın ve aynı desteğin mevcut olduğunu varsaymak yerine hedef tarayıcıda doğrulayın.

Bu yerel önizleme için uygulanacak yaklaşım nettir: şekil ve boyut seçimlerinde durumu kullanın, bu seçimleri küçük bir CSS girdisi kümesi üzerinden görüntüleyin ve dekorasyonu stil sayfasında tutun. Her değişiklikten sonra bir kontrol etkileşimini ve sıfırlamayı deneyin. Önizleme, kontroller ve açıklama aynı seçili değerleri göstermeye devam etmelidir.

Kaynaklar