모든 프로그래머의 경우 사용자에게 통합 스타일 인터페이스를 제공하는 것은 변하지 않는 요구 사항입니다. 그러나 다른 운영 체제와 브라우저가 웹 페이지 컨텐츠를 표현하는 방식에 차이가 있기 때문에 웹 페이지에서 이러한 스타일 통일을 달성하는 것은 특히 어렵고이 차이는 거의 불규칙합니다. 이 문제는 특히 요소를 처리하는 과정에서 특히 두드러집니다. 많은 사람들을 무력하게 만드는 것은 제출 버튼의 통합 성능 표준 문제입니다.
예를 들어, 유형 = 제출 속성 인 입력 태그는 다른 브라우저 (Firefox)에서 매우 못 생겼거나 한 종류의 결함 (인터넷 익스플로러)이 있거나 심지어 매우 단단한 작용 (사파리). 이 문제에 대한 해결책은 일반적으로 입력 속성을 이미지로 설정 한 다음 버튼 이미지를 직접 설계하는 것입니다. 그러나 우리는 버튼을 사용해야 할 때마다 많은 성가신 작업을 추가해야합니다. 따라서 우리는 더 나은 솔루션, 디자이너에게보다 유연하고 의미있는 접근 방식이 필요합니다. 다행히도이 방법은 이미 현실에 존재하며, 우리가 필요로하는 것은 조금 더 많은 작업을 수행하는 것입니다. 친구 여러분, 우리가 귀여운 작은 친구, 반 친구 <버튼>을 소개 해주세요!
입력 대 버튼
다음은 사용중인 제출 버튼 레이블입니다.
<입력 유형 = 제출 값 = 제출 />
다른 브라우저의 성능 스타일은 다음과 같습니다.
<버튼>을 사용하여 위와 같이 버튼을 만듭니다.
<버튼 유형 = 제출> 제출 </button>
그들은 다음과 같은 스타일로 표현됩니다.
이 버튼은 실행 및 프리젠 테이션 동작에서 위에서 만든 버튼과 다르지 않습니다. 양식을 사용하여 양식을 제출하는 것 외에도이를 사용할 수 없도록 설정하거나 바로 가기를 추가하거나 tabindex 등을 설정할 수 있습니다. 다행히도 다양한 표현식 스타일 외에도 이러한 기능을 지원합니다 (입력 버튼과 비교하여 Safari의 버튼 버튼은 표면의 액체 효과가 부족합니다). <버튼> 태그의 가장 멋진 기능은 다음 코드를 사용하여 이미지 추가와 같은 유용한 HTML 요소를 그 안에 배치 할 수 있다는 것입니다.
<버튼 유형 = 제출> <img src = alt = /> 제출 < /button>
브라우저에서의 모양은 다음과 같습니다.
나쁘지 않습니다. 실제로 W3C의 정의에 따르면 <버튼> 요소는 이러한 성능 차이를 해결하기 위해 발생했습니다.
버튼 요소로 생성 된 버튼은 입력 요소로 생성 된 버튼과 마찬가지로 더 풍부한 렌더링 가능성을 제공합니다. 버튼 요소에는 내용이있을 수 있습니다. 예를 들어, 이미지가 포함 된 버튼 요소와 같은 기능을 수행하고 유형이 이미지로 설정된 입력 요소와 유사하지만 버튼 요소 유형은 컨텐츠를 허용합니다.
버튼 요소 -W3C
따라서이를위한 설계 솔루션을 찾아야하며 다행히도 대규모 데이터가있는 인터넷은이 문제를 해결하는 데 도움이 될 수 있습니다. 이것은 실제로 매우 편리하지만 불행히도 디자이너와 웹 사이트 개발자는이 요소의 존재를 알지 못합니다. Wufoo를 버튼 요소 (이 기사의 네트워크 제품, Dudo Note)로 바꾸기로 결정하기 전에이 태그와 CSS가 다음과 같은 요구를 충족시킬 수 있는지 확인해야합니다.
요구 사항 :
1. 버튼 모양이 있어야합니다
2. 다른 브라우저에는 동일한 표현식 스타일이 있습니다.
3. 버튼에 적용된 스타일은 하이퍼 링크에도 사용할 수 있습니다 (Wufoo의 상호 작용은 항상 양식 제출 방법을 사용하고 링크 접촉을 사용하여 Ajax 메소드를 보내기 때문에 종종 함께 가까워 질 수 있으므로 동일한 표현 스타일이 필요합니다).
4. 태그는 다른 상황에서 유연하고 쉽게 수정할 수 있습니다.
5. 정보 전송 중에 발생하는 이벤트의 경우 아이콘과 색상으로 효과적으로 구별 할 수 있습니다.
위의 문제에 직면 한 나는 먼저 CSS를 썼다가 크로스 브라우저 문제를 해결했습니다. 다음으로 우리는 다음을 볼 것입니다.
최종 결과이것에 대해 소란을 일으킬 것이 없으며, 매우 간단하지만 매우 효과적입니다. 이 메소드를 사용하고 핸들 버튼을 사용하는 이유는 10,000 개의 아이콘을 만들기 위해 Photoshop Creation을 하나씩 시작할 필요가 없기 때문입니다. 코드를주의 깊게 살펴보면 두 개의 버튼이 실제로 두 개의 링크임을 알 수 있습니다.
<div class = 버튼>
<버튼 유형 = 제출 클래스 = 긍정적>
<img src =/images/icons/tick.png alt =/>
구하다
</버튼>
<a href =/password/reset/
<img src =/images/icons/textfield_key.png alt =/>
비밀번호를 변경하십시오
</a>
<a href =# class = negative>
<img src =/images/icons/cross.png alt =/>
취소
</a>
</div>
이것의 목적은 웹 응용 프로그램의 많은 작업이 이벤트 (REST) 중심이므로 특정 URL을 통해 사용자 요청을 보내면 이러한 작업을 초기화 할 수 있습니다. 두 요소에 적용 할 수있는 스타일을 사용하면 Ajax 및 표준 제출 버튼으로 인한 상호 작용을 유지할 때 스타일 통일이 더욱 유연 해집니다.
이제 이미지 요소의 Alt 속성을 비워 두는 이유는 무엇입니까? ALT는 IMG 요소의 필수 속성입니다. 이미지의 내용을 설명하는 데 사용되지만 여기에는 이미지에 대한 관련 설명이 없으며 실제로는 약간 혼란 스럽습니다. 그러나 누락 된 속성과 달리 빈 속성 값은 표준과 완전히 일치합니다. 그는 브라우저 에이 이미지가 완전히 무시할만한 정보를 나타내고 브라우저가 프롬프트 정보의 폐색으로 인해 다음 버튼을 찾을 수 없다는 것을 방지합니다. 여기의 아이콘은 완전히 중복되므로 통합 인터페이스 스타일을 달성하기 위해 완전히 사용되는이 아이콘을 보는 데 사용자의 시간을 낭비하지 않습니다.
CSS 스타일 시트이러한 버튼 스타일을 제어하는 데 사용되는 대부분의 CSS 컨텐츠는 매우 직관적입니다. 다른 브라우저의 약간의 차이는 아래 코드에 다른 패딩 값을 적용하게됩니다. 다행히도이 모든 것이 완전히 가능합니다.
/ * 버튼 */
.Buttons A, .Buttons Button {
디스플레이 : 블록;
플로트 : 왼쪽;
마진 : 0 7px 0 0;
배경색 :#f5f5f5;
국경 : 1px solid #dedede;
테두리 탑 : 1px solid #eee;
왼쪽 경계 : 1px solid #eee;
Font-Family : Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
글꼴 크기 : 100%;
라인 높이 : 130%;
텍스트 결정 : 없음;
글꼴 중량 : 대담한;
색상 :#565656;
커서 : 포인터;
패딩 : 5px 10px 6px 7px; / * 링크 */
}
.Buttons 버튼 {
너비 : 자동;
오버플로 : 가시;
패딩 : 4px 10px 3px 7px; / * IE6 */
}
.Buttons 버튼 [type] {
패딩 : 5px 10px 5px 7px; / * Firefox */
라인 높이 : 17px; / * 사파리 */
}
*: 자녀 HTML 버튼 [type] {
패딩 : 4px 10px 3px 7px; / * IE7 */
}
.Buttons Button img, .Buttons a img {
여백 : 0 3px -3px 0! 중요;
패딩 : 0;
국경 : 없음;
너비 : 16px;
높이 : 16px;
}
또 다른 문제는 긴 버튼을 렌더링 할 때 인터넷 익스플로러에 버그가 있다는 것입니다. 이 정보는 jehiah.cz에서 찾을 수 있지만 위의 CSS 코드에서는 너비와 오버플로의 값을 선언하여 어느 정도 문제를 피할 것입니다.
버튼에 약간의 색상을 추가하십시오Wufoo에서 우리는 중립 동작의 호버 값 (여기서 저자는 변경 암호 및 기타 동작을 중립 조치, 확인 및 제출 유형을 긍정적 인 동작으로, 포기 및 취소 유형을 파란색으로 설정하고 긍정적 인 동작과 부정적인 동작은 각각 녹색과 빨간색으로 설정됩니다. 다음 스타일 코드는 다양한 색상을 사용하여 추가, 저장 및 취소 및 삭제하는 것을 구별합니다. 물론 사용하고 싶은 색상을 선택할 수도 있습니다.
/* 기준 */
버튼 : hover, .buttons a : hover {
배경색 :#dff4ff;
테두리 : 1px 고체 #c2e1ef;
색상 :#336699;
}
.Buttons A : Active {
배경색 :#6299c5;
국경 : 1px 고체 #6299c5;
색상 : #ffff;
}
/* 긍정적인 */
button.positive, .buttons a. positive {
색상 :#529214;
}
.Buttons A.Positive : 호버, 버튼. 양성 : 호버 {
배경색 :#e6efc2;
국경 : 1px 고체 #C6D880;
색상 :#529214;
}
.Buttons A.Positive : active {
배경색 :#529214;
국경 : 1px Solid #529214;
색상 : #ffff;
}
/* 부정적인 */
.Buttons A.Negative, button.negative {
색상 :#D12F19;
}
.Buttons A.Negative : 호버, 버튼 .negative : hover {
배경 :#fbe3e4;
국경 : 1px 고체 #fbc2c4;
색상 :#D12F19;
}
.Buttons A.Negative : Active {
배경색 :#d12f19;
국경 : 1px 고체 #d12f19;
색상 : #ffff;
}
요약마지막으로, 이것은 Wufoo의 요구를 다루기 위해 설계된 솔루션이지만 우리의 노력과 잘 어울립니다. 그러나 이것이 유일한 방법은 아닙니다. 버튼을 둥근 모서리로 전환하거나 더 화려한 더 흥미로운 방법을 찾을 수 있습니다. <버튼> 태그 사이에 거의 모든 다른 요소를 배치 할 수 있으므로 <Span> 태그를 삽입하고 Alex Griffioen이 제공 한 최신 방법을 따라 진정으로 잘 보이는 둥근 3 차원 버튼을 만들 수도 있습니다. 솔직히 말해서, 이것이 프로그램의 인터페이스를 재사용하기 위해 노력하는 모든 디자이너의 시작일뿐입니다. 어쨌든, Photoshop의 입력 버튼을 열기 전에 더 많은 생각을 할 수 있기를 바랍니다. 그리고 거의 잊혀진 <버튼> 태그를 살펴보십시오. 아마도 당신을 놀라게 할 것입니다.
부록 :<버튼> html4.0/xhmtl1.0의 요소
정의 및 사용법버튼을 정의합니다. 버튼 요소 내부에 텍스트 나 이미지와 같은 컨텐츠를 배치 할 수 있습니다. 이것은이 요소와 입력 요소로 생성 된 버튼의 차이입니다.
<버튼> 컨트롤은 <입력 유형 = 버튼>보다 더 강력한 기능과 더 풍부한 컨텐츠를 제공합니다. <버튼>과 </button> 태그 사이의 모든 내용은 버튼의 내용이며, 여기에는 텍스트 또는 멀티미디어 컨텐츠와 같은 허용 가능한 신체 내용이 포함됩니다. 예를 들어 버튼에 이미지 및 관련 텍스트를 포함시켜 버튼에 매력적인 마크 업 이미지를 만들 수 있습니다.
금지 된 유일한 요소는 마우스 및 키보드에 민감한 동작이 폼 버튼의 동작을 방해 할 수 있기 때문에 이미지 매핑입니다.
선택 가능한 속성 속성 값 설명 DTD비활성화 장애인 비활성화이 버튼을 비활성화합니다. STF
NameButton_name이 버튼의 고유 한 이름을 지정합니다. STF
* 버튼을 입력하십시오
* 재설정 버튼 유형을 정의합니다. STF
* 제출하다
value some_value 버튼의 초기 값을 지정합니다. 이 값은 스크립트에 의해 수정 될 수 있습니다. STF
표준 속성 :ID, 클래스, 제목, 스타일, dir, lang, xml : lang, accesskey, tabindex
이벤트 속성 :Onfocus, Onblur, Onclick, OndblClick, OnMousedown, OnMouseUp, OnMouseOver, OnMouseMove, OnMouseOut, OnKeypress, OnkeyDown, OnkeyUp