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

CSS 명명된 그리드 영역이 따옴표로 묶이지 않는 이유

CSS 그리드 사양에 따르면 그리드 영역 값은 그리드 라인으로 분류됩니다. custom-ident를 활용합니다. MDN 문서에서는 ID를 따옴표 안에 포함할 수 없다는 점을 강조합니다. 이렇게 하면 ID가 문자열로 변환되기 때문입니다. 그러나 이러한 개념을 결합하면 명명된 그리드 영역은 따옴표 없이 ID를 통해 액세스해야 한다는 것이 분명해집니다.

아래 예는 이러한 차이점을 보여줍니다.

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

.foo {
    grid-area: b;
}

.bar {
    grid-area: "c";
}

값을 할당하는 동안 " b"를 그리드 영역으로 변환하면 예상대로 작동하지만 영역 이름을 따옴표(예: "c")로 묶으면 잘못된 인식이 발생합니다. 그리드 영역 이름은 정의할 때 일반적으로 따옴표로 묶기 때문에 이 동작은 직관적이지 않은 것처럼 보일 수 있습니다(예: 그리드: "area1 Area2" / 1fr 1fr;). 그러나 이 맥락에서는 변수 이름과 유사한 식별자로 처리됩니다.

디자인 근거

CSS 그리드 사양의 개발자는 명명된 그리드 영역에 대해 문자열 대신 식별자를 선택했습니다. 더 넓은 CSS 프레임워크와의 일관성을 유지합니다. 대부분의 CSS 속성은 해당 값에 문자열이 아닌 식별자를 사용합니다. 주목할만한 예외로는 두 가지를 모두 허용하는 글꼴 모음, 콘텐츠 및 그리드 템플릿 영역이 있습니다.

2013년 토론에서 사양 작성자는 식별자 사용의 다음과 같은 이점을 강조했습니다.

• 일반적인 CSS 규칙에 부합
• 동일한 이름을 시각적으로 명확하게 그룹화 위치
• 이름이 지정된 그리드 영역 템플릿 구문(문자열 사용)과 그리드 템플릿 속기의 이름이 지정된 줄 간의 호환성

구현 세부 정보

CSS 그리드는 이름을 정의합니다. 그리드 템플릿 영역 내에서 참조할 수 있는 그리드 영역 속성을 사용하는 그리드 영역입니다. 다음 예를 고려하십시오.

.grid {
    display: grid;
    grid-template-areas: "   logo    nav     nav   "
                         " content content content "
                         " footer  footer   footer " ;
}

.logo  { grid-area: logo;    }
nav    { grid-area: nav;     }
main   { grid-area: content; }
footer { grid-area: footer;  }

컨테이너에서 축약형 그리드 속성을 사용하는 또 다른 예:

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

.foo {
    grid-area: b;
}

이 두 번째 예에서 축약 표기법은 다음과 같이 변환됩니다.

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b"
                     "c d";

grid-template-areas에서는 명명된 그리드 영역이 문자열로 캡슐화됩니다. 대조적으로, 그리드 영역은 이를 식별자()로 할당합니다.

CSS의 식별자 및 문자열

CSS 값 및 단위 모듈 사양은 식별자를 다음과 같이 정의합니다.

"... 문법을 따르는 문자 시퀀스입니다. 식별자는 인용할 수 없습니다. 그렇지 않으면 CSS 속성은 사전 정의된 키워드와 작성자가 정의한 식별자라는 두 가지 클래스의 식별자를 허용합니다."

반면에 문자열은 큰따옴표나 작은따옴표로 묶인 문자로 구성됩니다.

그리드 영역에서 식별자 사용에 대한 이론적 근거

사양 작성자에 따르면 그리드 영역 값에 문자열 대신 식별자를 사용하기로 한 결정은 일관성에 대한 요구에 기초한 것입니다. 식별자는 CSS에서 가장 중요한 값 유형이며 그리드 영역은 이를 따를 것입니다.

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