חדש ב-Chrome 90

Pete LePage

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

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

קוראים לי Pete LePage ואני אספר לכם כל מה שצריך לדעת למפתחים ב-Chrome 90, בסגנון שנות ה-90!

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

אם הקוד או אחת מהספריות של הצד השלישי שבהן אתם משתמשים מפירים את הכללים שבחרתם מראש, הדפדפן מבטל את ההתנהגות ומחליף אותה בחוויית משתמש טובה יותר, או פשוט חוסם את ה-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 הייתה ליצור שורש אובייקט ב-shadow באמצעות 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' וגורמים לי להיראות הרבה יותר טוב ממה שאני באמת. תודה רבה!