View source for Template:Calculator/Tutorial/Using with CSS

{{nav|previous=[[../Buttons|Buttons]]|title=Using with CSS|next=[[../Scoping|Scoping]]}}

In this chapter we talk about how you can combine CSS with calculator fields.

Before reading this chapter, you should have basic familiarity with [https://developer.mozilla.org/en-US/docs/Web/CSS CSS], [https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties CSS variables], inline styles, and [[Extension:TemplateStyles]]

== CSS ==

All calculator fields set metadata about their value which can be used from CSS.
* It sets the class <code>calculator-value-true</code> or <code>calculator-value-false</code> depending on if the value is non-zero (and not NaN)
* It sets data-calculator-field-value attribute with the fields value to 5 decimal places
* It sets a CSS variable <code>--calculator-''FIELDNAME''</code> with the value of the field

It is important to remember that this metadata will only be set only after the first time the user interacts with the field.

== Via Classes ==
Using the <code>calculator-value-true</code> class, you can target some text based on the value of a calculator field. This is especially useful with the <code>passthru</code> field type, which only sets the CSS class but otherwise does not display the field value.

This is how {{tl|calculator-hideifzero}} works. It allows you to dynamically hide some content based on the value of a formula. For example:

<syntaxhighlight lang="wikitext">
{{calculator-hideifzero|formula=showtext|Text that will disappear when checkbox is unchecked}}
{{calculator|type=checkbox|id=showtext|value=1|checked=1}} {{calculator label|Show text|for=showtext}} 
</syntaxhighlight>

{{calculator-hideifzero|formula=showtext|Text that will disappear when checkbox is unchecked}}
{{calculator|type=checkbox|id=showtext|value=1|checked=1}} {{calculator label|Show text|for=showtext}}

To use this directly, you would create a [[help:Extension:TemplateStyles|TemplateStyles]] page. For this example, we are using the page [[Template:Calculator/Tutorial/Using with CSS/style1.css]] which contains the following content:
<syntaxhighlight lang="css">
.myexample.calculator-value-true {
	font-weight: bold;
	color: blue;
	background-color: yellow;
}
</syntaxhighlight>
Then we can do the following:

<syntaxhighlight lang="wikitext">
<templatestyles src="Template:Calculator/Tutorial/Using_with_CSS/style1.css"/>
{{calculator
  |class=myexample
  |type=passthru
  |default=Here is some text. It is styled differently if the field is &ge; 5
  |formula=ifgreaterorequal(x,5)
}}
{{calculator|size=4|id=x|default=2}}
</syntaxhighlight>

<templatestyles src="Template:Calculator/Tutorial/Using_with_CSS/style1.css"/>
{{calculator
  |class=myexample
  |type=passthru
  |default=Here is some text. It is styled differently if the field is &ge; 5
  |formula=ifgreaterorequal(x,5)
}}
{{calculator|size=4|id=x|default=2}}



== data-calculator-field-value attribute ==
The data-calculator-field-value contains the value of the field to 5 decimals.

This can be targeted via attribute selectors <code>[data-calculator-field-value="1.20000"]</code> or <code>[data-calculator-field-value^="1.2"]</code>. However, most of the time it is easier to use the classes mentioned in the previous section or the CSS variables mentioned in the next section.

These attributes can often be useful during debugging as you can view them via the inspect pane of the browser developer console.

== CSS variables ==

Calculator fields also set a CSS variable for each named field (e.g. <code>--calculator-fieldname</code>). These are attached to the parent calculator container, so they can be used to style anything inside the container.

Keep in mind that these variables are unitless numbers. In many cases you may need to multiply them by 1 of a unit in order to use them. e.g. instead of <code>border-width: var(--calculator-width)</code>, you need to do something like <code>border-width: calc( var(--calculator-width, 1) * 1px )</code>. When using template styles, css variables must always be inside a calc() even if the expected value is a unitless number.

For example:

<syntaxhighlight lang="wikitext">
{{calculator label|Font size:|for=fontsize}} {{calculator|type=range|min=3|max=40|id=fontsize|default=10}}
<div style="font-size: calc( var(--calculator-fontsize, 10 ) * 1px )">Lorem Ipsum</div>
</syntaxhighlight>
{{calculator label|Font size:|for=fontsize}} {{calculator|type=range|min=3|max=40|id=fontsize|default=10}}
<div style="font-size: calc( var(--calculator-fontsize, 10 ) * 1px )">Lorem Ipsum</div>

In order to make smooth transitions between states, consider using the CSS [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition transition] property.

{{warning|While it is tempting to use CSS [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if if()] function, this should be avoided due to inconsistent browser support}}



{{nav|previous=[[../Buttons|Buttons]]|title=Using with CSS|next=[[../Scoping|Scoping]]}}