עיצוב באמצעות CSS

אפליקציות Blockly מורכבות מרכיבי HTML ו-SVG. התוויות של הרכיבים האלה הן מחלקות CSS שמזהות את מה שהן מייצגות (לדוגמה, blocklyBlock, blocklyField) ואת המצב שלהן (לדוגמה, blocklyEditing, blocklySelected). בנוסף, Blockly מספקת קבוצת ברירת מחדל של כללי CSS.

אפשר להשתמש ב-CSS כדי להגדיר סגנון לאפליקציה:

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

מחלקות CSS

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

מחלקות CSS של Blockly

‫Blockly משתמש במחלקות CSS כדי לספק את סוגי המידע הבאים על רכיבי ה-HTML וה-SVG שבהם הוא משתמש.

  • סוג. רוב מחלקות ה-CSS של Blockly מזהות את מה שהרכיב מייצג. לדוגמה, רכיב השורש של בלוק מסומן בתווית blocklyBlock. יש רכיבים שמסומנים בכמה מחלקות, כשכל אחת מהן ספציפית יותר מקודמתה. לדוגמה, רכיב השורש של שדה להזנת טקסט מסומן בתוויות blocklyField, blocklyInputField ו-blocklyTextInputField. סוגי המחלקות נשארים זהים למשך חיי הרכיב.

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

  • מידע נוסף ‫Blockly משתמש בכמה מחלקות CSS כדי לספק מידע נוסף. לדוגמה, בהזרקה <div> יש מחלקות שמספקות את השם של רכיב העיבוד והעיצוב הנוכחיים של סביבת העבודה. המחלקות האלה בדרך כלל נשארות זהות לאורך חיי האפליקציה.

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

מחלקות CSS בהתאמה אישית

אפשר להשתמש במחלקות CSS בהתאמה אישית כדי לספק ספציפיות רבה יותר לרכיבי Blockly.

סביבות עבודה

כדי להוסיף או להסיר מחלקה של CSS מהזרקה של סביבת עבודה <div>, קוראים ל-WorkspaceSvg.addClass או ל-WorkspaceSvg.removeClass.

ארגזי כלים

כדי להוסיף מחלקה של CSS ללחצן או לתווית בארגז הכלים, משתמשים במקש web-class בהגדרת ה-JSON של ארגז הכלים. מידע נוסף זמין במאמר בנושא לחצנים ותוויות.

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

חסימות

כדי להוסיף מחלקות CSS לבלוק בהתאמה אישית, מעבירים מחרוזת או מערך של מחרוזות למפתח classes.

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String",
    }
  ],
  "classes": "myStringLengthBlock",
  "output": "Number",
  "colour": 160,
}]);

אפשר גם להוסיף או להסיר מחלקה ב-CSS מרכיב <g> של בלוק באמצעות קריאה ל-BlockSvg.addClass או ל-BlockSvg.removeClass.

שדות התוויות

כדי להוסיף או להסיר מחלקת CSS מהרכיב <text> שמשמש שדה תווית או שדה תווית שניתן לסדר, קוראים ל-FieldLabel.setClass. אפשר גם להעביר שם של מחלקה לבונה של התווית.

מחלקות CSS ורכיבים בהתאמה אישית

כשיוצרים רכיב בהתאמה אישית, אפשר להשתמש באחת מהשיטות הבאות כדי להוסיף מחלקות CSS בהתאמה אישית:

  • אם הרכיב הוא מחלקת משנה של Field או Icon, צריך לשנות את ברירת המחדל של השיטה initView. לדוגמה:

    class MyCustomField extends Blockly.FieldTextInput {
  ...

  initView() {
    super.initView();

    // Add custom CSS class so we can style the field.
    if (this.fieldGroup_) {
      Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
    }
  }
}

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

  • כשיוצרים רכיב SVG, מעבירים את הכיתה אל Blockly.utils.dom.createSvgElement:

    this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});

  • כשיוצרים רכיב HTML, משתמשים ב-Blockly.utils.dom.addClass:

    const myDiv = document.createElement('div');
Blockly.utils.dom.addClass(myDiv, 'myInformation');

כדי להוסיף או להסיר כיתות אחרי הבנייה, משתמשים ב-Blockly.utils.dom.addClass או ב-Blockly.utils.dom.removeClass.

setMyHighlight(highlight) {
  if (highlight) {
    Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
  } else {
    Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
  }
}

רקע בנושא כללי CSS

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

מאפייני סגנון של SVG לעומת מאפייני CSS

רכיבי SVG מעוצבים באמצעות מאפייני עיצוב של SVG. אפשר להשתמש בהם כמאפיינים ברכיבי SVG (כלומר מאפייני הצגה) או בכללי CSS. לכן, כל הפעולות הבאות עושות את אותו הדבר.

<!-- SVG file with presentation attributes. -->
<circle fill="red" ... />

<!-- SVG file with <style> tag. -->
<style>
  circle {fill:red;}
</style>
<circle ... />

/* External CSS file.*/
circle {fill:red;}

<!-- SVG file with inline style. -->
<circle style="fill:red;" ... />

רשימת מאפייני הסגנון של SVG קשורה לרשימת מאפייני ה-CSS, אבל שונה ממנה:

  • אותו קונספט, אותו שם. לדוגמה, גם ב-SVG וגם ב-CSS נעשה שימוש ב-direction כדי לציין אם הטקסט הוא משמאל לימין או מימין לשמאל.
  • אותו קונספט, שם אחר. לדוגמה, ב-SVG משתמשים ב-fill כדי לציין את צבע המילוי, וב-CSS משתמשים ב-background-color.
  • שירות CSS בלבד. ל-CSS יש הרבה מאפיינים שלא קיימים ב-SVG, כמו margin ו-padding.
  • SVG בלבד. ל-SVG יש כמה מאפיינים שלא קיימים ב-CSS, כמו x ו-y.

לכן, אם אתם מעצבים רכיב SVG, אתם צריכים להשתמש במאפייני עיצוב של SVG. אם אתם מעצבים רכיב HTML, אתם צריכים להשתמש במאפייני CSS.

CSS cascade

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

קסקדה פשוטה

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

  1. אוספים את כל הכללים שחלים על הנכס והרכיב.
  2. אם יש כללים עם הערה !important, צריך לבטל את כל הכללים שאין להם הערה !important.

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

    • מאפייני הצגה של SVG הם בעלי ספציפיות של אפס.
    • הספציפיות של כללים בתג <style> או בגיליון סגנונות חיצוני מחושבת כרגיל.
    • לסגנונות מוטבעים (סגנונות שמוגדרים על ידי מאפיין style) יש ספציפיות גבוהה יותר מכל בורר.

  4. בוחרים את הכלל שמופיע אחרון במסמך.

  5. אם אף כלל לא חל, הערך של המאפיין עובר בירושה מהרכיב ההורה.

האלגוריתם הזה לא מתייחס לחלקים הבאים בשרשור:

  • המאפיין transition, שהוא בעל העדיפות הגבוהה ביותר. ‫Blockly משתמש בכמה מהם.
  • כלל ה-@media at. ‫Blockly משתמש באחד מהם.
  • כללים שצוינו על ידי הדפדפן או המשתמש.
  • כללי ה-at-rule‏ @scope ו-@layer והמאפיין animation, שלא נמצאים בשימוש ב-Blockly.

כללי CSS

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

כללי CSS של Blockly

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

תגי סגנון

רוב כללי ה-CSS של Blockly מוגדרים בשני תגי <style>. התגים האלה מופיעים קרוב לראש הדף, ולכן הכללים שמוגדרים בהם הם בעלי עדיפות נמוכה יותר מכללים עם אותה רמת ספציפיות שמופיעים בהמשך הדף.

כללי Blockly.css.register

כשמזריקים את Blockly, הוא מוסיף תג <style> כצאצא של התג <head> tag. הכללים בתג הזה מגיעים מהמקורות הבאים:

  • מרחב השמות Blockly.css. כדי לראות את הכללים האלה, פותחים את הקובץ core/css.ts ומחפשים את let content.
  • רכיבים בודדים, שקוראים ל-Blockly.css.register כדי להוסיף כללי CSS ספציפיים לרכיב. מכיוון ש-css.register מוסיף את הכללים האלה לסוף המחרוזת content, יש להם עדיפות גבוהה יותר מאשר לכללים עם אותה ספציפיות שנוספו קודם. כדי לראות את הכללים האלה, אפשר לעיין בשיחות אל Blockly.css.register.

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

כללי עיבוד

כשיוצרים מופע של רכיב ה-renderer, הוא מוסיף תג <style> שמכיל כללי CSS ספציפיים לרכיב ה-renderer כצאצא של התג <head>. הערה: הכללים האלה תמיד מתווספים – הם לא מושפעים מאפשרות ההגדרה css. כדי לראות את הכללים האלה, מחפשים את השיטה getCss_ ברכיב ה-renderer.

סגנונות בתוך השורה

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

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

מאפייני הצגה של SVG

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

הוספת כללי CSS משלכם

אפשר להוסיף כללי CSS משלכם באותן שיטות שבהן משתמשים ב-Blockly:

  • מתקשרים אל Blockly.css.register לפני שמזריקים את Blockly. הכללים שלכם יתווספו אחרי הכללים של Blockly, והעדיפות שלהם תהיה גבוהה יותר מהעדיפות של כללי Blockly עם אותה רמת ספציפיות.
  • מוסיפים תג <style> או קישור לגיליון סגנונות חיצוני כצאצא מאוחר יותר של התג <head>. הסיבה לכך היא ש-Blockly מוסיף את הכללים שלו כשני צאצאים ראשונים של התג <head>, ולכן הכללים שלכם יהיו בעדיפות גבוהה יותר מהכללים של Blockly עם אותה ספציפיות.
  • אפשר להשתמש בסגנונות מוטבעים כדי להוסיף סגנונות לרכיבים ברכיב מותאם אישית. הכללים האלה יהיו ספציפיים יותר מכל כלל עם סלקטור.
  • שימוש במאפייני הצגה ברכיבי SVG ברכיב בהתאמה אישית. לכללים האלה תהיה ספציפיות נמוכה יותר מכל כלל עם סלקטור.

פתרון בעיות

אם ה-CSS לא עובד, יכולות להיות לכך כמה סיבות:

  • אתם משתמשים במאפייני CSS ברכיב SVG או במאפייני סגנון SVG ברכיב HTML. השוואה בין מאפייני עיצוב של SVG לבין מאפייני CSS

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

    • במקום בבורר סוג (רכיב), צריך להשתמש בבורר מחלקה.
    • משתמשים בכמה בוררים.
    • אם אפשר, מוסיפים מחלקה מותאמת אישית לרכיב היעד ומשתמשים במחלקה הזו בכלל.
    • כמוצא אחרון, מוסיפים הערה !important לכלל. זו האפשרות היחידה אם כלל מתחרה מצוין באמצעות סגנון מוטבע (מאפיין style).

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

יש שני סוגים של כללי CSS שאי אפשר לבטל:

  • מאפיינים שמוגדרים בתוך כלל transition.
  • !important כללים שצוינו בדפדפן.