properties.ts•4.32 kB
/**
* Display Properties - CSS display and layout properties
*/
import { CSSFeature, CSSFeatureCategory } from '../../types.js';
export const DISPLAY_FEATURES: Record<string, CSSFeature> = {
"display-basic": {
name: "CSS Display Property",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Controls the display behavior and box generation of elements",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display",
},
"display-contents": {
name: "Display Contents",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Makes the element's box disappear while keeping its children in the document flow",
support_level: "good",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents",
},
"display-flex": {
name: "Flexbox Display",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Establishes a flex formatting context for direct children",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#flex",
},
"display-grid": {
name: "Grid Display",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Establishes a grid formatting context for direct children",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#grid",
},
"display-inline": {
name: "Inline Display Values",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Inline display types including inline, inline-block, inline-flex, inline-grid",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline",
},
"display-block": {
name: "Block Display Values",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Block-level display types including block, flow-root",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#block",
},
"display-table": {
name: "Table Display Values",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Table-related display values for creating table-like layouts",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#table",
},
"display-none": {
name: "Display None",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Completely removes the element from the document flow and rendering",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#none",
},
"display-list-item": {
name: "List Item Display",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Makes element behave like a list item with marker box",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#list-item",
},
"display-flow-root": {
name: "Flow Root Display",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Creates a new block formatting context without side effects",
support_level: "good",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root",
},
"display-subgrid": {
name: "Subgrid Display",
category: CSSFeatureCategory.DISPLAY,
properties: ["display"],
description: "Inherits grid tracks from parent grid container",
support_level: "limited",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid",
}
};
export const DISPLAY_KEYWORDS = [
'display',
'display: contents',
'display: flex',
'display: grid',
'display: block',
'display: inline',
'display: inline-block',
'display: inline-flex',
'display: inline-grid',
'display: table',
'display: table-cell',
'display: table-row',
'display: none',
'display: list-item',
'display: flow-root',
'display: subgrid',
'contents',
'flex',
'grid',
'block',
'inline',
'inline-block',
'table',
'none',
'list-item',
'flow-root',
'subgrid',
'formatting context',
'box generation',
'layout'
];