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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

בחירת רכיב

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

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

במדריך הצגת ה-CSS של רכיב מוסבר איך עושים את זה.

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

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

הצגת CSS

אפשר להשתמש בכרטיסיות Elements‏ > Styles ו-Computed כדי להציג כללי CSS ולאבחן בעיות ב-CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת CSS לא תקין, CSS שעבר שינוי, CSS לא פעיל ו-CSS נוסף

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

הסבר על CSS בכרטיסייה 'סגנונות'

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

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

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

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

הסבר על CSS בכרטיסייה 'מחושב'

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

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

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

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

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

הצגת כללי CSS

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

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

הצגת כללי @property

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

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

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

הצגת כללי @supports

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

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

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

הצגת כללי @scope

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

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

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

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

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

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

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

הצגת כללי @font-palette-values

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

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

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

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

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

הצגת כללי @position-try

כלל ה-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 בתצוגה המקדימה הבאה:

דוגמה לשימוש ב-anchor עם popover

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בדוגמה הזו אפשר לראות ש-DevTools מחיל את ההצהרה 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. בכרטיסייה Styles (סגנונות), גוללים למטה עד שמוצאים את הקטע Inherited from ::selection pseudo of....

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

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

כדי להציג את השכבות של המפל, בודקים את הרכיב הבא ופותחים את Elements (רכיבים) > Styles (סגנונות).

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

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

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

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

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

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

הצגת קוד CSS בשימוש וקוד CSS שלא בשימוש בכרטיסייה 'היקף הכיסוי'

בכרטיסייה 'היקף הכיסוי' מוצגים קובצי ה-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

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

   • הצגת הערך המחושב עוברים לכרטיסייה Computed.

שינוי 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+Up (Mac) או Alt+Up (Windows, ‏ Linux) כדי להגדיל ב-0.1.
• למעלה כדי לשנות את הערך ב-1, או ב-0.1 אם הערך הנוכחי הוא בין -1 ל-1.
• Shift+Up כדי להגדיל ב-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. מזינים את שם הכיתה בתיבה Add New Class.
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 והפעלת מצב כהה אוטומטי בכרטיסייה עיבוד.

החלפת מצב של כיתה

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

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

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

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

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

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

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

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

הפעלה או השבתה של הצהרה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

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

מילת מפתח לבחירת מועד	הגדרה קבועה מראש	Cubic Bezier
יציאה קלה החוצה וכניסה קלה פנימה	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)
	יציאה מהירה, כניסה איטית	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)
	אינץ', מעקב	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	פנימה, אחורה	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)
	Out, ‏ Quadratic	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)
	Out, Back	cubic-bezier(0.18, 0.89, 0.32, 1.28)

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

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

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

  

• בפונקציות Cubic Bezier, גוררים אחת מנקודות הבקרה.

  

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

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

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

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

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

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

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