CSS Rules

Draft

@counter-style

카운터의 스타일을 문자열 표현 방식으로 직접 정의할 수 있다.

설명

웹브라우저별 지원 현황은 미비하므로 반드시 각 웹브라우저의 지원 여부를 참고하도록 한다.

구문

@counter-style { }기본형식

다음 아래의 규칙에 따라 작성한다.

속성

<text>system선택
카운터의 정수 값을 문자열 표현으로 변환하는데 사용될 알고리즘을 지정한다.
<text>negative선택
사용되는 값이 음수이면 카운터 마커에 추가하거나 추가할 기호를 지정할 수 있다.
<text>prefix선택
마커 앞에 붙힐 접두어를 지정한다. 접두사는 최종 단계의 표현에 추가되므로 카운터의 최종 표현에서는 음수 부호 앞에 온다.
<text>suffix선택
마커 뒤에 추가할 접미사를 지정한다.
<text>range선택
카운터 스타일을 적용할 수 있는 값의 범위를 정의한다. 카운터 스타일의 범위를 벗어난 값일 경우 fallback 스타일로 돌아간다.
<text>pad선택
마커 표현이 최소 길이이어야 할 때 사용한다. 예를 들어서 카운터가 01에서 시작하여 02, 03, 04 등으로 순서를 적용하고자 하는 경우에 필요하다. 지정된 pad 값보다 큰 표현의 경우 마커가 정상적으로 구성된다.
<text>fallback선택
지정된 시스템이 카운터의 값의 표현을 구성할 수 없거나 카운터의 값이 지정된 범위를 벗어난 경우 시스템이 fallback에 지정된 값으로 구성한다. 만약에 fallback으로도 구성을 실패하면 10진수 스타일로 처리된다.
<text>symbols선택
마커 표현에 사용될 기호를 지정한다. 기호에는 문자열, 이미지, 사용자 지정 식별자가 사용될 수 있다. 지정된 기호가 마커 표현을 구성하는데 사용되는 방법은 system 속성에서 지정된 알고리즘 방식에 달려 있다.
<text>additive-symbols선택
symbol 속성에 지정된 값은 대부분의 알고리즘에 의해서 마커 표현을 구성하는데 사용 되지만 'additive'와 같은 일부 system 값은 이 속성에서 정의한 값에 의존한다.
<text>speak-as선택
스크린리더와 같은 장치에서 카운터 스타일을 읽는 방법을 지정한다.

예제

사용자 정의 마커 적용 테스트

지원 웹브라우저