[css-position-3] Section 3.5.1 Conflicts with CSS2 Positioning Behavior #11258
Comments
|
Examples (tested in both Chrome and Firefox) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#parent {
position: relative;
width: 200px;
height: 200px;
border: 5px solid black;
}
#child {
position: absolute;
background-color: red;
left: 10px;
width: 100px;
height: 50px;
/* Computes to 90px in compliance with CSS 2, Case 6 */
/* https://drafts.csswg.org/css2/#abs-non-replaced-width */
right: auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#parent {
position: relative;
width: 200px;
height: 200px;
border: 5px solid black;
}
#child {
position: absolute;
background-color: red;
left: 10px;
width: 100px;
height: 50px;
/*
According to Section 3.5.1, 'auto' is converted to 0.
The rendered output complies with the CSS 2 specification,
which states: "solve the equation under the extra constraint
that the two margins get equal values."
https://drafts.csswg.org/css2/#abs-non-replaced-width
*/
right: 0;
margin-left: auto; /* 45px */
margin-right: auto; /* 45px */
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
|
Of course these are overridden by CSS Position and CSS Align.
Your examples seem to behave the same. https://drafts.csswg.org/css-position/#abspos-margins
|
|
OK, now I get what you are saying. When the spec says "If only one inset property in a given axis is auto, it is set to zero", this is just for computing the inset-modified containing block. It's still I guess it might be clarified a bit. |
What is the expected output for the first example under CSS3 ? #child {
position: absolute;
background-color: red;
left: 10px;
width: 100px;
height: 50px;
/* Computes to 90px in compliance with CSS 2, Case 6 */
/* https://drafts.csswg.org/css2/#abs-non-replaced-width */
right: auto;
margin-left: auto;
margin-right: auto;
} const element = document.getElementById("child");
const styles = getComputedStyle(element);
console.log("Right:", styles.right); |
|
Good point. I'm not sure if it would be web compatible to change it, but even if so, it wouldn't be great if you get |
|
So I think we need the 2nd option from #11242 (comment) |
I agree. |
|
Not to imply any lack of appreciation for the proposed solution, I must admit I struggle to understand the value the new 'inset-modified containing block' based model brings compared to the CSS2 'containing block equation model'. |
|
The "new model" proposes the following mental approach:
Now, consider the first example in this issue using the proposed solution: #child {
position: absolute;
background-color: red;
left: 10px;
width: 100px;
height: 50px;
right: auto;
margin-left: auto;
margin-right: auto;
}
It is this second step that still requires developers to think about offsets relative to the containing block, which essentially exercises the same mental model as in CSS2. |
The rule in Section 3.5.1 states:
This implies that when one inset property (e.g., left or right) is
autoand the other is not, theautovalue is replaced with 0. Consequently, both inset properties on that axis are treated as having non-autovalues, with one being explicitly set to zero.However, the CSS2 specification defines several rules that depend on scenarios where one inset property is
autoand the other is not. For example, from CSS 2, Section 10.3.7:Case 1:
leftandwidthareauto, andrightis notauto; then thewidthis shrink-to-fit, and solve forleft.Case 3:
widthandrightareauto, andleftis notauto; then thewidthis shrink-to-fit, and solve forright.Case 4:
leftisauto, andwidthandrightare notauto; then solve forleft.By automatically setting an
autoinset to zero when the other inset on the same axis is non-auto, the CSS Positioned Layout Module Level 3 invalidates these cases from CSS2 and would result in a different positioning behavior according to other CSS2 absolute position specification.The text was updated successfully, but these errors were encountered: