חדש ב-Chrome 118

Adriana Jara

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

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

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

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

קוראים לי Adriana Jara. אנחנו מזמינים אותך לבחון מה חדש אצל המפתחים בגרסה 118 של Chrome.

כלל @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.

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

ועוד.

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

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

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

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

קריאה נוספת

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

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

להרשמה

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

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