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

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

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

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

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

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

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

כדי לחקות דף במיקוד:

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

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

   

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

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

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

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

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

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

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

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

1. בודקים את המשפט שלמעלה, פותחים את Elements > Computed, גוללים למטה עד הסוף, ובקטע גופנים שעברו עיבוד מגלים ש-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. פותחים את הכרטיסייה רינדור, מסמנים את האפשרות Disable AVIF image format (השבתת פורמט התמונה של AVIF).
2. refresh טוענים מחדש את הדף ומעבירים את העכבר מעל img src. התמונה הנוכחית מסוג src (currentSrc) היא עכשיו תמונת WebP החלופית.

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