CSS @media print를 사용하여 사용자 정의 요소를 인쇄할 수 있나요?

CSS로 사용자 정의 요소 인쇄

콘텐츠가 풍부한 페이지의 인쇄용 버전을 만들어야 하는 경우 CSS는 다음을 제공합니다. @media 인쇄 규칙을 통한 강력한 메커니즘입니다. 그러나 제공된 솔루션은 타당성과 브라우저 호환성에 대한 의문을 제기합니다.

@media print에 대한 브라우저 지원

@media 인쇄 규칙은 모든 주요 최신 브라우저에서 지원됩니다. , Chrome, Firefox, Safari 및 Edge를 포함합니다. 이렇게 하면 다양한 플랫폼에서 인쇄 스타일을 일관되게 적용할 수 있습니다.

CSS로 요소 숨기기 및 표시

인쇄 중에 요소를 선택적으로 표시하려면 CSS를 활용하여 다음을 수행할 수 있습니다. 특정 클래스로 표시된 것을 제외한 모든 것을 숨깁니다. 다음 CSS 스니펫은 이를 달성합니다.

@media print {
  * {
    display: none;
  }
  .printable,
  .printable > * {
    display: block;
  }
}

이 접근 방식에서는 "printable" 클래스가 있는 모든 요소와 해당 하위 요소가 인쇄 중에 표시되지만 다른 모든 요소는 숨겨집니다.

네거티브 선택기 및 브라우저 호환성

"not" 선택기를 사용하여 요소를 제외하는 동안 나타남 논리적으로 특정 브라우저에서는 예상대로 작동하지 않을 수 있습니다. 이 문제를 해결하기 위해 보완적인 접근 방식을 사용할 수 있습니다.

@media print {
  body *:not(.printable *) {
    display: none;
  }
}

이 CSS 규칙은 "인쇄 가능" 클래스가 있는 요소의 하위 항목을 제외하고 본문 내의 모든 요소를 ​​숨깁니다.

브라우저 및 프린터에 요소 표시

특정 요소를 브라우저에 표시하고 인쇄 시 숨기려면 다음 CSS를 사용할 수 있습니다. 기술:

@media print {
  .noPrint {
    display: none;
  }
}

@media screen {
  .onlyPrint {
    display: none;
  }
}

이 접근 방식을 사용하면 각각 브라우저 또는 인쇄 출력에만 관련된 요소(예: 링크 또는 로고)를 포함할 수 있습니다.

위 내용은 CSS @media print를 사용하여 사용자 정의 요소를 인쇄할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!