CSS accent-color

אפשר להוסיף את צבע המותג לקלט של טופס HTML מובנה באמצעות שורת קוד אחת.

Adam Argyle
Joey Arhar
Joey Arhar
X GitHub

פורסם: 11 באוגוסט 2021

קשה להתאים אישית את רכיבי טופס ה-HTML של היום. נראה שיש לך מעט סגנונות בהתאמה אישית או שאין לך בכלל, או שאתה צריך לאפס את סגנונות הקלט ולבנות אותם מחדש. בנייה מאפס דורשת הרבה יותר עבודה ממה שחשבתם. זה גם יכול להוביל לשכחת סגנונות של מצבי רכיבים (indeterminate, אני מסתכל עליך) ולאובדן של תכונות נגישות מובנות. יכול להיות ששחזור מלא של מה שהדפדפן מספק ידרוש יותר עבודה ממה שאתם מוכנים להשקיע.

accent-color: hotpink;

‫CSS accent-color מתוך מפרט ממשק המשתמש של CSS מאפשר להוסיף גוון לרכיבים באמצעות שורת CSS אחת, וכך לחסוך לכם את הצורך בהתאמה אישית. הוא מספק דרך להוסיף את המותג שלכם לרכיבים.

צילום מסך של הדגמה של צבע הדגשה בעיצוב בהיר, שבו תיבת סימון, לחצני בחירה, פס הזזה של טווח ורכיב התקדמות מוצגים בגוון ורוד לוהט.
הדגמה

המאפיין accent-color פועל גם עם color-scheme, ומאפשר למחברים להוסיף גוון לאלמנטים הבהירים והכהים. בדוגמה הבאה, המשתמש הפעיל עיצוב כהה, הדף משתמש ב-color-scheme: light dark, ומשתמש באותו accent-color: hotpink עבור אמצעי בקרה עם גוון ורוד לוהט בעיצוב כהה.

צילום מסך של הדגמה של צבע הדגשה בעיצוב כהה, שבו תיבת סימון, כפתורי בחירה, פס הזזה ורכיב התקדמות צבועים בוורוד פוקסיה.
הדגמה

רכיבים נתמכים

בשלב הזה, רק ארבעה רכיבים יקבלו גוון דרך המאפיין accent-color: checkbox, ‏ radio, ‏ range ו-progress. אפשר לראות תצוגה מקדימה של כל אחד מהם כאן: https://accent-color.glitch.me בערכות צבעים בהירות וכהות.

תיבת סימון

רדיו

טווח

התקדמות

הבטחת ניגודיות

כדי למנוע מצב שבו יש רכיבים שלא נגישים, דפדפנים עם accent-colorצריכים לקבוע צבע ניגודי מתאים לשימוש לצד צבע ההדגשה המותאם אישית. בהמשך מוצג צילום מסך שממחיש את ההבדלים באלגוריתמים של Chrome 94 (מימין) ו-Firefox 92 Nightly (משמאל):

צילום מסך של Firefox ו-Chromium זה לצד זה, שבו מוצג ספקטרום מלא של תיבות סימון בגוונים שונים וברמות כהות שונות.

הדבר הכי חשוב שצריך לזכור הוא לסמוך על הדפדפן. מספקים צבע מותג וסומכים על כך שהמערכת תקבל החלטות חכמות בשבילכם.

תוספת: עוד גוון

יכול להיות שאתם תוהים איך אפשר לצבוע יותר מארבעת רכיבי הטופס האלה. הנה ארגז חול מינימלי שצובע:

  • הדגשת מיקוד המקלדת
  • הדגשות של בחירת טקסט
  • סמני רשימה
  • אינדיקטורים בצורת חץ (Webkit בלבד)
  • האזור שאפשר ללחוץ עליו בסרגל הגלילה (Firefox בלבד)
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

פוטנציאל עתידי

המפרט לא מגביל את השימוש ב-accent-color לארבעת הרכיבים שמוצגים במאמר הזה, ויכול להיות שנוסיף תמיכה ברכיבים נוספים בהמשך. אפשר להדגיש רכיבים כמו <option> שנבחר ב-<select> באמצעות accent-color.

מה עוד היית רוצה לצבוע באינטרנט? אפשר לצייץ אל ‎@argyleink עם הבורר שלכם, ויש סיכוי שהוא יתווסף למאמר הזה.