PUBLIC MARKS from decembre with tag calc

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

Images responsives : picture et srcset

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy. But is it useful? I've strained my brain in the past trying to think of obviously useful cases. There definitely are some though.