Markayla Tutarlı Formlar

Web özellikleri: accent-color

Onay kutuları ve radyo düğmeleri gibi standart HTML form öğelerini özelleştirmek geçmişte zordu. Geliştiriciler genellikle tarayıcı varsayılanlarını kullanmak veya sıfırdan özel bileşenler oluşturmak arasında seçim yapmak zorunda kalıyordu. Özel kontroller oluşturmak zaman alır ve kolayca erişilebilirlik sorunlarına veya eksik durumlara (onay kutuları için belirsiz durum gibi) yol açabilir.

CSS özelliği accent-color, erişilebilirlikten veya yerleşik tarayıcı özelliklerinden ödün vermeden tek bir CSS satırıyla marka renginizi yerleşik HTML form girişlerine getirmenin basit bir yolunu sunar.

Nasıl uygulanır?

Marka renginizi form kontrollerine uygulamak için:

  1. Marka renginizi belirleyin: Markanızı temsil eden bir renk seçin.
  2. accent-color özelliğini uygulayın: CSS'nizdeki öğeye veya bir kapsayıcı öğeye (body ya da belirli bir form gibi) accent-color ekleyin.
  3. Koyu modu destekleyin (isteğe bağlı ancak önerilir): Tarayıcıya sitenizin koyu modu desteklediğini bildirmek için color-scheme kullanın ve daha iyi kontrast için gerekirse accent-color değerini ayarlayın.

Örnek Kod: Markayla Tutarlı Form Kontrolleri

:root {
  --brand-color: #6200ee;
}

/* Apply accent-color to the body or a specific container */
body {
  accent-color: var(--brand-color);
}

/* Optional: Adjust for dark mode if needed */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-color: #bb86fc; /* A lighter shade for dark mode */
  }
}

<form>
  <!-- Checkbox -->
  <label for="subscribe">
    <input type="checkbox" id="subscribe" checked>
    Subscribe to newsletter
  </label>

  <!-- Radio Buttons -->
  <label for="plan-monthly">
    <input type="radio" id="plan-monthly" name="plan" value="monthly">
    Monthly
  </label>
  <label for="plan-yearly">
    <input type="radio" id="plan-yearly" name="plan" value="yearly" checked>
    Yearly
  </label>

  <!-- Range Slider -->
  <label for="volume">Volume:</label>
  <input type="range" id="volume" min="0" max="100" value="70">

  <!-- Progress Bar -->
  <label for="file">Upload Progress:</label>
  <progress id="file" max="100" value="70">70%</progress>
</form>

Stratejik Uygulama ve En İyi Uygulamalar

  • Form kontrollerini markanıza uyacak şekilde kolayca temalandırmak için accent-color KULLANIN.
  • Kontrastı ayarlama konusunda tarayıcıya körü körüne GÜVENMEYİN. Tarayıcıların uygun bir kontrast rengini otomatik olarak belirlemesi gerekir ancak Safari (WebKit hatası 244233) ve Android Chrome (Chromium hatası 343503163) gibi uygulamalardaki bilinen hatalar, onay işareti renklerini tersine çeviremeyebilir.Bu durum, arka plana göre yeterli kontrasta sahip olmayan renkler (ör. açık modda açık renkler veya koyu modda koyu renkler) kullanıldığında kontrollerin görünmez olmasına veya zor görünmesine neden olur.
  • Form denetimlerinin hem açık hem de koyu temalarda iyi görünmesi için accent-color ile color-scheme: light dark'yi BİRLİKTE KULLANIN.
  • Arka plan rengine çok yakın bir renk KULLANMAYIN. Tarayıcılar kontrastı garanti etmeye çalışsa da iyi bir temel kontrasta sahip bir renk kullanmak en iyisidir.
  • accent-color özelliğinin tüm form öğelerinde çalıştığını varsaymayın. Şu anda yalnızca checkbox, radio, range ve progress öğelerini renklendirir.

Yedek strateji

accent-color özelliğini desteklemeyen tarayıcılarda form kontrolleri, tarayıcının varsayılan görünümüne geri döner. Tüm ortamlarda tam marka tutarlılığı ve yüksek güvenilirlik sağlamak için, yerleşik "görsel olarak gizli giriş" tekniğini kullanarak özel bir yedek strateji uygulamanız GEREKİR.

@supports not ile Progresif Geliştirme

Özel yedek stillerini yalnızca accent-color desteklenmediğinde uygulamak için @supports not kuralını KULLANMANIZ GEREKİR. Bu sayede, modern tarayıcılar için accent-color'nin basitliğinden yararlanırken eski tarayıcılar için tutarlı bir markalı deneyim sunabilirsiniz.

1. HTML Yapısı

CSS'de eş seçicilere izin vermek için etiketlerinizin metni bir <span> içine aldığından emin olun:

<label for="subscribe-fallback">
  <input type="checkbox" id="subscribe-fallback" class="visually-hidden" checked>
  <span>Subscribe to newsletter</span>
</label>

2. CSS Yedek

@supports not bloğuna özel stiller uygulama:

/* Fallback for older browsers without accent-color */
@supports not (accent-color: var(--brand-color)) {
  /* Visually hide the native input using the canonical accessible recipe */
  form input[type="checkbox"].visually-hidden {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  /* Style the wrapper label */
  label {
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

  /* Custom box for checkbox */
  input[type="checkbox"] + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #ccc;
    background: white;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  /* Ensure custom checkbox shows focus for keyboard users */
  input[type="checkbox"]:focus-visible + span::before {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  /* Checked State */
  input[type="checkbox"]:checked + span::before {
    background-color: var(--brand-color, #6200ee);
    border-color: var(--brand-color, #6200ee);
  }

  /* Checkmark (Unicode) */
  input[type="checkbox"]:checked + span::after {
    content: "✓";
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
  }

  /* Fallback for Range Slider */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }

  /* Webkit (Chrome, Safari, Edge) */
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    /* Use gradient to show progress for a static value (e.g., 70%) or update with JS */
    background: linear-gradient(to right, var(--brand-color, #6200ee) 70%, #ccc 70%);
    border-radius: 4px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--brand-color, #6200ee);
    cursor: pointer;
    margin-top: -4px; /* Center vertically */
  }

  /* Firefox */
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ccc;
    border-radius: 4px;
  }

  input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--brand-color, #6200ee);
    cursor: pointer;
  }

  /* Firefox specific progress bar */
  input[type="range"]::-moz-range-progress {
    background-color: var(--brand-color, #6200ee);
    height: 8px;
    border-radius: 4px;
  }

  /* Fallback for Progress Bar */
  progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: #ccc;
    height: 8px;
    border-radius: 4px;
  }

  progress::-webkit-progress-bar {
    background-color: #ccc;
    border-radius: 4px;
  }

  progress::-webkit-progress-value {
    background-color: var(--brand-color, #6200ee);
    border-radius: 4px;
  }

  progress::-moz-progress-bar {
    background-color: var(--brand-color, #6200ee);
    border-radius: 4px;
  }
}

Webkit Yedek Modunda Dinamik Aralık İlerlemesi

Webkit tarayıcılarda (accent-color olmadan) ilerleme dolgusunun aralık kaydırıcısındaki kaydırma çubuğuyla birlikte hareket etmesini sağlamak için bir CSS değişkeni ve az miktarda JavaScript kullanabilirsiniz.

  1. CSS'yi güncelleme: Gradyan durak noktası için bir CSS değişkeni kullanın:

    input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--brand-color) var(--progress, 0%), #ccc var(--progress, 0%));
}

  2. JavaScript ekleyin: input etkinliğindeki değişkeni güncelleyin:

if (!CSS.supports('accent-color')) {
  const slider = document.getElementById('volume');
  slider.addEventListener('input', (e) => {
    e.target.style.setProperty('--progress', `${e.target.value}%`);
  });
}