Is it possible to do simple calculation with HTML/CSS, but without JavaScript, or backend?

Question

The default behavior on many of the Webview plugins, for example the Android Webview, is to disable JavaScript execution. Is it possible at all to still perform simple calculations (to add up the two numbers in the text box for example) without using any JavaScript code, just pure HTML, or even CSS on these situations?

Note that <input onclick="c=a+b"/> is JavaScript.

Answer 1

Logically, yes. It is possible to do simplistic calculations without using JavaScript... however there are a great many caveats to this.

The best way to counter the no-JavaScript problem is to employ a server-side language, like PHP or such, to do the arithmetic as ACV rightly says.

However, see this pure CSS experiment which cleverly uses the calc() CSS function. The caveat to this? It has very limited support in browsers; see the CanIUse support table. Compounding the support issue is it may only be possible for basic arithmetic—rounding to the nearest whole number. Not great if you need any degree of accuracy.

It is worth looking at the W3Schools material on the <output> tag here, but again, the ol' browser support caveat rears its ugly head once more—salivating at the prospect of devouring another web designer's soul... (Internet Explorer does not support it).

In conclusion and to answer your question, yes! But no. Aside from obvious browser limitations, it is far better to carry out calculations using server-side code in the absence of JavaScript.

Also see the insanely gifted Stu Nicholls for another simple example of pure CSS calculations.