What exactly are the min and max prefixes in CSS? And are there any docs that explain them in detail?
If you're talking about min-width and max-width (-height), they are not "prefixed". There are simply rules that are called min-width and max-width and also a rule that's called width. These are completely different rules that do different (albeit similar) things.
Perhaps see http://www.quirksmode.org/css/width.html and https://developer.mozilla.org/en/CSS_Reference.
For min-width, max-width, min-height and max-height, you can find details in the CSS 2.1 specification at http://www.w3.org/TR/CSS21/visudet.html#min-max-widths (description for height is a bit further down).
You might be interested by the algorithm description ("The following algorithm describes how the two properties influence the used value of the 'width' property:"). Basically, what seems to be going on is that a tentative width is computed ignoring the min-width and max-width properties. If it is larger than max-width, computation takes place again as if a width value of max-width had been specified. If the result is smaller than min-width, same thing with a width value equal to that of min-wdith.
Related
If I want to change the shape of a website page with a width and height of 600px and change its shape. Which one should I use?
Max width/height
Or
Min width/height.
🤔
I hope you can help me in this matter that I asked about media query in css
A maximum width can be specified for elements using the max-width property.
When we don't want the width of an element to exceed a certain value, we can use this feature to determine that value for the element.
By using the min-width and max-width properties, you can set a range for the width of an element.
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small windows.
I'm trying to establish which CSS property takes priority - min-height or max-height - and whether this is consistent across browsers.
For example, consider the following:
.class{
min-height:600px;
max-height: 50vh;
}
If the browser viewport was 1000px tall, the min-height (600px) would be greater than the max-height (50vh = 500px). I know it's a slight paradox, but perfectly possible and likely (coding best practices aside).
As far as I can see from testing, the min-height takes priority, even if the element ends up exceeding the max-height as a result - i.e. the element is rendered at 600px high, even though the max-height is 500px;
Is this expected standardised behaviour? Or is this something that's open to interpretation by browser vendors, and may vary between browsers or devices.
Yes min-height is always the winner according to the specification:
The following algorithm describes how the two properties influence the used value of the 'height' property:
The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.
As you can see, the min-height is the last one to be proceeded. We first calculate the height without min/max. Then we introduce max-height that may change the computed value of height and at the end we do the same with min-height.
Worth to note that the same happen with min-width ref
As far as I know, nothing can override min-height/width, even the shrink feature of flexbox cannot make an element shrink past its min-height/width. Related: Why is a flex item limited to parent size?
Also related: min-width and max-width with the same value?
In this following code i can't understand the function of max-width?and my instructor have written:"It sets max-width:1170px, because when you add the left and right padding with the max-width, you get 1200px which is our large device breakpoint." I hope u can reply on me.Thanks in advance
The max-width property defines the maximum width of an element. This means that if the width is calculated dynamically, it will never exceed the max-width value, but it could be any value smaller.
In your instructors example, the max-width + the side padding will add up to the screen width. This ensures the maximum width of the element never exceeds the width of the screen.
Hope that helps.
max-width
The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration
Using max-width instead of width in this situation will improve the browser's handling of small windows.
This is important when making a site usable on mobile.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
It's easy enough to set an element's height depending on its width using tricks such as setting margin-top: AR%, with AR being the aspect ratio of the element.
However, I'd like to do something the other way around.
Namely, I'd like to set the element's min-width to be equal to the element's height, which may be dynamic based on content.
If this isn't possible, that's okay - it's only needed for user-generated content, since the cases where I use it have a static and known height! It's fairly minor, but if it can be done then that'd be great.
Anyone got any ideas?
I have never heard of this intrinsic value before until I come across this page on MDN.
From what I know intrinsic means natural. So how does this work out in CSS. I thought that auto would have been natural. I've searched around a bit but can't find anything on it.
What does it do different than auto?
The example I saw was max-width: intrinsic;
It looks like the intrinsic value is part of the newer CSS3 sizing module:
http://dev.w3.org/csswg/css-sizing/
I have not used it yet but perhaps the reference will provide you with more information.
Based on a quick review, this module would make it easier to specify how content fills the width and height of a parent containing block.
At the moment, JavaScript functions are often used to compute widths and heights of container blocks based on % values for variable child elements content.
It allows you to set the width of an element to stretch wide enough to accommodate its children. So, if a div element contained a wide image and some text, the div would stretch wide enough to accommodate the image, and the text would begin breaking at that threshold.
Definitely experimental and not widely supported: http://caniuse.com/intrinsic-width
Intrinsic sizing determines sizes based on the contents of an element,
without regard for its context.
http://dev.w3.org/csswg/css-sizing/#intrinsic-sizing
I have found that in iOS8, flexbox children may not always try to contain all their children and instead max their height to the available viewport.
min-height: min-intrinsic fixes that problem.