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

CSS의 빠른 팁 : 마크업없이 CSS의 화살표와 형태

종종 그것은 요소 무언가가 관련되어 어떤 맥락 표시의 화살표 혹은 일종의 보여주 유용합니다. 우리는 자주 실행되는 항목 지점으로 화살표를 사용하여 툴팁으로 이것을 참조하십시오.

보통, 그러나이 화살에 추가하면 실제 중량에도 표시에서 숨김으로써이 추가 마크업을 보정하기 위해뿐만 아니라이 스타일을 사용하지 않으 사람들을 강제 마크업과 CSS에 모두 비용을 지니고 있지만, 각 화살표의 마크업을위한 페이지. 이 화살표를 표시하는 이미지를 사용하는 경우 (그리고 치료가 sprited되지 않은 경우 가능한 추가 요청) 전송해야 할 데이터의 추가 오버헤드가 있기 때문에 비용도 높다.

오늘은 당신에게 어떤 마크업을 만들 필요없이 이러한 시각적 힌트​​에 추가하는 방법을 보여주겠다. 우리 안에이 기술을 사용 Liferay 와 AlloyUI 우리 탭 시스템. 우리는 레거시 스타일로 우리가 필요 탭 설정한 탭이 그것이 매우 어려운 시각적으로 관계를 나타낼 수있게 그들이 논리적으로 관련이있는 섹션에서 마크업에서 별도로 사는 거 지원. 있었 그들이 공통의 부모를 공유하지 않기 때문에 예를 들어, 탭 섹션와 탭 모두 주위에 테두리를 넣어 수 없습니다.

대신, 우리는 선택한 탭에 현재 표시된 섹션에 관련된임을 나타내는 다른 방법을 강구했다. 다른 문제는 그들이 어디 AlloyUI tabview과 같은 마크업과 CSS 구조를 공유하는 데 필요한 각 탭에 항목이 공통 부모를 공유했습니다.

그래서 우리는 또 다른 대 탭 중 하나 집합에 대한 시각적 관계를 표시하도록 사용자 지정 마크업에 추가하고 싶지 않았어.

이 기술에 의해 논의되고 하나 구축 필라멘트 그룹 과 전문적으로 개척 Tantek Çelik (우리가 올해에 보는 즐거움을 가지고 누구 YUIConf 2010 ).

나는 빨리 우리가 뭘할지의 개념을 맡을께요.

루트 개념은 매우 큰 경계를 사용하여 다각형 형상을 만들어 내고 있습니다. 이것이 이루어집니다 방법은 0으로 요소의 너비와 높이를 설정하고, 요소의 큰 테두리를 설정하는 것입니다. 요소의 테두리의 모퉁이에서, 자연의 형상이 만들어집니다. 선택적으로 투명에 테두리 색상의 다양한 측면을 설정하면, 우리는 다양한 모양을 만들 수 있습니다.

그러나,이 모두는 전에 아주 심도있게 다루지되었습니다. 내가 꽤 멋지다고 생각하는 것은 페이지에 마크업을 삽입하지 않고이를 수행하는 방법이다.

CSS 컨텐트 생성

CSS는 우리가 '콘텐츠', 적절한 정도라는 속성을 사용하여 콘텐츠를 만들 수 있습니다. 그러나 단지를 사용하여이 속성을 사용할 수 있습니다 :after 또는 :before 의사 요소, 그리고 우리는 다소 (우리가 예를 들어 더 많은 HTML을 삽입할 수) 우리가 삽입할 수있는 것에 한정하고.

이게 무슨 멋지다 것이지만 콘텐츠와 우리가 삽입할 수있다는 것입니다, 우리는 스타일을 그 요소 계셨던 것처럼 수 있습니다. 이것은 우리가 다각형 모양으로 그것을 변형 수있다는 것을 의미합니다. 그리고 이유 :after 과 :before 의사 요소의 요소 (그리고 요소의 외부 아님)의 내용을 이후 또는 이전에 삽입, 우리는 그것을 주변에 이동하고 우리의 요소가 상대적으로 배치할 수 있습니다. 여기에서 우리는 문맥 포인터로 사용할 수 있습니다.

자 코드를 가자.
첫째, 우리의 HTML :

  <div id="demo"> </ 사업부> 

상자처럼 보이도록하자 스타일의 상자

  # 데모 {
	 배경 컬러 : # 333;
	 높이 : 100px;
	 위치 : 상대적;
	 폭 : 100px;
 }

당신은 우리가 상대적으로 위치를 설정하는 것을 알 수 있습니다. 이것은 우리가 절대적인 우리의 포인터를 설정하고 그것이 우리의 상자에 상대적으로 유지하도록 허용하는 것입니다.

자, 어서와 포인터에 대한 기본 스타일링을 삽입하자 :

  # 데모 : {이후
	 내용 : '';
	 높이 : 0;
	 위치 : 절대;
	 폭 : 0;
 }

당신은 몇 가지 알 수 있습니다. 하나, 우리는 우리 스타일에 대한 핸들을 줄 정도는 단지 빈 공간을, 삽입되었습니다. 둘째, 우리는 절대적으로 위치를 설정하고 저희가 박스 관련하려는 우리는 포인터를 이동할 수 있습니다.

지금, 여기 스타일의 모양처럼 보이게하기 위해 포인터에 대한 코드입니다 :

  # 데모 : {이후
	 내용 : '';
	 높이 : 0;
	 위치 : 절대;
	 폭 : 0;

	 국경 : 10px 고체 투명;
	 국경 - 상단 컬러 : # 333;
 } 

이제 그만 맨 위로, 어디 가서 상자 주위에 포인터를 배치하자. 우리의 상대 부모가 우리의 # 데모 요소이기 때문에, 우리의 좌표는의 좌표에 상대적입니다. 우리 포인터의 차원이 테두리 너비에 의해 제어되는 언급하는 것도 중요합니다. 따라서이 경우 우리 포인터의 전체 너비 (한 경사진 측면이 10px이고 다른 경사진 측면이 다른 10px입니다) 20px입니다.

그럼 출발해 우리가 의견이나 툴팁과 같은 상자 모양을 만들기 위해 화살표를 사용하고자하는 말, 우리는 아래쪽에 배치하고 그것을 인치 몇 픽셀을 움직일만한

  # 데모 : {이후
	 ... 이전 코드 ...

	 상위 : 100 %;
	 왼쪽 : 10px;
 }

그래서 우리의 상자가 이렇게 보이 :

아니면 우리가 중심에 우리가 좀 더 일찍 Liferay에서 보여주 탭에하는 일이야 우리의 화살표를 원한다고.
50 %로 왼쪽으로 설정하는 것은 시각적으로 의미 우리의 상자 가운데에 화살표의 상단 / 왼쪽 포인트를 설정합니다, 항상 센터가 될 것입니다.

내가 우리 화살표 크기는 국경의 크기에 의해 제어되는 언급된 왜 우리가 대신해야하고,하면, 왼쪽에서 50 %를 배치하는 것입니다,하지만 정확히 국경 - 폭과 동일 그것에 부정 왼쪽 여백을 설정 우리 화살표.

따라서 센터는 수평, 우리는 할 것이다 :

  # 데모 : {이후
	 ... 이전 코드 ...
	
	 국경 : 10px 고체 투명;
	 국경 - 상단 컬러 : # 333;

	 상위 : 100 %;
	 왼쪽 : 50 %;
	 여백 왼쪽 :-10px;
 } 

그리고 색깔을 가지고 우리의 화살표 어느 쪽이 변경하여, 우리는 쉽게 화살표의 방향을 변경할 수 있습니다. 기본적으로 규칙은 우리가 상자를 우리가 색상을주고 국경의 측면 그거야에 표시하려면 화살표 중 측면입니다.

내 상자가 화살표의 왼쪽에 표시하려는 경우 그럼, 테두리의 왼쪽에있는에 색상을 변경 :

  # 데모 : {이후
	 ... 이전 코드 ...

	 국경 : 10px 고체 투명;
	 국경 - 왼쪽 - 색상 : # 333;
 } 

그것이 왼쪽에 있기 때문에, 우리는 또한뿐만 화살표의 상단 / 왼쪽 좌표를 변경해야합니다. 그래서 우리는 그것을로 변경합니다 :

  # 데모 : {이후
	 ... 이전 코드 ...

	 왼쪽 : 100 %;
	 상단 : 10px;
 } 

어느 것이 우리에게 이것을 제공합니다 :

자, 이걸로 정말 멋진 부분은 우리가 결합할 수있다는 것입니다 :before 과 :after pseudos가 단일 요소에 여러 화살표를 추가할 수 있습니다. 이것은 우리가 두 방향으로가는 포인터가있는 요소를 가질 수 없습니다 것을 의미하지만도 하나의 화살표가 약간 큰 만들고 또 다른 화살표 위에 그것을 중심으로 국경을 시뮬레이션할 수 있습니다.

예를 들어, 같은 코드 :

  # 데모 {
	 폭 : 100px;
	 높이 : 100px;
	 배경 컬러 : # CCC;
	 위치 : 상대적;
	 국경 : 4px # 333 고체;
 }

 # 데모 : 후, # 데모 : {전
	 테두리 : 고체 투명;
	 내용 : '';
	 높이 : 0;
	 왼쪽 : 100 %;
	 위치 : 절대;
	 폭 : 0;
 }

 # 데모 : {이후
	 국경 - 폭 : 9px;
	 국경 - 왼쪽 - 색상 : # CCC;
	 상단 : 15px;
 }

 # 데모 : {전
	 국경 - 폭 : 14px;
	 국경 - 왼쪽 - 색상 : # 333;
	 상단 : 10px;
 }

이것을 생산할 수 :

당신은 또한 화살표를 가지고 상자의 안쪽을 가리 키도록하고 (일부 CSS3 스타일링과) 같이 보이는 상자를 얻을하는 데 사용할 수 있습니다 :

화살표의 왼쪽과 오른쪽 폭을 조작함으로써 우리는 더욱 효과가 이상 배를 할 수 있으며,이 코드를 사용하여 다른 모양으로 드롭 그림자를 시뮬레이션할 수 :

 # 데모 : {전
	 국경 - 폭 : 10px;
	 국경 - 상단 컬러 : # CCC;
	 국경 - 왼쪽 - 폭 : 50 픽셀;
	 국경 오른쪽 - 폭 : 0;
	 왼쪽 : 0;
 }

 # 데모 : {이후
	 국경 - 폭 : 2px;
	 국경 - 상단 컬러 : # 777;
	 국경 - 왼쪽 - 폭 : 50 픽셀;
	 국경 오른쪽 - 폭 : 0;
	 왼쪽 : 0;
 }

주의 사항

브라우저 지원

이것은 IE8을 포함한 모든 주요 브라우저에서 지원됩니다. 두 예외는 물론, IE 6을 지원하지 않는 7 위치 :before 과 :after 의사 요소.

자, 왜 같은 엔터 프라이즈 제품을 것이다 Liferay는 여전히 기업 브라우저 시장의 품위있는 덩어리를 주장 IE의 2 버전에서 지원되지 무언가를 출하와 괜찮을?

우리는 사용자에게 도움이 있지만, 그 기능에 중요한 아니라 무언가를 위해서 사용되는 주로 때문입니다. 예를 들어, Internet Explorer 6과 7에서 탭을 여전히 선택 보이는, 아직 배경을 가지고, 그냥 내용을 가리키는 지표가 없습니다.

.

당신이 지원하는 Internet Explorer 6과 7이 중요한 경우,이 기술을 배포하면 그래서 내가 권하고 싶습니다,이 기법이 도움이 될 것입 영역을 선택할 수 있지만, IE의 해당 버전에 대한 우아한 대체 또는 대체 스타일을 제공합니다.

생성된 콘텐츠는 DOM의 일부가 아닙니다

의사 요소에 대한 생성된 콘텐츠는 styleable하지만 실제로는 DOM 트리의 일부가 아니므로 요소로 존재하지 않습니다. CSS 3과 말다툼 후크를 제공 않지만 ::before 과 ::after psuedo-요소 (여분의 콜론을 발견), 그것이 주로 디자이너 후크로가, 그리고 내용이 실제 요소로 존재하지 않습니다. 이에 대한 의미를 몇 가지가 있습니다.

inspectable 않음

Liferay는 광범위한 테마, 내가 묻는받을보다 일반적인 질문 중 하나를 지원하기 때문에 '에서 나오는 탭에있는 화살표가 어디 있죠? "입니다, 왜냐면 : 후 / 의사 요소 대해 Firebug, 웹킷의 웹 경위에 의해 inspectable되지 전에 Opera의 잠자리 등

명확하고 조직화된 스타일 시트와 마찬가지로 문서는 이걸로 도움이되지만 우리가 대해 Firebug와에 중독되어 왔습니다 검색 기능을 놓치지 않습니다.

(좀 할까 ...) 스크립트 않음

:after / :before pseudos는 JS를 통해 직접 타겟팅할 수 없습니다 당신이 동적으로 화살표 위치를 설정하고자 할 경우, 그럼 당신이, 예를 들어 정상적인 경로를 통해 직접 속성을 조작할 수 없습니다.

그러나, 당신은 정말 멋진 사용할 수있는 스타일 유틸리티를 해당 루트를 통해 콘텐츠에 대한 pseudos를 조작하는 YUI 3. 스크립트를 통해 직접 타겟팅하지 동안 그래서, 스크립트로 조작할 수 있습니다.

대부분의 경우 이러한 경고는 개발자주의 사항이며, 이점에 비해 매우 사소한 있습니다. 또한, 작품 데이터를 URI의 및 MHTML을 사용하여 다 있기 때문에 당신은 마크업 프리, 요청이없는 이미지뿐만 아니라 주사하는이 기술을 사용하여 상상할 수 있습니다.

전반적으로,이 기법은 페이지에서 요소를 향상시키고 사용자에게 컨텍스트를 제공하는 매우 쉬운 방법이 될 수 있습니다.

추가 읽기

• 정기 다각형의 연구
• 이미지없이 CSS는 포인터를 도구 설명 - 다각형 CSS를위한 사용?
• 오페라 개발자 커뮤니티 - CSS는 콘텐츠 기술을 생성
• 데이터 URI를 설명했다

Liferay에서 YUI 3 작업

당신은 프런트 엔드 개발과 사랑 오픈 소스 소프트웨어에 대한 열정이 있으 시나요? Liferay는 한 번에 코드의 세계로 한줄을 변경하고자하는 재능있는 프런트 엔드 개발자를 고용하고 있습니다. 그게 당신처럼 들리는 경우 만나고 싶어요. 가서든지 저희에게 이력서를 쏘고 careers@liferay.com .

대화 찾기 : bloglines | 테크노

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