Chromium의 새로운 논리 속성 약식 및 새로운 인셋 속성이 추가되었습니다.
Chromium 69 (2018년 9월 3일) 이후 논리적 속성과 값이 개발자는 국제적 레이아웃을 제어하는 데 사용되는 훨씬 더 강력합니다. Chromium 87에서 약식 및 이러한 논리 속성과 값을 좀 더 쉽게 작성할 수 있도록 오프셋이 제공됩니다. 이렇게 하면 Chromium의 약어를 지원하는 Firefox에서 66부터 Safari의 기술 미리보기에서 사용할 수 있습니다.
문서 흐름
논리 속성, 인라인 및 차단 축에 이미 익숙하고 앞으로 건너뛰어 복습하세요. 그렇지 않다면 다음 내용을 간단히 다시 살펴보세요.
영어에서는 글자와 단어가 왼쪽에서 오른쪽으로 흐르고 단락은 위에서 아래로 쌓입니다. 중국어 번체에서는 글자와 단어가 위에서 아래로 배치되고 단락이 쌓여 있습니다. 있습니다. 이 두 경우에 한해 '여백 상단'을 넣는 CSS를 작성한다면 한 단락에서 한 가지 언어 스타일만 적절하게 간격을 두고 있습니다. 해당 페이지가 기본 언어로 번역되어 있다면 영어에서 중국어로 번역되므로 새로운 세로 쓰기 모드에서는 여백이 잘 맞지 않을 수 있습니다.
따라서 상자의 물리적인 측면은 국제적으로 그다지 유용하지 않습니다. 따라서 여러 언어를 지원하는 프로세스 박스 모델의 물리적 측면 대 논리적 측면에 대해 배우게 됩니다.
Chrome DevTools에서 p 요소를 검사해 보신 적이 있나요? 그렇다면
기본 사용자 에이전트 스타일이
물리적이 아니라 논리적입니다.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
영어 독자들이 생각하는 것처럼 여백은 상단이나 하단이 아닙니다.
block-start 및 block-end입니다. 이러한 논리적 속성은
또한 일본어 독자와 비슷합니다. 한 번 작성하면 어디에서나 작동합니다.
정상적인 흐름은 웹페이지가 의도적으로 이러한 다방향성의 일부인 경우입니다. 페이지 콘텐츠가 문서 방향 변경에 따라 업데이트되면 레이아웃 및 요소가 흐름에 있는 것으로 간주됩니다. '내'에 대해 자세히 알아보기 및 'out' 흐름 MDN 또는 CSS 표시 모듈 사양. 논리적 속성은 흐름에 흐름에 있지 않아도 되며, 방향이 바뀌면서 어려운 작업의 대부분을 담당합니다. 흐름은 방향을 의미하며, 어떤 문자, 단어, 콘텐츠가 따라가야 하는지를 나타냅니다. 이렇게 하면 논리적 경로를 차단 및 인라인으로 만들 수 있습니다.
차단 방향은 새로운 콘텐츠 차단이 따르는 방향입니다.
"다음 단락을 어디에 배치해야 할까요?", '콘텐츠 블록' 또는 '텍스트 블록'이라고 생각하면 됩니다.
모든 언어는 블록을 정렬하고 순서를 지정합니다.
각 block-axis를 반환합니다. block-start은 단락이 처음 배치되는 측면입니다.
block-end은 새 단락이 향하는 측면입니다.
예를 들어 일본어 번체 손글씨에서 차단 방향은 오른쪽에서 왼쪽으로 흐릅니다.
인라인 방향은 문자와 단어가 이동하는 방향입니다. 방향 고려
글을 쓸 때는 팔과 손이 움직이고 inline-axis을(를) 따라 이동하고 있습니다.
inline-start은 쓰기를 시작하는 측이고 inline-end는 측면입니다.
쓰기가 끝나거나
줄바꿈되는 경우를 말합니다 위 동영상에서 inline-axis는 위에서 아래로 표시되어 있습니다.
다음 동영상에서는 inline-axis가 오른쪽에서 왼쪽으로 흐릅니다.
상태: flow-relative
한 언어로 작성된 스타일이 문맥에 맞고 적절하게 작성됨을 의미합니다.
적용했을 수 있습니다. 콘텐츠는 전송 언어에 따라 달라집니다.
새로운 약칭
다음과 같은 약식 표현 중 일부는 브라우저에서 사용할 수 있는 새로운 기능이라기보다는
양쪽 블록에 값을 설정할 수 있는 이점을 활용하여 스타일을 쓰는 방법
한 번에 이동할 수 있습니다. inset-* 논리 속성은 새로운 기능을 가져옵니다.
논리 속성을 사용하여 절대 위치를 지정할 수 있는 긴 방법이 없었기 때문입니다.
있습니다. 그러나 인셋과 약식이 함께 잘 흐르므로
Chromium 87에 도입된 모든 새로운 논리적 속성 기능을 한 번에 알려줄 수 있습니다.
마진 약식
새로운 기능은 없지만 다음과 같은 매우 편리한 약식 표현:
margin-block 및
margin-inline입니다.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
'상단 및 하단'의 약칭은 없습니다. 또는 '왼쪽과 오른쪽'... 지금까지!
margin: 10px;의 약식을 사용하여 네 면을 모두 참조할 수 있습니다.
는 논리 속성 약식을 사용하여 두 개의 보수적인 변을 쉽게 참조할 수 있습니다.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
패딩 약어
새로운 기능은 없지만 매우 편리한 약식 표현:
padding-block 및
padding-inline입니다.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
inline 무료 약식 세트:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
인셋 및 약식
물리적 속성 top, right, bottom, left를 모두 작성할 수 있습니다.
inset 속성의 값으로 사용합니다. position의 모든 값은 다음에서 이점을 얻을 수 있습니다.
인셋으로 면을 설정합니다.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
그러면 즉시 편리하게 사용할 수 있을 겁니다. 인셋은 물리적 면의 약칭입니다. 여백 및 패딩처럼 작동합니다.
새로운 기능
물리적 면이 약한 것만큼이나 흥미진진하지만,
추가 inset 약식으로 인해 가져온 논리적 특성입니다. 이러한 약어는
개발자의 작성 편의성 (입력하는 것이 더 짧음)뿐 아니라
흐름에 따라 다르기 때문에
레이아웃의 잠재적 도달범위를 뜻합니다.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
추가 자료 및 인셋 약식 및 장기 표기의 전체 목록 MDN에서 사용할 수 있습니다
테두리 약어
테두리와 중첩된 color, style, width 속성이 모두
새로운 논리 약어도 새로 추가되었습니다.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
추가 자료 및 국경 축약 및 세부 설명의 전체 목록 MDN에서 사용할 수 있습니다
논리 속성 <figure> 예
간단한 예제에 종합해 보겠습니다. 논리적 속성은 레이아웃과 다양한 쓰기 및 문서 방향을 처리하는 캡션이 있는 이미지를 만듭니다.
또는 시도해 보세요.
국제적으로 반응하는 카드를 만들기 위해 별도로 취해야 할 조치는 없습니다.
<figure> 및 몇 가지 논리 속성. 이 모든 것이 국제적으로
사려 깊은 CSS를 통해 잘 작동합니다. 이 내용이 의미 있는 작은 소개가 되기를 바랍니다.
폴리필 및 교차 브라우저 지원
캐스케이드 또는 빌드 도구는 이전 브라우저와 최신 브라우저를 동시에 사용할 수 있는 실용적인 옵션입니다. 업데이트된 논리 속성으로 적절한 간격을 두고 배치해야 합니다. 캐스케이드 대체의 경우 물리적 속성을 따릅니다. 를 사용하고 브라우저는 '마지막' 스타일 중에 찾은 속성 합니다.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
하지만 모든 사람을 위한 완전한 해결책은 아닙니다. 다음은 직접 작성한 대체 스크립트입니다.
:lang() 의사 선택기를 활용하여 특정 언어를 타겟팅하고
그런 다음 마지막에 논리적인
지원 브라우저의 간격:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
@supports를 사용하여 실제 기기 제공 여부를 결정할 수도 있습니다.
속성 대체:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, 감정 및 다른 사람들은 자동 번들러 또는 빌드를 사용합니다. 시간 오퍼링을 선택할 수 있습니다. 각 제품을 확인해 보세요 도구 모음 및 전반적인 사이트 전략과 일치하는 항목을 확인할 수 있습니다.
다음 단계
더 많은 CSS가 논리적 속성을 제공할 것입니다. 아직은 작동하지 않습니다. 한 가지 큰 누락된 이 GitHub 문제에 아직 해결 방법이 대기 중입니다. 초안에 임시 해결책이 있습니다. 모든 스타일에 스타일을 지정하고 한 쪽이 더 많아질까요?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
현재 제안서 초안은 매 시간마다 logical을(를) 작성해야 함을 의미합니다.
이렇게 들리지 않는 논리적 등가를 적용하기 위해
매우 드라이한 느낌이 듭니다.
블록 또는 페이지 수준에서 이를 변경하라는 제안이 있습니다. 하지만 물리적 측면을 가정하는 스타일에 논리적 사용이 유출될 수 있습니다.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
어려운 문제예요. YouTube는 여러분의 의견을 기다리고 있습니다.
논리 속성에 대해 자세히 알아보거나 알아보고 싶으신가요? 자세한 내용은 가이드 및 예시와 함께 MDN에서 확인하세요 🤓