Skip to content

[css-backgrounds] Order of values for border shorthands is unclear #5100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
vwkd opened this issue May 22, 2020 · 3 comments
Closed

[css-backgrounds] Order of values for border shorthands is unclear #5100

vwkd opened this issue May 22, 2020 · 3 comments
Labels
Closed Accepted as Editorial Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-backgrounds-3 Current Work

Comments

@vwkd
Copy link
Contributor

vwkd commented May 22, 2020

The definitions of the order of values for the shorthands border-color, border-style and border-width seem a bit unclear. For all three the spec states

If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

So what happens with three or two values, e.g. border-width: a b c or border-width: a b? How does it know which side I left out?

By trial and error I know the order is the same as for the margin and padding shorthands. The definitions of margin and padding are much clearer though. The spec states

If there is only one component value, it applies to all sides. If there are two values, the top and bottom [..] are set to the first value and the right and left [..] are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.

I would suggest taking over this part of the definition from margin / padding for the border properties as well.

@Loirooriol
Copy link
Contributor

The full syntax is like border-width: top right bottom left.
If you only provide 3 values (border-width: top right bottom), then left is missing.
If you only provide 2 values (border-width: top right), then bottom and left are missing.
If you only provide 1 value (border-width: top), then right, bottom and left are missing.

So you know which sides are missing because you match greedily, sides can only be omitted at the end.

@vwkd
Copy link
Contributor Author

vwkd commented May 22, 2020

Ok thanks, I understand now. The sentence assumed that for each left out value the ones following it were also left out. So a somewhat clearer formulation would be

If left is missing, it is the same as right; if in addition to that bottom is missing, it is the same as top; if in addition to that right is missing, it is the same as top.

Still the margin / padding definitions seem the clearest.

@fantasai
Copy link
Collaborator

Merged your pull request, thanks! Looks very clean. :) Closing out the issue, but filed #5687 as a follow-up.

@fantasai fantasai added Closed Accepted as Editorial Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. labels Oct 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted as Editorial Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-backgrounds-3 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants