חדש ב-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 חדשים ורספונסיביים, מוסבר בהרחבה על הנושא ומופיעות הדגמות מעניינות.

ממשק API לחיטוי

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

יש ספריות כמו DomPurify שיכולות לעזור, אבל הן מוסיפות נטל תחזוקה קטן. ה-API של HTML 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 להיראות יותר כמו אפליקציה, על ידי החלפת שורת הכותרת הקיימת ברוחב מלא בשכבת-על קטנה. כך תוכלו להציב תוכן בהתאמה אישית באזור של שורת הכותרת.

קריאה נוספת

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

להרשמה

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

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