חדש ב-Chrome 118

Adriana Jara

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

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

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

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

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

כלל @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, שמאפשר למפתחים להתאים תוכן באינטרנט להעדפה שבחר המשתמש כדי לצמצם את השקיפות ב-OS, כמו ההגדרה 'הפחתת השקיפות' ב-macOS. האפשרויות החוקיות הן reduce או no-preference.

.translucent {
  opacity: 0.4;
}

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

בנוסף, אפשר לבדוק איך זה נראה בכלי הפיתוח:

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

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

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

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

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

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

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

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

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

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

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

קריאה נוספת

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

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

להרשמה

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

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