חדש ב-Chrome 118

Adriana Jara

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

• מגדירים סגנונות ספציפיים בתוך רכיב באמצעות כלל ה-CSS @scope.
• יש תכונה חדשה של מדיה: prefers-reduced-transparency.

• נוספו שיפורים לחלונית מקורות בכלי הפיתוח.

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

קוראים לי Adriana Jara. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 118.

כלל @scope של CSS.

כלל at-rule‏ @scope מאפשר למפתחים להגדיר את היקף הכללים של הסגנון לפי שורש היקף נתון, ואת רכיבי הסגנון בהתאם לקרבה שלהם לאותו שורש היקף.

בעזרת @scope אפשר לשנות סגנונות על סמך קרבה, בניגוד לסגנונות הרגילים של CSS שחלים על סמך סדר המקור והספציפיות שלו בלבד. בדוגמה הבאה יש שני נושאים.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

ללא היקף, הסגנון שיוחל הוא הסגנון האחרון שהוצהר.

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

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

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

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

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

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

בדוגמה הבאה אפשר לראות איך אפשר להחיל סגנון על הטקסט ולהחריג את אמצעי הבקרה, או להפך.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

מידע נוסף זמין במאמר הגבלת ההיקף של הסלקטורים באמצעות כלל at-rule‏ @scope ב-CSS.

תכונה של מדיה אחת (prefers-reduced-transparency)

אנחנו משתמשים בבקשות מדיה כדי לספק חוויות משתמש שמותאמות להעדפות ולתנאי המכשיר של המשתמש. בגרסת Chrome הזו נוסף ערך חדש שאפשר להשתמש בו כדי להתאים את חוויית המשתמש: prefers-reduced-transparency.

ערך חדש שאפשר לבדוק באמצעות שאילתות מדיה הוא prefers-reduced-transparency, שמאפשר למפתחים להתאים את תוכן האינטרנט להעדפה של המשתמש לגבי שקיפות מופחתת במערכת ההפעלה, כמו ההגדרה 'צמצום השקיפות' ב-macOS. הערכים האפשריים הם reduce או no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

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

מידע נוסף זמין במסמכי התיעוד בנושא prefers-reduced-transparency.

תיקון: בגרסה הקודמת של המאמר הזה צוינה תכונה חדשה של מדיה מסוג scripting שכלולה בגרסה הזו. היא תהיה בגרסה 120.

שיפורים בחלונית המקורות ב-DevTools

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

בנוסף, עכשיו אפשר לשנות את הסדר של החלונות בצד ימין של החלונית מקורות על ידי גרירה ושחרור. בחלונית מקורות אפשר עכשיו להדפיס בפורמט יפה JavaScript בשורה אחת בסוגים הבאים של סקריפטים: module, ‏ importmap, ‏ speculationrules, ולהדגיש את התחביר של סוגי הסקריפטים importmap ו-speculationrules, ששניהם מכילים JSON.

מידע נוסף על העדכונים של DevTools ב-Chrome 118 זמין במאמר מה חדש ב-DevTools.

ועוד.

כמובן שיש עוד הרבה.

• WebUSB API חשוף עכשיו לשירותי Worker שרשומים על ידי תוספים לדפדפן, ומאפשר למפתחים להשתמש ב-API בתגובה לאירועים של תוספים.

• כדי לעזור למפתחים לצמצם את החיכוך בתהליכי בקשות התשלום, אנחנו מסירים את הדרישה להפעלת משתמשים ב-Payment Request וב-Secure Payment Confirmation.

• מחזור הגרסאות של Chrome מתקצר, וגרסאות יציבות יושקו כל שלושה שבועות, החל מ-Chrome 119 שייצא בעוד שלושה שבועות.

קריאה נוספת

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

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

להרשמה

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

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 119 תפורסם, אספר לכם מה חדש ב-Chrome!