חדש ב-Chrome 118

Adriana Jara

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

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

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

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

שמי אדריאנה ג'ארה. בואו נראה מה חדש למפתחים ב-Chrome 118.

כלל @scope ב-CSS.

הכלל הראשי @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;
  }
}

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

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

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

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

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

ופעולות נוספות.

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

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

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

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

קריאה נוספת

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

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

להרשמה

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

יו סויה אדריאנה ג'ארה, ומיד כש-Chrome 119 יושק, אהיה כאן כדי לספר לך מה חדש ב-Chrome!