CSS 표시 사용 방법: 내용?

display: content는 상대적으로 생소한 속성입니다. display는 기본적으로 가장 일반적인 CSS 속성이지만, content의 값은 거의 사용되지 않습니다. 하지만 2016년부터 Firefox에서 지원되었습니다.

이 글에서는 이 흥미로운 속성 값에 대해 자세히 살펴보겠습니다.

기본 사용법

W3C의 디스플레이 정의에 따르면: 콘텐츠.

요소 자체는 상자를 생성하지 않지만 해당 하위 요소와 의사 요소는 여전히 상자를 생성하고 텍스트는 정상적으로 실행됩니다. 상자 생성 및 레이아웃을 위해 요소는 다음에서 대체된 것처럼 처리되어야 합니다. 콘텐츠별 요소 트리(소스 문서 하위 요소와 일반적으로 요소의 하위 요소 앞/뒤에 생성되는 ::before 및 ::after 의사 요소와 같은 의사 요소 포함).

간단한 번역 즉, 이 속성 값이 설정된 요소는 자체 상자를 생성하지 않지만 하위 요소의 일반적인 표시를 유지합니다.

간단한 예를 살펴보세요. 다음과 같은 간단한 3계층 구조가 있습니다.

<div class="container">
    <div class="wrap">
        <div class="inner"></div>
    </div>
</div>

간단한 CSS는 다음과 같습니다.

.container {
    width: 200px;
    height: 200px;
    background: #bbb;
}
.wrap {
    border: 2px solid red;
    padding: 20px;
    box-sizing: border-box;
}
.inner {
    border: 2px solid green;
    padding: 20px;
    box-sizing: border-box;
}

성능은 다음과 같습니다.

이것은 매우 이해하기 쉽지만, display:contents를 추가하면 중간 레이어에 있는 컨테이너, 효과를 살펴보겠습니다.

<div class="container">
    <div class="wrap" style="display: contents">
        <div class="inner"></div>
    </div>
</div>

중간 레이어 테두리의 빨간색 테두리가 없는 것을 볼 수 있습니다. 2px 단색 빨간색, 전체 .wrap div가 존재하지 않는 것처럼 보이지만 하위 요소 정상적으로 렌더링됩니다.

중요한 점은 display:contents가 설정된 요소 자체는 렌더링되지 않지만 해당 하위 요소는 정상적으로 렌더링될 수 있다는 것입니다.

이 속성에 매우 적합한 사용 포인트는 무엇인지 생각해 왔습니다.

요약하자면 이 속성은 래퍼 역할을 하는 요소에 적합합니다. 이러한 요소 자체는 효과가 없으며 일부 레이아웃 시나리오에서는 무시될 수 있습니다.

의미 없는 포장 상자 역할을 합니다

최근 React와 Vue를 작성할 때 이 속성이 JSX를 작성할 때 매우 좋은 역할을 할 수 있다는 것을 알았으며 이 속성의 위치와도 매우 일치합니다. 그 자체.

React와 RN을 작성할 때 템플릿을 출력해야 하는 경우가 종종 있습니다.

return (
    <div class="wrap">
        <h2>Title</h2>
        <div>...</div>
    </div>
)

.wrap div 내의 콘텐츠를 출력하고 싶지만 프레임워크 요구 사항으로 인해 출력 JSX 템플릿이 상위 요소 아래에 포함되어야 하므로 최후의 수단으로 래핑을 위해 .wrap을 추가해야 합니다. 하지만 이 .wrap 자체는 Any 스타일이 아닙니다.

출력 요소를 다른 디스플레이(flex, 디스플레이: 그리드 컨테이너) 아래에 배치하려면 의미 없는 .wrap 레이어를 추가한 후 전체 레이아웃을 다시 조정해야 하는데 이는 번거로운 작업입니다.

한 가지 방법은 페이지에 추가 노드를 삽입하지 않는 프레임워크에서 제공하는 컨테이너 를 사용하는 것입니다.

Vue에서 비슷한 것은

이 추가 상위 요소는 실제로 필요하지 않습니다. 이때 다음과 같이 display: 내용을 추가할 수도 있습니다.

return (
    <div class="wrap" style="display: contents">
        <h2>Title</h2>
        <div>...</div>
    </div>
)

이렇게 하면 포장 역할을 할 뿐만 아니라 실제 렌더링에서 이 div는 실제로 상자를 생성하지 않으므로 하나로 두 마리의 새를 죽일 수 있습니다. 결석. 일부 Flex 레이아웃과 그리드 레이아웃은 영향을 받지 않습니다.

Codepen 데모 -- 디스플레이: 내용 | 디스플레이: flex 침투 효과

로 인해 코드가 더욱 의미있게 됩니다.

이 매우 실용적인 시나리오를 고려해보세요. 이제 페이지가 클릭 가능한 버튼으로 가득 차 있습니다. 또는 텍스트를 클릭하세요. 해당 기능을 트리거하는 기타 요소. 그러나 의미상으로는 하나씩 이어야 하지만 실제로는

,

, 와 같은 태그를 사용하여 해당 클릭 이벤트를 그들을.

다음과 같이 문제는 없지만 상대적으로 의미가 덜합니다.

<p class="button">
    Button
</p>
<p class="button">
    Click Me
</p>

.button {
    width: 120px;
    line-height: 64px;
    text-align: center;
    background-color: #ddd;
    border: 2px solid #666;
}

을 사용하지 않는 이유는 많지만, 은 div에 비해 그다지 좋지 않습니다. 제어하고 다양한 기본 스타일을 도입합니다. 그러나 display:contents를 사용하면 코드 의미를 만들 수 있으며 로 인해 발생하는 일부 스타일 문제를 해결할 필요가 없습니다.

<p class="button">
    <button style="display: contents">
        Button
    </button>
</p>
<p class="button">
    <button style="display: contents">
        Click Me
    </button>
</p>

添加了 Click Me 的包裹，不会对样式带来什么影响，button 也不会实际渲染在页面结构中，但是页面的结构语义上好了不少。

CodePen Demo -- Button with display: contents

对于对页面结构、语义化有强迫症的一些同学而言，灵活运用这个属性可以解决很多问题。

在替换元素及表单元素中一些有意思的现象

display: contents 并非在所有元素下的表现都一致。

对于可替换元素及大部分表单元素，使用 display: contents 的作用类似于 display: none。

也就是说对于一些常见的可替换元素、表单元素：

作用了 display: contents 相当于使用了 display: none ，元素的整个框和内容都没有绘制在页面上。

的一些异同

与其他表单元素不一样，正常而言，添加了 display: contents 相当于被隐藏，不会被渲染。但是实际运用过程中发现， 如果包裹了内容，其一些可继承样式还是会被子内容继承。这个实际使用的过程中需要注意一下。

对 A11Y 的影响

在一些外文文档中有一些讨论是关于 display: contents 的使用会影响到页面的可访问性。例如作用了 display: contents 的容器及列表，会对页面的可访问性带来一些意外结果。

[css-a11y][css-display] display: contents; strips semantic role from elements

这个我看暂时没有明确的结论，如果你的页面对可访问性的要求很高，具体使用的此属性的话也是需要注意一下这一点。

CSS 中类似的一些影响布局的属性

CSS 本身其实也在一直在努力，增加了各种属性去让我们在布局上有更多的空间与控制权。总而言之给我的感受是让 CSS 更加的像是一个完整的工程而不仅仅只是展现样式。

类似的一些有意思的属性：

CSS新特性contain，控制页面的重绘与重排 

CAN I USE

看看兼容性。

不算太惨淡，但也不算全面普及。考虑用在一些渐进增强的场景当中。

推荐教程：《CSS教程》