Ein kurzes Verständnis des Fortschrittselements in HTML5 und eine Analyse von Kompatibilitätsproblemen

Dieser Artikel bietet Ihnen eine kurze Einführung in das Fortschrittselement in HTML5 und eine Analyse der Kompatibilitätsprobleme. Ich hoffe, dass er für Freunde hilfreich ist.

1. Grundverständnis des Fortschrittselements

1. Grundwissen

Das Fortschrittselement gehört zum HTML5-Familie und bezieht sich auf die Fortschrittsleiste. Unterstützt von IE10+ und anderen zuverlässigen Browsern.

Hinweis: Internet Explorer 9 und früher unterstützen das -Tag nicht.

Label zeigt den Fortschritt der Aufgabe (des Prozesses) an

2. Grundattribute

max , Wert, Position und Beschriftungen.

(1) max bezieht sich auf den Maximalwert. Bei der Standardeinstellung liegt der Fortschrittswertbereich zwischen 0,0 und 1,0. Wenn der Wert auf max=100 eingestellt ist, liegt der Wert zwischen 0 und 100 50, der Fortschritt ist genau die richtige Hälfte. Das Vorhandensein oder Fehlen des Wertattributs bestimmt, ob der Fortschrittsbalken deterministisch ist.

Zum Beispiel hat keinen Wert und ist unsicher, sodass es im IE10-Browser wie eine Endlosschleife aus Punktanimationen aussieht ist Das Wertattribut (auch wenn es keinen Wert hat), wie zum Beispiel , gilt ebenfalls als sicher,

(3) Position ist ein schreibgeschütztes Attribut, und die Position des aktuellen Fortschritts ist Wert / Maximalwert. Wenn der Fortschrittsbalken unsicher ist, beträgt der Wert -1

(4) labels ist ebenfalls ein schreibgeschütztes Attribut, und es werden die Label-Elemente erhalten, die auf das Fortschrittselement verweisen. Beispielsweise gibt document.querySelector("progress").labels eine HTMLCollection zurück.

2. Beispiel für die Verarbeitung der Fortschrittselementkompatibilität

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

CSS-Kompatibilitätscode

progress {
display: inline-block;  
width: 160px;height: 20px;  
border: 1px solid #0064B4;    
background-color:#e6e6e6;color: #0064B4; /*IE10*/}  
/*ie6-ie9*/
progress ie {display:block;height: 100%;background: #0064B4; }  
progress::-moz-progress-bar { background: #0064B4; }  
progress::-webkit-progress-bar { background: #e6e6e6; }  
progress::-webkit-progress-value  { background: #0064B4; }

bezogen auf Empfohlen :

Detaillierte Einführung und Kompatibilitätsverarbeitung des Fortschrittselements in HTML5

Das obige ist der detaillierte Inhalt vonEin kurzes Verständnis des Fortschrittselements in HTML5 und eine Analyse von Kompatibilitätsproblemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!