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.
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);
}
In a video tutorial of SASS, Gary wrote a line of CSS as:
margin-left: max(40px);
I want to understand what does this line mean and how does it work?
Also, it is working fine for his system but it isn't working in my browser. What could be the reason?
Link to Gary's source code.
max() is a function in CSS that is part of CSS Values and Units Module Level 4.
It lets you define a list of values, from which the maximum is used:
margin-left: max(40px, 60px, 80px);
The result is:
margin-left: 80px;
It's also possible to use expressions without calc inside:
Note: Full math expressions are allowed in each of the arguments; there’s no need to nest a calc() inside! You can also provide more than two arguments, if you have multiple constraints to apply.
margin-left: max(10 * (1vw + 1vh) / 2, 12px);
Unfortunately the browser support for max() and also min() or clamp() is not that broad, and this code snippet will work in Safari and Chrome only at the moment:
div {
width: 10px;
height: 10px;
background: red;
margin-left: max(40px, 200px);
}
<div></div>
As you came across this in a SASS context, it's also worth noticing that there's a max()function in SASS as well. And it's older than the native one:
CSS added support for min() and max() functions in Values and Units Level 4, from where they were quickly adopted by Safari to support the iPhoneX. But Sass supported its own min() and max() functions long before this, and it needed to be backwards-compatible with all those existing stylesheets. This led for the need for extra-special syntactic cleverness.
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 + - * /
I am having a HTML content like this.
It has a padding of 70. I tried to reduce the padding by adding using another css rule like this
padding-top: -20px !important
All I want to do is, already existing property value 70px should be added with the additional rule -20px so the result should be 50px.
I am able to accomplish this by doing padding-top: 50px !important
But still I want to do this mathematical calculations in the css as I asked. Please help.
Note: The already existing value is in separate css rule and this added one is in separate rule.
Unfortunately, you can't do cross class calculations in CSS
If you want to do mathematical calculations of any kind, check out the calc() function
It allows you to do things like: padding-top: calc(10em - 60px)
As long as you're not using it for background-position; calc should be backwards compatible to IE9 and work on pretty much any other browser bar Opera Mini
I have asked this question before, but thought I'll be clearer. It seems that margin-top in % value does not display the same on Safari, as it does on Chrome, Firefox and IE. In px it displays correctly and margin-left % also.
Here is an example to make comparisons: Fiddle
* {
margin:0;
padding:0;
}
.A {
background-color: blue;
height: 200px;
position:relative;
}
.B {
left: 50px;
margin-top:15%;
width:20px;
height:20px;
background-color: red;
position:absolute;
}
I really need to use a % value on margin-top as it is for a responsive design feature. Using top does not scale the object according to the window size.
Are there known issues, and if so (probably asking a big thing) a way to only target Safari as a browser so I can have custom values for the style sheet?
Yes, according to the W3C standards, margins defined using percentages should be calculated with respect to the width of the containing block.
Ref: (http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties)
However, it appears that Safari calculates top/bottom margin percentages with respect to the height of the containing block, which makes more logical sense, but is nevertheless incorrect as far as W3 standards go.
I don't believe there is a CSS solution for this. You could try some jQuery to target only Safari, get the width of div.A and use it to calculate the margin-top for div.B.
Something like:
var width = $('.A').width();
var topMargin = width * 0.15;
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$('.B').css('margin-top', topMargin+'px')
}
else {
};;
Here's an example page: http://www.indieweb.co.nz/testing/safari-margin-percentage.html
Note: This JS only alters the margin when the page is loaded - it won't change dynamically if you manually drag the edges of your browser window; you will need to refresh the page. Wasn't sure if you required that functionality. Let me know if you do and I'll have a look.