HTML5 진행률 표시줄의 진행률 요소 및 해당 호환성 처리 소개

1. 진행률 요소의 기본 이해
1. 기본 UI
진행률 요소는 HTML5 계열에 속하며 진행률 표시줄을 나타냅니다. IE10+ 및 기타 안정적인 브라우저에서 지원됩니다. 다음은 간단한 코드입니다.

1.<progress>o(︶︿︶)o</progress>

매우 인상적인 진행률 표시줄입니다. 어떤 사람들은 "아~ 왜 문자 이모티콘이 보이죠?"라고 궁금해하실 겁니다. "당신을 경멸합니다. 더 안정적인 브라우저를 사용하기를 그렇게 꺼리시나요?" 기본 효과, 아래 스크린샷(창 7 아래)에 표시된 것처럼 브라우저마다 효과가 다릅니다.

IE10 입자의 슬로우 모션 수렴 효과는 매우 눈길을 끕니다.

2. 기본 속성

max, value,
position 및 labels. (1) max는 최대값을 의미합니다. 기본값인 경우 진행 값 범위는 0.0~1.0입니다. max=100으로 설정하면 진행 값 범위는 0~100입니다.
(2) 값은 max=100, 값=50인 경우 진행 값입니다. 정확히 절반이다. value 속성의 유무에 따라 진행 진행률 표시줄이 결정적인지 여부가 결정됩니다. 무슨 뜻인가요? 예를 들어, 에는 값이 없고 불확실하므로 IE10 브라우저에서는 값 속성이 있으면(값이 없더라도) 도트 애니메이션의 무한 루프처럼 보입니다. , 등도 확실한 것으로 간주되며 가상 포인트 애니메이션이 요정 모드로 전환됩니다. ——> 아래 스크린샷과 같이 막대가 변경됩니다.

(3) position은 이름에서 알 수 있듯이 읽기 전용 속성입니다. 현재 진행 상황의 위치는 value/max 값입니다. 진행률 표시줄이 불확실한 경우 값은 -1입니다.
(4) 레이블도 읽기 전용 속성이며, 얻은 것은 진행률 요소를 가리키는 레이블 요소입니다. 예를 들어
document.querySelector("progress").labels는 HTMLCollection을 반환하며 다음은 내 테스트 중 하나의 스크린샷입니다(Opera 브라우저에서 가져온 것으로 현재 FireFox18.0.2 및 IE10에서는 지원하지 않는 것 같습니다). .

2. Progress 요소 호환성 처리 예시

html 코드

1.<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

css 호환 코드

CSS 코드는 콘텐츠를 클립보드에 복사합니다.

1.progress {
2. display: inline-block;
3. width: 160px;
4. height: 20px;
5. border: 1px solid #0064B4;
6. background-color:#e6e6e6;
7. color: #0064B4; /*IE10*/
8.}
9./*ie6-ie9*/
10.progress ie {
11. display:block;
12. height: 100%;
13. background: #0064B4;
14.}
15.progress::-moz-progress-bar { background: #0064B4; }
16.progress::-webkit-progress-bar { background: #e6e6e6; }
17.progress::-webkit-progress-value { background: #0064B4; }

브라우저 간의 차이점을 기본적으로 완벽하게 해결합니다.

위 내용은 HTML5 진행률 표시줄의 진행률 요소 및 해당 호환성 처리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!