我们知道 一些css属性具有longhands概念
比如margin的完整形式是 ['margin-top', 'margin-right', 'margin-bottom', 'margin-left']
那么自然而然的
我想知道 一共有哪些属性具有longhands概念 具体是什么
查找了mdn spec都无果
只好去chromium里探索一下 试试运气
当然这次运气很好
直接放出结果如下 以飨读者
tips: 可以放到devtools里执行 获得更好的视觉体验
tips: 不一定全 因为这只是chromium的 所以其他浏览器独有的可能不全 而且也不保证对chromium就完整 当然欢迎补充讨论
const all = {
"text-box": [
"text-box-trim",
"text-box-edge"
],
"text-spacing": [
"text-autospace",
"text-spacing-trim"
],
"white-space": [
"white-space-collapse",
"text-wrap-mode"
],
"text-wrap": [
"text-wrap-mode",
"text-wrap-style"
],
"animation": [
"animation-duration",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"animation-play-state",
"animation-name"
],
"-alternative-animation-with-timeline": [
"animation-duration",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"animation-play-state",
"animation-name",
"animation-timeline",
"animation-range-start",
"animation-range-end"
],
"animation-range": [
"animation-range-start",
"animation-range-end"
],
"background": [
"background-image",
"background-position-x",
"background-position-y",
"background-size",
"background-repeat",
"background-attachment",
"background-origin",
"background-clip",
"background-color"
],
"background-position": [
"background-position-x",
"background-position-y"
],
"border": [
"border-top-color",
"border-top-style",
"border-top-width",
"border-right-color",
"border-right-style",
"border-right-width",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-left-color",
"border-left-style",
"border-left-width",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat"
],
"border-block": [
"border-block-start-color",
"border-block-start-style",
"border-block-start-width",
"border-block-end-color",
"border-block-end-style",
"border-block-end-width"
],
"border-block-color": [
"border-block-start-color",
"border-block-end-color"
],
"border-block-end": [
"border-block-end-width",
"border-block-end-style",
"border-block-end-color"
],
"border-block-start": [
"border-block-start-width",
"border-block-start-style",
"border-block-start-color"
],
"border-block-style": [
"border-block-start-style",
"border-block-end-style"
],
"border-block-width": [
"border-block-start-width",
"border-block-end-width"
],
"border-bottom": [
"border-bottom-width",
"border-bottom-style",
"border-bottom-color"
],
"border-color": [
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color"
],
"border-image": [
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat"
],
"border-inline": [
"border-inline-start-color",
"border-inline-start-style",
"border-inline-start-width",
"border-inline-end-color",
"border-inline-end-style",
"border-inline-end-width"
],
"border-inline-color": [
"border-inline-start-color",
"border-inline-end-color"
],
"border-inline-end": [
"border-inline-end-width",
"border-inline-end-style",
"border-inline-end-color"
],
"border-inline-start": [
"border-inline-start-width",
"border-inline-start-style",
"border-inline-start-color"
],
"border-inline-style": [
"border-inline-start-style",
"border-inline-end-style"
],
"border-inline-width": [
"border-inline-start-width",
"border-inline-end-width"
],
"border-left": [
"border-left-width",
"border-left-style",
"border-left-color"
],
"border-radius": [
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius"
],
"border-right": [
"border-right-width",
"border-right-style",
"border-right-color"
],
"border-spacing": [
"-webkit-border-horizontal-spacing",
"-webkit-border-vertical-spacing"
],
"border-style": [
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style"
],
"border-top": [
"border-top-width",
"border-top-style",
"border-top-color"
],
"border-width": [
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width"
],
"contain-intrinsic-size": [
"contain-intrinsic-width",
"contain-intrinsic-height"
],
"container": [
"container-name",
"container-type"
],
"flex": [
"flex-grow",
"flex-shrink",
"flex-basis"
],
"flex-flow": [
"flex-direction",
"flex-wrap"
],
"font": [
"font-style",
"font-variant-ligatures",
"font-variant-caps",
"font-variant-numeric",
"font-variant-east-asian",
"font-variant-alternates",
"font-variant-position",
"font-variant-emoji",
"font-weight",
"font-stretch",
"font-size",
"line-height",
"font-family",
"font-optical-sizing",
"font-size-adjust",
"font-kerning",
"font-feature-settings",
"font-variation-settings"
],
"font-variant": [
"font-variant-ligatures",
"font-variant-caps",
"font-variant-alternates",
"font-variant-numeric",
"font-variant-east-asian",
"font-variant-position",
"font-variant-emoji"
],
"font-synthesis": [
"font-synthesis-weight",
"font-synthesis-style",
"font-synthesis-small-caps"
],
"grid": [
"grid-template-rows",
"grid-template-columns",
"grid-template-areas",
"grid-auto-flow",
"grid-auto-rows",
"grid-auto-columns"
],
"place-content": [
"align-content",
"justify-content"
],
"place-items": [
"align-items",
"justify-items"
],
"place-self": [
"align-self",
"justify-self"
],
"grid-area": [
"grid-row-start",
"grid-column-start",
"grid-row-end",
"grid-column-end"
],
"grid-column": [
"grid-column-start",
"grid-column-end"
],
"gap": [
"row-gap",
"column-gap"
],
"grid-row": [
"grid-row-start",
"grid-row-end"
],
"grid-template": [
"grid-template-rows",
"grid-template-columns",
"grid-template-areas"
],
"inset": [
"top",
"right",
"bottom",
"left"
],
"inset-block": [
"inset-block-start",
"inset-block-end"
],
"inset-inline": [
"inset-inline-start",
"inset-inline-end"
],
"list-style": [
"list-style-position",
"list-style-image",
"list-style-type"
],
"margin": [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
],
"margin-block": [
"margin-block-start",
"margin-block-end"
],
"margin-inline": [
"margin-inline-start",
"margin-inline-end"
],
"marker": [
"marker-start",
"marker-mid",
"marker-end"
],
"masonry-track": [
"masonry-track-start",
"masonry-track-end"
],
"offset": [
"offset-position",
"offset-path",
"offset-distance",
"offset-rotate",
"offset-anchor"
],
"outline": [
"outline-color",
"outline-style",
"outline-width"
],
"overflow": [
"overflow-x",
"overflow-y"
],
"overscroll-behavior": [
"overscroll-behavior-x",
"overscroll-behavior-y"
],
"padding": [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
],
"padding-block": [
"padding-block-start",
"padding-block-end"
],
"padding-inline": [
"padding-inline-start",
"padding-inline-end"
],
"page-break-after": [
"break-after"
],
"page-break-before": [
"break-before"
],
"page-break-inside": [
"break-inside"
],
"position-try": [
"position-try-order",
"position-try-options"
],
"-alternative-position-try": [
"position-try-order",
"position-try-fallbacks"
],
"scroll-margin": [
"scroll-margin-top",
"scroll-margin-right",
"scroll-margin-bottom",
"scroll-margin-left"
],
"scroll-margin-block": [
"scroll-margin-block-start",
"scroll-margin-block-end"
],
"scroll-margin-inline": [
"scroll-margin-inline-start",
"scroll-margin-inline-end"
],
"scroll-padding": [
"scroll-padding-top",
"scroll-padding-right",
"scroll-padding-bottom",
"scroll-padding-left"
],
"scroll-padding-block": [
"scroll-padding-block-start",
"scroll-padding-block-end"
],
"scroll-padding-inline": [
"scroll-padding-inline-start",
"scroll-padding-inline-end"
],
"scroll-start": [
"scroll-start-block",
"scroll-start-inline"
],
"scroll-start-target": [
"scroll-start-target-block",
"scroll-start-target-inline"
],
"scroll-timeline": [
"scroll-timeline-name",
"scroll-timeline-axis"
],
"text-decoration": [
"text-decoration-line",
"text-decoration-thickness",
"text-decoration-style",
"text-decoration-color"
],
"transition": [
"transition-property",
"transition-duration",
"transition-timing-function",
"transition-delay",
"transition-behavior"
],
"view-timeline": [
"view-timeline-name",
"view-timeline-axis",
"view-timeline-inset"
],
"-webkit-column-break-after": [
"break-after"
],
"-webkit-column-break-before": [
"break-before"
],
"-webkit-column-break-inside": [
"break-inside"
],
"column-rule": [
"column-rule-width",
"column-rule-style",
"column-rule-color"
],
"columns": [
"column-width",
"column-count"
],
"mask": [
"mask-image",
"-webkit-mask-position-x",
"-webkit-mask-position-y",
"mask-size",
"mask-repeat",
"mask-origin",
"mask-clip",
"mask-composite",
"mask-mode"
],
"-webkit-mask-box-image": [
"-webkit-mask-box-image-source",
"-webkit-mask-box-image-slice",
"-webkit-mask-box-image-width",
"-webkit-mask-box-image-outset",
"-webkit-mask-box-image-repeat"
],
"mask-position": [
"-webkit-mask-position-x",
"-webkit-mask-position-y"
],
"text-emphasis": [
"text-emphasis-style",
"text-emphasis-color"
],
"-webkit-text-stroke": [
"-webkit-text-stroke-width",
"-webkit-text-stroke-color"
]
}
