다 방향 레이아웃 구축

CSS에는 다양한 방향과 언어를 쉽게 구축하는 데 도움이되는 새로운 기능이 있습니다. 이 기사는 CSS 논리적 특성 및 값 (예 : 마진 인라인 시작)에 관한 것입니다. 이들은 여전히 ​​무거운 편집을 받고 있지만 많은 브라우저에서 배송되는 W3C 작업 초안입니다. 나는이 속성을 잠시 동안 사용하고 있었고 전환 후 워크 플로를 크게 향상 시켰기 때문에 이것에 대해 이야기하고 싶습니다.

나는 사양에 대해 이야기하고 오늘 당신의 작업에서 어떻게 사용할 수 있습니까? 나는 우리가 아랍어를 기본 언어로 사용하는 이집트에 살고 있습니다. 아랍어는 오른쪽에서 왼쪽으로 작성되므로 아랍어 웹 사이트는 영어 버전의 거울 이미지처럼 보입니다. 우리가 만든 대부분의 웹 사이트는 이중 언어이므로 각 방향마다 특정 스타일을 제공합니다. 우리는 거의 모든 것의 값과 속성을 뒤집어서 그렇게합니다! 나는이 부분에 대해 자세히 이야기하지 않겠지 만 주제에 대해 쓴 과거 기사에 대해 간단히 이야기 할 수 있습니다.

HTML 태그에서 DIR 속성을 선언하는 것으로 시작합니다.

이 속성은 두 가지 값 중 하나를 허용합니다 : ltr (지정되지 않은 경우 기본값입니다) 및 RTL. 그 가치에 따르면, 브라우저는 특정 알고리즘에 따라 요소를 페인트하기 시작합니다. 텍스트는 방향과 관련하여 작성되며 구두점은 올바른 위치에 배치됩니다. 테이블과 같은 일부 요소에는 방향이 전환됩니다 (예 : RTL의 오른쪽에서 시작하는

). 고맙게도 CSS Grid 및 Flexbox와 같은 새로운 사양은 테이블과 비슷한 접근 방식을 따릅니다. 즉, 브라우저가 처리하기 때문에 순서를 변경할 필요가 없습니다.

HTML5는 DIR 속성에 대한 새로운 자동 값을 도입했습니다. 요소 내에서 첫 번째 문자를 확인하고, 왼쪽에서 오른쪽으로 쓰여진 언어 (라틴 문자와 같은)에 속하는 경우 요소는 LTR 방향을 가지며 그 반대도 마찬가지입니다. W3C는 저자에게 텍스트 방향을 결정하고 서버 측 솔루션을 대신 사용하기 위해이 값에 의존하지 않도록 촉구합니다.

자동 값에 대한 흥미로운 사용 사례는 댓글 스레드와 같은 컨텐츠, 사용자가 생성 한 컨텐츠의 방향에 대해 확신이없는 경우입니다. 나는 많은 사람들이 영어로 된 아랍어 웹 사이트에서 토론에 기여하는 것을 봅니다. 인터넷 익스플로러와 엣지의 경우 자동차 지원은 꽤 좋습니다.

소개 : dir () 의사 클래스

: dir () 의사 클래스는 방향 값에 따라 요소를 선택하는 새로운 선택기 수정 자입니다. 다음과 같이 작동합니다.

 / * 방향 값이 RTL로 설정된 모든 단락을 선택하십시오 */
P : dir (rtl) {
 글꼴 크기 : 16px; /* 때때로 아랍어 글리프는 제대로 느끼려면 크기 향상이 필요합니다. */
}


/ * 방향 값이 ltr로 설정된 모든 단락을 선택하십시오 */
P : dir (ltr) {
 글꼴 크기 : 14px;
}

이 선택기는 방향이 직접 설정되거나 자동으로 자동 설정 값을 평가하는 경우 요소를 선택합니다. 컨텐츠에 따라 요소가 올바르게 올바르게됩니다!

 
 P : dir (ltr) {
  배경 : 녹색;
 }
 P : dir (rtl) {
  배경 : 빨간색;
 }
스타일>



<p dir="auto"> 이것은 라틴 캐릭터로 시작하는 단락 </p>입니다.

<p dir="auto"> ‰ النص 적 틸 님 뇌 횡막 </p>

안타깝게도 : DIR ()에 대한 지원은 크지 않으며 Firefox에만 제한됩니다.

이 브라우저 지원 데이터는 Caniuse의 것입니다. 숫자는 브라우저가 해당 버전에서 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일 / 태블릿

브라우저 지원이 훌륭하더라도 선택기를 사용하면 요소를 대상으로하고 특정 스타일을 수동으로 적용 할 수 있습니다. 즉, 우리는 여전히 워크 플로를 향상 시키거나 다 방향 레이아웃을 생성하려는 노력을 줄이지 않는 모든 것 (마진, 패딩, 부유물, 위치 등)의 값을 뒤집어 야합니다.

CSS 논리적 특성 및 값을 소개합니다

W3C에 의해 정의 된 바와 같이, 논리적 특성과 값은 물리적, 방향 및 치수 매핑보다는 논리적 인 레이아웃을 제어 할 수있는 능력을 제공합니다. 기술 전문 용어를 건너 뛰고 세부 사항으로 직접 점프합시다. 이들은 특정 조건에 따라 다르게 평가할 새로운 속성과 값을 제공합니다.

논리적 값

언어의 자연적인 방향과 반대되는 방향으로 정렬하고 싶은 단락이 있다고 가정 해 봅시다. 이것이 LTR 방향을 따르는 영어로되어 있다고 가정 해 봅시다. 우리는 다음과 같은 일을 할 것입니다.

 
 <p>
  Lorem ipsum dolor sit amis ..
 </p>

그리고 CSS 파일은 다음과 같습니다.

 .반대 {
 텍스트 정렬 : 맞습니다.
}

RTL 버전의 반대를 제공하기 위해 DIR 속성으로 태그를 타겟팅하여 선택기를 무시하거나 다음과 같은 RTL 버전에 대해 다른 파일을 제공합니다.

 html [dir = "rtl"] .opposite {
 텍스트 정렬 : 왼쪽;
}

이 문제를 해결하기 위해 논리적 특성과 값이 만들어졌습니다. 왼쪽과 오른쪽을 사용하는 대신 올바른 컨텍스트로 평가하는 값을 사용하지 않는 이유는 무엇입니까? LTR 요소에서 왼쪽 값은 RTL 요소에있는 동안 요소의 시작 또는 시작을 의미합니다. 값 오른쪽은 시작을 의미합니다! 간단 해요?

그래서 우리가 이전에 쓴 것 대신 다음을 사용할 수 있습니다.

 .반대 {
 텍스트 정렬 : 끝;
}

그리고 그게 다야! 요소의 계산 방향이 ltr 인 경우 텍스트가 올바르게 정렬됩니다. 계산 된 방향은 RTL 요소와 반대입니다. 따라서 텍스트 정렬에 왼쪽 및 오른쪽 값을 사용하는 대신 간단히 시작 및 끝으로 바꿀 수 있습니다. 이것은 이전 옵션보다 훨씬 쉽고 편리합니다.

논리적 특성

우리가 방금 보았던 것은 논리적 가치 였으므로 이제 논리적 특성 으로 바꾸겠습니다. 논리적 특성은 동일한 아이디어를 가진 새로운 속성입니다. 그들은 요소의 방향에 따라 다르게 평가합니다. 마진을 예로 들어보십시오. 이전에는 단락이 시작될 때 공간을 추가하고 싶었습니다. 우리는 다음을 사용하여 LTR 문서에서 그렇게 할 수 있습니다.

 기사 img {
 마진 왼쪽 : 15px;
}

이제 RTL 버전의 경우 왼쪽 값을 재설정하는 것 외에도 마진을 반대 방향으로 추가해야합니다.

 html [dir = "rtl"] 기사 img {
 왼쪽 마진 : 0;
 마진 오른쪽 : 15px;
}

논리적 특성으로 더 잘할 수 있습니다. 다음을 고려하십시오.

 기사 img {
 마진 인라인 시작 : 15px;
}

-inline- 스타트 부분은 이미지의 수평 축의 시작 부분으로 평가됩니다. LTR의 경우 왼쪽과 RTL의 경우 오른쪽을 의미합니다.

시작과 끝은 아마도 지금까지 분명 할 것입니다. 그러나 단어 인라인이라는 단어는 무엇이며 왜 우리가 그것을 필요로합니까? 이해하려면 CSS 작문 모드 에 대해 이야기해야합니다. Jen Simmons는 그 주제에 대한 훌륭한 기사를 썼습니다. 나는 거기에 설명 된 모든 것을 역류하지는 않지만 결론은 작문 모드를 사용하여 작문 방향을 정의 할 수 있다는 것입니다. 중국어, 한국 및 일본어와 같은 일부 언어는 위에서 아래로 수직으로 쓸 수 있습니다. CSS 작성 모드를 통해 해당 흐름을 제어 할 수 있습니다. 다음 단락을 살펴보십시오.

블록의 상단, 하단, 왼쪽 및 오른쪽 가장자리를 명확하게 식별 할 수 있습니다. CSS 작성 모드를 사용하여 단락의 방향을 바꾸면 수직으로 흐르면 어떻게됩니까?

이 회전 된 단락의 "상단"에 대해 이야기 할 때, 우리는 콘텐츠가 시작되는 위치 또는 회전하지 않았을 때 오른쪽 가장자리가 무엇인지 의미합니까? 네 방향을 식별하면 혼란스러워집니다. 다른 관점에서 그것들을 보자. "정상적인"쓰기 조건에서, 수직 축에는 접미사 블록이 있고 수평 축에는 접미사 -inline과 시작 또는 종료가 있습니다.

그리고 우리가 그것을 돌리면, 그것은 다음과 같아야합니다.

우리는 정상적인 수평 레이아웃에 대해 이야기하고 있기 때문에 -inline -start 및 -inline -end를 사용하지만 다른 속성에 대해서도 아는 것이 좋습니다. 논리적 키워드를 사용하여 논리적 속기 값을 쓸 수도 있습니다. 다음을 고려하십시오.

 기사 img {
 마진 : 논리 10px 20px 30px 40px;
}

이미지 마진의 계산 된 값은 다음과 같습니다.

 기사 img {
 마진 블록 스타트 : 10px;
 마진 인라인 시작 : 20px;
 마진 블록 엔드 : 30px;
 마진 인라인 엔드 : 40px;
}

논리적 키워드는이 시점에서 실험적인 기능이므로 사양이 공식화 될 때 변경되거나 교체 될 수 있습니다. 그 동안 팔로우 할 수있는 주제에 대한 공개 토론이 있습니다.

논리적 특성을 사용하면 특정 축에 값을 적용 할 수 있습니다. 즉, 각각 수평 및 수직 축에 대한 마진 인라인 및 마진 블록이 있음을 의미합니다.

논리적 마진 속성과 마찬가지로, 우리는 또한 마진과 동일한 규칙을 따르는 논리적 패딩 속성도 있습니다.

논리적 포지셔닝 속성

이전 예에서는 접미사를 추가하여 속성의 의미를 수정할 수 있었지만 위치는 어떻습니까? 속성 이름은 이제 우리가 지금 상단, 오른쪽, 하단 및 왼쪽으로 알고있는 것과 완전히 변경되었습니다.

 .요소 {
 위치 : 절대;
 삽입 된 차단 시작 : 0;  / * 상단에 대한 평가 */
 삽입 블록 엔드 : 0;   / * 하단 평가 */
 삽입 된 라인 시작 : 0; / * LTR에서 왼쪽으로 평가하고 RTL */
 삽입 된 라인 엔드 : 0;  / * ltr에서 오른쪽으로 평가하고 rtl에서 왼쪽 */
}

새로운 속성과 값을 배우는 것은 어려울 수 있지만, 우리는 삽입이라는 속성을 조금 더 쉽게 만들 수 있습니다.

 /* 속기 FTW! */
.요소 {
 위치 : 절대;
 삽입 : 논리 10px 20px 30px 40px;
}


/ * 이것에 대해 평가합니다 */
.요소 {
 위치 : 절대;
 삽입-블록 스타트 : 10px;
 삽입 된 라인 시작 : 20px;
 삽입 블록 엔드 : 30px;
 삽입 된 라인 엔드 : 40px;
}

Inset은 마진 및 패딩과 같은 삽입 된 블록 및 삽입 내인을 모두 지원합니다.

논리적 경계 특성

국경 속성은 -inline- 스타트 및 -Block -Start를 추가하여 논리적으로 될 수 있습니다.

논리적 특성과 가치에 대한 깊은 다이빙에서 Rachel Andrew는 논리적 테두리 속성과 다른 작문 모드에 어떻게 대응하는지를 보여주는 훌륭한 데모를 포함합니다.

오늘이 모든 것을 어떻게 사용하기 시작할 수 있습니까?

Postcss의 힘 덕분에 오늘날 논리적 특성과 가치의 모든 마법을 사용할 수 있습니다! Jonathan Neal 은이 사랑스러운 PostCSS 플러그인을 썼는데, 이는 논리적으로 작성하고 오늘의 브라우저가 이해할 수있는 것으로 코드를 컴파일 할 수 있습니다. 플러그인은 3 단계로 작동합니다.

• 새 구문을 지원되지 않는 브라우저가 다음을 인식하여 : dir pseudo-class를 사용하여 LTR 및 RTL에 출력을 생성합니다.
• Neal의 플러그인 중 하나를 사용하여 번역합니다.

 .Element : dir (ltr) {
  ...
 }
 [dir = "ltr"] .Element {
  ...
 }

• PostCSS-Nested 플러그인을 사용하여 중첩 선택기를 다른 CSS 전 처리기와 마찬가지로 한 줄 선택기로 변환합니다.

Postcss는 모든 워크 플로에서 작동합니다. Grunt, Gulp 및 Webpack으로 시도 할 수 있습니다.

논리적 특성과 가치로 전환 한 이후로 많은 이점을 보았다고 말하면서 문을 닫을 것입니다. 물론 다 방향 레이아웃을 구축하는 데 시간이 걸립니다. 학습 곡선, 더 많은 속성을 쓸 수있는 추가 및 테스트가 있습니다. 다 방향 레이아웃을 만드는 이전의 방법은 개발에서 양방향 양방향을 처리하거나 한 번에 한 방향으로 작업하는 것이 었습니다. 어느 쪽도 큰 프로젝트에 적합하지 않습니다. 논리적 특성과 값을 사용하면 코드를 한 번 작성하고 고려하지 않고 두 방향으로 작동합니다.

참조

• Jen Simmons의 CSS 작성 모드
• Rachel Andrew의 논리적 특성과 가치 이해
• Jonathan Neal의 Postcss 논리적 특성 및 값
• 2017 년 아랍어로 다국어 레이아웃 (슬라이드)

위 내용은 다 방향 레이아웃 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!