Stylizacja za pomocą kodu CSS

Aplikacje Blockly składają się z elementów HTML i SVG. Te elementy są oznaczone klasami CSS, które określają, co reprezentują (np. blocklyBlock, blocklyField), a także ich stan (np. blocklyEditing, blocklySelected). Blockly udostępnia też domyślny zestaw reguł CSS.

Aby określić styl aplikacji, możesz użyć CSS:

• Zastąp reguły CSS Blockly własnymi regułami.
• Dodaj własne klasy CSS do komponentów Blockly, aby zwiększyć ich szczegółowość.
• Używaj klas i reguł CSS, aby stylizować komponenty niestandardowe.

Uwaga: chociaż Blockly nadal obsługuje motywy, preferowanym sposobem stylizowania aplikacji Blockly jest używanie CSS.

Klasy CSS

Aplikacje Blockly używają klas CSS do identyfikowania elementów, które mają być stylizowane. Daje to większą kontrolę niż selektory typu (elementu).

Klasy CSS Blockly

Blockly używa klas CSS, aby przekazywać te rodzaje informacji o elementach HTML i SVG, z których korzysta:

• Typ Większość klas CSS Blockly określa, co reprezentuje element. Na przykład element główny bloku jest oznaczony etykietą blocklyBlock. Niektóre elementy są oznaczone kilkoma klasami, z których każda jest bardziej szczegółowa od poprzedniej. Na przykład element główny pola wprowadzania tekstu jest oznaczony jako blocklyField, blocklyInputField i blocklyTextInputField. Typy klas pozostają niezmienione przez cały okres istnienia komponentu.

• Stan Blockly używa też klas CSS do określania stanu komponentu. Na przykład gdy kursor znajduje się w polu do wprowadzania tekstu, jego element główny jest oznaczony klasą blocklyEditing. Gdy kursor zostanie przesunięty, ta klasa zostanie usunięta.

• Dodatkowe informacje Blockly używa kilku klas CSS, aby przekazywać dodatkowe informacje. Na przykład wstrzykiwanie <div> ma klasy, które podają nazwę bieżącego renderera i motywu obszaru roboczego. Te klasy zwykle pozostają niezmienione przez cały okres działania aplikacji.

Najprostszym sposobem na sprawdzenie, jakich klas CSS używa Blockly, jest otwarcie narzędzi deweloperskich przeglądarki i zbadanie elementów używanych przez aplikację.

Niestandardowe klasy CSS

Możesz używać niestandardowych klas CSS, aby zwiększyć szczegółowość komponentów Blockly.

Obszary robocze

Aby dodać lub usunąć klasę CSS z wstrzykiwania <div> obszaru roboczego, wywołaj funkcję WorkspaceSvg.addClass lub WorkspaceSvg.removeClass.

Skrzynki narzędziowe

Aby dodać klasę CSS do przycisku lub etykiety w przyborniku, użyj klucza web-class w definicji JSON przybornika. Więcej informacji znajdziesz w artykule Przyciski i etykiety.

Aby zastąpić klasy CSS używane w różnych częściach kategorii, użyj klucza cssConfig w definicji JSON kategorii. Umożliwia to stylowanie poszczególnych kategorii. Więcej informacji znajdziesz w artykule Kategoria CSS.

Bloki

Aby dodać klasy CSS do bloku niestandardowego, przekaż ciąg tekstowy lub tablicę ciągów tekstowych do klucza 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,
}]);

Możesz też dodać lub usunąć klasę CSS z elementu <g> bloku, wywołując funkcję BlockSvg.addClass lub BlockSvg.removeClass.

Pola etykiety

Aby dodać lub usunąć klasę CSS z elementu <text> używanego przez pole etykiety lub pole etykiety z możliwością serializacji, wywołaj funkcję FieldLabel.setClass. Możesz też przekazać nazwę klasy do konstruktora etykiety.

Klasy CSS i komponenty niestandardowe

Podczas tworzenia komponentu niestandardowego użyj jednej z tych metod, aby dodać niestandardowe klasy CSS:

• Jeśli komponent jest podklasą Field lub Icon, zastąp metodę initView. Na przykład:

  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');
      }
    }
  }
  

  Więcej informacji znajdziesz w artykule Dostosowywanie pól za pomocą CSS lub Tworzenie widoku ikony.

• Podczas tworzenia elementu SVG przekaż klasę do:Blockly.utils.dom.createSvgElement

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

• Podczas tworzenia elementu HTML używaj Blockly.utils.dom.addClass:

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

Aby dodać lub usunąć klasy po utworzeniu, użyj symbolu Blockly.utils.dom.addClass lub Blockly.utils.dom.removeClass.

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

Ostrzeżenie: nie używaj dom.addClass ani dom.removeClass do dodawania klas do komponentów napisanych przez inne osoby ani do usuwania z nich klas, w tym z komponentów Blockly. Może to prowadzić do nieprzewidywalnych wyników.

Informacje o regułach CSS

Jeśli znasz właściwości stylów SVG i kaskadowość CSS, możesz pominąć tę sekcję.

Właściwości stylów SVG a właściwości CSS

Elementy SVG są stylizowane za pomocą właściwości stylów SVG. Można ich używać jako atrybutów elementów SVG (czyli atrybutów prezentacji) lub w regułach CSS. Dlatego wszystkie te działania dają ten sam efekt.

<!-- 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;" ... />

Lista właściwości stylów SVG jest powiązana z listą właściwości CSS, ale się od niej różni:

• Ta sama koncepcja, ta sama nazwa. Na przykład zarówno SVG, jak i CSS używają direction, aby określić, czy tekst jest pisany od lewej do prawej, czy od prawej do lewej.
• Ta sama koncepcja, inna nazwa. Na przykład SVG używa fill do określania koloru wypełnienia, a CSS używa background-color.
• Tylko usługa porównywania cen. CSS ma wiele właściwości, których nie ma w SVG, np. margin i padding.
• Tylko SVG SVG ma kilka właściwości, których nie ma w CSS, np. x i y.

Dlatego jeśli chcesz zastosować styl do elementu SVG, użyj właściwości stylów SVG. Jeśli stylizujesz element HTML, użyj właściwości CSS.

Kaskadowość CSS

Kaskada CSS określa priorytety reguł CSS, które decydują o tym, której reguły użyć, jeśli do danej właściwości i elementu ma zastosowanie więcej niż jedna reguła. Poniższa uproszczona kaskada obejmuje części kaskady najczęściej używane przez Blockly i może pomóc w odpowiedzi na pytanie „Dlaczego mój CSS nie działa?”.

Uproszczona kaskada

Aby określić, która reguła ma zastosowanie do danego elementu i właściwości, wykonaj te czynności i przerwij, gdy pozostanie tylko jedna reguła:

1. Zbierz wszystkie reguły, które mają zastosowanie do usługi i elementu.
2. Jeśli którekolwiek reguły mają adnotację !important, odrzuć wszystkie reguły, które nie mają adnotacji !important.

3. Wybierz reguły o najwyższej specyficzności.

   • Atrybuty prezentacji SVG mają specyficzność równą zero.
   • Reguły w tagu <style> lub w zewnętrznym arkuszu stylów mają obliczaną specyficzność w normalny sposób.
   • Style wbudowane (style ustawione za pomocą atrybutu style) mają wyższą specyficzność niż jakikolwiek selektor.

4. Wybierz regułę, która pojawia się na końcu dokumentu.

5. Jeśli żadna reguła nie ma zastosowania, dziedzicz wartość właściwości z elementu nadrzędnego.

Ten algorytm nie uwzględnia tych części kaskady:

• Usługa transition, która ma najwyższy priorytet. Blockly używa kilku z nich.
• Reguła @media at. Blockly używa jednego z tych języków.
• Reguły określone przez przeglądarkę lub użytkownika.
• Reguły @ @scope i @layer oraz właściwość animation, które nie są używane przez Blockly.

Reguły CSS

Reguły CSS określają styl aplikacji. Blockly udostępnia domyślny zestaw reguł, które możesz zastąpić własnymi regułami.

Reguły CSS Blockly

Blockly udostępnia domyślny zestaw reguł CSS. Sposób i miejsce dodania tych reguł wpływają na ich priorytet.

Tagi stylu

Większość reguł CSS Blockly jest określona w 2 tagach <style>. Ponieważ te tagi występują w górnej części strony, reguły w nich zawarte mają niższy priorytet niż reguły o tej samej specyficzności, które występują w dalszej części strony.

Reguły Blockly.css.register

Po wstawieniu Blockly dodaje tag <style> jako element podrzędny tagu <head>. Reguły w tym tagu pochodzą z:

• Przestrzeń nazw Blockly.css. Aby zobaczyć te reguły, otwórz plik core/css.ts i wyszukaj let content.
• Poszczególne komponenty, które wywołują Blockly.css.register, aby dodać reguły CSS specyficzne dla komponentu. Ponieważ css.register dodaje te reguły na końcu ciągu content, mają one wyższy priorytet niż reguły o tej samej szczegółowości, które zostały dodane wcześniej. Aby zobaczyć te reguły, zapoznaj się z sekcją wywołania Blockly.css.register.

Jeśli nie chcesz używać tych reguł, ustaw opcję konfiguracji css na false. W takim przypadku musisz podać alternatywny zestaw reguł CSS.

Reguły mechanizmu renderowania

Po utworzeniu instancji renderera dodaje on tag <style> zawierający reguły CSS specyficzne dla renderera jako element podrzędny tagu <head>. Pamiętaj, że te reguły są zawsze dodawane – nie ma na nie wpływu opcja konfiguracji css. Aby wyświetlić te reguły, wyszukaj w programie renderującym metodę getCss_.

Style w tekście

Style wbudowane są określane za pomocą atrybutu style i zazwyczaj tworzone podczas tworzenia DOM komponentu. Częściową listę znajdziesz w tym zapytaniu na GitHubie.

Style wbudowane są stosowane bezpośrednio do elementu, w którym występują, i mają wyższą specyficzność niż jakikolwiek selektor. Z tego powodu zastąpienie ich zwykle wymaga użycia !important adnotacji.

Atrybuty prezentacji SVG

Atrybuty prezentacji SVG to właściwości stylów SVG używane jako atrybuty elementów SVG. Mają one specyficzność równą zero i nie mogą zawierać adnotacji !important, więc mają najniższy priorytet ze wszystkich reguł Blockly. Blockly zwykle tworzy je w wywołaniach funkcji createSvgElement.

Dodawanie własnych reguł CSS

Możesz dodać własne reguły CSS, korzystając z tych samych metod co w przypadku Blockly:

• Wywołaj funkcję Blockly.css.register przed wstrzyknięciem kodu Blockly. Twoje reguły zostaną dodane po regułach Blockly i będą miały wyższy priorytet niż reguły Blockly o tej samej szczegółowości.
• Dodaj tag <style> lub link do zewnętrznego arkusza stylów jako element podrzędny tagu <head>. Ponieważ Blockly dodaje swoje reguły jako pierwsze 2 elementy podrzędne tagu <head>, Twoje reguły będą miały wyższy priorytet niż reguły Blockly o tej samej specyficzności.
• Używaj stylów w tekście, aby dodawać style do elementów w komponencie niestandardowym. Te reguły będą miały większą szczegółowość niż reguły z selektorem.
• Używaj atrybutów prezentacji w elementach SVG w komponencie niestandardowym. Te reguły będą miały mniejszą szczegółowość niż reguły z selektorem.

Rozwiązywanie problemów

Jeśli Twoja porównywarka cen nie działa, przyczyny mogą być następujące:

• Używasz właściwości CSS w elemencie SVG lub właściwości stylów SVG w elemencie HTML. Zobacz Właściwości stylów SVG a właściwości CSS.

• Twoja reguła ma niższy priorytet niż inna reguła. Zwykle wynika to z mniejszej specyficzności. Oto możliwe sposoby rozwiązania tego problemu:

  • Użyj selektora klasy zamiast selektora typu (elementu).
  • Używaj wielu selektorów.
  • Jeśli to możliwe, dodaj do elementu docelowego klasę niestandardową i użyj jej w regule.
  • W ostateczności dodaj do reguły adnotację !important. Jest to jedyna opcja, jeśli konkurencyjna reguła jest określona za pomocą stylu wbudowanego (atrybut style).

• Twoja reguła ma taką samą specyficzność jak inna reguła, ale występuje wcześniej na stronie. Jeśli nie możesz zwiększyć szczegółowości reguły, przenieś ją na dalszą część strony.

Istnieją 2 typy reguł CSS, których nie można zastąpić:

• Właściwości ustawione w regule transition.
• !important – reguły określone przez przeglądarkę.