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

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

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

בחירת רכיב

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

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

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

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

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

הצגת שירות ה-CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת הספציפיות של הסלקטור

מעבירים את העכבר מעל סלקטור בכרטיסייה Styles (סגנונות) – כולל סלקטורים הורים בכללי CSS בתצוגת עץ, כללים שעברו בירושה בתצוגת עץ וכללי @nested-declarations – כדי לראות הסבר קצר עם משקל הספציפיות שלו ולהדגיש אלמנטים תואמים באזור התצוגה.

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

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

הצגת CSS לא חוקי, מבוטל, לא פעיל ואחרים

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

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

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

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

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

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

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

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

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

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

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

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

צפייה בכללי CSS

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

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

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

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

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

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

הצגת @supports כללי at

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

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

הצגת @scope כללי at

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

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

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

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

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

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

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

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

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 Emulate a focused page מאפשרת לכם לנפות באגים ברכיב כזה כאילו הוא במיקוד.

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

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

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

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

החלפת מצב של מחלקה מדומה (pseudo-class)

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

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

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

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

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

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

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

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

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

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

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

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, בוחרים באפשרות print.

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

בכרטיסייה Coverage מוצגות מחלקות ה-CSS שבהן הדף משתמש בפועל.

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

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

   

3. לוחצים על הצגת הכיסוי. הכרטיסייה "כיסוי" תופיע.

   

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; ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

עורך הצללים מספק GUI לשינוי הצהרות CSS של text-shadow ו-box-shadow.

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

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

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

   

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

   

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

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

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

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

הכלי לעריכת מעברים מספק ממשק משתמש גרפי לשינוי הערכים של 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(0.45, 0.05, 0.55, 0.95)
	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	האצה ואז האטה, קובייתית	cubic-bezier(0.65, 0.05, 0.36, 1)
	יציאה מהירה, כניסה איטית	cubic-bezier(0.4, 0, 0.2, 1)
	פנימה החוצה, אחורה	cubic-bezier(0.68, -0.55, 0.27, 1.55)
כניסה קלה פנימה	פנימה, סינוס	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)
	פנימה, אחורה	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)
	האטה, ריבועית	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)
	הלוך, חזור	cubic-bezier(0.18, 0.89, 0.32, 1.28)

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

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

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

  

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

  

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

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

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

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

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

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