חדש ב-Chrome 105

Pete LePage

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

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

שאילתות של קונטיינרים ומאפיין ה-CSS :has()

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

הן דומות לשאילתה מסוג @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;
  }
}

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

פסאודו-מחלקה :has() ב-CSS

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

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

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

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

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

Sanitizer API

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

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

כדי להשתמש בו, יוצרים מכונה חדשה של 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. החל מגרסה Chrome 105, Web SQL יוסר משימוש בהקשרים לא מאובטחים.

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

ועוד.

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

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

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפאג (Pete LePage), ואחרי שגרסת Chrome 106 תפורסם, נעדכן אתכם כאן לגבי מה שחדש ב-Chrome.