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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

המודעה מודגשת באדום

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. בודקים את המשפט שלמעלה, פותחים את Elements (רכיבים) > מחושב, גוללים עד הסוף, ובקטע Rendered Fonts מגלים ש-Chrome מצא את Courier New בקבצים מקומיים.

    גופנים שעברו עיבוד: מקומי

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

  3. חשוב להתבונן במשפט שצולם ב-Roboto באינטרנט.

    גופנים שעברו עיבוד: משאב רשת

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

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

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

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

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

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

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

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

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

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

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

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

    • ללא אמולציה.
    • ראייה מטושטשת.
    • הפחתת ניגודיות.
    • פרוטנופיה (ללא אדום). תפיסה נמוכה של אדום, בלבול בין ירוקים, אדומים וצהובים.
    • דוטרנופיה (ללא ירוק). ראייה נמוכה של ירוק, בלבול בין ירוקים, אדומים וצהובים.
    • 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. טוענים מחדש את הדף ומעבירים את העכבר מעל img src. התמונה הנוכחית src (currentSrc) היא עכשיו תמונת WebP לגיבוי.

אמולציה של סוגי תמונות

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