קינון CSS

אחת התכונות המועדפות שלנו לעיבוד מראש בשירות CSS מובנית עכשיו בשפה: כללים של סגנון סידור פנימי.

Adam Argyle

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

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

אפשר לנסות את הפעולה הזו בדפדפן.

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

שימוש בקינון יכול לעזור במקרים הבאים: - ארגון - הקטנת גודל הקובץ - ארגון מחדש

האפשרות של קינון זמינה ב-Chrome 112 וגם לניסיון ב-Safari Technical Preview 162.

תחילת העבודה עם Nesting CSS

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

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

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

דוגמאות לקינון

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

.parent {
  color: blue;

  .child {
    color: red;
  }
}

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

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

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

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

בחירת המעגלים

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

ללא סידור פנימי, שירות CSS:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

עם סידור פנימי, יש שתי דרכים חוקיות:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

או

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

התוצאה, כל הרכיבים בתוך .demo עם מחלקה .circle מטושטשות וכמעט בלתי נראות:

עליך לבחור משולשים ומרובעים

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

ללא סידור פנימי, שירות CSS פועל היום בשתי דרכים:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

או באמצעות :is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

באמצעות סידור פנימי, יש שתי דרכים חוקיות:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

או

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

התוצאה, רק רכיבי .circle נשארים בתוך .demo:

בחירת משולשים ומעגלים גדולים

למשימה הזו נדרש בורר מורכב, שבו רכיבים חייבים לכלול את שתי המחלקות כדי שייבחרו.

ללא סידור פנימי, שירות CSS:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

או

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

באמצעות סידור פנימי, יש שתי דרכים חוקיות:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

או

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

התוצאה, כל המשולשים והעיגולים הגדולים מוסתרים בתוך .demo:

טיפ למתקדמים עם בוררים מורכבים וסידור פנימי

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

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

אמנם יש דרך חוקית לבצע קינון, אבל התוצאות לא יתאימו לרכיבים הצפויים. הסיבה לכך היא שבלי & לציון התוצאה הרצויה של .lg.triangle, .lg.circle המורכבת יחד, התוצאה בפועל תהיה .lg .triangle, .lg .circle; סלקטורים שהם צאצאים.

בחירת כל הצורות חוץ מהצורות הוורודות

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

ללא סידור פנימי, שירות CSS:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

באמצעות סידור פנימי, יש שתי דרכים חוקיות:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

או

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

התוצאה, כל הצורות שאינן ורודות מוסתרות בתוך .demo:

דיוק וגמישות בעזרת &

נניח שאתם רוצים לטרגט את .demo באמצעות הבורר :not(). נדרש עבור & ש:

.demo {
  &:not() {
    ...
  }
}

הערך הזה מורכב מ-.demo ו-:not() ל-.demo:not(), בניגוד לקודמים דוגמה שנדרשת ל-.demo :not(). תזכורת זו חשובה מאוד כאשר שרוצים להציב אינטראקציה מסוג :hover.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

דוגמאות נוספות של קינון

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

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

מקונן @media

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

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

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

גם כשמשתמשים ב-& באופן מפורש:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

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

מידע נוסף על הצבת @כללים על עץ.

מקונן בכל מקום

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

.card {
  .featured & {
    /* .featured .card */
  }
}

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

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

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

דוגמאות קינון לא חוקיות

יש כמה תרחישי תחביר בתוך הארגון שאינם חוקיים ועלולים להפתיע אתכם אם אתם מקוננים במעבדים-מקדמים.

קינון ושרשור

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

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

אפשר למצוא הסבר מפורט יותר במפרט.

דוגמה לקינון בעייתי

נמצא ברשימות בוררים ו-:is()

נבחן את בלוק ה-CSS הבא של ה-CSS:

.one, #two {
  .three {
    /* some styles */
  }
}

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

כדי שהכוונה של הסידור הפנימי תפעל, כל רשימת בורר שהיא לא הדרך הפנימית ביותר של הסידור הפנימי תיכלל ב:is() על ידי הדפדפן. האריזה הזו שומרת על הקיבוץ של רשימת הסלקטורים בתוך כל ההקשרים שנכתבו. תופעת הלוואי של קיבוץ זה, :is(.one, #two), היא אימוץ רמת הדיוק של הציון הגבוה ביותר בתוך הסלקטורים בתוך הסוגריים. כך תמיד פועל :is(), אבל השימוש בתחביר של סידור פנימי עשוי להפתיע, כי זה לא בדיוק הטקסט שחובר. סיכום הטריק. הצבת בוררים עם מזהים ורשימות של סלקטורים יכולה להוביל לסלקטורים עם ספציפיות גבוהה מאוד.

כדי לסכם בבירור את הדוגמה המעורבת, בלוק הקינון הקודם יוחל על המסמך כך:

:is(.one, #two) .three {
  /* some styles */
}

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

שילוב של סידורים והצהרות

נבחן את בלוק ה-CSS הבא של ה-CSS:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

הצבע של רכיבים מסוג .card יהיה blue.

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

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

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

למעשה, מומלץ לארוז כל סגנונות שמבוססים על &.

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

זיהוי תכונות

יש שתי דרכים מצוינות לזיהוי הצבת CSS: @supports כדי לבדוק אם יש יכולת ניתוח של בורר בתוך קינון.

שימוש בסידור פנימי:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

באמצעות @supports:

@supports (selector(&)) {
  /* nesting parsing available */
}

לקולגה שלי, Bramus, יש קודפ מעולה שמלמד את האסטרטגיה הזו.

ניפוי באגים באמצעות כלי הפיתוח ל-Chrome

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

בגרסה 113 של Chrome תהיה תמיכה נוספת בסידור שירות CSS. כדאי להתעדכן בהמשך.

העתיד

הצבת CSS ב-CSS היא רק בגרסה 1. גרסה 2 תציג יותר סוכר תחבירי ופחות כללים לזכור בעל-פה. יש ביקוש רב כדי שניתוח הסידור הפנימי לא יוגבל או רגעים מסובכים.

הצללה היא שיפור משמעותי לשפת ה-CSS. יש לו השלכות על היצירה כמעט לכל היבט ארכיטקטוני של CSS. ההשפעה הגדולה הזו צריכה להיות של גרסה 2.

לסיום, הנה הדגמה שמשתמש ב-@scope, בסידור פנימי וב-@layer ביחד. זה מרגש מאוד!