방향 친화적인 탐색 바»야후 사용자 인터페이스 블로그 (YUIBlog)

방향 친화적인 탐색 바

년 | 9시 12분에서 2011년 4월 25일 티에리 Koblentz하여 오전 CSS를 101 , 발전 | 4 개의 댓글

나는 최근에 오른쪽 정렬 링크가있는 수평 탐색 메뉴를 건너 왔어요. 네가 기대한대로, 그것은있는 목록 요소였다 float:right 와 함께 목록 항목 float:left . 이 접근법 잘못은 전혀 없다하더라도, 그것은 나를 논의할 기회 걸릴 영감 방향성을 레이아웃합니다.

부동 요소의 비용

수레 방향성에 대한 개념이 없다, 그들은 인라인 요소 또는 테이블 컬럼 (하는 것처럼 작동하지 않습니다 dir 속성 마법의 총알입니다.) 수레로, 저자는 가치를 '교환'하는 메커니즘을 구현해야 때마다 인터페이스 변경 ( ltr 대 rtl ).

대신에 사용하는 자 float , 저자 선호 수 있습니다 inline-block . 다음은 간단한 예제이다 :

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; }

참고 그 "사용 \ 0 대신에 "(공백 포함)" \9 "오페라 돌볼 것이지만,"향후 증거로되지 않을 수 있습니다 \9 "(IE 전용).

본 바와 같이 데모 페이지 쇼, 크롬에서 사파리와 파이어 폭스, inline-block 기법 (흐름 방향의 값이 일치 레이아웃 작성 모드에 의존하게 dir 아무런 방향을 지정하지 않으면 속성, 또는 초기 값). 다른 UA의 하시려면 때문에 속성을 선택 (즉 지원의 IE의 부족 html[dir="rtl"] ), 저자 방향의 변화를 수용하기 위해 마크업에 후크를 추가해야합니다. 예를 들어, 전체 학년 호환성을 위해 :

플로트 기술의 경우 :

 .rtl ul { float: left; } .rtl ul li { float: right; }

: 인라인 블록 기법에 대한

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ }

`text-align: start | end`

달리 left 과 right , start 과 end 쓰기 모드에 의존하는 키워드입니다. 영어로, start 으로지도를 left 과 end 에지도 right . 에 의존하는 start 및 end 보다는 left 과 right 일부 브라우저 (스와핑을 할 수 있습니다 ltr / rtl 자동).

브라우저 및 기법의 차이점

"지원하지 않는 브라우저에서는 start / end (IE, 오페라) ": 스와핑 방향 아무것도 변경하지 않습니다 기법을 떠; 인라인 블록 기법 : 방향을 교환하는 메뉴의 정렬을 변경하지 않지만 링크가 올바른 순서에 표시됩니다
지원 "할 브라우저에서 start / end "(크롬, 사파리, 파이어 폭스를): 스와핑 방향 아무것도 변경하지 않습니다 기법을 떠; 인라인 블록 기법 : 방향을 교환하는 메뉴가 모두 방향을 바꾸려고 정도이며 링크

그것은 그것이다! 당신이 수평 스타일 요소가 다음번에,주는 것을 잊지 display:inline-block 이나 display:table 봐요.

저자 소개 : 티에리 Koblentz은 그가 소유하고 야후에서 프론트 엔드 엔지니어 TJK 디자인 , EZ-css.org 및 CSS-101.org를 . 당신은에서 트위터에 티에리 따를 수 @ thierrykoblentz .

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

4 개의 댓글

티에리,
이 문장은 부분적으로 잘못된 것입니다 :
수레 방향성에 대한 개념이 없다
이 테스트 시리즈를 참조하시기 바랍니다 수레와 bidirection 하고 보여주는이 테스트 떠오르 메뉴 'RTL'방향으로합니다. 현재 오페라와 웹킷은 'RTL'방향의 레이아웃에 잘못된 오버플로를 처리합니다.
당신의 접근 방식 (CSS를 해킹) IE7-행복하게 코딩 같다고 말할 것이다. 이것은 도움이되지 않는다 'RTL'방향을 가지고 스크립트 (ie. 히브리어 또는 아랍어) 읽기 및 쓰기 수백만의 100s. 에서는 IE7-, 웹 개발자는 'RTL'방향으로 IE7이 - 행동하도록 크게 해킹 있었다. 'RTL'방향과 같은 페이지에 CSS에서 볼 수있는 일반적인 것은의 사용이다 text-align: right 및 text-align: right 텍스트의 정확한 위치를 얻을 수 있습니다. 나는 IE가 저조한 'RTL'방향을 처리하였습니다 전용 브라우저 아님을 명시합니다.
이제이 아마도 당신에게 놀라게하지만, Internet Explorer 8이 제대로 RTL 방향을 지원합니다. IE8 였어요 바로 전에했던 유일한 브라우저는 도마뱀 붙이이다. 나는 바로이 문서 bidirection에 대한이 모든 잘못된 정보에 추가 이후 UL 및 리튬 권리가 아닌 IE8를 해킹하거나 IE9을 모두 떠하는 것이 좋습니다.
나는 모드 및 방향 작성에 대한 사양에서 약간의 영향을 미쳤습니다. 이것에 관한되었습니다 논리적 특성 , 플로트 및 RTL에 대한 오버플로 와 오버플로우와 bidi을 .
댓글 작성자 앨런 Gresley - 2011년 4월 26일 #
@ 앨런
당신은 나를 혼동하고 있어요. "RTL에 대한 시작 : 오른쪽 또는 플로트 플로트"하지만, 내가 아는 한 사양의 "시작"과 같은 것은 [1]이 더만을 나열하고 있지 않은 귀하는 귀하의 페이지에 언급되지 left , right , none 및 inherit .
'RTL'방향과 같은 페이지에 CSS에서 볼 수있는 일반적인 것은의 사용이다 text-align: right 및 text-align: right 텍스트의 정확한 위치를 얻을 수 있습니다.
그게 네가 테스트 케이스에 사용하고있는거야 보인다. 제 생각에도 'RTL에 대한 표시 오버플로와 포함 블록 "즉, text-align:right 거기에 중복이며, 그 text-align:start 어쨌든 더 적절한 하셨을 게다.
또한,이 문서에서 나는의 사용을 "입증"을 알려 주시기 바랍니다 text-align: start|end . right|left 값이에만 다시 추락으로 사용됩니다.
사실, 당신은 다른 컨텍스트에 따라 스타일의 물건에 발생하지 않도록하는 것입니다이 문서의 요점을 놓친했을 수 있습니다. RTL과 LTR 상황에 swaps의 드롭 다운 메뉴를 보여줍니다 귀하의 데모 페이지는 아무것도 새로운 :-( 없다하는 가치와 왼쪽 / 오른쪽 속성을 떠
의견을 보내주셔서 감사합니다!
[1] http://www.w3.org/TR/CSS21/visuren.html # 플로트 위치
댓글 작성자 티에리 Koblentz - 2011년 4월 26일 #
재미 오. 테스트.
수레와 bidirection
댓글 작성자 앨런 Gresley - 2011년 4월 26일 #
좋아요! 감사 티에리!
제가 마지막 문장에서 비슷한 문제와 조언을 상대하던 내 문제를 해결.
나는이 코드를했다 :
<- 방향 : RTL;
<- 위치 : 절대; 방향 : ltr;
1 <- 플로트 : 왼쪽;
2 <- 플로트 : 왼쪽;
3 <- 플로트 : 왼쪽;
내용
IE9를 제외한 모든 브라우저에서 연속 단추를 표시합니다. (존재하지 않았다 "왼쪽으로 플로트"는 것처럼) 그러나 IE9 그들이 서로 우는 표시
마지막으로 나는 "핸들"사업부 속성 "테이블 표시"를 추가하면 효과가 있어요.
많이 감사합니다,
라덱.
댓글 작성자 라덱 Pribyl - 2011년 10월 10일을 #

죄송합니다, 코멘트 양식은이 시간에 문을 닫습니다.

에서 제공하는 워드 프레스 에서 야후! 웹 호스팅 .

야후 사용자 인터페이스 블로그 (YUIBlog)