Blockly-Anwendungen bestehen aus HTML- und SVG-Elementen. Diese Elemente sind mit CSS-Klassen gekennzeichnet, die angeben, was sie darstellen (z.B. blocklyBlock, blocklyField) und in welchem Zustand sie sich befinden (z.B. blocklyEditing, blocklySelected). Blockly bietet auch einen Standardsatz von CSS-Regeln.
Sie können CSS verwenden, um Ihre Anwendung zu gestalten:
- Überschreiben Sie die CSS-Regeln von Blockly mit Ihren eigenen Regeln.
- Sie können Blockly-Komponenten eigene CSS-Klassen hinzufügen, um sie noch genauer zu definieren.
- Mit CSS-Klassen und -Regeln können Sie benutzerdefinierte Komponenten gestalten.
CSS-Klassen
Blockly-Anwendungen verwenden CSS-Klassen, um zu formatierende Elemente zu identifizieren. Das bietet eine genauere Steuerung als Typselektoren (Elementselektoren).
Blockly-CSS-Klassen
Blockly verwendet CSS-Klassen, um die folgenden Arten von Informationen zu den verwendeten HTML- und SVG-Elementen bereitzustellen.
Typ: Die meisten Blockly-CSS-Klassen geben an, was ein Element darstellt. Das Stammelement eines Blocks ist beispielsweise mit
blocklyBlockgekennzeichnet. Einige Elemente sind mit mehreren Klassen gekennzeichnet, die jeweils spezifischer als die vorherige sind. Das Stammelement eines Texteingabefelds ist beispielsweise mitblocklyField,blocklyInputFieldundblocklyTextInputFieldgekennzeichnet. Typklassen bleiben über die Lebensdauer einer Komponente hinweg gleich.Status: Blockly verwendet auch CSS-Klassen, um den Status einer Komponente anzugeben. Wenn sich der Cursor beispielsweise in einem Texteingabefeld befindet, wird dessen Stammelement mit der Klasse
blocklyEditinggekennzeichnet. Wenn der Cursor entfernt wird, wird diese Klasse entfernt.Weitere Informationen Blockly verwendet einige CSS-Klassen, um zusätzliche Informationen bereitzustellen. Die Einfügung
<div>enthält beispielsweise Klassen, die den Namen des aktuellen Renderers und des aktuellen Designs des Arbeitsbereichs bereitstellen. Diese Klassen bleiben in der Regel während der gesamten Lebensdauer der Anwendung gleich.
Am einfachsten finden Sie heraus, welche CSS-Klassen von Blockly verwendet werden, indem Sie die Entwicklertools Ihres Browsers öffnen und die von Ihrer Anwendung verwendeten Elemente untersuchen.
Benutzerdefinierte CSS-Klassen
Mit benutzerdefinierten CSS-Klassen können Sie Blockly-Komponenten genauer definieren.
Arbeitsbereiche
Wenn Sie eine CSS-Klasse aus der Einfügung <div> eines Arbeitsbereichs hinzufügen oder entfernen möchten, rufen Sie WorkspaceSvg.addClass oder WorkspaceSvg.removeClass auf.
Toolboxes
Wenn Sie einer Schaltfläche oder einem Label in einer Toolbox eine CSS-Klasse hinzufügen möchten, verwenden Sie den Schlüssel web-class in der JSON-Definition der Toolbox. Weitere Informationen finden Sie unter Schaltflächen und Labels.
Wenn Sie die für die verschiedenen Teile einer Kategorie verwendeten CSS-Klassen überschreiben möchten, verwenden Sie den Schlüssel cssConfig in der JSON-Definition der Kategorie. So können Sie einzelne Kategorien formatieren. Weitere Informationen finden Sie unter Category CSS.
Blocks
Wenn Sie einem benutzerdefinierten Block CSS-Klassen hinzufügen möchten, übergeben Sie einen String oder ein Array von Strings an den Schlüssel 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,
}]);
Sie können auch eine CSS-Klasse zum <g>-Element eines Blocks hinzufügen oder daraus entfernen, indem Sie BlockSvg.addClass oder BlockSvg.removeClass aufrufen.
Labelfelder
Wenn Sie dem <text>-Element, das von einem Label-Feld oder serialisierbaren Label-Feld verwendet wird, eine CSS-Klasse hinzufügen oder daraus entfernen möchten, rufen Sie FieldLabel.setClass auf. Sie können auch einen Klassennamen an den Konstruktor des Labels übergeben.
CSS-Klassen und benutzerdefinierte Komponenten
Verwenden Sie beim Erstellen einer benutzerdefinierten Komponente eine der folgenden Methoden, um benutzerdefinierte CSS-Klassen hinzuzufügen:
Wenn Ihre Komponente eine Unterklasse von
FieldoderIconist, überschreiben Sie die MethodeinitView. Beispiel: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'); } } }Weitere Informationen finden Sie unter Felder mit CSS anpassen oder Ansicht des Symbols erstellen.
Wenn Sie ein SVG-Element erstellen, übergeben Sie Ihre Klasse an
Blockly.utils.dom.createSvgElement:this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});Verwenden Sie beim Erstellen eines HTML-Elements
Blockly.utils.dom.addClass:const myDiv = document.createElement('div'); Blockly.utils.dom.addClass(myDiv, 'myInformation');
Wenn Sie nach der Erstellung Klassen hinzufügen oder entfernen möchten, verwenden Sie Blockly.utils.dom.addClass oder Blockly.utils.dom.removeClass.
setMyHighlight(highlight) {
if (highlight) {
Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
} else {
Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
}
}
Hintergrund zu CSS-Regeln
Wenn Sie sich mit SVG-Stileigenschaften und der CSS-Kaskade auskennen, können Sie diesen Abschnitt überspringen.
SVG-Design-Properties im Vergleich zu CSS-Properties
SVG-Elemente werden mit SVG-Stileigenschaften formatiert. Sie können als Attribute für SVG-Elemente (auch Darstellungsattribute genannt) oder in CSS-Regeln verwendet werden. Die folgenden Beispiele haben also alle dieselbe Wirkung.
<!-- 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;" ... />
Die Liste der SVG-Stileigenschaften ähnelt der Liste der CSS-Eigenschaften, ist aber nicht identisch:
- Gleiches Konzept, gleicher Name. Sowohl SVG als auch CSS verwenden beispielsweise
direction, um anzugeben, ob Text von links nach rechts oder von rechts nach links verläuft. - Gleiches Konzept, anderer Name. In SVG wird beispielsweise
fillverwendet, um die Füllfarbe anzugeben, in CSSbackground-color. - Nur Preisvergleichsportal. CSS hat viele Eigenschaften, die nicht in SVG enthalten sind, z. B.
marginundpadding. - Nur SVG SVG hat einige Eigenschaften, die nicht in CSS enthalten sind, z. B.
xundy.
Wenn Sie also ein SVG-Element gestalten, verwenden Sie SVG-Stileigenschaften. Wenn Sie ein HTML-Element gestalten, verwenden Sie CSS-Eigenschaften.
CSS-Kaskade
Die CSS-Kaskade bestimmt die Prioritäten von CSS-Regeln. Dadurch wird festgelegt, welche Regel verwendet werden soll, wenn mehr als eine Regel für eine bestimmte Eigenschaft und ein bestimmtes Element gilt. Die folgende vereinfachte Kaskade umfasst die Teile der Kaskade, die am häufigsten von Blockly verwendet werden, und kann Ihnen helfen, die Frage „Warum funktioniert mein CSS nicht?“ zu beantworten.
Vereinfachte Kaskadierung
So ermitteln Sie, welche Regel für ein bestimmtes Element und eine bestimmte Property gilt:
- Sammeln Sie alle Regeln, die für die Property und das Element gelten.
- Wenn Regeln die Anmerkung
!importanthaben, verwerfen Sie alle Regeln ohne diese Anmerkung.!important Wählen Sie die Regeln mit der höchsten Spezifität aus.
- SVG-Präsentationsattribute haben eine Spezifität von null.
- Die Spezifität von Regeln in einem
<style>-Tag oder einem externen Stylesheet wird normal berechnet. - Inline-Styles (Styles, die durch ein
style-Attribut festgelegt werden) haben eine höhere Spezifität als jeder Selektor.
Wählen Sie die Regel aus, die im Dokument zuletzt angezeigt wird.
Wenn keine Regel zutrifft, wird der Wert der Eigenschaft vom übergeordneten Element des Elements übernommen.
Bei diesem Algorithmus werden die folgenden Teile der Kaskade nicht berücksichtigt:
- Die Eigenschaft
transitionhat die höchste Priorität. Blockly verwendet einige davon. - Die
@media-Regel. Blockly verwendet eines davon. - Regeln, die vom Browser oder Nutzer angegeben werden.
- Die
@scope- und@layer-At-Regeln sowie dieanimation-Eigenschaft, die nicht von Blockly verwendet werden.
CSS-Regeln
CSS-Regeln geben an, wie Ihre Anwendung formatiert wird. Blockly bietet einen Standardsatz von Regeln, die Sie mit Ihren eigenen Regeln überschreiben können.
Blockly-CSS-Regeln
Blockly bietet eine Reihe von Standard-CSS-Regeln. Wie und wo diese Regeln hinzugefügt werden, wirkt sich auf ihre Priorität aus.
Stil-Tags
Die meisten CSS-Regeln von Blockly werden in zwei <style>-Tags angegeben. Da diese Tags oben auf der Seite stehen, haben die darin enthaltenen Regeln eine niedrigere Priorität als Regeln mit derselben Spezifität, die später auf der Seite stehen.
Blockly.css.register-Regeln
Wenn Blockly eingefügt wird, wird ein <style>-Tag als untergeordnetes Element des <head>-Tags hinzugefügt. Die Regeln in diesem Tag stammen aus:
- Der
Blockly.css-Namespace. Wenn Sie sich diese Regeln ansehen möchten, öffnen Sie core/css.ts und suchen Sie nachlet content. - Einzelne Komponenten, die
Blockly.css.registeraufrufen, um komponentenbezogene CSS-Regeln hinzuzufügen. Dacss.registerdiese Regeln am Ende descontent-Strings hinzufügt, haben sie eine höhere Priorität als Regeln mit derselben Spezifität, die zuvor hinzugefügt wurden. Hier finden Sie diese Regeln.Blockly.css.register
Wenn Sie diese Regeln nicht verwenden möchten, setzen Sie die Konfigurationsoption css auf false. In diesem Fall sind Sie für die Bereitstellung eines alternativen Satzes von CSS-Regeln verantwortlich.
Renderer-Regeln
Wenn der Renderer instanziiert wird, fügt er dem <head>-Tag ein <style>-Tag mit rendererspezifischen CSS-Regeln als untergeordnetes Element hinzu. Diese Regeln werden immer hinzugefügt und sind nicht von der Konfigurationsoption css betroffen. Suchen Sie in Ihrem Renderer nach der Methode getCss_, um diese Regeln aufzurufen.
Inline-Formatierungen
Inline-Stile werden mit dem Attribut style angegeben und in der Regel erstellt, wenn das DOM für eine Komponente erstellt wird. Eine Teilliste finden Sie in dieser GitHub-Abfrage.
Inline-Stile werden direkt auf das Element angewendet, in dem sie vorkommen, und haben eine höhere Spezifität als jeder Selektor. Aus diesem Grund ist zum Überschreiben in der Regel eine !important-Annotation erforderlich.
SVG-Darstellungsattribute
SVG-Präsentationsattribute sind SVG-Stileigenschaften, die als Attribute von SVG-Elementen verwendet werden. Sie haben eine Spezifität von null und dürfen keine !important-Anmerkung enthalten. Daher haben sie die niedrigste Priorität aller Blockly-Regeln. Blockly erstellt sie in der Regel in Aufrufen von createSvgElement.
Eigene CSS-Regeln hinzufügen
Sie können Ihre eigenen CSS-Regeln mit denselben Methoden wie Blockly hinzufügen:
- Rufen Sie
Blockly.css.registerauf, bevor Sie Blockly einfügen. Ihre Regeln werden nach den Blockly-Regeln hinzugefügt und haben eine höhere Priorität als Blockly-Regeln mit derselben Spezifität. - Fügen Sie dem
<head>-Tag ein<style>-Tag oder einen Link zu einem externen Stylesheet als untergeordnetes Element hinzu. Da Blockly seine Regeln als die ersten beiden untergeordneten Elemente des<head>-Tags hinzufügt, haben Ihre Regeln eine höhere Priorität als Blockly-Regeln mit derselben Spezifität. - Mit Inline-Stilen können Sie Elementen in einer benutzerdefinierten Komponente Stile hinzufügen. Diese Regeln haben eine höhere Spezifität als alle Regeln mit einem Selektor.
- Präsentationsattribute für SVG-Elemente in einer benutzerdefinierten Komponente verwenden Diese Regeln sind weniger spezifisch als Regeln mit einem Selektor.
Fehlerbehebung
Wenn Ihr CSS nicht funktioniert, kann das folgende Gründe haben:
Sie verwenden CSS-Eigenschaften für ein SVG-Element oder SVG-Stileigenschaften für ein HTML-Element. Weitere Informationen
Ihre Regel hat eine niedrigere Priorität als eine andere Regel. Das liegt in der Regel an einer geringeren Spezifität. So lässt sich das Problem möglicherweise beheben:
- Verwenden Sie einen Klassenselektor anstelle eines Typselektors (Elementselektors).
- Mehrere Selektoren verwenden
- Fügen Sie dem Zielelement nach Möglichkeit eine benutzerdefinierte Klasse hinzu und verwenden Sie diese Klasse in Ihrer Regel.
- Fügen Sie Ihrer Regel als letzten Ausweg eine
!important-Anmerkung hinzu. Das ist Ihre einzige Möglichkeit, wenn eine konkurrierende Regel mit einem Inline-Stil (style-Attribut) angegeben wird.
Ihre Regel hat dieselbe Spezifität wie eine andere Regel, wird aber früher auf der Seite aufgerufen. Wenn Sie die Spezifität Ihrer Regel nicht erhöhen können, verschieben Sie sie weiter nach unten auf der Seite.
Es gibt zwei Arten von CSS-Regeln, die Sie nicht überschreiben können:
- Attribute, die in einer
transition-Regel festgelegt sind. !important-Regeln, die vom Browser angegeben werden.