עיצוב ממשק המשתמש שנוצר על ידי הדפדפן

תכונות אינטרנט: ‎::selection user-select accent-color color-scheme scrollbar-color scrollbar-width ‎:user-valid ו-‎ :user-invalid ‎:placeholder-shown ‎::placeholder field-sizing resize (מאפיין CSS) ‎ <select>‎ שניתן להתאמה אישית appearance ‎:has()‎ ::file-selector-button

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

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

  1. אי אפשר להתאים אישית את ממשק המשתמש של הדפדפן לפי הצרכים שלכם, אפילו עם CSS מודרני,
  2. ההתאמה האישית הרצויה היא קריטית מספיק כדי להצדיק את הפשרות של יצירה מחדש של ממשק משתמש מובנה – בעיקר אובדן הסמנטיקה הנגישה, הטיפול במקלדת, ה-IME והשילוב של AT שממשק המשתמש המקורי מספק בחינם.

דוגמאות להתאמות אישיות שאפשר לבצע:

  • אפשר להשתמש ב-::selection כדי להתאים אישית את הצבעים של הטקסט המודגש.
  • אל תפעילו את user-select: none על טקסט של תוכן – זה משבש את פעולת ההעתקה וההדבקה, את כלי התרגום ואת תנועות "קריאה מכאן" של טכנולוגיות מסייעות. הגבילו את זה ל-Chrome (ידיות גרירה, סרגלי כלים, תוויות כפתורים מיותרות).
  • אפשר להשתמש ב-accent-color כדי להחיל את הצבע המשני של הדף על כל ממשק משתמש שנוצר על ידי הדפדפן.
  • אפשר להשתמש ב-color-scheme כדי להתאים את ממשק המשתמש של הדפדפן למצב בהיר או כהה.
  • משתמשים ב-scrollbar-color כדי להתאים אישית את הצבעים של פס הגלילה וב-scrollbar-width כדי לשלוט בעובי של פס הגלילה – חשוב לוודא שהלחצן נבדל באופן ברור מהמסילה (‎≥3:1), ולא להגדיר את scrollbar-width: none באזורים שניתן לגלול בהם (משתמשים בו רק כשמחליפים את הגלילה לחלוטין באפשרות אחרת).
  • משתמשים ב-:user-invalid או ב-:user-valid לעיצוב תקינות, ולא ב-:invalid או ב-:valid – הם תואמים רק אחרי שהמשתמש יוצר אינטראקציה עם השדה, וכך נמנעת ברירת המחדל העוינת של סימון שדות ריקים נדרשים כשגיאות בטעינת הדף. כשמטרגטים את input באופן נרחב (למשל, input:not(input[type="range"]):user-valid), צריך להחריג פסי הזזה של טווחים כדי שהתאמה של פס הזזה לא תחיל עליו גבולות או רקעים של תקינות שדה.
  • באופן כללי, אפשר לעצב כפתורים ושדות טקסט (כולל <textarea>) כמו רכיבים רגילים.
  • אפשר להשתמש ב-font-size כדי לשנות את הגודל ובמאפייני טקסט אחרים כדי לשלוט בטיפוגרפיה

עיצוב שדות טקסט (<input> ו-<textarea>)

לרוב מטרות העיצוב (למשל צבעים, גבולות, רקעים, טיפוגרפיה וכו'), צריך להתייחס לרכיבים האלה כאל מאגרי טקסט רגילים.

  • כדי לעצב את הפלייסהולדרים של הקלט, משתמשים ב-:placeholder-shown וב-::placeholder.
  • אפשר להשתמש ב-field-sizing: content כדי להתאים את הגודל של שדות הטקסט לתוכן.
  • ברכיבי <textarea>, משתמשים ב-resize: vertical כדי להשבית את שינוי הגודל האופקי או ב-resize: none כדי להשבית את כל שינויי הגודל.

אמצעי בקרה של שאלות אמריקאיות (בחירה, כפתורי בחירה, תיבות סימון)

  • כדי לבחור אפשרות אחת מבין כמה אפשרויות שמוצגות בתפריט נפתח: משתמשים ב-<select> + appearance: base-select + ::picker(select). מידע נוסף זמין במאמר סגנון מותאם אישית של מודעות Select.
  • בחירה באפשרות אחת או יותר מבין כמה אפשרויות שמוצגות בשורה בדף: משתמשים ב-<input type=checkbox> או ב-<input type=radio> בתוך <label> לכל אפשרות. סגנון באמצעות label:has(:checked).
  • עיצוב תיבות סימון, לחצני בחירה ומתגים באמצעות appearance: none + תוכן שנוצר (::before/::after) או תמונות רקע כדי להציג את המצב המסומן.

רכיבי <input> לא טקסטואליים (כפתורים, פסי הזזה, קלט של קבצים וכו')

  • קלט של קבצים: משתמשים ב-::file-selector-button כדי לעצב את הלחצן.
  • אל תשתמשו ב-<input> עם type של button, submit או reset. במקום זאת, צריך להשתמש ב-<button> ולעצב אותו כרכיב רגיל.
  • סליידרים: כדי לקבל שליטה מדויקת יותר, משתמשים ברכיבי פסאודו appearance: none + thumb (::-webkit-slider-thumb,‏ ::-moz-range-thumb וכו') וברכיבי פסאודו track (::-webkit-slider-runnable-track,‏ ::-moz-range-track וכו').