חדש ב-Chrome 105

Pete LePage

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

שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 105.

שאילתות קונטיינר ונכס ה-CSS :has()

שאילתות קונטיינרים, אחת מהתכונות המבוקשות ביותר, מגיעות ל-Chrome 105. הם מאפשרים למפתחים להריץ שאילתות על בורר הורה לגבי הגודל ופרטי העיצוב שלו, וכך מתאפשר לאלמנט צאצא להיות בעל לוגיקת עיצוב רספונסיבית, לא משנה איפה הוא נמצא בדף.

הן דומות לשאילתה @media, אבל הן מבצעות הערכה מול גודל הקונטיינר ולא גודל אזור התצוגה.

שאילתת קונטיינר לעומת שאילתת מדיה.

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

כרטיס יחיד עם שתי עמודות.

כדי ליצור שאילתת מאגר תגים, צריך להגדיר container-type במאגר הכרטיסים. אם המדיניות container-type מוגדרת כ-inline-size, הפונקציה הזו שולחת שאילתה על הגודל inline-direction של אובייקט ההורה.

.card-container {
  container-type: inline-size;
}

עכשיו אנחנו יכולים להשתמש בקונטיינר הזה כדי להחיל סגנונות על כל הצאצאים שלו באמצעות @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

במקרה כזה, כשהמאגר קטן מ-400px, הוא עובר לפריסה של עמודה אחת.

פסאודו-סיווג של שירות ה-CSS :has()

אנחנו יכולים לקחת את זה צעד אחד קדימה בעזרת המפסאודו-סיווג של שירות ה-CSS :has(). היא מאפשרת לבדוק אם רכיב הורה מכיל צאצאים עם פרמטרים ספציפיים.

לדוגמה, p:has(span) מציין בורר פסקה עם רווח בתוכו. אפשר להשתמש בו כדי לעצב את פסקה ההורה עצמה, או כל דבר שבתוכה. לחלופין, אפשר להשתמש ב-figure:has(figcaption) כדי לעצב רכיב דמות שמכיל כיתוב.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

כדאי לקרוא את המאמר של Una @container ו-:has(): שני ממשקי API חדשים וחזקים כדי לקבל הסבר מפורט יותר והדגמות כיפיות.

ממשק API של Sanitizer

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

יש ספריות כמו DomPurify שעוזרות במשימות, אבל הן מוסיפות נטל תחזוקה קטן. ה-HTML Sanitizer API עוזר לצמצם את מספר נקודות החולשה בסקריפטים חוצי-אתרים על ידי בניית ניקיון בפלטפורמה.

כדי להשתמש בו, צריך ליצור מופע חדש של Sanitizer. לאחר מכן, קוראים ל-setHTML() ברכיב שאליו רוצים להוסיף את התוכן שעבר ניקוי.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

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

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

לפרטים נוספים ראו את המאמר מניפולציית DOM בטוחה באמצעות Sanitizer API.

הוצאה משימוש של Web SQL בהקשרים לא מאובטחים

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

אם אתם משתמשים ב-Web SQL בהקשרים לא מאובטחים, כדאי לעבור ל-IndexDB או לקונטיינר אחר לאחסון מקומי בהקדם האפשרי.

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

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

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

קריאה נוספת

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

להרשמה

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

שמי פיט לפרג', וברגע ש-Chrome 106 יושק, נהיה כאן כדי לספר לכם מה חדש ב-Chrome!