전체 사용자 정의 목록 스타일

This is the fifth post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

이 강좌에서는 CSS 메쉬 레이아웃을 사용하여 목록 스타일을 쉽게 사용자 정의하는 방법을 보여 줍니다.

위조원소 내용의 데이터 속성

시퀀스 테이블 스타일의 CSS 카운터 설정

목록 항목 스타일별 CSS 사용자 정의 변수

응답성 다중 열 목록

Update: The ::marker pseudo selector is now well supported in modern browsers. While this tutorial includes handy CSS tips for the items listed above, you may want to jump to the ::marker solution

목록 HTML

우선 HTML, 하나ul 및 하나li를 설정합니다.정렬, 간격, 선 높이를 확인하는 데 도움이 되는 긴 글머리 기호가 포함되어 있습니다.

<ul role="list">
  <li>Unordered list item</li>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
  <li>Unordered list item</li>
</ul>

<ol role="list">
  <li>Ordered list item</li>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
  <li>Ordered list item</li>
</ol>

role="list"의 사용에 주의하십시오.처음에는 군더더기 보일 수 있지만 CSS 고유의 목록 스타일을 삭제합니다.CSS는 일반적으로 요소의 의미 값에 영향을 주지 않지만 list-style: none 일부 화면 판독기의 목록 의미를 삭제할 수 있습니다.가장 간단한 복구 방법은 이러한 의미를 회복하기 위해 role 속성을 정의하는 것이다.Scott O'Harathis article로부터 자세한 내용을 확인할 수 있습니다.

기본 목록 CSS

우선, 목록 스타일의 리셋을 추가하고 간격이 있는 격자로 정의했습니다.

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 1rem;
}

grid-gap의 장점은 li 사이에 빈칸을 추가하여 낡은 방법을 대체하는 것이다. 예를 들어 li + li { margin-top: ... }.
다음은 목록 항목을 준비합니다.

li {
  display: grid;
  grid-template-columns: 0 1fr;
  grid-gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

우리는 격자를 사용하기 위해 목록 항목을 설정했다.우리는 더욱 오래된 해커를 업그레이드하여 padding-left 절대 포지셔닝의 psedou 요소를 사용하여 공간을 남겼다. 이 요소는 0 너비 1열과 grid-gap 의 조합을 가지고 있다.우리는 잠시 후에 그것이 어떻게 작동하는지 볼 수 있을 것이다.그리고 우리는 align-items: start 의 기본값이 아니라 stretch 를 사용하고 일부 유형의 스타일을 적용합니다.

UL: 이모티콘의 데이터 속성

현재, 이것은 확장 가능한 해결 방안이 아닐 수도 있지만, 재미를 위해서, 우리는 사용자 정의 데이터 속성을 추가할 것이다. 이 속성은 모든 목록 항목의 항목 기호로 이모티콘을 정의할 것이다.
먼저 HTMLul을 업데이트합니다.

<ul role="list">
  <li data-icon="🦄">Unordered list item</li>
  <li data-icon="🌈">Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
  <li data-icon="😎">Unordered list item</li>
</ul>

이모티콘을 글머리 기호로 사용하기 위해 우리는 매우 신기한 기술을 사용했다. 그 중에서 데이터 속성은 위조 요소의 content 속성 값으로 사용할 수 있다.

ul li::before {
  content: attr(data-icon);
  /* Make slightly larger than the li font-size
  but smaller than the li grid-gap */
  font-size: 1.25em;
}

다음은 메쉬가 어떻게 작동하는지 설명하기 위해 ::before 요소를 검사한 결과입니다.

이모티콘은 여전히 보이는 너비를 차지할 수 있지만, 실제로는 격자 간격에 있다.첫 번째 li 격자 열을 auto 로 설정하면 이모티콘 열과 목록 텍스트 열 사이에 격자 간격이 완전히 적용됩니다.

OL:CSS 카운터 및 CSS 사용자 정의 변수

CSS counters는 실행 가능한 해결 방안since IE8이지만, 숫자마다 배경색을 바꾸는 데 CSS custom variables 를 사용하는 추가 기능을 추가할 것입니다.
먼저 CSS 카운터 스타일을 적용하여 카운터orderedlist의 이름을 지정합니다.

ol {
  counter-reset: orderedlist;
}

ol li::before {
  counter-increment: orderedlist;
  content: counter(orderedlist);
}

기본 ol 스타일과 크게 다르지 않은 기능은 다음과 같습니다.

다음으로, 우리는 카운터 번호에 몇 가지 기본 스타일을 적용할 수 있다.

/* Add to li::before rule */
font-family: "Indie Flower";
font-size: 1.25em;
line-height: 0.75;
width: 1.5rem;
padding-top: 0.25rem;
text-align: center;
color: #fff;
background-color: purple;
border-radius: 0.25em;

우선, 우리는 구글 글꼴을 사용하고 확대font-size를 한다.line-height은line-height에 적용된 li의 절반이다. (적어도 이 글꼴은 효과가 있다. 신기할 수도 있다.)그것은 숫자를 주요 li 텍스트 내용과 정렬합니다.
그리고 우리는 현식 너비를 지정해야 한다.그렇지 않으면 텍스트가 표시되더라도 배경이 표시되지 않습니다.
텍스트와 배경의 정렬을 고정하기 위해 채우기를 추가합니다.
이제 우리는 이것이 생겼다.

이것은 물론 더욱 사용자 정의를 느끼지만, 우리는 background-color 를 CSS 사용자 정의 변수로 바꾸어 그것을 더욱 추진할 것이다. 다음과 같다.

ol {
  --li-bg: purple;
}

ol li::before {
  background-color: var(--li-bg); 
}

인라인 스타일을 두 번째와 세 번째 li 에 추가하여 변수 값을 업데이트하기 전에 다음과 같이 보입니다.

<ol role="list">
  <li>Ordered list item</li>
  <li style="--li-bg: darkcyan">Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
  <li style="--li-bg: navy">Ordered list item</li>
</ol>

최종 결과ul와 ol의 합계입니다.

업그레이드 알고리즘: 여러 열 목록

우리의 예는 단지 3개의 짧은 목록 항목뿐이지만, 우리는 격자를 기초 ol 와 ul 에 응용하는 것을 잊지 마라.
그리고 이전의 생활에서 나는 PHP의modular로 재미있는 일을 해서 목록을 분할했고 추가 클래스를 응용하여 고르게 분할된 다열 목록을 실현했다.
CSS 메쉬를 사용하면 고유한 응답성, 동일한 열 및 컨텐츠 행 길이를 가진 세 줄에 적용할 수 있습니다.

ol, ul {
  display: grid;
  /* adjust the `min` value to your context */
  grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
  grid-gap: 1rem;
}

기존 예제를 적용하여 max-width 의 li 를 제거해야 합니다.

이 뷰는 Codepen의 $multicolumn 변수를 true 로 업데이트하여 전환할 수 있습니다.

알았어: 순수한 텍스트보다 더 이 같은 내용

만약 당신이 li 안에 순수한 텍스트를 초과한 내용이 있다면, 무고한 <a> 같은 내용을 포함해서, 우리의 격자 템플릿은 붕괴될 것이다.
그러나 이것은 매우 간단한 해결 방안이다. - li 내용을 span 에 포장하는 것이다.우리의 격자 템플릿은 원소가 무엇인지에 관심을 가지지 않지만, 그것은 단지 두 개의 원소만 필요로 하는데, 그 중에서 위조원소는 첫 번째라고 할 수 있다.

CSS 태그로 업그레이드

본고가 처음 발표된 후 몇 달 동안 ::marker에 대한 지원은 모든 현대 브라우저에서 더욱 좋아졌다.::marker 위조 선택기는 ol 또는 ul 목록 항목 기호/숫자를 직접 변경하고 스타일을 설정할 수 있습니다.ul 항목 기호를 완전히 대체하는 솔루션을 사용할 수 있지만 ::marker 몇 가지 속성만 허용하기 때문에 ol 솔루션을 다운그레이드해야 합니다.

::marker

animation-*

color

content

direction

font-*

transition-*

unicode-bidi

공백이 있는 무질서한 목록 스타일

::marker 는 여전히 허용되는 속성이기 때문에, 사용자 정의 표정 표시를 허용하기 위해 content 솔루션을 보존할 수 있습니다🎉
우리는 data-icon 를 ::before 로 바꾸기만 하면 됩니다.

ul li::marker {
  content: attr(data-icon);
  font-size: 1.25em;
}

그런 다음 ::marker 에서 더 이상 필요하지 않은 격자선 속성을 제거하고 삭제된 li 를 대체하기 위해 일부 padding 를 다시 추가합니다.

li {
  /* replace the grid properties with: */
  padding-left: .5em;
}

마지막으로, 우리는 이전에 grid-gap 를 삭제했지만, 넘침으로 인해 차단되는 것을 방지하기 위해 일부 왼쪽 거리에 다시 추가해야 한다.

/* update in existing rule */
ol,
ul {
  margin: 0 0 0 2em;
  /* ...existing styles */
}

시각적 결과는 이전 솔루션과 동일합니다the demo.

여백이 있는 시퀀스 테이블 스타일

우리의 질서정연한 목록에 대해, 우리는 현재 내장 계수기를 전환하고 이용할 수 있다.
또한 ::marker 및 ::marker 값을 제거해야 하기 때문에 사용자 정의 속성을 사용하여 background-color 값을 대체할 것입니다.명확하게 보기 위해서 사용자 정의 속성 이름을 border-radius 로 변경합니다.
따라서 단순화 방식은 다음과 같습니다.

ol {
  --marker-color: purple;
}

li::marker {
  content: counter(list-item); 
  font-family: "Indie Flower";
  font-size: 1.5em;
  color: var(--marker-color);
}

HTML에서 CSS 사용자 정의 속성 이름을 업데이트하는 것을 잊지 마세요!

Watch out for this gotcha: Changing the display property for li will remove the ::marker pseudo element. So if you need a different display type for list contents, you'll need to apply it by nesting an additional wrapping element.

컬러 프레젠테이션

이것은 우리가 업데이트한 사용자 정의 목록 스타일입니다. 현재 사용합니다--marker-color.
사용자 정의 목록 스타일의 솔루션을 사용하려면 반드시 current browser support 을 확인하십시오!이전의 프레젠테이션 솔루션 중 하나로 점진적인 향상::marker을 사용하고자 할 수도 있습니다.

For more details on using ::marker, check out this excellent article by Adam Argyle.