What is the CSS border insertion algorithm that is most suitable?

Question

I noticed that every browser does a border-style: inset; differently, so I had two questions:

• Why do browsers look different? How can there be so many different algorithms for this? Most of all, some browsers look wrong with this!

• Since I cannot rely on the insert attribute, I was wondering what the correct "algorithm" is? I usually use 16 brighter on top / left and 16 darker on bottom / right (i.e. #666666 is the background, therefore #767676 is top / left and #565656 is bottom / right)

I need to know what to use (generally speaking), because I am having trouble inserting styles, and I obviously can't use the insert correctly, so I need to manually change the colors. Sometimes, however, it just does not look right (if it is too dark). Should there be a good algorithm for this?

I was looking for web resources on this issue (for example, “what colors should your borders be in order to make this paste tool!”) Or anything that could help, and didn't find anything.

Think of it this way: If someone did something in the drawing program and did not have an insert effects button, what colors will all four borders have, given that the primary color is _____ ?

There should be a general algorithm that I cannot find ...

Edit: I want to point out an example of using a paint program that needs an insert style. Can someone give me an example of what they will use for this? (Is this part of the question better directed to the constructors stack?)

Answer 1

Quote: "1. Why do browsers do this differently?

I am sure every browser does it differently because they think they look the best. IE probably makes it look good on Windows. Safari makes them compatible with the look and feel of Mac OS. Firefox according to this browser other elements, etc. (And, as stated at thirty, it was not standardized.)

Quote: "2. Since I cannot rely on a valid insert attribute, I was wondering what the correct algorithm is?

You can try to change it if it is important. Set up a test page and call it in your browser. Use the eye-dropper / color-picker utility to select different colors. With enough samples, you should find a template for this browser.

Quote: "There must be a general algorithm that I cannot find ..."

Not if every browser does it differently. Each of them will have its own algorithm.

---

EDIT for later observation of the OP:

Quote: “Edit: I want to point out an example of using a drawing program that needs an insert style. Can someone give me an example of what they will use for this? (Is this part of the question better directed to the constructors stack?)

You seem to be looking for one specific answer that doesn't exist. I can’t give you an example of what I will use, since modern graphics programs (Photoshop) will do this for me and then give me enough options that literally give millions of results when combined; frame color, backlight color, shadow color, depth, angle, thickness, profile, etc. Ask 20 people what they consider to be an “ideal” insert, and you will get 20 different answers (opinions really), and then we will return to the reason why it looks different in each browser (see No. 1 above). So yes, in the context of "programming" issues, this last part of your OP is probably off topic.

Additional random thoughts:

Why is border-style not standardized? IMHO, I think this property is simply not used enough to require any serious standardization efforts, or perhaps there is a lot of controversy in the standards community. I believe that all CSS properties that require standardization, in some way, take precedence (popularity, utility?), And this one has not yet made a cut or combined all of them. Personally, I believe that such property is too closely linked to constantly changing trends. those. - 10 years ago we saw to see many tables with very thick "embossed" borders. Nowadays, many projects use multiple borders or very thin borders, if any. Again, this is only a matter of taste and opinion.

Answer 2

I have an answer to this question:

• Why do browsers look different? How can there be so many different algorithms for this? Most all, some browsers do not look right with this!

See: http://www.w3.org/TR/CSS21/box.html#border-style-properties

The color of the borders drawn for the values ​​“groove”, “ridge”, “insert” and “start” depends on the element of the border color property, but UAs can choose their own algorithm for calculating the actual colors used . For example, if “border color” is “silver,” then UA use a white to dark gray color gradient to indicate the slope of the border.

That the difference in implementation is different in that it is not standardized.

Answer 3

I would say that for the lighter side, add 20% to each of the rgb values, and for the dark side, remove 20% of each RGB value.