CSS 생성 콘텐츠 기술

소개

콘텐츠 속성은 생성된 콘텐츠를 :before 및 :after 의사 요소에 추가하기 위해 CSS 2.1에 도입되었습니다. 모든 주요 브라우저(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)는 이 기능을 지원합니다. 또한 Opera 9.5+는 :before 및 :after 의사 요소뿐만 아니라 모든 요소에 대한 콘텐츠 속성을 지원합니다.

CSS 3 생성 콘텐츠 작업 초안에서는 콘텐츠 속성에 더 많은 기능이 추가되었습니다. 예를 들어 콘텐츠를 문서에 삽입하고 이동하여 각주, 미주 및 섹션 주석을 만들 수 있습니다. 그러나 확장된 기능 콘텐츠를 구현한 브라우저는 없습니다.

이 글에서는 생성된 콘텐츠를 사용하는 기본 사항을 다룬 다음 이를 사용하는 구체적인 기술을 살펴보겠습니다.

몇 가지 주의 사항

이 주제에 대해 자세히 알아보기 전에 생성된 콘텐츠

는 CSS가 활성화된 최신 브라우저에서만 작동하고

DOM을 통해 사용할 수 없다는 점을 지적할 가치가 있습니다. 이것은 순수한 표현입니다. 특히, 접근성 관점에서 생성된 콘텐츠는 현재 화면 판독기에서 지원되지 않습니다.

생성된 콘텐츠 - 기본

content는 다음과 같이 사용됩니다:

h2:before {

content: "some text";

}

이렇게 하면 모든 요소의 시작 앞에 "일부 텍스트"가 삽입됩니다. 페이지 텍스트" h2.

content 속성의 텍스트 값을 입력하는 대신 다음과 같이 attr() 속성 값을 사용할 수도 있습니다.

a:after {

content: attr(href)

}

이 내용은 다음으로 끝납니다. a 요소 href 각 요소의 내용을 삽입한 후.

참조 시 속성 이름 attr()을 따옴표 없이 사용해야 한다는 점에 유의하세요.

카운터를 사용하거나 삽입된 이미지를 사용하여 동적 숫자 URL(/path/to/file)을 생성할 수도 있습니다. 몇 가지 예를 살펴보겠습니다.

카운터가 있는 숫자 콘텐츠

질문 1, 질문 2, 질문 3과 같이 요소의 반복되는 순서에 증분 값을 삽입하려는 경우 카운터를 사용하여 카운터 값을 증가시킨 다음 콘텐츠를 사용하여 표시할 수 있습니다. 다음과 같은 방법으로 카운트합니다:

목록 스타일 유형: 없음;

카운터 재설정: 분할된 카운터

}

li: 이전 {

content: "챕터" 카운터(스톨); -increment

}

in 첫 번째 규칙에서는 counter-reset 속성을 사용하여 카운터를 1로 재설정합니다. 두 번째 규칙에서 각 li 요소에는

string

이 인쇄되어 있습니다. 여기서 X는 카운터의 현재 값입니다. 두 번째 규칙의 마지막 속성 - 목록의 다음 요소로 이동하기 전에 카운터 값을 1씩 늘립니다. 장

물론, 이 CSS 기능을 지원하지 않는 브라우저에서는 숫자가 표시되지 않습니다. 웹 페이지 어딘가에서 이것이 혼란스러울 경우 자세한 내용은 10장을 참조하세요. 순전히 장식적인 콘텐츠를 생성하는 것과 실제 HTML로 작성되어야 하는 콘텐츠의 실제 부분 사이에는 미세한 차이가 있습니다. 생성된 콘텐츠로 카운터를 만드는 방법을 설명하기 위해 데모를 작성했습니다. 이 주제에 대한 자세한 내용은 자동 번호 매기기를 위한 CSS 카운터 사용에 대한 David Storey의 훌륭한 기사를 읽어보세요.

다국어 콘텐츠에 올바른 인용문을 삽입하세요.

언어마다 인용문에 서로 다른 문자를 사용합니다. 영어 인용문은 다음과 같이 작성됩니다.

"오직 누군가가 당신을 그렇게 하게 만듭니다.

노르웨이어 인용문은 다음과 같이 작성됩니다.

"Hvis du forteller meg nok en vits, såskal jegslådeg til jorden"»

HTML에서 하드코딩된 따옴표가 있는 간단한 텍스트를 사용하는 대신 q 요소를 사용할 수 있습니다.

누군가가 그렇게 하도록 시킨 경우에만 작동합니다.

p>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.

CSS에서 각 언어에 대해 적절한 인용문을 지정하세요.

/* 지정하세요. 두 가지 언어에 대한 인용문 ​​*/

:lang(en) > q { 인용문: '"' '"' }

:lang(no) > q { 인용문: "«" "»"}

/* 요소 콘텐츠 앞뒤에 따옴표 삽입 */

q:before { content: open-quote }

q:after { content: close-quote }

이 기술을 모든 요소에 사용할 수 있습니다. q뿐만 아니라(가장 명확하고 의미론적인 사용임에도 불구하고) quote 속성은 Safari 3(및 그 이하) 및 IE 7(및 그 이하)에서는 지원되지 않습니다.

내 quote 플러그인 데모를 확인하세요.

텍스트를 이미지로 바꾸기

사용할 수 있는 여러 가지 이미지 교체 기술이 있으며 각각 고유한 장점과 단점이 있습니다. 텍스트를 이미지로 바꾸는 또 다른 방법은 다음과 같습니다.

div.logo {

콘텐츠: URL(로고 .png);

}

이미지 교체에 이 기술을 사용하면 실제로 텍스트를 교체하므로 이미지 공간을 만들기 위해 높이와 너비를 사용할 필요가 없다는 것입니다(

text-indent

). 또는 원본 텍스트를 숨기기 위한 패딩

그러나 몇 가지 단점이 있습니다.

이미지를 반복하거나 이미지 스프라이트를 사용할 수 없습니다

:before 또는 :after뿐만 아니라 모든 선택기의 속성으로 콘텐츠 URL을 지원하는 Opera 9.5+, Safari 4+, Chrome에서만 작동합니다.

이 방법을 사용하여 재정의를 포함할 수 있는 방법은 없습니다. 이미지를 텍스트로 바꿉니다. 그러면 스크린 리더가 귀하의 콘텐츠를 이해하지 못할 것입니다.

자세한 내용은 콘텐츠를 사용한 이미지 교체 데모를 확인하세요.

링크 아이콘 표시

콘텐츠 속성의 속성 선택기를 사용하여 링크가 속한 파일 형식이나 외부 파일 형식을 기반으로 링크 뒤에 아이콘을 렌더링할 수 있습니다.

a[href $='.pdf']:after {

content:url(icon-pdf.png);

}

a[rel="external"]:after { /* 다음을 사용할 수도 있습니다. a[href ^="http"]:after */

content:url(icon-external.png);

}

첫 번째 규칙은 하위 문자열 일치와 함께 CSS3 선택기를 사용합니다(href $=' pdf'). href의 끝에는 .pdf 속성 값이 있습니다.

정규식 때문에 ^와 $는 각각 문자열의 시작과 끝을 나타냅니다. CSS 3 하위 문자열 일치 속성 선택기를 사용하여 [attribute^=value] 및 [attribute$=value]를 사용하면 속성 콘텐츠가 지정된 값으로 시작하거나 끝나는 [attribute*=value] 요소를 일치시키는 동시에 해당 요소를 선택할 수 있습니다. 속성 위치 요소.

링크에 PDF 및 외부 아이콘을 표시하는 데모입니다.

속성 값을 콘텐츠로 사용

우리는 이미 content: attr(val)을 사용하면 요소의 속성 값을 화면에 표시할 수 있다고 언급했습니다. 이는 여러 가지 유용한 방법으로 사용될 수 있습니다. 여기에 몇 가지 예가 있습니다.

CSS에서 URL/약어 인쇄

별도의 목록으로 인쇄하기 위한 기사에서 언급했듯이, 인쇄된 후 생성된 콘텐츠를 사용하여 페이지를 풍성하게 할 수 있습니다. 예를 들어, 인쇄 CSS에서 다음 링크의 URL을 인쇄합니다:

a:after {

content: "(" attr(href) ")";

}

동일한 방법을 사용하여 확장 프로그램을 인쇄할 수 있습니다. abr 요소의 . 인쇄 스타일시트에 다음을 추가하세요.

abbr: after {

content: "("attr(title)")";

}

내 인쇄 URL과 약어 확장 데모를 확인하세요. 자세히 알아보세요.

예상: attr() CSS3 강력함

CSS3 값 및 단위 초안은 attr() 표현식의 범위를 확장합니다. 문자열을 반환하는 것 외에도 단위 유형, CSS 색상, CSS 정수와 같은 값을 반환할 수도 있습니다. , 길이, 각도, 시간, 주파수 및 기타 단위.

사용자 정의 데이터 속성 외에도 간단한 차트, 그래프 및 애니메이션을 렌더링하는 데 매우 강력할 수 있습니다. 예를 들어 속성 ​​값을 기반으로 요소의 배경색을 설정할 수 있습니다. 이는 웹에 색상 팔레트를 표시하는 응용 프로그램에 유용할 수 있습니다. 또한 사용자 정의 데이터 속성에 설정된 값을 기반으로 요소의 크기를 지정할 수도 있습니다. 예를 들어 막대 차트의 막대 길이는 막대를 나타내는 요소의 속성으로 설정할 수 있습니다. 안타깝게도 이 기능은 우선순위가 낮아 곧 지원되지 않을 예정입니다.

결론

이 기사를 통해 콘텐츠 속성과 이를 통해 수행할 수 있는 작업에 대해 더 잘 이해할 수 있기를 바랍니다. 이제 IE 8이 콘텐츠도 지원한다는 점을 고려하면 제작 작업에서 이 CSS 기능을 사용할 수 있다는 것이 매우 분명해졌습니다. 적절한 곳에 사용하고 결과 콘텐츠에 여전히 접근성이 미치는 영향을 염두에 두십시오.

위 내용은 CSS 생성 콘텐츠 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!