Is it possible to get the difference between width and max-width for a CSS class? For example, let consider the following class:
.className {
width: 100mm;
max-width: 100vw;
}
If the container is smaller than 100mm, let's say it is 90mm, then the difference would be 10mm. Then based on that difference apply different styling, similar to as one would with a media query for different screen sizes.
The use case being, className is 10% (10mm of 100mm) smaller than expected and there for all sub-components in it need to be scaled down by 10% to maintain their relative size.
If not possible with straight CSS can this be done with SASS/SCSS or maybe stylus or LESS?
Related
I would like to decrease a certain margin's size by 25% in certain cases. I could do this by looking at it's base value and manually entering 75% of the value. However, the margin's base size varies according to client screen resolution.
Therefore I would like to decrease the already defined margin value by 25%.
If one were to be doing an analogous thing in Python programming, the equivalent would thus be:
margin = some_base_value
...
margin = 0.75*margin
Can I do this in CSS, and if so, how?
I recommend you to use Sass or LESS ,
so you can use variables.
Example: (Sass (SCSS))
$margin: 10px;
#element {
margin: $margin*.75;
}
.. if you don't want to use any css preprocessor, you can use css variables with calc function.
I have a pseudo element that appears on hover with:
height: 0.4vh;
The height doesn't change, only the width does. For some reason, however, under certain conditions the heights of different pseudo elements differ (both of the darker lines here have height: 0.4vh):
I put up this fiddle to demonstrate, but realise that it depends on the viewport height whether this weirdness happens:
https://jsfiddle.net/vuw693La/
I am having this issue on Chromium and Firefox. Am I doing something wrong or is there no way to be "pixel perfect" with vh units?
There's some imprecision in browser renderings, especially when percentages or viewport units come into play. In this case, I'd consider whether it's actually worth it to make the height of those lines tied to the viewport. It seems limited to within a few pixels of variance for most screen sizes; maybe either set one size for it, or set static sizes at several breakpoints to gradually scale it up.
.icon_piece::after { height: 1px; }
// tweak breakpoints to whatever works best for your design
#media (min-height: 600px) {
icon_piece::after { height: 2px; }
}
#media (min-height: 900px) {
icon_piece::after { height: 3px; }
}
Some browsers have inconsistencies when using viewport units, specially smaller than 1vw or 1vh.
The way I solved this problem is by assigning larger units (multiplying them by 4 for example) and then using transform: scale(0.25); to get the element back to the desired size.
This is not a straightforward solution as you probably will have to rearrange your code to make it work but I couldn't find any other workaround.
Using CSS, how can I size a box's height in terms of its (or its parent's) line-height?
This would allow easily making regions of text an exact multiple of a number of lines, e.g. to allow showing exactly three lines.
I don't want a javascript solution as those are generally slow and interact poorly with dynamically re-rendered layouts.
Edit: The line-heights in my case are specified in unit-less numbers, as recommended on MDN, so it'd be handy if line-height units weren't required to get this to work.
I'm not sure I've entirely understood the question, but couldn't you just use relative units - ems?
If the line height is, for example, 2ems (or unitless) and you want the total height of the box to be 3 "lines" high (presumably not taking into account padding) then you could set the height to be 6ems. This way, the line height is flexible based on your base unit (font size) and the height will also be fluid using the same base unit.
Here's an example:
.myBox {
line-height: 2; // this will be twice the value of the font-size
height: 6ems; // equivalent to 3 lines high
To achieve the same thing in SASS you could write:
$lineheight: 2; // this value can be unitless or a unit like ems, px or percentage
$numberoflines: 3;
.myBox {
line-height: $lineheight;
height: $lineheight * $numberoflines;
}
This would have the flexibility for you to move your variables into a settings file so that you (or someone else) can easily alter the values without having to find all the selectors that use the variables.
I know that #media can be used to detect properties of the whole viewport, and then switch among CSS rule sets based on different types of media/widths, etc ..
But how does one switch between CSS rules based on the width of parent div, etc ?
This code preview shows the footer of my page, with some elements changed/removed:
Liveweave: http://liveweave.com/JtUxpF (Switch to Split V or View mode from the top menu)
On the right side of the footer, there is a small form (marked with the red arrow in the picture above). This form has a #media separation applied to it, like so:
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
#media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
Problem:
My idea was to actually apply CSS rules based on the width available to the form from the parent div. However the CSS rules are currently applied based on the width of the screen/viewport.
If you reduce your window's width to less than 270 pixels, you'll see the visual change in the form's look!
So how can I choose and apply between two different sets of CSS rules, based on the width available to the form, instead of the viewport width itself ?
Not possible in pure css. The equivalents of "if" statements in css is currently limited to media queries and selectors, neither of which get you what you need. You can use something like less or sass to do what you're trying to do, or you can generate rules dynamically using a server-side or javascript approach.
sass: http://sass-lang.com/
less: http://lesscss.org
There is some support for math in css (calc()), but no ability to use those as conditional clauses.
I want to have a calclation that is based on the width and height of the window
I know I can use #media min-width: 700px to have css work only when width is 700px at minimum.
is there a way to have something like this?:
$calc = percentage((#media.width)/200)*3);
div{
width: $calc
}
in which I use the width or height of the window in my calculation the same way that the css checks for the current width and compares it with the min-width
take a look at jquery ..
http://api.jquery.com/width/
http://api.jquery.com/height/
In the mean while, can you elaborate your question. What is the context of the code you want to write ? PHP, css, html, javascript ??
Also, take a look at the CSS function Calc()
http://caniuse.com/calc
Carry on.