CSS 명명된 그리드 영역에 따옴표가 필요하지 않은 이유는 무엇입니까?

CSS 이름이 그리드 영역에 따옴표로 묶이지 않은 이유는 무엇입니까?

CSS 그리드 사양에 따라 그리드 영역의 값은 그리드 라인으로 정의됩니다. custom-ident 유형을 활용합니다. 그러나 MDN 문서에 따르면 식별자는 따옴표로 묶을 수 없습니다. 대신 문자열 값이 생성되기 때문입니다. 이는 이름이 지정된 그리드 영역에 따옴표 없이 ID를 사용하여 액세스해야 하는 이유에 대한 의문을 제기합니다.

이 문제를 설명하려면 다음 예를 고려하십시오.

.grid {
  display: grid;
  grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
  /* This works as expected, assigning the element to area 'b' in the upper right corner */
  grid-area: b;
}

.bar {
  /* Quoting the area name fails to resolve correctly */
  grid-area: "c";
}

<div class="grid">
  <span class="foo">foo</span>
  <span class="bar">bar</span>
  <span class="hello">hello</span>
</div>

이 예에서는 foo 요소는 인용되지 않은 Grid-area를 사용하여 b 영역에 할당됩니다. b. 그러나 인용된 그리드 영역: "c"를 사용하여 c 영역에 막대를 할당하려고 시도하면 올바르게 해결되지 않습니다.

이 겉보기에 직관에 반하는 동작은 문자열이 아닌 사용자 정의 식별자를 사용하기로 결정한 데서 발생합니다. – 명명된 그리드 영역을 나타냅니다. 일반적으로 CSS 속성은 따옴표 붙은 문자열을 사용하는 글꼴 모음, 콘텐츠 및 그리드 템플릿 영역과 같은 예외를 제외하고 값에 대한 식별자를 사용합니다.

선택 이유

CSS 그리드 사양 개발자는 주로 CSS 사양의 나머지 부분과의 일관성을 위해 명명된 그리드 영역에 대해 문자열 대신 식별자를 선택했습니다. 2013년 사양 작성자 간의 토론에서:

[식별자 사용]의 이점은 다음과 같습니다.

• 나머지 CSS와 일치하는 식별자 사용
• 동일한 위치를 식별하는 이름의 시각적 그룹화 제공
• 이름이 지정된 그리드 영역 허용 그리드 템플릿 속기의 명명된 줄과 공존하기 위한 템플릿 구문(문자열 사용).

또한 2013년의 또 다른 토론에서 강조된 내용은 다음과 같습니다.

grid-definition-rows/columns에서 명명된 그리드 선을 선언하기 위한 현재 구문을 살펴보면서 우리는 현재 구문이 형편없습니다.

• 사용자 ID를 나타내기 위해 문자열을 사용하고 있는데 이는 CSS의 다른 모든 항목과 일치하지 않습니다.

결론

명명된 그리드 영역에 대해 식별자를 선호하는 데 대한 강력한 기술적 근거는 없을 수 있지만 사양 작성자는 일반적인 접근 방식과의 일관성을 목표로 했습니다. CSS. 식별자를 사용하면 명명된 그리드 영역이 대부분의 CSS 속성과 일치하고 일관된 사용자 경험을 제공합니다.

위 내용은 CSS 명명된 그리드 영역에 따옴표가 필요하지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!