חדש ב-Chrome 90

Pete LePage

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

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

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

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

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

במפרט של CSS Overflow יש נכס חדש בשם 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 מסוימים ותכונות אינטרנט בדפדפן. כללי המדיניות האלה הם חוזה ביןכם לבין הדפדפן. הם מעדכנים את הדפדפן לגבי הכוונה שלכם.

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

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

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

רוצים לדעת איך משתמשים בתכונה הזו באתר? כדאי לעיין במאמר מבוא למדיניות התכונות.

Declarative Shadow DOM

Shadow DOM, שהוא חלק מהתקן של Web Components, מספק דרך להגדיר סגנונות CSS להסתעפות ספציפית של DOM ולבודד את ההסתעפות הזו משאר המסמך. עד עכשיו, הדרך היחידה להשתמש ב-shadow DOM הייתה ליצור הרמה הבסיסית (root) של הצל באמצעות 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, עם Declarative Shadow DOM, אפשר להתחיל. אפשר ליצור שורשי צל באמצעות HTML בלבד.

Root צללי דקלרטיבי הוא רכיב <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 כדי ליצור את כל העץ, כולל שורש הצל.

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

ועוד

ויש עוד הרבה דברים.

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

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

קריאה נוספת

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

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

להרשמה

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 91 תפורסם, אספר לכם מה חדש ב-Chrome.

הודעה מיוחדת

נהניתי מאוד לצלם את הפרק הזה של 'מה חדש ב-Chrome', שעוצב בסגנון שנות ה-90. תודה רבה ל-Sean Meehan על הרעיון ועל היכולת לאסוף את האנשים המדהימים שעזרו לנו לפתוח את מכונת הזמן ולחזור לשנת 1990.

וכמובן, לורן בורגה (Loren Borja), לי קרות'רס (Lee Carruthers) ולוקאס הולצ'ק (Lukas Holcek) שעובדים על כל הסרטונים שלי בנושא 'חדש ב-Chrome' וגורמים לי להיראות הרבה יותר טוב ממה שאני באמת. תודה רבה!