Connect with us

קטגוריות

CSS

בקרוב דפדפן Safari יתן לנו אפשרות להשתמש ב-Dark Mode על ידי CSS

Mojave, הגרסה החדשה של מערכת ההפעלה MacOs שוחררה לאחרונה, הפיצ׳ר שכולם חיכו לו סוף סוף הגיע עם העדכון החדש. Dark Mode.

Dark Mode מאפשר לכם לשנות את צבע הממשק של מערכת ההפעלה לכהה יותר לאורך כל המערכת, שימושי לעבודה בערבים או בלילות או סתם כי זה שונה (ויפה יותר).

אפליקציות Native יכולות לשנות בקלות את צבע הממשק שלהם על ידי שימוש ב-interface guidelines של אפל.

מה קורה עם אפליקציות Web? לדפדפן Safari (גרסה 12) שהושק עם העדכון החדש אין דרך לדעת אם הגולש משתמש ב-Dark Mode או לא, אך החדשות הטובות הם ש-Safari Tech Preview 68 תומך ב-Dark Mode ו-Safari 12.1 אולי יתמוך בזה בחודשים הקרובים.

מה זה אומר? זה אומר שעכשיו תיהיה לנו האפשרות לדעת את צבע הממשק של המשתמש (במידה והוא בגרסה Mojave עם דפדפן Safari שתומך בפיצ׳ר) ולשנות את ה-CSS שלנו בקלות על מנת לתת למבקר חוויה יחודית.

השינוי יתבצע על ידי media query מיוחד prefers-color-scheme:

/* Text and background color for light mode */
body {
  color: #333;
}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

prefers-color-scheme תומך בשלושה מצבים: dark, light, ן-no-preference.

מה יקרה אם משתמש Windows עם דפדפן Firefox יכנס אלינו לאתר? כלום. הדפדפן ידלג על הקוד media query כי הוא כמובן לא מכיר אותו, אז אין צורך ב-polyfills.

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

עוד ב CSS

    Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
    קריאה מהנה.

    מאמרים פופולריים

    נושאים פופולריים

    חזרה למעלה