CSS 단편화로 상자 깨기

이 기사에서는 CSS Fragmentation 사양을 소개하겠습니다. 들어본 적이 없을 수도 있지만 인쇄 스타일시트를 만든 적이 있고 콘텐츠가 페이지 또는 다중 열 레이아웃 사이에서 중단되는 위치를 제어하고 열 사이에서 그림이 중단되는 것을 멈추고 싶다면 이 문제가 발생했습니다.

사람들이 multicol에 대해 보고하는 문제가 실제로는 브라우저의 단편화 지원 문제인 경우가 많습니다. 이 사양에 포함된 속성을 간략히 설명한 후 브라우저 지원의 현재 상태와 다중 열 및 인쇄 프로젝트에서 제대로 작동하도록 할 수 있는 몇 가지 사항에 대해 설명하겠습니다.

단편화란 무엇인가?

CSS의 단편화는 콘텐츠가 다른 상자로 분할되는 프로세스를 설명합니다. 현재 웹에서 단편화에 직면할 수 있는 두 곳이 있습니다. 문서를 인쇄할 때와 다중 열 레이아웃을 사용할 때입니다. 이 두 가지는 본질적으로 동일합니다. 웹 페이지를 인쇄(또는 PDF로 저장)할 때 콘텐츠는 콘텐츠를 인쇄하는 데 필요한 만큼의 페이지로 단편화됩니다.

multicol을 사용하면 콘텐츠가 열로 조각화됩니다. 각 열 상자는 페이징된 컨텍스트의 페이지와 같습니다. 열 집합을 페이지 집합과 매우 유사하게 생각하면 다중 열과 그 안에서 단편화가 작동하는 방식에 대해 생각하는 데 도움이 될 수 있습니다.

CSS 단편화 사양을 살펴보면 세 번째 단편화된 컨텍스트가 언급된 것을 볼 수 있습니다. 해당 컨텍스트는 지역입니다. 현재 사용 가능한 지역 구현이 없기 때문에 이 기사에서는 다루지 않고 대신 작업에서 접할 수 있는 두 가지 컨텍스트를 살펴봅니다.

블록 및 인라인 상자

이 기사에서 블록 상자에 대해 많이 언급할 것입니다. 페이지의 모든 요소에는 상자가 있습니다. 이러한 상자 중 일부는 단락, 목록 항목, 제목과 같은 블록으로 배치됩니다. 이들은 블록 형식화 컨텍스트에 참여한다고 합니다. 단락의 단어, 범위 및 앵커 요소와 같은 다른 요소는 인라인입니다. 이들은 인라인 형식화 컨텍스트에 참여합니다. 간단히 말해서 블록 상자를 참조할 때 단락과 같은 항목을 둘러싼 상자를 말하는 것입니다. 단편화를 다룰 때 어떤 종류의 상자를 다루고 있는지 아는 것이 중요합니다.

블록 및 인라인 레이아웃에 대한 자세한 내용은 MDN 기사 "일반 흐름의 블록 및 인라인 레이아웃"을 참조하십시오. 그것은 우리 모두가 어느 정도 이해하지만 이전에는 용어를 접하지 못했을 수도 있는 것들 중 하나입니다.

휴식 제어

인쇄 스타일시트를 만들든, 특정 인쇄 사용자 에이전트를 사용하여 PDF를 만들든, 또는 multicol을 사용하든, 때때로 다음과 같은 문제에 부딪힐 것입니다.

아래 multicol 예제에는 3개의 열로 표시되는 일부 콘텐츠가 있습니다. 콘텐츠 중간에는 두 개의 열로 나누어져 있는 상자형 영역이 있습니다. 나는 이런 행동을 원하지 않습니다. 상자가 함께 있기를 바랍니다.

이 문제를 해결하기 위해 상자에 break-inside: avoid 속성을 추가합니다. break-inside 속성 컨트롤은 단편화된 컨텍스트에 있을 때 요소 내부를 중단합니다. 이 속성을 지원하는 브라우저에서 상자는 이제 열 중 하나에 유지됩니다. 열은 균형이 덜 잡힌 것처럼 보이지만 일반적으로 열 간에 상자가 분할되는 것보다 낫습니다.

break-inside 속성은 조각화 사양에 자세히 설명된 속성 중 하나입니다. 전체 속성 목록은 다음과 같습니다.

• break-before
• break-after
• break-inside
• orphans
• widows
• box-decoration-break

브라우저에서 실제로 일어나는 일을 살펴보기 전에 이것이 어떻게 작동해야 하는지 살펴보겠습니다.

break-before 및 break-after 속성

블록 수준 상자 사이의 나누기를 제어하는 ​​두 가지 속성이 있습니다: break-before 및 break-after . h2 다음에 두 개의 단락 <p> 이 있는 경우 세 개의 블록 상자가 있으며 이러한 속성을 사용하여 제목과 첫 번째 단락 또는 두 단락 사이의 구분을 제어합니다.

속성은 전후에 중단하려는 요소를 대상으로 하는 선택기에서 사용됩니다.

예를 들어, 레벨 2 제목이 있을 때마다 인쇄 스타일시트를 새 페이지로 나누기를 원할 수 있습니다. 이 경우 h2 요소에 break-before: page 를 사용합니다. 이것은 단편화를 제어하고 h2 요소의 상자 앞에 항상 중단이 있는지 확인합니다.

 h2 { break-before: page; }

또 다른 일반적인 요구 사항은 머리글이 페이지 또는 열의 마지막 항목으로 끝나는 것을 방지하는 것입니다. 이 경우에는 break 값을 avoid break-after 를 사용할 수 있습니다. 이렇게 하면 요소 상자 바로 뒤에 있는 중단을 방지할 수 있습니다.

 h1, h2, h3, h4 { break-after: avoid; }

프래그먼트 내의 프래그먼트

조각난 요소가 다른 요소 안에 중첩되어 있을 수 있습니다. 예를 들어, 페이징되는 무언가 내부에 다중 열이 있습니다. 이 경우 페이지에 대한 나누기를 제어하지만 열에 대해서는 제어하지 않거나 그 반대일 수 있습니다. 이것이 page 와 같은 값이 항상 요소 앞이나 뒤에 강제로 중단되지만 조각이 페이지인 경우에만 있는 이유입니다. 또는 페이징된 컨텍스트에 대해서만 요소 앞이나 뒤에 중단을 피할 수 있는 avoid-page 회피.

열에도 동일하게 적용됩니다. 값 column 을 사용하는 경우 이는 항상 해당 요소 앞이나 뒤에 강제로 중단되지만 다중 열 컨텍스트에 대해서만 적용됩니다. avoid-column 값은 다중 열 컨텍스트에서 중단을 방지합니다.

레벨 4 사양에는 always 페이지 또는 열 등 모든 항목을 분석하려는 값이 있습니다. 그러나 최근에 사양에 추가되었으므로 현재로서는 유용하지 않습니다.

페이징된 미디어에 대한 추가 값

책이나 잡지를 만들고 있다면 왼쪽 페이지와 오른쪽 페이지가 있습니다. 스프레드의 왼쪽 또는 오른쪽 페이지에 무언가를 강제로 적용하기 위해 나누기를 제어할 수 있습니다. 따라서 다음을 사용하면 올바른 페이지로 형식이 지정되었는지 확인하기 위해 h2 앞에 하나 또는 두 페이지 나누기를 삽입합니다.

 h2 { break-before: right; }

세로 또는 오른쪽에서 왼쪽 언어로 작성된 책은 영어로 작성된 책과 다른 페이지 진행을 갖기 때문에 페이지 진행 과 관련된 recto 및 verso 값도 있습니다. 이번에는 브라우저에서 가능한 것에 주로 관심이 있으므로 이 기사에서 이러한 값에 대해서는 더 이상 다루지 않을 것입니다.

break-inside

우리는 이미 break-inside 속성의 예를 보았습니다. 이 속성은 단락, 제목 또는 div 내부와 같은 블록 상자 내부 나누기를 제어합니다.

깨지고 싶지 않은 항목에는 위에서 설명한 상자아웃이 포함될 수 있습니다. 이미지, 표, 목록 등에서 캡션을 분리하지 않으려는 그림. break-inside: avoid 하세요. 열 사이의 나누기를 피하기만 하려면 break-inside: avoid-column 페이지 사이 break-inside: avoid-page .

orphans 와 widows 재산

orphans 및 widows 속성은 중단 전후에 몇 줄을 남겨야 하는지(열 또는 새 페이지로 인해 발생)를 처리합니다. 예를 들어, 열 끝에 한 줄이 남지 않도록 하려면 orphans 속성을 사용합니다. 타이포그래피에서 orphan은 페이지 하단에 단독으로 나타나는 단락의 첫 번째 줄입니다. 단락의 나머지 부분은 다른 페이지로 나뉩니다. 속성은 조각화되는 동일한 요소에 추가되어야 합니다(이 경우 다중 열 컨테이너).

 .container { column-count: 3; orphans: 2; }

중단 후 열이나 페이지의 맨 위에 표시되어야 하는 행 수를 제어하려면 widows 를 사용하십시오.

 .container { column-count: 3; widows: 2; }

이러한 속성은 단락 내의 단어 줄과 같은 인라인 상자 사이의 구분을 처리합니다. 따라서 머리글이나 다른 블록 요소가 열이나 페이지의 맨 아래에 단독으로 있는 상황에서는 도움이 되지 않습니다. 이를 위해 위에서 설명한 나누기 속성이 필요합니다.

상자 장식

관심을 가질 수 있는 최종 속성은 box-decoration-break 속성입니다. 이것은 두 개의 열 상자 또는 페이지 사이에 경계선이 끊어진 상자가 있는 상황을 제어합니다. 테두리를 기본적으로 반으로 자르시겠습니까? 아니면 상자의 두 반쪽을 각각 테두리로 완전히 감싸고 싶습니까?

첫 번째 시나리오는 기본값이며 box-decoration-break 속성을 상자에서 slice 로 설정하는 것과 같습니다.

 .box { box-decoration-break: slice; } 

두 번째 동작을 얻으려면 box-decoration-break 를 clone으로 설정하십시오.

 .box { box-decoration-break: clone; } 

조각화를 위한 브라우저 지원

이제 이 모든 것을 시연할 수 있는 CodePen 예제가 많지 않은 이유와 이 기사를 작성한 주된 이유에 대해 알아보겠습니다. 이러한 속성에 대한 브라우저 지원은 좋지 않습니다.

Prince와 같은 특정 사용자 에이전트를 사용하여 Paged Media에서 작업하는 경우 조각화에 대한 정말 좋은 지원을 즐길 수 있으며 이러한 속성이 매우 유용하다는 것을 알게 될 것입니다. 웹 브라우저에서 다중 열로 작업하거나 인쇄 스타일시트를 생성하거나 Headless Chrome과 같은 것을 사용하여 PDF를 생성하는 경우 지원이 다소 고르지 않습니다. 어쨌든 Chromium으로 이동할 때까지 가장 잘 지원되는 브라우저는 Edge입니다!

Can I Use는 단편화 속성을 multicol과 혼합한 다음 레거시 속성에 대한 별도의 데이터를 가지고 있기 때문에 지원을 설명하는 데 그다지 도움이 되지 않습니다. 그래서 속성과 지원을 문서화하기 위해 MDN에서 수행한 작업의 일부로 실제 브라우저 지원을 테스트하기 시작했습니다. 다음은 해당 테스트를 기반으로 한 몇 가지 조언입니다.

레거시 및 공급업체 접두사 속성

역사 수업 없이는 더 이상 갈 수 없습니다. 조각화에 대한 지원이 정말로 필요하다면 원래 CSS2의 일부였던 레거시 속성(또는 존재하는 일부 접두사 속성)에서 약간의 안도감을 찾을 수 있습니다.

CSS2에는 페이지 나누기를 제어하는 ​​속성이 있습니다. Multicol은 그 시점에서 존재하지 않았으므로 단편화된 유일한 컨텍스트는 페이징된 컨텍스트였습니다. 이는 세 가지 특정 페이지 나누기 속성이 도입되었음을 의미합니다.

• page-break-before
• page-break-after
• page-break-inside

이들은 page- 접두사가 없는 보다 일반적인 속성과 유사한 방식으로 작동하여 상자 앞, 뒤 및 내부에서 나누기를 제어합니다. 인쇄 스타일시트의 경우 새로운 break- properties를 지원하지 않는 일부 이전 브라우저가 이러한 페이지 접두어 속성을 지원한다는 것을 알게 될 것입니다. 속성은 새 속성의 별칭으로 처리됩니다.

multicol 사양의 2005년 작업 초안에는 column- 접두사가 붙은 속성을 사용하여 multicol에 대한 속성 구분에 대한 세부 정보가 있습니다(예: column-break-before , column-break-after 및 column-break-inside ). 2009년까지 이것들은 사라지고 접두사가 없는 break 속성에 대한 다중 콜 사양에 초안이 있었고 결국 CSS Fragmentation 사양으로 들어갔습니다.

그러나 일부 공급업체 접두어 열별 속성은 이러한 속성을 기반으로 구현되었습니다. 이것들은:

• -webkit-column-break-before
• -webkit-column-break-after
• -webkit-column-break-inside

Multicol에서 단편화 지원

다음은 multicol 컨텍스트에서 이러한 기능을 테스트하는 것을 기반으로 합니다. 가능한 것을 설명하려고 했지만 사용 가능한 브라우저에서 CodePens를 살펴보십시오.

Multicol 및 break-inside

break-inside 속성에는 multicol 지원이 가장 좋습니다. Chrome, Firefox, Edge 및 Safari의 최신 버전은 모두 break-inside: avoid 지원합니다. 따라서 multicol을 사용할 때 열 사이에 상자가 깨지는 것을 방지할 수 있습니다.

Firefox를 제외한 여러 브라우저는 -webkit-column-break-inside 속성을 지원합니다. 이것은 avoid 값과 함께 사용할 수 있으며 break-inside 를 지원하지 않는 열 사이에서 상자가 깨지는 것을 방지할 수 있습니다.

Firefox는 page-break-inside: avoid 를 multicol에서 지원합니다. 따라서 이 속성을 사용하면 Firefox 65 이전의 Firefox 브라우저에서 상자 내부가 깨지는 것을 방지할 수 있습니다.

즉, multicol에서 상자 사이의 나누기를 방지하려면 다음 CSS를 사용하면 가능한 한 많은 브라우저를 포함하고 가능한 한 멀리 되돌아갑니다.

 .box { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

column 값의 경우 페이지가 아닌 열 사이의 나누기만 피하고 싶다고 명시적으로 명시하면 Firefox를 제외한 모든 브라우저에서 작동합니다.

아래 CodePen은 이러한 테스트 중 일부를 다중 열로 모아서 직접 시도할 수 있습니다.

Multicol 및 break-before

요소 앞의 중단을 방지하려면 break-before: avoid 또는 break-before: avoid-column 을 사용할 수 있어야 합니다. 회피 속성에는 브라우저 지원이 없습니다.

Edge는 요소 상자 앞에 항상 break-before: column 을 강제로 적용하도록 지원합니다.

Safari, Chrome 및 Edge는 -webkit-column-break-before: always 도 지원하므로 요소 상자 앞에 강제로 중단됩니다. 따라서 요소 상자 앞에 강제로 중단을 적용하려면 다음을 사용해야 합니다.

 .box { -webkit-column-break-before: always; break-before: column; }

현재로서는 상자 전에 휴식을 방지하는 것이 불가능한 작업입니다. 아래에서 이러한 속성의 몇 가지 예를 가지고 놀 수 있습니다.

Multicol 및 break-after

요소 뒤의 중단을 방지하려면 열 맨 아래에서 마지막 항목이 되는 것을 방지하려면 break-after: avoid 및 break-after: avoid-column 을 사용할 수 있어야 합니다. 이를 지원하는 유일한 브라우저는 Edge입니다.

Edge는 또한 break-after: column 을 사용하여 요소 뒤에 강제 중단을 지원합니다. Chrome은 break-after: column 및 -webkit-column-break-after: always 도 지원합니다.

Firefox는 상자 뒤에 줄바꿈을 강제하거나 허용하는 접두어 속성이나 break-after 지원하지 않습니다.

따라서 Edge 외에는 실제로 상자 후 휴식을 피할 수 없습니다. 강제로 적용하려면 다음 CSS를 사용하여 일부 브라우저에서 결과를 얻을 수 있습니다.

 .box { -webkit-break-after: always; break-after: column; } 

브라우저에서 인쇄할 때 지원

데스크톱 브라우저에서 직접 인쇄하거나 헤드리스 Chrome 또는 브라우저 기술에 의존하는 다른 솔루션을 사용하여 PDF 파일을 생성하는지 여부는 아무런 차이가 없습니다. 조각화 속성에 대한 브라우저 지원에 의존하고 있습니다.

인쇄 스타일시트를 생성하면 multicol의 경우와 유사한 break 속성 지원을 찾을 수 있습니다. 그러나 이전 브라우저를 지원하려면 page- 접두사 속성을 사용하도록 속성을 두 배로 늘려야 합니다.

스타일시트 인쇄 및 break-inside

최신 브라우저에서는 break-inside 속성을 사용하여 상자 내부의 나누기를 방지하고 page-break-inside 속성을 추가하여 이전 브라우저에 대한 지원을 추가할 수 있습니다.

 .box { page-break-inside: avoid; break-inside: avoid; }

스타일시트 인쇄 및 break-before

상자 앞에 강제로 나누기를 하려면 break-before:page 와 page-break-before: always 함께 사용하십시오.

 .box { page-break-before: always; break-before: page; }

상자 앞의 나누기를 피하려면 break-before: avoid-page 와 함께 page-break-before: avoid 를 사용하십시오.

 .box { page-break-before: avoid; break-before: avoid-page; }

동등한 multicol 값보다 page 및 avoid-page 값에 대한 지원이 더 좋습니다. 대부분의 최신 브라우저는 지원합니다.

스타일시트 인쇄 및 break-before

상자 뒤에 강제로 나누기를 하려면 break-after: page 와 page-break-after: always 를 함께 사용하세요.

 .box { page-break-after: always; break-after: page; }

상자 뒤에 줄 바꿈을 방지하려면 break-after: avoid-page 와 함께 page-break-after: avoid 를 사용하십시오.

 .box { page-break-after: avoid; break-after: avoid-page; }

과부와 고아

widows 및 orphans 속성은 우수한 크로스 브라우저 지원을 제공합니다. 구현이 없는 유일한 브라우저는 Firefox입니다. 다중 색상 레이아웃을 만들거나 스타일시트를 인쇄할 때 이것을 사용하는 것이 좋습니다. 어떤 이유에서든 작동하지 않으면 과부와 ​​고아가 될 것입니다. 이상적이지는 않지만 재앙도 아닙니다. 그들이 작동하면 타이포그래피가 훨씬 더 좋아 보일 것입니다.

상자 장식 휴식

box-decoration-break 의 마지막 속성은 Firefox에서 multicol 및 인쇄를 지원합니다. Safari, Chrome 및 기타 Chromium 기반 브라우저는 -webkit-box-decoration-break 를 지원하지만 인라인 요소에서만 지원합니다. 예를 들어 문장의 테두리를 복제할 수 있습니다. 그들은 우리가 보고 있는 맥락에서 지원이 없습니다.

아래 CodePen에서 -webkit-box-decoration-break: clone 기능 쿼리가 true를 반환하는 것을 볼 수 있습니다. 그러나 속성은 multicol 컨텍스트에서 상자의 테두리에 영향을 주지 않습니다.

단편화 사용

보시다시피 브라우저의 현재 조각화 상태는 다소 조각화되어 있습니다! 즉, 달성할 수 있는 합리적인 금액이 있으며 실패하는 경우 결과는 차선책이지만 재앙은 아닌 경향이 있습니다. 시도해 볼 가치가 있음을 의미합니다.

이러한 속성을 너무 많이 사용하면 원하는 것과 다른 결과가 나타날 수 있습니다. 인쇄 대신 웹에서 작업하고 모든 단락 뒤에 열 나누기를 강제 실행한 다음 열 공간보다 더 많은 단락으로 끝나면 multicol이 인라인 방향으로 넘칠 것입니다. 추가 단락을 배치할 열이 부족합니다. 따라서 지원이 있는 곳에서도 여전히 신중하게 테스트해야 하며 많은 경우에 적은 것이 더 많다는 것을 기억해야 합니다.

추가 리소스

속성에 대한 자세한 내용을 보려면 MDN에서 최근에 페이지를 업데이트했으며 브라우저 호환성 데이터를 최신 상태로 유지하려고 노력하고 있습니다. CSS 조각화의 기본 페이지는 추가 예제, 브라우저 호환성 데이터 및 이러한 속성 사용에 대한 기타 정보가 있는 개별 속성 페이지로 연결됩니다.