進捗要素を右から左にレンダリングする方法は？

Question

私は、左から右に示すプログレスバーを持っています。同じスタイルの進歩だが、右から左に表示される別のものを作る必要がある。ここで

は私のスタイル定義です：

progress, progress[role] { 
    -webkit-appearance: none; 
    appearance: none; 
    border: none; 
    background-size: auto; 
    height: 50px; 
    width: 100%; 
    padding-top: 10px; 
} 
progress[value]::-webkit-progress-bar { 
    background-color: grey; 
    border-radius: 2px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
} 
progress[value]::-webkit-progress-value { 
    background-image: 
     -webkit-linear-gradient(-45deg, 
           transparent 33%, rgba(0, 0, 0, .1) 33%, 
           rgba(0,0, 0, .1) 66%, transparent 66%), 
     -webkit-linear-gradient(top, 
           rgba(255, 255, 255, .25), 
           rgba(0, 0, 0, .25)), 
     -webkit-linear-gradient(left, #09c, #f44); 
    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
} 

.valuebar { 
    position: relative; 
} 
.valuebar h3 { 
    color: #fff; 
    left: 1em; 
    line-height: 1; 
    position: absolute; 
} 

私は::-webkit-progress-valueを使用するWebからのサンプルを使用しました。

右から左にレンダリングするにはどうすればよいですか？

Answer 1

それらdirection属性は、例えば、右から左への言語と互換性があるように（右から左への略、rtlに（デフォルトで）ltrから変更されたときに一般的に、多くの要素がその水平レンダリングをフリップアラビア語またはヘブライ語として）。

<progress>要素は同じです。ちょうどCSSに（特別なクラスのような）固執するものを与え、そのdirection: rtl;を設定してください。

あなたが投稿したコードに基づく小さなスニペットです。

/* this is the important bit */ 
 
progress.rtl { 
 
    direction: rtl; 
 
} 
 
progress, 
 
progress[role] { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    border: none; 
 
    background-size: auto; 
 
    height: 50px; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 
progress[value]::-webkit-progress-bar { 
 
    background-color: grey; 
 
    border-radius: 2px; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
 
} 
 
progress[value]::-webkit-progress-value { 
 
    background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44); 
 
    border-radius: 2px; 
 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
 
} 
 
.valuebar { 
 
    position: relative; 
 
} 
 
.valuebar h3 { 
 
    color: #fff; 
 
    left: 1em; 
 
    line-height: 1; 
 
    position: absolute; 
 
}

<progress value="59" max="100">59%</progress> 
 
<br /> 
 
<progress class="rtl" value="59" max="100">59%</progress>

あなたはそれを投稿していなかったように私は、あなたのマークアップであるかわからないが、あなたは.valuebar位置を調整する必要があるかもしれません。

ここではおもちゃでcode penです。