עיון בתכונות CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

במאמר הצגה ושינוי של CSS מוסבר על היסודות.

בחירת רכיב

בחלונית Elements בכלי הפיתוח אפשר להציג או לשנות את ה-CSS של רכיב אחד בכל פעם.

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

מדריך מפורט מופיע במאמר צפייה ב-CSS של רכיב.

יש הרבה דרכים לבחור רכיב:

• באזור התצוגה, לוחצים לחיצה ימנית על הרכיב ובוחרים באפשרות בדיקה.
• בכלי הפיתוח, לוחצים על בחירת רכיב או מקישים על Command+Shift+C (ב-Mac) או על Control+Shift+C (ב-Windows וב-Linux), ואז לוחצים על הרכיב באזור התצוגה.
• ב-DevTools, לוחצים על הרכיב בעץ ה-DOM.
• בכלי הפיתוח, מריצים שאילתה כמו document.querySelector('p') במסוף, לוחצים לחיצה ימנית על התוצאה ואז בוחרים באפשרות הצגה בחלונית Elements.

הצגת CSS

משתמשים בכרטיסיות Elements (רכיבים) > Styles (סגנונות) ו-Computed (מחושב) כדי לראות את כללי ה-CSS ולאבחן בעיות ב-CSS.

ניווט באמצעות קישורים

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

• לצד כללי CSS, לגיליונות סגנון ולמקורות CSS. קישורים כאלה פותחים את החלונית מקורות. אם גיליון הסגנונות הוא minified, כדאי לעיין במאמר איך הופכים קובץ minified לקריא.
• בקטעים עובר בירושה מ ..., לרכיבי הורה.
• בשיחות עם var(), להצהרות על מאפיינים מותאמים אישית.
• במאפייני קיצור דרך של animation, אל @keyframes.
• מידע נוסף בתיאורי הכלים של התיעוד.
• ועוד.

ריכזנו כאן כמה מהם:

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

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

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

צפייה במסמכי התיעוד של CSS

כדי לראות הסבר קצר על מאפיין CSS, מעבירים את העכבר מעל שם המאפיין בכרטיסייה Styles (סגנונות).

הערה: כלי הפיתוח שולף את התיאורים של תיאורי הכלים מנתונים בהתאמה אישית של VS Code.

לוחצים על מידע נוסף כדי לעבור אל MDN CSS Reference בנושא המאפיין הזה.

כדי להשבית את תיאורי הכלים, מסמנים את התיבה לא להציג.

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

הצגת הספציפיות של הבורר

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

הצגת הערכים של מאפיינים מותאמים אישית

מעבירים את העכבר מעל --custom-property כדי לראות את הערך שלו בתיאור הכלים.

הצגת כללי CSS לא תקינים, שהוחלפו, לא פעילים ואחרים

בכרטיסייה Styles (סגנונות) מזוהים סוגים רבים של בעיות ב-CSS, והן מודגשות בדרכים שונות.

הסבר על CSS בכרטיסייה Styles

הצגת רק את ה-CSS שמוחל בפועל על רכיב

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

1. בוחרים רכיב.
2. עוברים לכרטיסייה Computed (מחושב) בחלונית Elements (רכיבים).

מסמנים את התיבה הצגת הכול כדי לראות את כל המאפיינים.

הסבר על CSS בכרטיסייה Computed

הצגת מאפייני CSS בסדר אלפביתי

משתמשים בכרטיסייה מחושב. איך רואים רק את ה-CSS שמוחל בפועל על רכיב

הצגת מאפייני CSS שעברו בירושה

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

אפשר גם לגלול בכרטיסייה סגנונות ולחפש קטעים בשם Inherited from <element_name>.

צפייה בכללי at-rules של CSS

כללי at הם הצהרות CSS שמאפשרות לכם לשלוט בהתנהגות של CSS. Elements > Styles מציג את הכללים הבאים בקטעים ייעודיים:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

צפייה ב-@property at-rules

@property כלל ה-at של CSS מאפשר להגדיר מאפייני CSS בהתאמה אישית באופן מפורש ולרשום אותם בגיליון סגנונות בלי להריץ JavaScript.

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

כדי לערוך כלל @property, לוחצים עליו לחיצה כפולה.

צפייה ב-@supports at-rules

בכרטיסייה Styles מוצגים כללי ה-@supports CSS אם הם חלים על רכיב. לדוגמה, בודקים את הרכיב הבא:

אם הדפדפן תומך בפונקציה lab(), הרכיב ירוק, אחרת הוא סגול.

הערה: בזמן כתיבת המאמר הזה, רק Safari תומך במרחב הצבעים CIELAB.

צפייה ב-@scope at-rules

בכרטיסייה Styles מוצגים כללי CSS @scope מסוג at-rule אם הם חלים על רכיב.

כללי ה-at החדשים @scope הם חלק ממפרט CSS Cascading and Inheritance Level 6. הכללים האלה מאפשרים לכם להגדיר את היקף הסגנונות של CSS, כלומר להחיל סגנונות באופן מפורש על רכיבים ספציפיים.

הערה: התכונה @scope at-rule היא ניסיונית. כדי לבדוק את התכונה, מפעילים את התכונה הניסיונית Experimental Web Platform features ב-chrome://flags/#enable-experimental-web-platform-features. אחרת, התצוגה המקדימה הבאה לא תפעל.

אפשר לראות את הכלל @scope בתצוגה המקדימה הבאה:

1. בודקים את הטקסט בכרטיס בתצוגה המקדימה.
2. בכרטיסייה סגנונות, מחפשים את הכלל @scope.

בדוגמה הזו, הכלל @scope מבטל את ההצהרה הגלובלית של CSS background-color לכל רכיבי <p> בתוך רכיבים עם מחלקה card.

כדי לערוך את הכלל @scope, לוחצים עליו לחיצה כפולה.

צפייה ב-@font-palette-values at-rules

כלל ה-CSS ‏@font-palette-values מאפשר לכם להתאים אישית את ערכי ברירת המחדל של המאפיין font-palette. בקטע Elements > Styles מוצג כלל ה-at הזה בקטע ייעודי.

אפשר לראות את הקטע @font-palette-values בתצוגה המקדימה הבאה:

1. בודקים את שורת הטקסט השנייה בתצוגה המקדימה.
2. בקטע סגנונות, מוצאים את הקטע @font-palette-values.

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

כדי לערוך את הערכים המותאמים אישית, לוחצים עליהם לחיצה כפולה.

צפייה ב-@position-try at-rules

כלל ה-CSS‏ @position-try יחד עם המאפיין position-try-options מאפשרים להגדיר מיקומי עוגן חלופיים לאלמנטים. מידע נוסף זמין במאמר הצגת CSS anchor positioning API.

‫Elements > Styles פותר ומקשר את הפריטים הבאים:

• ערכי המאפיין position-try-options לקטע ייעודי @position-try --name.
• ערכי מאפיינים position-anchor וארגומנטים anchor() לרכיבים המתאימים עם מאפייני popovertarget.

בודקים את הערכים position-try-options ואת הקטעים @position-try בתצוגה המקדימה הבאה:

הדגמה של שימוש במודעת עוגן עם popover

1. בתצוגה המקדימה, פותחים את תפריט המשנה, כלומר לוחצים על החשבון שלך ואז על חנות.
2. בודקים את הרכיב באמצעות id="submenu" בתצוגה המקדימה.
3. בקטע Styles, מחפשים את המאפיין position-try-options ולוחצים על הערך --bottom שלו. הכרטיסייה סגנונות מעבירה אתכם לקטע @position-try המתאים.
4. לוחצים על הקישור של הערך position-anchor או על אותם ארגומנטים anchor(). בחלונית Elements נבחר הרכיב עם המאפיין popovertarget המתאים, ובכרטיסייה Styles מוצג ה-CSS של הרכיב.

כדי לערוך ערכים, לוחצים עליהם פעמיים.

הצגת מודל התיבה של רכיב

כדי לראות את מודל התיבה של רכיב, עוברים לכרטיסייה Styles ולוחצים על הלחצן Show sidebar בסרגל הפעולות.

כדי לשנות ערך, לוחצים עליו פעמיים.

חיפוש וסינון של CSS של רכיב

אפשר להשתמש בתיבה Filter בכרטיסיות Styles ו-Computed כדי לחפש מאפיינים או ערכים ספציפיים של CSS.

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

כדי לנווט בכרטיסייה Computed, מסמנים את התיבה Group כדי לקבץ את המאפיינים המסוננים בקטגוריות שניתנות לצמצום.

יצירת אמולציה של דף במיקוד

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

זהירות: אם האפשרות הזו מופעלת, הערך של document.visibilityState מוגדר כ-visible והאירוע visibilitychange לא מופעל. מידע נוסף זמין במאמר בנושא Page Visibility API.

אפשר לנסות ליצור אמולציה של דף במיקוד בדף ההדגמה הזה:

1. מעבירים את המיקוד לרכיב הקלט. רכיב נוסף מופיע מתחתיו.
2. פותחים את כלי הפיתוח. המיקוד עובר לחלון של כלי הפיתוח במקום לדף, ולכן האלמנט נעלם שוב.
3. בקטע Elements (רכיבים) > Styles (סגנונות), לוחצים על :hov, מסמנים את התיבה check_box Emulate a focused page (הדמיה של דף שמתמקדים בו) ומוודאים שרכיב הקלט נבחר. עכשיו אפשר לבדוק את הרכיב שמתחתיו.

אפשר למצוא את אותה אפשרות גם בחלונית Rendering.

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

החלפת מצב של פסאודו-מחלקות

כדי להפעיל או להשבית פסאודו-סיווג:

1. בוחרים רכיב.
2. בחלונית Elements, עוברים לכרטיסייה Styles.
3. לוחצים על :hov.
4. מסמנים את פסאודו-המחלקות שרוצים להפעיל.

בדוגמה הזו אפשר לראות שכלי הפיתוח מחילים את ההצהרה background-color על הרכיב, למרות שהסמן לא מרחף מעל הרכיב בפועל.

בכרטיסייה Styles מוצגות פסאודו-מחלקות לכל הרכיבים:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

בנוסף, יכול להיות שלחלק מהרכיבים יהיו פסאודו-מחלקות משלהם. כשבוחרים רכיב כזה, בכרטיסייה Styles מופיע הקטע Force specific element state שאפשר להרחיב ולהפעיל בו פסאודו-מחלקות שספציפיות לרכיב.

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

הצגת פסאודו-אלמנטים של הדגשה שעברו בירושה

פסאודו-אלמנטים מאפשרים לעצב חלקים ספציפיים של אלמנטים. פסאודו-אלמנטים של הדגשה הם חלקים במסמך עם הסטטוס 'נבחר', והם מעוצבים כ'מודגשים' כדי לציין את הסטטוס הזה למשתמש. לדוגמה, פסאודו-אלמנטים כאלה הם ::selection,‏ ::spelling-error,‏ ::grammar-error ו-::highlight.

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

הערה: כדי להפעיל את התכונה הזו, מריצים את Chrome עם הדגל --enable-blink-features=HighlightInheritance.

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

1. בודקים את הטקסט שלמטה.

   הסגנון של פסאודו-האלמנט להדגשה עבר אליי בירושה מהאלמנט ההורה. תבחרו אותי!

2. בוחרים חלק מהטקסט שלמעלה.

3. בכרטיסייה סגנונות, גוללים למטה עד שמגיעים לקטע Inherited from ::selection pseudo of....

הצגת שכבות מדורגות

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

כדי לראות את שכבות ה-CSS, בודקים את הרכיב הבא ופותחים את Elements > Styles.

בכרטיסייה Styles (סגנונות), אפשר לראות את 3 שכבות ה-cascade והסגנונות שלהן: page, ‏ component ו-base.

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

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

הצגת דף במצב הדפסה

כדי להציג דף במצב הדפסה:

1. פותחים את תפריט הפקודות.
2. מתחילים להקליד Rendering ובוחרים באפשרות Show Rendering.
3. בתפריט הנפתח Emulate CSS Media (יצירת אמולציה של מדיה של CSS), בוחרים באפשרות print (הדפסה).

הצגת קובצי CSS בשימוש וקובצי CSS שלא בשימוש באמצעות הכרטיסייה Coverage

בכרטיסייה Coverage (כיסוי) אפשר לראות את ה-CSS שדף מסוים משתמש בו בפועל.

1. כדי לפתוח את תפריט הפקודות, מקישים על Command+Shift+P (ב-Mac) או על Control+Shift+P (ב-Windows, ב-Linux וב-ChromeOS) כשהמיקוד הוא בכלי הפיתוח.

2. מתחילים להקליד coverage.

   

3. בוחרים באפשרות הצגת כלי ה-Coverage. מוצגת הכרטיסייה 'כיסוי'.

   

4. לוחצים על טעינה מחדש. הדף נטען מחדש ובכרטיסייה Coverage מוצגת סקירה כללית של כמות ה-CSS (ו-JavaScript) שנמצאים בשימוש מכל קובץ שהדפדפן טוען.

   

   הצבע הירוק מייצג CSS בשימוש. הצבע האדום מייצג CSS שלא נמצא בשימוש.

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

   

   בצילום המסך, השורות 55 עד 57 והשורות 65 עד 67 של devsite-google-blue.css לא בשימוש, בעוד שהשורות 59 עד 63 כן בשימוש.

אילוץ של מצב תצוגה מקדימה של הדפסה

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

העתקת CSS

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

בנוסף, אפשר להעתיק מאפייני CSS בתחביר JavaScript. האפשרות הזו שימושית אם אתם משתמשים בספריות CSS-in-JS.

כדי להעתיק CSS:

1. בוחרים רכיב.
2. בכרטיסייה Elements (רכיבים) > Styles (סגנונות), לוחצים לחיצה ימנית על מאפיין CSS.

3. בוחרים אחת מהאפשרויות הבאות בתפריט הנפתח:

   • העתקת ההצהרה. מעתיקים את המאפיין ואת הערך שלו בתחביר CSS: css property: value;
   • העתקת מאפיין. העתקה של השם property בלבד.
   • העתקת ערך. העתקה רק של value.
   • העתקת הכלל. העתקה של כלל ה-CSS: css selector[, selector] { property: value; property: value; ... }
   • העתקת ההצהרה כ-JS. העתקת הנכס והערך שלו בתחביר JavaScript: js propertyInCamelCase: 'value'
   • העתקת כל ההצהרות. העתקה של כל המאפיינים והערכים שלהם בכלל CSS: css property: value; property: value; ...

   • העתקת כל ההצהרות כ-JS. מעתיק את כל המאפיינים והערכים שלהם בתחביר JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • העתקה של כל שינויי ה-CSS. העתקת השינויים שביצעתם בכרטיסייה Styles לכל ההצהרות.

   • צפייה בערך המחושב הלחיצה תעביר אתכם לכרטיסייה 'מחושב'.

שינוי CSS

בקטע הזה מפורטות כל הדרכים שבהן אפשר לשנות CSS בElements > Styles.

בנוסף, אתם יכולים:

• החלפת ה-CSS בטעינות דפים.
• שמירת CSS ששונה במקורות המקומיים בסביבת עבודה.

שינוי CSS באמצעות השלמת קוד

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

הוספת הצהרת CSS לרכיב

סדר ההצהרות משפיע על העיצוב של רכיב, ולכן אפשר להוסיף הצהרות בכמה דרכים:

• הוספת הצהרה בתוך השורה. מקביל להוספת מאפיין style ל-HTML של הרכיב.
• הוספת הצהרה לכלל סגנון

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

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

הוספת הצהרה מוטמעת

כדי להוסיף הצהרה בתוך השורה:

1. בוחרים רכיב.
2. בכרטיסייה Styles (סגנונות), לוחצים בין הסוגריים של הקטע element.style. הסמן מתמקד, ואפשר להזין טקסט.
3. מזינים שם לנכס ולוחצים על Enter.

4. מזינים ערך תקין למאפיין ולוחצים על Enter. בעץ ה-DOM אפשר לראות שמאפיין style נוסף לרכיב.

   

   בצילום המסך, המאפיינים margin-top ו-background-color הוחלו על האלמנט שנבחר. בעץ ה-DOM אפשר לראות את ההצהרות שמשתקפות במאפיין style של הרכיב.

הוספת הצהרה לכלל סגנון

כדי להוסיף הצהרה לכלל סגנון קיים:

1. בוחרים רכיב.
2. בכרטיסייה Styles, לוחצים בין הסוגריים של כלל הסגנון שאליו רוצים להוסיף את ההצהרה. הסמן מתמקד, ואפשר להזין טקסט.
3. מזינים שם לנכס ולוחצים על Enter.
4. מזינים ערך תקין למאפיין ולוחצים על Enter.

בצילום המסך, כלל סגנון מקבל את ההצהרה החדשה border-bottom-style:groove.

שינוי השם או הערך של הצהרה

כדי לשנות את השם או הערך של הצהרה, לוחצים עליהם לחיצה כפולה. במאמר שינוי ערכים שניתן למנות באמצעות מקשי קיצור מפורטים קיצורי דרך להגדלה או להקטנה מהירה של ערך ב-0.1, ב-1, ב-10 או ב-100 יחידות.

שינוי ערכים שניתנים למנייה באמצעות מקשי קיצור

כשעורכים ערך שניתן למנות בהצהרה, למשל font-size, אפשר להשתמש במקשי הקיצור הבאים כדי להגדיל את הערך בסכום קבוע:

• ‫Option+חץ למעלה (Mac) או Alt+חץ למעלה (Windows, ‏ Linux) כדי להגדיל ב-0.1.
• Up כדי לשנות את הערך ב-1, או ב-0.1 אם הערך הנוכחי הוא בין ‎-1 ל-1.
• ‫Shift+חץ למעלה כדי להגדיל ב-10.
• ‫Shift+Command+Up (Mac) או Control+Shift+Page Up (Windows, Linux) כדי להגדיל את הערך ב-100.

אפשר גם להקטין את המספר. פשוט מחליפים כל מופע של Up שצוין קודם ב-Down.

שינוי ערכי האורך

הוצאה משימוש: התכונה הזו הוצאה משימוש ב-Chrome 123. כדי להפעיל אותה מחדש באופן זמני, צריך לבטל את הסימון של ההגדרות הגדרות > ניסויים > תיבת הסימון הוצאה משימוש של כלי ליצירת CSS <length> בכרטיסייה 'סגנונות'. אתם מוזמנים לשלוח משוב בכתובת crbug/1522657.

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

כדי לשנות את יחידת האורך:

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

2. לוחצים על שם היחידה כדי לבחור יחידה מהתפריט הנפתח.

כדי לשנות את ערך האורך:

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

2. גוררים אופקית כדי להגדיל או להקטין את הערך.

כדי לשנות את הערך ב-10, לוחצים על Shift וגוררים.

הוספת כיתה לרכיב

כדי להוסיף מחלקה לרכיב:

1. בוחרים את הרכיב בעץ ה-DOM.
2. לוחצים על .cls.
3. מזינים את שם הכיתה בתיבה הוספת כיתה חדשה.
4. מקישים על Enter.

אמולציה של העדפות עיצוב בהיר וכהה והפעלה אוטומטית של מצב כהה

כדי להפעיל או להשבית את המצב הכהה האוטומטי או לדמות את העדפת המשתמש לעיצוב בהיר או כהה:

1. בכרטיסייה Elements (רכיבים) > Styles (סגנונות), לוחצים על Toggle common rendering emulations (החלפה בין הדמיות נפוצות של עיבוד).

2. בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

   • ‫prefers-color-scheme: light. מציין שהמשתמש מעדיף את העיצוב הבהיר.
   • ‫prefers-color-scheme: dark. מציין שהמשתמש מעדיף את העיצוב הכהה.
   • מצב כהה אוטומטי. הדף מוצג במצב כהה גם אם לא הטמעתם אותו. בנוסף, המערכת מגדירה את prefers-color-scheme ל-dark באופן אוטומטי.

התפריט הנפתח הזה הוא קיצור דרך לאפשרויות יצירת אמולציה של מדיה של CSS prefers-color-scheme והפעלת מצב כהה אוטומטי בכרטיסייה Rendering (עיבוד).

החלפת כיתה

כדי להפעיל או להשבית מחלקה ברכיב:

1. בוחרים את הרכיב בעץ ה-DOM.
2. פותחים את הקטע Element Classes (מחלקות של רכיבים). מידע נוסף מופיע במאמר בנושא הוספת מחלקה לרכיב. מתחת לתיבה Add New Class (הוספת מחלקה חדשה) מופיעות כל המחלקות שמוחלות על הרכיב הזה.
3. מסמנים את התיבה לצד הכיתה שרוצים להפעיל או להשבית.

הוספת כלל סגנון

כדי להוסיף כלל סגנון חדש:

1. בוחרים רכיב.
2. לוחצים על New Style Rule (כלל סגנון חדש) . כלי הפיתוח מוסיף כלל חדש מתחת לכלל element.style.

בצילום המסך, כלי הפיתוח מוסיף את כלל הסגנון h1.devsite-page-title אחרי שלוחצים על New Style Rule (כלל סגנון חדש).

בוחרים את גיליון הסגנונות שאליו רוצים להוסיף כלל

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

החלפת מצב ההצהרה

כדי להפעיל או להשבית הצהרה אחת:

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

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

עריכת פסאודו-אלמנטים ::view-transition במהלך אנימציה

אפשר לעיין בקטע המתאים במאמר אנימציות.

מידע נוסף זמין במאמר מעברים חלקים ופשוטים באמצעות View Transitions API.

התאמה של פריטים ברשת והתוכן שלהם באמצעות הכלי לעריכת רשת

אפשר לעיין בקטע המתאים במאמר בנושא בדיקת רשת CSS.

שינוי צבעים באמצעות הכלי לבחירת צבעים

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

שינוי ערך הזווית באמצעות שעון הזווית

Angle Clock מספק ממשק משתמש גרפי לשינוי של <angle> בערכי מאפיינים של CSS.

כדי לפתוח את השעון עם הזוויות:

1. בוחרים רכיב עם הצהרת זווית.

2. בכרטיסייה Styles (סגנונות), מחפשים את ההצהרה transform או background שרוצים לשנות. לוחצים על התיבה Angle Preview (תצוגה מקדימה של הזווית) לצד ערך הזווית.

   

   השעונים הקטנים שמשמאל ל--5deg ול-0.25turn הם תצוגות מקדימות של הזוויות.

3. לוחצים על התצוגה המקדימה כדי לפתוח את שעון הזווית.

   

4. כדי לשנות את ערך הזווית, לוחצים על העיגול Angle Clock או מגלגלים את העכבר כדי להגדיל או להקטין את ערך הזווית ב-1.

5. יש עוד מקשי קיצור לשינוי ערך הזווית. מידע נוסף זמין במקשי הקיצור בחלונית 'סגנונות'.

שינוי הצלליות של התיבה והטקסט באמצעות עורך הצלליות

הכלי Shadow Editor מספק ממשק משתמש גרפי לשינוי הצהרות CSS של text-shadow ו-box-shadow.

כדי לשנות את הצללים באמצעות כלי העריכה של הצללים:

1. בוחרים רכיב עם הצהרת צל. לדוגמה, בוחרים את הרכיב הבא.

2. בכרטיסייה סגנונות, מחפשים את סמל הצל לצד ההצהרה text-shadow או box-shadow.

   

3. לוחצים על סמל הצל כדי לפתוח את עורך הצלליות.

   

4. משנים את מאפייני הצל:

   • Type (רק ל-box-shadow). בוחרים באפשרות Outset או Inset.
   • היסטים של X ו-Y. גוררים את הנקודה הכחולה או מציינים ערכים.
   • טשטוש. גוררים את פס ההזזה או מציינים ערך.
   • פיזור (רק עבור box-shadow). גוררים את המחוון או מציינים ערך.

5. בודקים את השינויים שבוצעו ברכיב.

עריכת התזמון של אנימציות ומעברים באמצעות הכלי Easing Editor

הכלי לעריכת מעברים מספק ממשק משתמש גרפי לשינוי הערכים של transition-timing-function ושל animation-timing-function.

כדי לפתוח את הכלי לעריכת מעברים:

1. בוחרים אלמנט עם הצהרת פונקציית תזמון, כמו האלמנט <body> בדף הזה.
2. בכרטיסייה סגנונות, מחפשים את הסמל הסגול לצד ההצהרות transition-timing-function, animation-timing-function או לצד מאפיין הקיצור transition.
3. לוחצים על הסמל כדי לפתוח את כלי העריכה של אפקטי ההאצה וההאטה:

שימוש בהגדרות קבועות מראש כדי לשנות את התזמון

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

1. בכלי לעריכת מעברים, כדי להגדיר ערך של מילת מפתח, לוחצים על אחד מלחצני הבחירה:
   • ‫linear
   • ‫ease-in-out
   • ease-in
   • ‫ease-out

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

   • הגדרות קבועות מראש של מודעות לינאריות: elastic,‏ bounce או emphasized.
   • הגדרות קבועות מראש של עקומת בזייה ממעלה שלישית:

מילת מפתח לתיזמון	הגדרה קבועה מראש	עקומת בזייה מעוקבת
יציאה קלה החוצה וכניסה קלה פנימה	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Fast Out, Slow In	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
כניסה קלה פנימה	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	יציאה מהירה, כניסה לינארית	cubic-bezier(0.4, 0, 1, 1)
יציאה קלה החוצה	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	יציאה, ריבועית	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	יציאה לינארית, כניסה איטית	cubic-bezier(0, 0, 0.2, 1)
	יציאה, חזרה	cubic-bezier(0.18, 0.89, 0.32, 1.28)

הגדרת תזמונים בהתאמה אישית

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

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

  

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

  

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

(ניסיוני) העתקת שינויי CSS

הערה: כדי להפעיל את התכונה הניסיונית הזו, מסמנים את התיבה Sync CSS changes in the Styles tab (סנכרון שינויים ב-CSS בכרטיסייה Styles) בקטע Settings (הגדרות) > Experiments (ניסויים) וטוענים מחדש את DevTools.

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

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

כדי להעתיק את כל שינויי ה-CSS בכל ההצהרות בבת אחת, לוחצים לחיצה ימנית על הצהרה כלשהי ובוחרים באפשרות העתקה של כל שינויי ה-CSS.

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