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

YUI 3.3.0 미리보기 릴리스 3

2010년 12월 22일 오후 12시 26분에서 에릭 Miraglia에 의해 |에 개발 | 7 코멘트

11 월 YUIConf에서 우리는 우리의 다음 주요 릴리스, YUI 3.3.0의 미리보기를 발표 YUI 3 codeline . 우리는 지금 세 번째 시험판 최대이고, 당신이 도움이되는 겨울 방학 동안 약간의 시간이 있으시면 당신 땜에 스핀을주기 위해 우리가 싶어 타이어를 걷어차. 당신이 사용할 수있는 CDN에서 YUI 3.3.0pr1 씨앗 파일을 시작하려면, YUILibrary.com에서 배포판을 다운로드 하거나 체크 아웃 YUIBlog에서 호스팅 3.3.0pr3 분포를 (참고 : 성능으로 인해 부족으로 YUIBlog에 상당히 느린입니다 콤보 처리, 나머지는 CDN 기반 구현은 일반적으로) 해당 3.2.0 사용량보다 빠를 것이라고 안심하시기 바랍니다.

새로운 것들 중 일부는이 릴리스에서 찾는 방법 :

완전히 새로운 자동 완성 (베타)
완전히 새로운 차트 (베타) SVG에서 제공하는, 캔버스와 VML
완전히 새로운 DataTable의 (베타) , 인기 YUI 두 구성 요소에서 더 많은 모듈형 업그레이 드의 시작
새 전화 접속 제어 (베타) , 혁신은 야후 디자이너 제프 Conniff 만든 유한 범위 컨트롤 또는 슬라이더에 걸릴
완전히 새로운 크기 조정 유틸리티 (베타) YUI 기반 3 네이트 카나와 Liferay, 공동 작성자 중 에두 Lundgren에서 제공하는, AlloyUI 프로그램 에 확장 가능한 YUI 3 갤러리 . (이에서 에두아르 네이트 만날 수 AlloyUI 선풍 투어 YUIConf 2010를 쐈어요 .)

이 YUI 3.3.0에 대한 사랑을 더욱이며, GA 기간이 nears으로 우리는 더 많은 정보를 공유됩니다. 현재, 우리는 1 월 둘째 주에 릴리스 윈도우를 겨냥하고있어. 우리의 미리보기에 대한 귀하의 의견을 환영 YUI 포럼 과 관련 티켓 데이터베이스 가 새 릴리스와 함께 자신의 구현을 테스트할 때 우려의 문제를 발견하면.

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

유지 보수를위한 YUILibrary.com 하 (업데이트 : 백업 지금)

년 | 9시 8분에서 2010년 12월 21일가 YUI 팀에 의해이다 개발 | 코멘트 끄기

- 당신이 문제를보고 있으면 알려주 백업 실행 : 오후 12시 32분 2010년 12월 21일를 업데이 트합니다.

우리는 유지 보수를 위해 오늘 아침 다운 YUILibrary.com를 잡았습니다. 우리는이 작품이 4-6시간을 지속 기대합니다. 불편을 끼쳐 드려 죄송하며 우리는 가능한 한 짧은로 다운 타임을 지키려고 노력 하마.

당신이 그동안 긴급 지원 문의 사항이 있으면, 당신은 종종 서로 돕는 YUI 커뮤니티 회원 수십 알아서 Freenode.net에 # YUI 채널에 의해 떨어지는 것을 고려하십시오.

YUIBlog 및 @ YUILibrary이 사이트는 백업할 때 업데이 트가 실행됩니다.

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

YUI 2.9.0 릴리스 업데이트

2010년 12월 17일 오후 1시 50분에서 제니 국 도넬리입니다에 의한 |에 개발 | 9 개의 댓글

다음주 YUI 팀 Q1 2011 년 하반기에 출하되는 릴리스 2.9.0에 대한 계획을 시작합니다. YUI 2.9.0은 2.x에서의 codeline의 마지막 주요 도트 출시되고, 팀은 적극적 YUI이 프로젝트에 대해 열려있는 모든 티켓을 검토하거나, 그들 2.9.0 릴리스의 일부로 지정 닫아 버릴 꺼야 그들은 "해결하지 않습니다"또는 YUI 3 프로젝트로 이동.

시간과 자원 제약의 현실은 우리가 YUI 2.x에서에 일부 클로저를 제공하고 우리 3.x의 개발에 노력 리더블 수 있도록 최우선 항목에 초점을 강요합니다. 다음은 릴리스 2.9.0에 포함되어야하는 어떤 결정으로 우리를 안내하기 위해 사용되어야한다는 기준 중 일부는 다음과 같습니다

부정적인 영향을 미치는 핵심적인 사용 케이스되는 문제.
수준의 매트릭스에서 새 브라우저 출시에 관련된 문제를 신흥.
향상된 기능 및 새로운 기능은 YUI 2 드 우선순위 및 YUI 3 간주됩니다.

YUI 3서만 초점을 두 평행 codelines을 개발로부터 YUI 팀의 전환은 YUI이 프로젝트의 끝을 의미하지는 않습니다. 모든 현재와 미래 YUI이 릴리즈 야후 CDN에서 호스팅되는 것입니다, YUI 2 코드베이스는 GitHub에서 호스팅되는 것입니다, 우리는 미래에 YUI 2 지역 사회 기반의 정비를 탐험하고 싶습니다.

우리의 계획 과정을 계속로서, 우리는 커뮤니티에서 피드백을 찾고, 그리고 릴리스주기에 걸쳐 진행 업데이트 통신, 미세 조정 일정습니다.

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

엄격한 모드 타운에 나오

2010년 12월 14일 오후 2시 12분에서 더글러스 Crockford에 의해 |에 개발 | 20 코멘트

이것은 전세계 사람들이 ECMAScript 프로그래밍 언어 표준, 다섯 번째 에디션 ECMA 총회의 승인의 첫 주년을 축하하기 위해 그들의 차이를 잊고 평화와 친교를 이루고 시간과 계절입니다. ES5의 가장 중요한 특징은 새로운 엄격 모드입니다. 엄격한 모드는 가입 선택 모드입니다 수리 또는 언어의 가장 문제가 기능의 일부를 제거합니다.

엄격 모드를 지정

엄격 모드를 요청하는 방법은 두 가지가 있습니다. 첫 번째는이에서 Pragma를 삽입하는 것입니다

  "엄격한을 사용";

파일이나 컴파일 단위의 상단. 그것은 다른 문장 앞에 나타나야합니다 있지만 공백 및 주석 앞에 수 있습니다. 그것은 쓸모없는 문자열 리터럴 구문의 형식을 가지고 있으므로 이것은 ES3 시스템에 의해 무시됩니다. 이것은 또한 이전 브라우저에서 실행할 수있는 프로그램을 ES5/strict 쓸 수있다는 것을 의미합니다. 엄격한 코드는 또한 비 엄격하게 (혹은 별거) 코드와 상호 작용할 수 있으므로 엄격한 기능은 별거 아닌 함수를 호출할 수 있으며, 별거 아닌 기능은 엄격한 함수를 호출할 수 있습니다. 호환성이 높은 수준은 엄격 모드를 채택하기가 쉽습니다.

있는 파일이나 컴파일 단위에 코드의 모든 "use strict"; 프리앰블는 엄격한 코드로 처리됩니다. 문제는 역시있다. 성능 고려 사항은 현재 누적 HTTP 지연을 방지하기 위해 함께 많은 자바 스크립트 파일을 연결할 우리에게 강요. 가진 파일이있다면 "use strict"; 프리앰블 그것에 추가 별거 아닌 코드를 가지고, 별거 아닌 코드는 엄격한으로 처리되며 아마도 실패합니다. 동일한 파일에 엄격하고 썩어 섞어 필요 없지만, 우리는 이미 몇몇 유명 웹 사이트가 잘못 보았다 :이 쉬운 규칙입니다.

두 번째 방법에서 Pragma이 함수의 첫 진술과 같습니다 삽입하는 것입니다. 그것은 모든 함수가 그 안에서 중첩되는 모든 기능을 포함하여 엄격한 될 것이라고 선언합니다. 엄격를 존중 기능 범위, 그래서 엄격한 코드 및 별거 아닌 코드는 동일한 파일에 혼합 수 있습니다. 이 두 번째 양식은 매우 잘 작동하는 모듈 패턴 과 다양한 유사. 그것이 결합 위험을 피할 수 있기 때문에 두 번째 양식을 선호합니다.

  (함수 () {
    "엄격한을 사용";
    / /이 함수 엄격 ...
 } ());

 (함수 () {
    / /하지만이 기능은 별거는 ...
 } ());

범위

역사적으로, JavaScript는 함수 범위가 얼마나 혼란되었습니다. 때로는 정적 범위가 될 것 같다,하지만 일부 기능들은 동적 범위가처럼 행동합니다. 이것은 읽고 이해하기 어려운 프로그램을 만드는 혼동된다. 오해는 버그가 발생합니다. 또한 성능 문제입니다. 정적 범위 지정은 컴파일 시간에 발생하는 변수 바인딩을 허용하는 것이지만, 역동적인 범위에 대한 요구 사항은 구속력이 상당한 성능 처벌 함께 제공되는 런타임에 연기해야 의미합니다.

엄격한 모드는 모든 변수 바인딩을 정적으로 할 것을 요구합니다. 그 기능이 이전에 필요한 동적 바인딩이 제거되거나 수정해야한다는 것을 의미합니다. 특히, 진술과이 제거되고, eval 는 호출자의 환경을 함부로 변경하는 함수의 기능이 심각하게 제한됩니다.

엄격한 코드의 장점 중 하나는 같은 도구는 것입니다 YUI 압축기는 그것을 처리할 때 더 나은 일을 할 수 있습니다.

묵시 전역 변수

자바 스크립트 전역 변수를 암시하고있다. 당신이 명시적으로 변수를 선언하지 않으면 전역 변수는 암시적으로 당신에게 선언합니다. 그들의 기본적인 가사 심부름의 일부를 소홀히 수 있기 때문에 이것은 초보자를 위해 쉽게 프로그래밍 있습니다. 그러나 그것은 훨씬 더 어려운 큰 프로그램의 관리를하게하고 상당히 신뢰성이 떨어집니다. 그래서 엄격 모드에서 묵시적 전역 변수는 더 이상 만들어지지 않습니다. 당신은 명시적으로 모든 변수를 선언해야합니다.

글로벌 누수

원인이 될 수 상황의 숫자가 있습니다 this 전역 객체에 바인딩되는가. 당신이 제공하는 것을 잊지 예를 들어, new 접두어를 생성자 함수를 호출하면 생성자가있어 this 대신 새 개체를 초기화의 글로벌 개체에 예기치 않게 구속되므로, 그 대신 자동 전역 변수로 조작합니다. 이러한 상황에서는 엄격 모드 대신에 바인딩됩니다 this 에 undefined 생성자는 오류가 훨씬 더 빨리 감지할 수 있도록하는 대신 예외를 던질 원인이됩니다.

시끄러운 실패

자바 스크립트는 항상 읽기 전용 속성을 가지고있다지만, ES5의 때까지 그들에게 자신을 만들 수 없습니다 Object.createProperty 기능은 그 기능을 노출. 당신이 읽기 전용 속성에 값을 할당하는 경우, 그것은 자동으로 실패합니다. 과제는 속성의 값을 변경 않을 수 있지만했던 것처럼 당신의 프로그램이 진행합니다. 이것은 프로그램이 일관성없는 상태로 이동시킬 수있는 무결성 위험이다. 엄격 모드에서는 읽기 전용 속성을 변경하려고 시도하면 예외를 던질 것입니다.

팔진법

단어 크기 3의 배수있었습니다 머신에서 기계 수준의 프로그래밍을 수행할 때 숫자의 진수 (또는 기본 8) 표현은 매우 유용했습니다. 60 비트 단어 크기를 가지고 CDC 6600 메인 프레임, 작업 때 진수가 필요했습니다. 당신 진수를 읽을 수있다면, 20 자리 숫자와 같은 단어를 볼 수 있습니다. 두 자리 작전 코드를 표현, 8 레지스터 중 하나가 자리 식별 하나. 기계 코드로부터 높은 수준의 언어로 느린 전환하는 동안, 그것은 프로그래밍 언어로 진수 양식을 제공하는 것이 유용할 것으로 생각되었다.

C에서 octalness의 극히 불행한 표현이 선택되었습니다 : 최고 영. 그럼 C에서, 0100는 64이 아닌 100을 의미하고, 08 오류가 아니라 8이다. 심지어 더 불행하게도,이 시대 착오는 그것에만 오류를 만드는 데 사용되는 자바 스크립트를 포함한 거의 모든 현대 언어에 복사되었습니다. 그것은 다른 목적이 없습니다. 그래서 엄격 모드에서 진수 양식이 더 이상 허용되지 않습니다.

등등

arguments 의사 배열 ES5에 배열처럼 조금 더된다. 엄격 모드에서는 그것은 잃는 callee 와 caller 속성을. 이렇게하면 여러분의 합격을하게 arguments 기밀 문맥을 많이 포기하지 않고 신뢰할 수없는 코드. 또한, arguments 기능 속성은 제거됩니다.

엄격 모드에서는 리터럴 함수에서 키 구문 오류를 생성합니다 중복. 함수는 같은 이름으로 두 개의 매개 변수를 가질 수 없습니다. 함수는 매개 변수 중 하나와 동일한 이름을 가진 변수를 가질 수 없습니다. 기능은 없다 delete 자체 변수. 하기위한 시도를 delete 하지 않는 구성 속성은 현재 예외를 throw합니다. 원시 값이 암묵적으로 포장하지 않습니다.

프로그램이 통과하는 경우 JSLint , 아마 엄격 모드에서 작동합니다.

그것은 여전히 불완전해 세계입니다

엄격 모드가 해결되지 않는 자바 스크립트의 문제는 여전히 있습니다. 예를 들어, 세미콜론 삽입은 여전히 위험하고, 0.1입니다 + 0.2가 여전히 0.3과 동일하지 않습니다. 이러한 문제의 정정은 향후 버전 기다려야 할 것이다.

왜 엄격 모드 사항

프로그램의 신뢰성과 가독 대한 분명한 이점 외에도 엄격한 모드는 매시업 문제를 해결하는 데 도움이됩니다. 우린 그 코드가에게 브라우저를 인계하거나 사용자 또는 서버에 자체를 허위로하는 라이센스를 제공하지 않아도, 우리와 우리 사용자에게 유용한 일을하기 위해 페이지에 타사 코드를 초대하고 싶습니다. 우리는 타사 코드를 제한해야합니다. 같은 시스템 구글의 Caja는 하지만, 성능과 불편에 상당한 비용이 해. 내 자신의 ADsafe의 시스템은 또한이 일을하지만, 제거의 비용 this 와 [] 입양 어렵게 만들 수 언어에서 subscripting 있습니다. 엄격한 모드는 우리 ADsafe와 Caja의 표현력의 편리함과 성능으로 타사 코드를 만들 수 있습니다. 저희 사이트는보다 복잡하게하고 더 많은 연결로 이것은 매우 중요한 것입니다.

엄격한 모드는 XSS 문제가 해결되지 않습니다. 그 문제에 대한 해결책에 따라 몇 가지 긍정적인 조치를 취할 W3C .

ES5/strict은 미리보기에서 지금이고, 곧 어디서나 모든 표준 호환 브라우저에서 표준 장비됩니다.

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

CSS의 Position 속성

년 | 7시 35분에서 2010년 12월 14일 티에리 Koblentz하여 오전 CSS를 101 , 설계 , 개발 | 6 개의 댓글

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

이 속성은 모든 요소에 적용됩니다. 그것은 다섯 가지 값이있다 :

static
relative
absolute
fixed
inherit

위치 : 정적

섹션 9 비주얼 서식 모델 :

상자에 따라 뻗어 정상 상자는 정상적인 흐름 . top , right , bottom 및 left 속성은 적용되지 않습니다.

것들에서 발견하는 이 데모

두 번째 상자는 위치를 선언하지 않고 될 정확히 어디에 보여줍니다.
주어진 값은 top '정적'컨텍스트의 계산된 값 때문에 적용되지 않습니다 박스 오프셋은 항상 auto .

기억해야 할 것들

있다면 position 요소의 속성의 값을 가지고 static 그 요소가 위치한다라고하지 않습니다.
때문에 static 초기 값 (기본값)이고, 그것이 다른 값을 덮어 제외 선언 블록에 같은 스타일을 포함시킬 필요가 없습니다.

위치 : 상대

섹션 9 비주얼 서식 모델 :

상자의 위치는 정상 흐름 (이것의 위치라고 부릅니다에 따라 계산됩니다 정상적인 흐름 ). 그러면 상자가 정상적인 위치에 상대적인 오프셋합니다. B는 상쇄되지 않은 것처럼 상자 B는 상대적으로 위치가되면 다음과 같은 상자의 위치를 계산됩니다.

것들에서 발견하는 이 데모

박스 '두 사람'300 픽셀에 의해 아래로 이동했습니다,하지만 상자 '세'뿐만 아니라 다음과 같은 단락이 곳에 머물렀습니다. 상자 뒤에 그 발자국을 남겨 페이지에서 해제 될때처럼 나타납니다. 위치가 상대적으로 상자를 offsetting 것은 흐름을 방해하지 않기 때문입니다.
위치가 상대적으로 상자 중복 다음 요소. 그것은 다른 상자 앞에 표시됩니다.

기억해야 할 것들

계산된 값은 항상 = - = 하단 오른쪽과 왼쪽 상단합니다. 면 direction 포함하는 블록입니다 ltr '왼쪽'WINS와 '권리'의 가치가된다 - '왼쪽'. 면 direction 포함하는 블록은 rtl , '오른쪽'성과와 '왼쪽'는 무시됩니다. 저자는 반대의 속성에 동일한 값을 설정하여 사물이 작동하는 방법을 활용할 수 있습니다.
'절대적인'모델과 달리 top , right , bottom 및 left 속성 스트레칭도 (그들은 그 크기를 변경할 수 없다) 상자를 축소 수 없습니다.

위치 : 절대

섹션 9 비주얼 서식 모델 :

상자의 위치 (및 크기)로 지정되어 top , right , bottom 및 left 속성. 이러한 속성은 상자의에 대하여 오프셋을 지정 포함하는 블록 . 절대적 위치 상자는 완전히 정상 흐름 (이것은 나중에 형제 자매에 아무런 영향을 미치지 않습니다)에서 제거하고 포함하는 블록과 관련한 입장을 할당됩니다. 또한,하지만 절대적 위치 상자 여백을 가지고, 그들은하지 축소 다른 여백과 함께.

것들에서 발견하는 이 데모

오프셋 어떤 상자를 지정하지 않기 때문에 박스 '두 사람은'원래 위치에서 이동하지 못했지만, 우리가 사용했다면 top:0;left:0; 예를 들어, 해당 상자에있을 것이 뷰포트의의 왼쪽 상단 모서리 .
레이아웃 지혜, 그건 상자 '두 사람이 함께 스타일되었던 같다 display:none . 상자 흐름에서 제거되었습니다.
흐름 박스 '두 사람 밖으로 상자'셋 '상자'하나의 '(문단이 따라했습니다)에 반대하는 이동되었습니다.
흐름에서 제거 모든 요소와 마찬가지로 박스 '두 사람은 수평으로 돌았습니다.

기억해야 할 것들

어떤 '절대'또는 '고정'위치에 요소의 계산된 값이 display 는 block .
어떤 '절대'또는 '고정'위치에 요소의 계산된 값을 float 없다 none .
'포함하는 블록'위치 컨텍스트를 수립 박스입니다. 이는들과 가장 가까운 조상에 의해 설립되는 '위치' , '절대', '상대적'또는 '고정'의. 이것은 부모 상자가 포함하는 블록되지 않을 수 있습니다 의미 .
그것이 최고로 스타일되었다 것처럼 절대적 위치 상자의 기본 위치가 항상 동일하지 않습니다 : 0; 왼쪽 : 0, (LTR 컨텍스트에서). 그리고 이것은 두 가지 이유이다 :
1. 위치 상자에 들어있는 블록은 가장 가까운 위치에 조상에 의해 설립되어, 아무도 없다면, 참조 컨테이너는 루트 요소입니다. 있는가 포함된 블록 루트 요소 삶을 사각형이다는 초기 포함하는 블록을했다. 연속 매체 들어,의 크기가 뷰포트의을 (화면 창 또는 다른보기 영역)와 캔버스 기원에 정박하고 있습니다. 이 예제는 뷰포트 관련 위치 상자 (기본가 포함된 블록)를 보여줍니다.
2. 요소는 여백 상자 컨텐츠 박스가 아니하거나 포함하는 블록의 경계 상자에 대한 참조에 위치하고 있습니다. 이 새로운 예제는 패딩 상자의 가장자리 콘텐츠 상자의 가장자리를 (포함하는 블록이되는 만지지 않았 으면 박스 '두 사람'될 곳을 보여줍 body ).
상자의 크기는 결과가 될 수 있습니다 top , right , bottom 및 left 속성 값을. 예로 들어, 모든 속성을 따르면 것은 자사 포함된 블록의 패딩 상자의 크기에 맞게 상자 스트레치을 다할 것입니다. 참고 모든 박스 오프셋을 따르면 (IE6이 상자를 늘릴하지 않습니다.)
문서 (에서와 함께 스크롤되지 않습니다 마스크 오버레이를 만들려면 이전 예제 ) 중 하나를 사용 fixed 대신 absolute 또는 스타일 body 와 함께 position:relative 초기 위치 결정 블록 (스타일링 뷰포트이기 때문에 html IE에서 작동하지 않을 것이다) . 본 바와 같이 중첩 데모 보여줍니다.
position:absolute 트리거의 haslayout .

기억해야 할 가장 중요한 것은

이 위치 결정 방식이 흐름에서 박스를 제거하기 때문에, 그것은 레이아웃을 위해 사용하는 것은 좋지 공법을 간주됩니다.

위치 : 고정

섹션 9 비주얼 서식 모델 :

고정 위치가 절대 위치의 하위 범주입니다. 유일한 차이점은 고정된 위치 상자, 포함된 블록에 의해 설립되어있다는 것입니다 뷰포트의 . 내용은 연속 미디어 문서를 스크롤하는 경우, 고정 상자는 이동하지 않습니다. 이러한 측면에서 그들과 유사한 고정된 배경 이미지 . 내용 페이지된 미디어 (여기서 문서의 내용이 하나 이상의 개별 페이지로 나뉩니다), 고정 위치에있는 상자는 각 페이지마다 반복됩니다. 이것은 각 페이지의 하단에 서명 예를 들어, 배치를 위해 유용하다. 페이지 영역보다 큰 고정된 위치에있는 상자가 잘렸습니다됩니다. 초기 포함된 블록에서 보이지 않는 고정 위치 상자의 부품이 인쇄되지 않습니다.

에서 알 수있는 것들 이 데모 :

고정 위치가 절대 위치의 하위 범주를위한 사실 모든것은 '절대'는 (요소 - 붕대를 축소, 그것 흐름 등에서 제거됩니다) '고정'에도 마찬가지입니다. 때문에
상자가 뷰포트 관련하여 배치됩니다, 그것은 페이지와 스크롤되지 않습니다.
IE 6에서는 상자가 나타납니다 정적 상자로 하지만, "재미있는"가 있습니다 해결 방법은 그것에 있습니다.
문서를 인쇄할 때, 상자의 '두 사람은'모든 단일 페이지에 나타납니다.

기억해야 할 것들 :

상자의 위치는 '절대적인'모델에 따라 계산되지만, 이외에, 상자가되어 고정되어 어떤 기준에 대하여. 핸드헬드, 투영, 스크린, TTY, 및 TV 미디어 타입의 경우 상자에 대하여 고정되어 뷰포트 및 스크롤시 이동하지 않습니다.
박스의 일부 뷰포트의 영역의 밖에있다면 콘텐츠 시력 사용자에게 inaccessile 수 있습니다.
인쇄 미디어 유형의 경우, 저자는 각 인쇄된 페이지에 나타나지 않도록 요소를 방지할 수 있습니다. 지도에서와 같이 @ 미디어 규칙을 사용하여
```
  미디어 인쇄 {@ 
   # 로고 {위치 : 정적;}
 } 
```
마찬가지로 position:absolute , position:fixed 트리거됩니다 haslayout IE에서합니다.

위치 : 상속

경우 position:inherit 주어진 상자에 지정된 다음 그것은 상자의 부모에 대한 속성과 같은 계산된 값을 취할 것입니다.

IE 6과 7은 함께 사용할 때를 제외하고이 키워드를 지원하지 않습니다 direction 및 visibility (표시 의 CSS 속성 값 상속 ).

고려해야 할 것들

박스 오프셋

절대적 및 고정 위치 상자에 대해 가치가에 대한 비율로 설정하는 것이 인식 top , right , bottom 및 left 포함된 블록 (부모 상자 아닐 수도 있음)의 크기에 따라 계산됩니다.

'위치'와 '오버플로'

함께 스타일 상자 overflow:hidden 상대적으로 위치가 지정된 요소 (중첩된 박스)를 고정되지만 항상 절대적 위치에 사람을 숨길 수 없습니다. 부모 상자가 항상 포함하는 블록 (있는 가장 가까운 조상되지 않기 때문입니다 '순위' '상대적인'또는 '고정', '절대'의).

즉, 이것은 절대적으로 위치가 지정된 요소는 오버플로 스타일 상자 밖에서 나타납니다 의미 : 자신 포함된 블록 상자 자체 혹은 말했다 상자 안에 요소가있는 경우를 제외 숨겨져. 이 데모 페이지는 사물이 작동하는 방법을 보여줍니다.

여백

저자에 관계없이 자신의 위치 결정 체계의 요소에 여백을 사용할 수 있습니다.

IE의 경우

IE에서 상자 '를 배치한 것은'축복이나 저주가있을 수 있습니다 :

IE6에서는 position:relative (with haslayout) 에서 마이너스 마진으로 스타일 상자를 예방하는 데 사용될 수 있습니다 잘린되고 (어떻게 볼 부모 컨테이너에 의해를 상자 포지셔닝 이 문제를 해결합니다.)
이 새로운 스태킹 컨텍스트를 (볼 확립 수 있으므로 요소를 배치한 것은 IE 6 및 7에서 길을 상자 스택을 "방해"수 테스트 케이스를 ).

주문을 스태킹하고 수준을 스태킹

소스 코드의 순서에 따라 위치 상자는 정상 흐름에서 수레와 상자 앞에 와서.
저자는 위치 상자에서 'Z - 지수'속성을 통해 스택 수준을 지정할 수 있습니다.
IE6, 7에서 상자를 배치한의 단순한 사실은 스태킹 컨텍스트를 (위 참조, "설정할 수 IE의 경우 ").

모바일 디바이스

PPK의 기사 읽기 [여섯째] 위치 값을 모바일 브라우저 업체가 실제로 지원할 수없는 이유를 찾기 위해, position:fixed .

또한 판독

DrLangbhani 의한 "유령"비유 :

위치 상대가있는 요소는 항상 흐름이 그것의 정상적인 위치에 상대적인 오프셋합니다. 즉, 그것은 그것이 정상적인 상황에서 안 어디에 상대적으로 이동하고 있으며, 그것을 이동하면 주변 요소의 레이아웃에 영향을주지 않습니다. 그것은 뒤에 그 시체를 남겨두고있다 유령 같아요. 너비와 높이를 가지고 있으며, 신체는 주변 환경에 영향을 미치는지만, 보이지 않는 것입니다. 유령 상자가 움직일 수 있지만 그 위치는 여전히 그것으로부터 측정됩니다 점에서 아직도 옛날 신체에 연결되어 있습니다. 현재 위치 절대적있는 요소도 쉽습니다. 그것은 더 이상 모든 (그것이 레이아웃의 흐름에서 빼낸 것)에서 자사의 환경 영향을 미치지 않습니다. 이제 남겨진없이 몸을 가진 진정한 유령이다. 그것이 더 이상 존재하지 않는 것처럼 아득히의 형제 요소에 대해서라면 그것입니다. 상대, [위치 : 고정,] 또는 위치 : 절대 당신이 어느 위치에 하나를 찾을 때까지 그 지위를 얻으려면 상위 요소의 각각을 통해 봐. 그 요소는 참조 점이 될 것입니다. 당신이 "위치"요소를 찾지 못한 경우에만 그것은 문서에서 오프셋됩니다.

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

회전 목마 모듈 : YUI 3 갤러리에서

년 | 11시 53분에서 2010년 12월 13일는 Gopal Venkatesan와 파비안 프랭크 의해 오전 개발 , YUI 3 갤러리 | 16 코멘트

소개 저자 : Gopal Venkatesan는 ( @ g13n 그 프론트 엔드 엔지니어링 커뮤니티의 deans 중 하나입니다) 방갈로에서 야후 일하고, Gopal가에서 리드 엔지니어되었습니다 YUI 2 회전 목마의 2.6.0 릴리스 이후 프로젝트. 그는 또한 새로운의 저자이다 YUI 3 갤러리 회전 목마 프로그램 모듈. 파비안 프랭크 독일과 베이징의 야후에 대한 작품에서 교신, 그는 글래스고 대학에서 연구원으로 그의 석사를 마친 이후 파비안은 야후와 함께 왔습니다.

회전 목마는 무엇입니까?

회전식 컨트롤은 오버로드된 페이지 영역에 수직 또는 수평으로 arrayed 같은 객체의 집합 중에서 검색을위한 도구를 제공합니다. "회전 목마"은유는 영화 촬영 중 일 carousels을 가지고 달려오는 비유에서 유래; 회전식 컨트롤 콘텐츠 블록의 전체를 통해 지속적인 원형 탐색을 허용하여이 비유에 충실도를 유지할 수 있습니다.

회전 목마가에 "오버로드"페이지에서 공간을, 추가적인 내용을 발견하고 탐색하는 사용자의 쉽고 직관적인 메커니즘을 제공함과 동시에 자사의 치수 이내 면에서보다 그 공간에 대한 더 많은 콘텐츠를 제공할 수있는 위젯의 가족의 일부입니다 . Accordions, 탭, 나무와 ScrollViews이 장르의 다른 예입니다.

왜 또 다른 회전식 제어?

YUI 3 강력하고 기능이 풍부한 회전 목마를 (우리가 필요로 필요로 YUI 2 ). 이 회전 목마를위한 디자인 목표는 그것을 활용, 앞으로 숙이고 청소하고 플러그인을 통해 추가적인 구성을 추가할 수 있도록하는 것이었다 YUI 3 ' 가벼움과 속도를 유지하기 위해 모듈화를위한의 본질 지원.

YUI 세 위젯 프레임 워크

YUI 3을 사용하여 사용자 정의 위젯을 쓰고있는 가장 큰 장점 중 하나는 위젯 프레임 워크 (위젯 프레임 워크에 더 사용자 가이드 , 심층 동영상 소개 ). 비교 YUI 2.8.2에서 회전 목마를 제에 YUI 3 갤러리 회전 목마 , YUI 3 버전은 야위고 우아한이다. 위젯의 특성, 훈련 수명주기, 진보적인 향상 지원 등 일반적인 집합을 제공하는 기초를 제공에 관하여 무거운 대부분의 위젯 클래스와 함께 있기 때문입니다.

YUI 세 위젯 프레임 워크는 UI 업데이트 방법 비교 상태 방법의 분리를 입양 모든 위젯을 추진 일관성 MVC 패턴을 제공합니다. 이 코드는 매우 깨끗하고 maintainable 있습니다. 사실 이것은 YUI 3 회전 목마는 이전 YUI 2 기반 사촌보다 낫다 왜 중요한 요인 중 하나입니다.

YUI 3 플러그인 모델은 개발자들이 객체에 새로운 기능을 추가하거나 기존의 동작을 수정할 수 있습니다. 이것은 동적 그래서, YUI 3 회전 목마가 그것에 구운 애니메이션 코드가없는 에이 젝스 등을 통해 요소를 당길 수있는 회전 목마 위에 추가 기능을 추가할 수 있지만, 대신에 나는 그것이 필요한 경우는 애니메이션 지원을 추가 플러그인을 만들었습니다 . 이것은 구성 요소가 매우 가볍고 유지하는 데 도움이됩니다.

자신의 웹사이트 갤러리 회전 목마

어떤 회전 목마는 무엇이며 어떻게 그것이 당신의 웹사이트를 개선하는 데 도움이 될 수 있습니다 대해 읽은 다음, 당신은 운이 좋다면 당신의 손을 더럽히는 걸 열망 느낍니다. 귀하의 웹사이트에 회전 목마를 구현하는 우리의 YUI 3 갤러리 회전식 확장과 함께 걱정 마 HTML에서 글머리 기호 목록을 제공하는만큼 쉽습니다. 그건 단지 장사가 아니야 - 그건 우리가 최근 야후 스포츠 검색 결과 페이지에 갤러리 회전 목마를 통합 방법입니다.

간단한 예제

선생님이 알아야 할 거의 모든 것을 다룰 것입 간단한 예제부터 시작하자. 당신이 새로운 갤러리 회전 목마를 사용하기위한 가장 쉬운 방법은 YUI 3 자동적으로 야후의 콘텐츠 전송 네트워크에서로드하게하는 것입니다. 회전 목마가 무엇 불러오기, 항목의 스크롤리스트, 우리는 HTML의 목록을 만듭니다. 우리는 자바 스크립트를 쉽게 찾아서 사용할 수 있도록 사업부의 목록을 포함합니다. 당신이 이미 당신의 마크업의 목록과 같은 방식으로 표현되는 몇 가지 데이터가있다면, 당신은 또한 단지 주변에 회전 목마 사업부를 넣고 행운을 테스트할 수 있습니다! 우리가 여기에 이미지 예제를 사용하고 있지만, 당신이 원하는 무엇이든을 위해 갤러리 회전 목마를 사용할 수 있습니다, 그런 말을하는 것은 매우 중요하다!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ 리>
     <li> <img src="img/c2.jpg"> </ 리>
     <li> <img src="img/c3.jpg"> </ 리>
     <li> <img src="img/c4.jpg"> </ 리>
     <li> <img src="img/c5.jpg"> </ 리>
     </ 마셨다>
 </ 사업부>

이제 작동하기위한 데이터를 가지고있어서, 우리는 회전 목마 위젯을 사용하여 모두 다섯 항목을 보여줌으로써 눈길을 향상 싶습니다. 당신이 이미이 간단한 작업입니다 YUI 3을 사용하고 있다고 가정. 당신은, 당신은 YUI 3 과거 갤러리로 파기되어 있을지에 따라 한번도 보지 않았을 수도있는 유일한 방법은 우리가 명시적으로 갤러리 버전을 지정하는 것입니다. 우리가 YUI의 로더는 기본적으로로드하려고하는 빌드 갤러리에 포함되지 않은 새로운 위젯을 사용하기 때문에 이것이 필요하다. 기본 번호가 증가되고 빌드할 때 그러나, YUI, 그리고 유이 갤러리 성숙시피, 이것은 미래에 더 이상 필요하지 않습니다.

  YUI ({갤러리 '갤러리-2010년 10월 20일 - 19-33'})
  . 사용 ( "갤러리 - 회전 목마", "갤러리 - 회전 목마-anim", "대용품"함수 (Y) {
   VAR 회전 목마 = 새로운 Y.Carousel ({boundingBox : "# 컨테이너"
    contentBox : "# 컨테이너> 마셨다"});
   carousel.plug (Y.CarouselAnimPlugin, {애니메이션 : {속도 : 0.7}});
   carousel.render ();
 });

(당신이 새로운 물건을 받고에 관심이있다면 그건 그렇고, 당신은 방문할 수 YUI 3 갤러리 저장소를 github 또는 Gopal의 포크 그가 회전 목마 개발. 당신이 버그를 발견하면 우리가 늘 듣고 드리겠습니다.)

예제로 돌아가기 ... YUI 여기서부터이 소요됩니다. 로더는 자동으로 갤러리 회전 목마와 야후의 콘텐츠 전송 네트워크에서 자사의 종속성을 가져옵니다. 그 후, 회전 목마가 초기화되고 표시되고 있습니다. 사용자는 스크롤할 왼쪽 또는 오른쪽 화살표를 클릭할 수 있습니다. 불필요한 복잡 한 줄에만으로도 용서하세요,하지만 난 저항할 수 없었다. 제가 사용 Y.CarouselAnimPlugin 한 페이지에서 대신 순식간에 다음 페이지를 표시하는 다른 원활하게 우리의 회전 목마 슬라이드를하도록. 원하는 경우 속도 매개 변수와 놀아 주시기 바랍니다.

당신은 위의 스크린샷에서 볼 수 있듯이, 회전 목마가 실행됩니다. 그러나 CSS는 페이지의 나머지 부분에 잘 맞지 않을 수도 있습니다. 이것은 우리 갤러리 회전 목마를 사용자 정의하는 방법에 대해 다루겠습니다 우리의 다음 섹션에서 우리를 이끌고 있습니다.

갤러리 회전식 사용자 정의

Now that you have your Carousel up and running and identified a use case for your website, you hopefully want to integrate it seamlessly. As mentioned previously, we did so for our Sports Search Results Page. If you want to increase the number of visible items, for example from three to four, you can do so by modifying the line which instantiates Carousel.

 var carousel = new Y.Carousel({ boundingBox: "#container",
 contentBox: "#container > ol", numVisible: 4 });

Still not good enough? Yeah, right. Luckily CSS allows us to add our own style definitions and even overwrite the initial ones without touching any existing CSS. So your first step will probably be to remove the borders, because they are quite obtrusive. Just add the following CSS to your page header.

 .YUI 3-carousel {
  border: none !important;
 }
.YUI 3-carousel-nav {
  background: none !important;
 }
.carousel ol li {
  border: none !important;
 }

Now, that looks better. I've also used a negative margin to reduce the gap between my Carousel and the heading. However, we are still not completely there. I assume that you also want to use your own custom buttons, which integrate nicely into your page layout. For this example we will use the same buttons that are also used on Yahoo's search result pages. This requires a bit more, but still simple, CSS.

 .YUI 3-carousel-button {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  height: 20px !important; width: 28px !important;
 }
.YUI 3-carousel-nav-item {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  background-position: -133px 0 !important;
 }
.YUI 3-carousel-first-button {
  background-position: -90px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-first-button-disabled {
  background-position: -60px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-next-button {
  background-position: -30px 0 !important;
 }
.YUI 3-carousel-button-disabled {
  background-position: 0 0 !important;
 }
.YUI 3-carousel-nav-item-selected {
  background-position: -121px 0 !important;
 }

We will leave it to that for today and hope you feel ready to get started. At least that was all that we needed. However, depending on how big your site is and how interested you are in its performance, there are general thoughts about loading something from a third party content delivery network that also apply here. For example, Sidnei da Silva laid out some interesting thoughts in a blog post earlier this month. We would be happy to provide a How To that explains how a YUI widget and its dependencies can be moved to your own website, or even content delivery network, so you are able to keep the number of HTTP requests as low as possible. Let us know if you are interested, we are looking forward to your feedback!

More to Explore in the Gallery

The excellent team of Eduardo Lundgren and Nate Cavanaugh of Liferay have a Carousel component in the Gallery as well — certainly worth checking out if you're in the market for this kind of control.

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

YUI Theater — Ryan Grove: “Introducing YUI 3 AutoComplete” (42 min.)

December 10, 2010 at 5:55 am by Eric Miraglia | In YUI Theater | Comments Off

In this talk from YUIConf 2010 , YUI 3 AutoComplete author Ryan Grove ( @yaypie ) takes you on a whirlwind tour of some of the many autocomplete patterns made possible by this component (which is coming in the soon-to-be-released YUI 3.3.0) and provides a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities. ( Note : If you enjoy this talk, you might want to check out Ryan's other excellent talk from this year, “ Achieving Performance Zen with YUI 3 .”)

If the video embed below doesn't show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater .

CC Content/Used by Kind Permission:

Subscribing to YUI Theater:

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

다음 페이지»

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

엄격 모드를 지정

범위

묵시 전역 변수

글로벌 누수

시끄러운 실패

팔진법

등등

그것은 여전히​​ 불완전해 세계입니다

왜 엄격 모드 사항

위치 : 정적

것들에서 발견하는 이 데모

기억해야 할 것들

위치 : 상대

것들에서 발견하는 이 데모

기억해야 할 것들

위치 : 절대

것들에서 발견하는 이 데모

기억해야 할 것들

기억해야 할 가장 중요한 것은

위치 : 고정

위치 : 상속

고려해야 할 것들

박스 오프셋

'위치'와 '오버플로'

여백

IE의 경우

주문을 스태킹하고 수준을 스태킹

모바일 디바이스

또한 판독

회전 목마는 무엇입니까?

왜 또 다른 회전식 제어?

YUI 세 위젯 프레임 워크

자신의 웹사이트 갤러리 회전 목마

간단한 예제

갤러리 회전식 사용자 정의

More to Explore in the Gallery

Other Recent YUI Theater Videos:

CC Content/Used by Kind Permission:

Subscribing to YUI Theater:

트위터에서 YUI 라이브러리

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

blogroll을

정책 코멘트

야후되기

메타 :

그것은 여전히 불완전해 세계입니다