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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

בחירת רכיב

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

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

למדריך, ראו הצגת CSS של רכיב.

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

• בחלון התצוגה, לוחצים לחיצה ימנית על המרכיב ובוחרים באפשרות בדיקה.
• בכלי הפיתוח, לוחצים על Select an element (בחירת רכיב), או מקישים על Command+Shift+C (Mac) או על Control+Shift+C (Windows ו-Linux), ולאחר מכן לוחצים על הרכיב באזור התצוגה.
• בכלי הפיתוח, לוחצים על הרכיב בעץ ה-DOM.
• בכלי הפיתוח, מריצים שאילתה כמו 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 אחר

בכרטיסייה 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

כללים מנחים הם הצהרות 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

בכרטיסייה סגנונות מוצגים הכללים שחלים על @scope כללי CSS אם הם חלים על רכיב.

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

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

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

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

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

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

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

הכלל של שירות ה-CSS @font-palette-values מאפשר להתאים אישית את ערכי ברירת המחדל של הנכס font-palette. הכלל רכיבים > סגנונות מוצג בקטע ייעודי.

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

הדגמה באמצעות עוגן עם popover

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

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

הצגת תיבה של רכיב

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

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

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

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

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

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

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

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

אזהרה: כשהאפשרות הזו מופעלת, השדה 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. בכרטיסייה סגנונות, גוללים למטה כדי למצוא את הקטע 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. כדי להפעיל אותו מחדש באופן זמני, מוחקים את ההגדרות הגדרות > ניסויים > תיבת הסימון הוצאה משימוש של הכלי לכתיבת <length> של CSS בכרטיסייה 'סגנונות'. אפשר לשלוח משוב בנושא הזה ב-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 נוסף על ידי DevTools אחרי שלוחצים על 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
   • 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)
יציאה קלה החוצה	חוץ, סינוס	cubic-bezier(0.39, 0.58, 0.57, 1)
	Out, ‏ Quadratic	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	חוץ, מרובע	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 בכרטיסייה 'סגנונות' בקטע הגדרות > ניסויים ולטעון מחדש את כלי הפיתוח.

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

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

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

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