בחירת עיצוב

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

התאמה אישית של ממשק הדפדפן

דפדפנים מסוימים מאפשרים להציע צבע עיצוב על סמך לוח הצבעים של האתר שלכם. ממשק הדפדפן מתאים את עצמו לצבע המוצע שלך. יש להוסיף את הצבע לרכיב meta שנקרא theme-color ב-head מהדפים.

<meta name="theme-color" content="#00D494">

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

אפשר לציין צבע עיצוב גם בקובץ מניפסט של אפליקציית אינטרנט. זהו קובץ JSON עם מטא-נתונים לגבי האתר שלך.

קישור לקובץ המניפסט מתוך head של המסמכים. צריך להשתמש ברכיב link עם ערך rel של manifest.

<link rel="manifest" href="/manifest.json">

בקובץ המניפסט, יש לפרט את המטא-נתונים באמצעות צמדי מפתח/ערך.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

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

הוספת מצב כהה

מערכות הפעלה רבות מאפשרות למשתמשים לציין העדפה ללוח צבעים בהיר או כהה. מומלץ לבצע אופטימיזציה של האתר לפי העדפות העיצוב של המשתמשים. אפשר לגשת להעדפה הזו בתכונת מדיה בשם prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

אפשר לציין צבעי עיצוב באמצעות תכונת המדיה prefers-color-scheme בתוך הרכיב meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

אפשר גם להשתמש בתכונת המדיה prefers-color-scheme בתוך SVG. אם אתם משתמשים בקובץ SVG עבור סמל האתר, אפשר להתאים אותו למצב כהה. תומאס סטיינר כתב על prefers-color-scheme בסמלי אתר בפורמט SVG לסמלים של מצב כהה.

עיצוב עם מאפיינים מותאמים אישית

אם משתמשים באותם ערכי צבעים במספר מקומות בשירות ה-CSS, יכול להיות די מעייף לחזור על כל הסלקטורים בשאילתת מדיה prefers-color-scheme.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

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

אם תעדכנו את הערכים של המאפיינים המותאמים אישית בשאילתת מדיה של prefers-color-scheme, לא תצטרכו לכתוב את כל הסלקטורים פעמיים.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

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

תמונות

אם אתם משתמשים ב-SVG ב-HTML, תוכלו להחיל גם בהם מאפיינים מותאמים אישית.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

כעת הצבעים של הסמלים שלך ישתנו יחד עם שאר הרכיבים בדף.

כדי להפחית את הבהירות של תמונות המצולמות במצב כהה, אפשר להחיל מסנן ב-CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

בתמונות מסוימות מומלץ להחליף אותן לחלוטין במצב כהה. לדוגמה, אפשר להציג מפה עם ערכת צבעים כהה. צריך להשתמש ברכיב <picture> שמכיל את הרכיב <source> עם שאילתת המדיה prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

טפסים

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

מוסיפים את קטע הקוד הזה לשירות ה-CSS:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

אפשר גם להשתמש ב-HTML. יש להוסיף זאת ב-head המסמכים שלך:

<meta name="supported-color-schemes" content="light dark">

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

html {
  accent-color: red;
}

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

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

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

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

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

בדיקת ההבנה

בחינת הידע שלכם בנושא