חדש ב-Chrome 90

Pete LePage

דברים שעליך לדעת:

• יש ערך חדש לנכס ה-CSS overflow.
• השם של Feature Policy API השתנה למדיניות הרשאות.
• יש דרך חדשה להטמיע את Shadow DOM ולהשתמש בו ישירות ב-HTML.
• היו לי כמה ז'קטים כמעט בדיוק כמו זה בשנות ה-90 של המאה ה-20.
• ויש עוד עוד המון.

אני Pete LePage, ויש לי 411 למפתחים ב-Chrome 90, עשה זאת בסגנון של 1990!

מניעת גלישה באמצעות overflow: clip

שירות CSS הוא כל זה וחבילה של צ'יפס! אבל אני חושבת שכל מפתח אתרים ראה וחוו משהו מצועצע בשלב מסוים. יש פוסט נהדר על 'טריקים של CSS' על דרכים שונות לטיפול בחריגות, לדוגמה, שימוש ב-overflow: hidden או ב-auto.

במפרט של גלישת CSS יש נכס clip חדש שפועל בדומה ל-hidden.

.overflow-clip {
  overflow: clip;
}

השימוש ב-overflow: clip מאפשר למנוע כל סוג של גלילה בתיבה, כולל גלילה פרוגרמטית. המשמעות היא שהתיבה לא נחשבת למאגר גלילה, והיא לא מתחילה בהקשר חדש לעיצוב. במקרה הצורך, אפשר להחיל חיתוך על ציר יחיד באמצעות overflow-x ו-overflow-y.

לידיעתכם, יש גם overflow-clip-margin, שמאפשר להרחיב את גבול הקליפ. האפשרות הזו שימושית במקרים שבהם יש גלישת דיו שאמורה להיות גלויה.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

אפשר לראות את overflow: clip בפעולה בכתובת https://petele-css-is-awesome.glitch.me/

המדיניות בנושא תכונות נקראת עכשיו 'מדיניות הרשאות'

ב-Chrome 74 הוספנו את Feature Policy API, שמאפשר להפעיל, להשבית ולשנות באופן סלקטיבי את ההתנהגות של ממשקי API מסוימים ותכונות אינטרנט מסוימות בדפדפן. כללי המדיניות האלה הם חוזה בינך לבין הדפדפן. הם מיידעים את הדפדפן לגבי הכוונה שלכם.

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

החל מגרסה 90 של Chrome, השם של Feature Policy API ישתנה לPermissions Policy והשם של כותרת ה-HTTP ישתנה איתה. במקביל, הקהילה קבעה תחביר חדש, על סמך ערכי שדות מובנים ל-HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

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

DOM של צל הצהרתי

Shadow DOM, שהוא חלק מתקן Web Components, הוא אפשרות להרחיב סגנונות CSS לעץ משנה ספציפי ב-DOM ולבודד את עץ המשנה הזה משאר המסמך. עד עכשיו, הדרך היחידה להשתמש ב-DOM DOM הייתה ליצור שורש צל באמצעות JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

זה עובד טוב לעיבוד בצד הלקוח, אבל לא טוב בעיבוד בצד השרת כשאין דרך מובנית לבטא שורשי צל ב-HTML שנוצר על ידי השרת. אבל החל מ-Chrome 90, עם ה-DOM של Declarative Shadow, תוכלו להתחיל. תוכלו ליצור שורשי צלליות באמצעות HTML בלבד.

שורש צל מוצהר הוא אלמנט <template> עם מאפיין shadowroot. הוא מזוהה על ידי מנתח ה-HTML ומיושם מיד בתור בסיס הצללית של רכיב ההורה שלו.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

טעינת תוצאות תגי העיצוב של HTML טהור מתבצעת בעץ DOM הזה:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

זה מספק לנו את היתרונות של האנקפסולציה וההיטל משבצת של Shadow DOM ב-HTML סטטי. אין צורך ב-JavaScript כדי ליצור את העץ כולו, כולל ה-Root of Shadow Root.

פרטים נוספים זמינים ב-Declarative Shadow DOM באתר web.dev.

ועוד

וכמובן, יש עוד הרבה אפשרויות.

כדי לשפר את הפרטיות, ואפילו את מהירויות הטעינה של משתמשים שנכנסים לאתרים שתומכים ב-HTTPS, סרגל הכתובות של Chrome ישתמש ב-https:// כברירת מחדל. אם לא הגדרתם הפניה אוטומטית מ-HTTP ל-HTTPS, עכשיו זה זמן מצוין.

נוסף לכך, מקודד AV1 נשלח למחשב ב-Chrome. המקודד מותאם במיוחד לשיחות ועידה בווידאו עם שילוב של WebRTC.

קריאה נוספת

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

• מה חדש בכלי הפיתוח ל-Chrome (90)
• הוצאה משימוש והסרות של Chrome 90
• עדכונים ל-ChromeStatus.com עבור Chrome 90
• מה חדש ב-JavaScript ב-Chrome 90
• רשימת שינויים במאגרי מקורות של Chromium

להרשמה

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

שמי פיט לפייס, וברגע שהגרסה של Chrome 91 תושק, אני אהיה כאן כדי לספר לכם מה חדש ב-Chrome!

תודה מיוחדת

נהניתי מאוד לצלם את הפרק של 'חדש ב-Chrome' משנות ה-90 של המאה ה-20. תודה ענקית לשון מייהן על הרעיון ועל הפגישה עם האנשים המדהימים שעזרו לפתוח את חילופי הזמנים בשנת 1990.

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