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

במסמך העזרה הזה מפורטות תכונות של 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.

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

לוחצים על מידע נוסף כדי לעבור לחומר העזר בנושא 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>.

בודקים את הקטע &#39;עבר בירושה מ...&#39; בכרטיסייה &#39;סגנונות&#39;.

הצגת כללי CSS

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

הצגת כללי @property

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

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

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

הצגת כללי @supports

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

הצגת כללי @supports.

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

הצגת כללי @scope

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

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

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

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

הכלל @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.

הכלל @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 של הרכיב.

המאפיין position-try-options, הקטע @position-try והרכיב עם מאפיין היעד של חלון הקופץ.

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

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

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

תרשים של מודל Box.

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

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

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

סינון הכרטיסייה &#39;סגנונות&#39;.

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

סינון נכסים שעברו בירושה בכרטיסייה &#39;מחושבים&#39;.

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

קיבוץ נכסים שסוננו.

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

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

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

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

לפני ואחרי הפעלת האפשרות &#39;יצירת אמולציה של דף במיקוד&#39;.

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

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

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

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

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

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

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

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

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

הקטע &#39;אילוץ מצב רכיב ספציפי&#39; ברכיב &#39;textarea&#39;.

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

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

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

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

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

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

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

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

בודקים את הקטע &#39;עבר בירושה&#39; בכרטיסייה &#39;סגנונות&#39;.

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

שכבות מדורגות מאפשרות שליטה מפורשת יותר בקובצי ה-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.

    פתיחת הכרטיסייה &#39;כיסוי&#39; מתפריט הפקודות.

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

    הכרטיסייה &#39;כיסוי&#39;.

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

    סקירה כללית של כמות ה-CSS (ו-JavaScript) שבשימוש וכמות ה-CSS (ו-JavaScript) שלא בשימוש.

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

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

    פירוט שורה אחר שורה של 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. התפריט הנפתח &#39;העתקת CSS&#39;.
  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 לרכיב

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

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

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

הוספת הצהרה בתוך שורה

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

  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.

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

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

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

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

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

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

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

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

כדי להוסיף סיווג לאלמנט:

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

הקטע &#39;מחלקות של אלמנטים&#39;.

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

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

  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, גוררים אחת מנקודות הבקרה.

    גרירה של נקודות הבקרה של פונקציית Cubic Bezier.

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

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

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

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

מעתיקים שינוי בהצהרת CSS.

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

מעתיקים את כל שינויי ה-CSS.

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