This question already has answers here:
Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
(6 answers)
Closed 10 years ago.
Is it possible somehow to calculate size of an element as a basic mathematical expression?
e.g.:
.wideColumn{max-width:100%-20em;} /*not working*/
This can be accomplished using LESS or jQuery. But unfortunately it cannot be done with pure CSS.
There are, however, workarounds to this issue using pure CSS. For example:
.wideColumn {
max-width: 100%;
margin-right: 10em;
margin-left: 10em;
}
Of course, this example may not work with your code. But there are numerous other workarounds.
Short answer is NO you cannot, not atleast in CSS 2, 2.1 spec, then too if you are interested you could take a look at Dynamic stylesheets with LESS
Or as Sandeep told, you can use calc() which is introduced in CSS3 spec
Reference
You cannot do this in CSS directly, but try something like LESS - http://lesscss.org/
it might be available one day, but not now - read more here http://www.w3.org/Style/CSS/specs#math
Related
This question already has answers here:
Sass Variable in CSS calc() function
(6 answers)
Closed 4 years ago.
Problem :
Correct use of calc function with sass file.
Case :
.class1 {
max-width: calc(100% - #{$endWidth});
min-width: $startWidth;
text-overflow: ellipsis;
}
.class2 {
max-width: calc(100% - #{$startWidth});
direction: rtl;
}
Tried Case :
I have verified few answers in stack overflow, and from one of the question answers inspired my question - Stack Overflow Reference. The solutions aren't working for my scenario,
Should I use mixin in sass to get it to work ?
While calc() will indeed cause issues with SASS files by default, this can be avoided by using interpolation (which you are using correctly).
The only possible explanation(s) for your issue are:
You do not have (or have it incorrectly defined) SASS variables:$startWidth and $endWidth
Rules with higher specificity are overriding your selectors
You have cached old styles, hence clear your cache with CTRL + SHIFT + R
Here's an example JSFiddle showcasing your above code working.
This question already has answers here:
How to prevent Less from trying to compile CSS calc() properties?
(4 answers)
Closed 7 years ago.
This is a question that has been asked several times before, but none of the answers I have found seem to work in my case. I have 3 buttons and I am trying to evaluate their width as follows:
.num-buttons-3 {
width: calc((100% - 40px)/3);
}
This always evaluates in my browser (Chrome) as 20%, which is (100% - 40%)/3.
I have tried numerous suggested alternatives to get this to evaluate correctly, such as:
.num-buttons-3 {
width: calc((~'100% - 40px')/3);
}
.num-buttons-3 {
#marg: 40px;
width: calc((~'100% - #{marg}')/3);
}
Is therer another CSS or LESS solution I can try?
Found an answer on this. Escaping the entire calc function is an option that seems to work:
width: ~"calc(((100% - 40px)/3))";
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
Is there a way in SASS to get an element to inherit its siblings height so they line up on a horizontal line?
<div class="first">A bunch of content in here<div>
<div class="sibling"><div>
.first {
height: auto;
+ second {
height: use .first height;
}
}
Nope. Think about the way SASS works - your height: auto will be compiled into CSS as just that height: auto. There's no way for Sass to know what number that will turn out to be, so it can't assign a specific value to your second element. (It can only assign height: auto again, which may or may not be the value you want).
You can't make them the same height, but you can ensure that they all align within the row, which might accomplish the look you are going for (hard to be sure without knowing exactly what you are trying to do):
.aligned-row {
display:flex;
align-items:center;
}
This is newer CSS, so not completely backwards compatible:
More info on the display:flex can be found here: vertical-align with Bootstrap 3
This question already has answers here:
What does an asterisk (*) do in a CSS selector?
(5 answers)
Closed 9 years ago.
Ok, looking at some code in a CSS Stylesheet assigned to a project, I noticed this:
* {
margin: 0px;
padding: 0px;
text-decoration: none;
}
What does this bit do?? What elements does it effect exactly?? Strange, never heard tell of using the asterisks as a selector or whatever it is supposed to be for. What does the asterisk do exactly?
* affects (I should say "represents the qualified name of") all elements. Per spec:
http://www.w3.org/TR/selectors/#universal-selector
The asterisk is the 'universal selector' and applies the style to all elements on the page. This code will reset everything to have no margins, padding or text-decoration.
Universal selector on W3.org
It is the universal selector, much like the '$' in jQuery. It is usually used in the reset
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the performance impact of CSS’s universal selector?
Ive read that using the * CSS selector isnt ideal as it takes longer to process. However how much is this really an issue? How much longer will it take a page to be displayed if I have the following in my CSS?
#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important;
}
It seems to me that the connection speed and number of large assets like images is going to make far more of a difference. The work im doing is for mobile optimization but the page size (due to various libraries) is around 750KB and there is nothing I can do about this.
As a side note im aware that using !important isnt ideal too but the messy code ive inherited means its required in this case.
Read this article.
The key to optimizing CSS selectors is to focus on the rightmost
selector, also called the key selector (coincidence?). Here’s a much
more expensive selector: A.class0007 * {}. Although this selector
might look simpler, it’s more expensive for the browser to match.
Because the browser moves right to left, it starts by checking all the
elements that match the key selector, “*“. This means the browser must
try to match this selector against all elements in the page.