당신의 CSS는 논리적인가요?

이 CSS 스니펫을 살펴보세요. 무슨 문제가 있나요?

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

웹사이트 방문자에 따라 오류가 0개 또는 3개 있을 수 있습니다. 어떤 오류인지 설명하기 전에 몇 가지 맥락을 설정해 보겠습니다.

관점의 문제

배에 올라타면 '왼쪽', '오른쪽' 같은 말이 들리지 않습니다. 배의 왼쪽과 오른쪽은 관찰자의 관점에 따라 달라지기 때문입니다. 대신, 사용자의 위치나 말하는 사람의 위치에 관계없이 항상 보트의 같은 면을 가리키는 명확한 용어인 "항구"와 "우현"을 사용합니다.

Pearson Scott Foresman이 제작하여 공개 도메인으로 공개된 이미지입니다. 출처

동일한 원칙이 해부학적 위치 용어에도 적용되어 의사와 수의사가 환자나 의사의 상대적인 위치에 관계없이 신체 부위의 위치를 ​​명확하게 설명할 수 있습니다.

CSS 국제화

웹 애플리케이션을 전 세계적으로 사용하는 경우 다양한 언어 요구 사항에 맞게 디자인해야 합니다. 예를 들어, 영어 및 스페인어와 같은 언어는 왼쪽에서 오른쪽(LTR)으로 작성됩니다. 아랍어와 히브리어는 오른쪽에서 왼쪽(RTL)으로 작성됩니다. 몽골어와 일본어는 위에서 아래로 쓰여있습니다.

따라서 CSS 선언을 다음과 같이 사용하는 경우:

p {
    margin-left: 2rem;
}

(1)문단의 실제 왼쪽에 공백을 추가한다는 뜻인가요, 아니면 (2)콘텐츠가 시작되기 전에 공백을 추가한다는 뜻인가요? 완전히 국제화된 UI의 경우 정답은 항상 (2)입니다.

논리적 솔루션

LTR 및 RTL 언어에 대해 별도의 스타일시트를 만들고 조건부로 로드할 수 있습니다. 원래 LTR 스타일시트를 기반으로 RTL 스타일시트를 자동으로 생성할 수 있는 webpack-rtl 플러그인과 같은 도구도 있습니다.

그러나 가장 좋은 해결책은 다음과 같이 CSS 스타일을 조건부로 적용하는 것입니다.

p {
    if writing is left-to-right:
        margin-left: 2rem;
    elseif writing is right-to-left:
        margin-right: 2rem;
    elseif writing is top-to-bottom:
        margin-top: 2rem;
    endif
}

CSS에서 훨씬 간단한 구문을 사용하여 이 작업을 수행할 수 있습니다.

p {
    margin-inline-start: 2rem;
}

이 margin-inline-start 속성은 사용자의 쓰기 방향에 따라 동적으로 조정되는 논리적 CSS 속성입니다. 논리적 속성은 항구/우현 비유와 유사하게 작동합니다. 다양한 쓰기 시스템에서 명확한 방식으로 레이아웃을 설명합니다.

논리적 속성은 다음 두 용어를 사용하여 레이아웃 방향을 정의합니다.

• 인라인: 한 줄 내의 텍스트 흐름과 평행합니다.
• 블록: 한 줄 내에서 텍스트 흐름에 수직입니다.

이 그림은 CSS에서 지원하는 모든 쓰기 모드의 물리적 위치와 비교한 논리적 위치를 보여줍니다.

논리적 속성을 사용하여 이 글의 시작 부분에 표시된 초기 예를 다음과 같이 다시 작성할 수 있습니다.

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

논리적 속성을 사용하도록 기존 CSS 스타일시트를 업데이트하는 것은 처음에는 어렵게 느껴질 수 있습니다. 그러나 대부분의 작업에는 단순히 왼쪽을 인라인 시작으로, 오른쪽을 인라인 끝으로, 위쪽을 블록 시작으로, 아래쪽을 블록 끝으로 바꾸는 작업이 포함됩니다. 일부 속성에는 다른 이름 변경이 필요합니다. 예를 들어 border-bottom-left-radius는 border-end-start-radius가 되고 높이는 블록 크기가 됩니다.

모든 사람이 귀하의 웹사이트에 액세스할 수 있도록 보장하는 미래 보장형 솔루션이므로 노력할 가치가 있습니다. 예를 들어, 제가 참여하고 있는 EasyAdmin 프로젝트는 이미 논리적 속성을 사용하도록 스타일시트를 업데이트했습니다.

논리적 속성 참조

다음은 자신의 프로젝트를 업데이트하는 데 도움이 되는 모든 논리적 속성에 대한 참조 표입니다.

Physical Property	Logical Property
border-bottom	border-block-end
border-bottom-color	border-block-end-color
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius
border-bottom-style	border-block-end-style
border-bottom-width	border-block-end-width
border-left	border-inline-start
border-left-color	border-inline-start-color
border-left-style	border-inline-start-style
border-left-width	border-inline-start-width
border-right	border-inline-end
border-right-color	border-inline-end-color
border-right-style	border-inline-end-style
border-right-width	border-inline-end-width
border-top	border-block-start
border-top-color	border-block-start-color
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-top-style	border-block-start-style
border-top-width	border-block-start-width
bottom	inset-block-end
container-intrinsic-height	contain-intrinsic-block-size
container-intrinsic-width	contain-intrinsic-inline-size
height	block-size
left	inset-inline-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
max-height	max-block-size
max-width	max-inline-size
min-height	min-block-size
min-width	min-inline-size
overscroll-behavior-x	overscroll-behavior-inline
overscroll-behavior-y	overscroll-behavior-block
overflow-x	overflow-inline
overflow-y	overflow-block
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-top	padding-block-start
right	inset-inline-end
top	inset-block-start
width	inline-size

자세히 알아보기

• MDN: CSS 논리적 속성 및 값

---

✨ 이 기사나 다른 기사가 마음에 들었고 내 작업을 지원하고 싶다면 GitHub에서 저를 후원해 보세요 ?

---

위 내용은 당신의 CSS는 논리적인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!