עיון בתכונות 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') במסוף ולוחצים לחיצה ימנית על תוצאה אחת, ואז בוחרים באפשרות הצגה בחלונית הרכיבים.

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

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

ניווט עם קישורים

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

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

הנה כמה מהם מודגשים:

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

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

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

עיון בתיעוד של שירות CSS

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

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

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

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

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

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

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

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

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

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

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

מידע נוסף זמין במאמר הסבר על CSS בכרטיסייה 'סגנונות'.

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

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

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

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

מידע נוסף זמין בקטע הסבר על CSS בכרטיסייה 'מחושב'.

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

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

הצגת נכסי CSS שעברו בירושה

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

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

הצגת כללי ה-CSS

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

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

הצגת @property כללים

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

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

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

הצגת @supports כללים

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

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

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

הצגת @scope כללים

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

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

הערה: התכונה 'כלל @scope' היא ניסיונית. כדי לבדוק זאת, יש להפעיל את הסימון תכונות ניסיוניות של פלטפורמת האינטרנט ב-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. Elements (רכיבים) > הכלל הזה מוצג בקטע סגנונות בקטע ייעודי.

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

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

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

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

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

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

Elements (רכיבים) > סגנונות מפענחים ומקשרים את הפריטים הבאים:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כדי להחליף מצב של פסאודו-מחלקה, כמו :active, :focus, :focus-within, :target, :hover, :visited או focus-visible:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בכרטיסייה 'כיסוי' אפשר לראות איזה שירות CSS משתמש בדף בפועל.

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

2. אפשר להתחיל להקליד coverage.

   

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

   

4. לוחצים על טעינה מחדש. הדף נטען מחדש והכרטיסייה כיסוי מספקת סקירה כללית של כמות ה-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. בקטע רכיבים > הכרטיסייה סגנונות, לוחצים לחיצה ימנית על נכס 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 propertiesInCamelCase: 'value', propertiesInCamelCase: 'value', ...

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

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

שינוי שירות ה-CSS

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

אפשר גם:

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

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

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

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

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

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

הוספת הצהרה בגוף ההודעה

כדי להוסיף הצהרה בגוף ההודעה:

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

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

   

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

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

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

1. בחירת רכיב.
2. בכרטיסייה סגנונות, לוחצים בין הסוגריים של כלל הסגנון שרוצים להוסיף לו. את ההצהרה. הסמן יתמקד ויאפשר לך להזין טקסט.
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 שהוזכר קודם לכן למטה.

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

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

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

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

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

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

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

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

2. יש לגרור לרוחב כדי להגדיל או להקטין את הערך.

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

הוספת מחלקה לרכיב

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

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

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

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

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

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

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

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

החלפת כיתה

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

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

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

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

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

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

בחירת גיליון סגנונות להוספת הכלל

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

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

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

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

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

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

עיינו בקטע המתאים בקטע אנימציות.

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

   

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

   

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

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

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

עריכת אנימציה ותזמוני מעבר באמצעות Easing Editor

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

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

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

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

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

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

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

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

מילת מפתח מתוזמנת	הגדרה קבועה מראש	בזייה קובייתי
יציאה קלה החוצה וכניסה קלה פנימה	In Out, סינוס	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	כלפי חוץ, ריבועי	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)
	פנימה, הצד האחורי	cubic-bezier(0.68, -0.55, 0.27, 1.55)
כניסה קלה פנימה	In, סינוס	cubic-bezier(0.47, 0, 0.75, 0.72)
	נכנס, ריבועי	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)
	Fast Out, לינארי פנימה	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)

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

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

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

  

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

  

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

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

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

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

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

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

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