צבע משני של CSS

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

אדם ארגייל

ג'ואי ארה

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

accent-color: hotpink;

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

תמיכה בדפדפן

• 93
• 93
• 92
• 15.4

מקור

הדגמה

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

הדגמה

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

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

אזהרה: אם כל רכיבי ההדגמה הבאים באותו צבע, אז הדפדפן שלך לא תומך ב-accent-color עדיין.

תיבת סימון

רדיו

טווח

ההתקדמות

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

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

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

הערה: הצבע של הדפדפן לא ישתנה בעיצוב כהה.

תוספת: גוון נוסף

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

• טבעת המיקוד
• הדגשות לבחירת טקסט
• רשימה סמנים
• מדדי חץ (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 עם הבורר שלכם, וייתכן שהוא יתווסף למאמר הזה.