I was wondering if it is possible to have calculations in HTML width attribute. Something like:
<SVG width="100%-10px">
or a CSS workaround for the same?
As #Hunter suggested, you could use calc(), but I would advise against it, because:
Due to the way browsers handle sub-pixel rounding differently, layouts using calc() expressions may have unexpected results.
source: http://caniuse.com/#feat=calc
Just use javascript, if it has to be that dynamic to ensure everything would look the same on all browsers.
HTML:
<div class="parent">
<svg class="dynamic-width"></svg>
</div>
JS:
var parent = document.getElementsByClassName('parent')[0];
var pixelsToSubtract = 10;
var svg = document.getElementsByClassName('dynamic-width')[0];
svg.style.width = parent.getBoundingClientRect().width - 10 + 'px';
calc() works just fine for this:
svg {
background-color: red;
width: calc(100% - 200px);
}
<svg></svg>
I think the thing you're looking for is the CSS calc() function http://www.w3schools.com/cssref/func_calc.asp
Here is an example width: calc(100% - 10px);
You can use mathematical expression such as + - * /
Related
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.
You need to use calc() instead. Check browser compatibility on Can I use...
.foo {
height: calc(25% - 5px);
}
If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):
$a: 25%;
$b: 5px;
.foo {
width: calc(#{$a} - #{$b});
}
There is a calc function in both SCSS [compile-time] and CSS [run-time]. You're likely invoking the former instead of the latter.
For obvious reasons mixing units won't work compile-time, but will at run-time.
You can force the latter by using unquote, a SCSS function.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }
$var:25%;
$foo:5px;
.selector {
height:unquote("calc( #{$var} - #{$foo} )");
}
IF you know the width of the container, you could do like this:
#container
width: #{200}px
#element
width: #{(0.25 * 200) - 5}px
I'm aware that in many cases #container could have a relative width. Then this wouldn't work.
Sorry for reviving old thread - Compass' stretch with an :after pseudo-selector might suit your purpose - eg. if you want a div to fill width from left to (50% + 10px) of screen you could use (in SASS indented syntax):
.example
background: red
+stretch(0, -10px, 0, 0)
&:after
+stretch(0, 0, 0, 50%)
content: ' '
background: blue
The :after element fills 50% to the right of .example (leaving 50% available for .example's width), then .example is stretched to that width plus 10px.
Just add the percentage value into a variable and use #{$variable}
for example
$twentyFivePercent:25%;
.selector {
height: calc(#{$twentyFivePercent} - 5px);
}
Can I use calc() with border-width?
I would like the following CSS to work:
.my-element {
border-left-width: calc(10% + 10px);
border-right-width: calc(10% + 20px);
}
But for whatever reason, any value I provide with calc() results in no border at all. The documentation I've found on MDN aren't clear about whether calc can be used - it says that I should use Any <length> value, but does that include calc?
I target IE9, but I get the same results in Chrome 34 and Firefox 28. I know I can alsway use jQuery to achieve these things, but I want to avoid it if at all possible.
Unfortunately, border-width cannot use a % value as any % is NOT related to size of the element.
So, basically...NO you can't use calc WITH % for border-width because it doesn't know what it's supposed to be a % of.
This question is pretty short on purpose, but I'm very curious if it's possible.
Can you fetch other styles inside a CSS Stylesheet "with" CSS?
A bit like doing this with jQuery:
var header_height = $('#header').css('height');
So I can do calculations like this:
#content {
height: calc(100% - property('#header', 'height') - property('#footer', 'height'));
}
Where property would then for example represent the fetching of another tag's CSS-style.
No JavaScript allowed for this question ^^
A short answer: no it's not possible with pure CSS. You can only do that with JavaScript or with restrictions in languages like SASS or LESS that generate pure css. But if the dimensions change dynamically, both won't help either.
Your only chance in CSS is with percentages like
#content {
height: 80%;
}
where the height changes accordingly to the parents height. But this only works with parent elements of course.
I am calculating some widths and margins depending on the number of childs.
Is it possible in css3 to have a variable like:
.someClass {
width: -moz-calc(nrOfChilds * 80px);
}
Some other classes I got are written as follows:
.anotherClass:nth-child(n) {
margin-left: -moz-calc(n * 50px);
}
Is it possible to use some variables like n or nrOfChilds? At the moment I declare my second example several times and change the first manually?
I know javascript is a solution to this. But is there a native css3 solution for this?
/Kind regards
Christian
Nowadays all major browsers support calculated CSS values with custom variables, via:
calc(...)
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Browser support: https://caniuse.com/css-variables
var(--...)
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/var
Browser support: https://caniuse.com/calc
Example
.somebar {
/* I define the initial value of "--mydepth" */
--mydepth: 1;
width: calc(var(--mydepth) * 50px);
height: 50px;
background: green;
}
.level1 {
--mydepth: 2;
}
.level2 {
--mydepth: 3;
}
<h3>Example of: calc(var(--mydepth) * 50px)</h3>
<div class="somebar"></div>
<div class="somebar level1"></div>
<div class="somebar level2"></div>
<h3>Expected result (if supported by browser)</h3>
<div class="somebar" style="width:50px"></div>
<div class="somebar" style="width:100px"></div>
<div class="somebar" style="width:150px"></div>
(As of 2012) There's no way to do this in CSS3.
As of 2019 (and earlier) see the accepted answer above.
Have a look at LESS or .less if using .NET server side.
there's no way to do this with only css3. You can use .less , that use dynamic behavior such as variables, mixins, operations and functions. Is based on JS. Or you can take the rails approach with the use of sass . there's others, but I guess these two are the most popular for css extensions.
Not possible in CSS3, neither using LESS or SASS. The only way is through javascript which should be quite simple to do.
Example using SASS:-
$nrOfChilds: 20;
.someClass {
width: calc(#{$nrOfChilds} * 80px);
}
I want the normal line-height, plus 4px. I have tried
line-height: normal + 4px;
but that doesn't work.
(Note: I don't want approximations using percentages.)
Why not just take aways Chromes little focus glare?
use the css property outline: none;
http://jsfiddle.net/XF6fS/
You can't do any arithmetic in CSS. Libraries like LESSCSS allow you to do certain things, but you can't get properties of rendered elements.
You could use percentages to get an approximation, however you should probably set an explicit line-height for the elements; this will be the same accross browsers.
Running this JSFiddle shows the following results:
FireFox 6: 20px
IE 8: normal
Chrome 13: normal
Set an explicit height; it's going to be much better compatible with all browsers.
There is no direct way to do it. As said, you cannot do any calculations in CSS files. That's why we keep saying that CSS is not complete, we have to make floats to display our pages properly, which is nonsense when you think about it.
As you have created the css, you can add 4pt yourself. If you don't want to hard-code, you can use CSS frameworks or other languages that create CSS output. Frameworks are fine, but I do not recommend using other languages that create CSS output for you. This is fun, but you will not learn the language and since CSS is a hard-to-understand language, you will stuck if you have any errors, misplacements on your page.
So, about your question, you can use javascript to getComputedStyle and add 4pt and set the style of the element.
This is the javascript that gets the style:
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
Usage:
var height = parseInt(getStyle("elementId", "line-height"));
var earlycss = document.getElementById("elementId").style.cssText
document.getElementById("elementId").style.cssText = earlycss + "\nline-height: " + (height + 4) + "px;";
try -
line-height: -moz-calc(normal + 4px);
But ya this wouldn't be an ideal solution due to cross browser issues and well older browsers won't ideally support this. :). And for further reference - http://www.w3.org/TR/css3-values/#functional-notation
im quite sure you can't do math like that with css
try using some javascript to get the line-height and then add 4
You can try using line height in percentage. Eg: Line-height:110% if you want to do it purely in CSS
You could try using em's to define your line height, and then assuming you know the size of your font you can ensure that it's +'x'%
The problem is of course that 90% of the time you can't know the size of your font (or rather that someone won't fiddle with it).