חדש ב-Chrome 90

Pete LePage

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

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

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

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

CSS IS AWESOME

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

במפרט CSS Overflow יש נכס חדש בשם clip שפועל באופן דומה ל-hidden.

.overflow-clip {
  overflow: clip;
}
תיבה ריבועית עם טקסט CSS נהדר, שבו נהדר חורג מעבר לקופסה

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

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

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
תיבה ריבועית עם טקסט CSS נהדר, שבו נהדר חורג מעבר לקופסה

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

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

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

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

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

Chrome 90 ואילך

Permissions-Policy: geolocation=()

Chrome 89 ומטה

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

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

ועוד

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

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

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

קריאה נוספת

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

להרשמה

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

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

הודעה מיוחדת

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

GDS Design

  • Fola Akinola
  • Derek Bass
  • כריסטופר בודל
  • ניקולס קרוסק (Nick Krusick)
  • Chris Walker

עיצוב סאונד ומוזיקה נוספת

  • Bryan Gordon

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