שימוש באפקטים אחרים: הפעלת עיצוב כהה אוטומטי, אמולציה של מיקוד ועוד

Sofia Emelianova

תוכלו למצוא אפקטים שימושיים שתוכלו ליישם בדף בעזרת ההסבר על האפשרויות בכרטיסייה רינדור.

הדגשת מסגרות של מודעות

כדי לבדוק אם מסגרות מסוימות מתויגות כמודעות:

1. פותחים את הכרטיסייה עיבוד בהדגמה הזו ומסמנים את האפשרות הדגשת מסגרות המודעות.
2. מסגרת המודעה מודגשת באדום.

יצירת אמולציה של דף במיקוד

אם מעבירים את המיקוד מהדף ל-DevTools, חלק מרכיבי שכבת-העל מוסתרים באופן אוטומטי אם הם מופעלים על ידי המיקוד. לדוגמה, רשימות נפתחות, תפריטים או בוחרי תאריכים. בעזרת האפשרות check_box הדמיה של דף במיקוד מאפשרת לנפות באגים ברכיב כזה כאילו הוא בפוקוס.

כדי ליצור אמולציה של דף במיקוד:

1. פותחים דף עם הרכיב לניפוי באגים, לדוגמה: אתר YouTube שמכיל את סרגל החיפוש.

2. בדף, פותחים את הכרטיסייה עיבוד, מסמנים את התיבה הדמיה של דף ממוקד ומוחקים אותה.

   

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

השבתת גופנים מקומיים

כדי לבדוק אם החלופות המקומיות של הגופן פועלות כצפוי, משביתים את המקורות של local() בכללים של @font-face.

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

• גופן מקומי לכלים שלכם לעיצוב,
• גופן אינטרנט לקוד

השבתת הגופנים המקומיים מאפשרת לכם:

• ניפוי באגים ומדידה של ביצועים ואופטימיזציה של גופני אינטרנט
• אימות תקינות הכללים של @font-face ב-CSS
• מגלים את ההבדלים בין גופנים באינטרנט לבין הגרסאות המקומיות שלהם

הדמיה של מקורות local() חסרים בכללי @font-face:

1. בודקים את המשפט שלמעלה, פותחים את Elements‏ > Computed, גוללים עד למטה, ובקטע Rendered Fonts רואים ש-Chrome מצא את הגופן Courier New בקבצים המקומיים.

   

2. פותחים את הכרטיסייה עיבוד, מסמנים את האפשרות השבתת גופנים מקומיים ו-refresh טוענים מחדש את הדף.

3. בודקים את המשפט ב-Roboto שנמצא באינטרנט.

   

הפעלה אוטומטית של מצב כהה

אתם יכולים לבדוק איך האתר יכול להיראות במצב כהה גם אם לא הטמעתם אותו.

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

כדי להפעיל מצב כהה אוטומטי:

1. בדף הזה, פותחים את הכרטיסייה רינדור ומסמנים את התיבה הפעלת מצב כהה אוטומטי.
2. כדאי לצפות בדף הזה במצב כהה.

אמולציה של ליקויי ראייה

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

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

כדי לבצע אמולציה של ליקויי ראייה:

1. פותחים את הכרטיסייה עיבוד.

2. בקטע הדמיה של ליקויים בראייה, בוחרים אחת מהאפשרויות הבאות מהתפריט הנפתח:

   • ללא אמולציה.
   • ראייה מטושטשת.
   • ירידה ברגישות לניגודיות.
   • עיוורון לאדום (ללא אדום). תפיסה נמוכה של אדום; בלבול בין צבעים ירוקים, אדומים וצהובים.
   • עיוורון לירוק (ללא ירוק). תפיסה נמוכה של ירוק; בלבול בין צבעים ירוקים, אדומים וצהובים.
   • Tritanopia (ללא כחול). תפיסה נמוכה של כחול, בלבול בין צבעים ירוקים לכחולים.
   • Achromatopsia (ללא צבע). חוסר חלקי או מלא בראיית צבעים.

השבתת פורמטים של תמונות AVIF ו-WebP

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

נניח שיש לכם את קוד ה-HTML הבא כדי להציג תמונה בפורמטים AVIF ו-WebP לדפדפנים חדשים יותר, עם תמונה חלופית בפורמט PNG לדפדפנים ישנים יותר.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

כדי להשבית את כל התמונות בפורמט AVIF בדף (או, באופן דומה, תמונות בפורמט WebP):

1. פותחים את הכרטיסייה עיבוד ומסמנים את התיבה השבתת פורמט התמונות AVIF.
2. refresh טוענים מחדש את הדף ומעבירים את העכבר מעל img src. התמונה הנוכחית src (currentSrc) היא עכשיו תמונת WebP לגיבוי.

באופן דומה, אפשר להשבית תמונות WebP.