CSS_v3 Op

CSS

Define a custom stylesheet


<h2>CSS Rule Conflicts</h2> <p>HTML element created by cables always have a class called &quot;cablesEle&quot;.</p> <p>If you have problems with existing styles of cables, use css selectors to define them to use only childs:</p> <pre><code>.cablesEle.myDiv { background-color:red; border:10px solid blue; }

.cablesEle h1 { color:red; } </code></pre> <h2>Using assets in CSS properties</h2> <p>use css variables to use file urls, e.g: <a href="/op/Ops.Html.SetCssVariableUrl">Ops.Html.SetCssVariableUrl</a></p> <h2>Nesting</h2> <p>in v3 the nesting parameter was introduced. it will use a the CSS feature <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting">nesting</a> to make sure the styles are only applied to the correct elements. the default value will make sure the styles are only apllied to elements below &quot;.cablesContainer&quot; this way only elements that were created below and by cables are influenced.</p>


Full Name
  • Ops.Html.CSS.CSS_v3
Visibility
  • Core Op - Official cables op
License
  • MIT
Authorgithub


Example Patch CSS OP Example

Create a CSS style so it's available to other ops like the Div element

Open In Editor

INPUT PORTS


css code (String)
Nesting Parent (String)
Active (Number:

<i>boolean</i>

)


Patches using CSS_v3

  • Examples
  • Public
  • My Patches

Changelog


featureAdded option to activate/deactivate styleuser avatarpandur - 2024-02-23 15:27
featureadded nesting parameteruser avatarpandur - 2024-06-07 09:59
renameOps.Html.CSS_v3 renamed to Ops.Html.CSS.CSS_v3user avatarpandur - 2024-10-30 08:39