Repository navigation
MDN Border-image generator: Move border-image-source to the end in CSS Code output #93
Description
Activity
- changed the title
[-]MDN Border Image Generator: Move `border-image-source` to the end in `CSS Code` output[/-][+]MDN Border-image generator: Move `border-image-source` to the end in `CSS Code` output[/+]on Nov 6, 2022 - changed the title
[-]MDN Border-image generator: Move `border-image-source` to the end in `CSS Code` output[/-][+]`MDN Border-image generator`: Move `border-image-source` to the end in `CSS Code` output[/+]on Nov 6, 2022 so current order is:
border-image-slice: 27 27 27 27; border-image-width: 20px 20px 20px 20px; border-image-outset: 0px 0px 0px 0px; border-image-repeat: stretch stretch; border-image-source: url("border-image-1.png"); border-style: solid;
Personally what I usually do is put the
borderdeclaration up front so i don't forget it followed by the image-source. So that would be this:border-style: solid; border-image-source: url("border-image-1.png"); border-image-repeat: stretch stretch; border-image-slice: 27 27 27 27; border-image-width: 20px 20px 20px 20px; border-image-outset: 0px 0px 0px 0px;
FYI, have confirmed that the
border-stylerequirement in Chrome is a bug that will hopefully be getting fixed this year. By the specborder-image-widthalone should be enough to paint the border.Currently, the border properties are roughly ordered by appearance in the tool, except for
border-image-source. It's true that a different order could make more sense.Happy to take this — I'll reorder the
#outputCSS property blocks intools/border-image-generator/index.htmlsoborder-image-sourcecomes last, without changing element IDs.
Currently, properties are listed after the
border-image-sourceproperty, likeborder-style.As
border-image-sourcecontains the encoded image, it can become quite lengthy, and often the image is referenced differently (e.g. by URL or by some asset management in the build step). Hence the developer may copy everything untilborder-image-sourceand then just skip everything else, as there can be a lot to scroll down - and thereby easily miss other important properties, asborder-style(which is required by Chrome to make the border image actually visible).