חדש ב-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;
  }
}

במקרה כזה, כשמאגר התגים קטן מ-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 לחיטוי

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

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

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

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

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

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

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