純粋なCSS3計算機

非常に興味深いプロジェクトでした。 私は純粋にCSS3（JavaScriptではない）で算術電卓を作成しようとしました。 calc（）、attr（）、counter（）などの要素を使用すると、これはそれほど難しいタスクではないように見えましたが、すべてがそれほど単純ではないことが判明しました。



始める前に、 CSSのみを使用して計算機を作成する合理的な理由はないことに注意してください。 楽しみのためだけにやった。



安定版はFirefox 4およびIE 9でのみ動作します



電卓の重要なコンポーネントの1つは、入力を変換する機能です。 CSSのみを使用する場合、入力を修正するためのオプションは非常に限られています。 したがって、チェックボックスはすべてのエントリを登録するために使用されます。 他の要素に変更を適用するには、「：チェック」状態と「〜」セレクターを使用できます。これらは非常に単純なので、詳細には触れず、代わりに値の計算ロジックに焦点を当てます。



最初のキーの登録は実際には問題ではありません。9のチェックボックスをクリックすると、9の入力が登録されるためです。ユーザーが95（9と5）を入力する場合、最初の問題が発生します。 すでに9を登録している場合は、5を追加することはできません（14であるため）。 10を掛けることができますが、90が得られます。10を掛けて5を足す必要があります。したがって、counter（）はまだ参加していないようです。



これを実現する1つの方法は、フォントサイズを使用することです。 フォントサイズの利点は、子要素が親要素の値を継承し、パーセンテージとピクセルの両方で値を設定できることです。



次のHTML構造を想像してください。

#div1 > #div2 > #div3 > #div4 > #div5
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の数値（この場合は9）を選択するとき、contentプロパティを使用して、1ピクセルのフォントサイズでdiv5に9文字を追加します（つまり、div5の幅は9ピクセルになります）。 ここで、ユーザーが他の数を選択すると、フォントサイズ：＃％div5の実際の値に1000％を適用します（9文字もすべて1ピクセルの独自のフォントサイズを持っていることに注意してください）。これで、幅が90ピクセルになります。 さらに、2番目の数値は、フォントサイズが1ピクセルの＃div5と同じ方法で＃div4のコンテンツとして追加されます。つまり、＃div4のテキストのコンテンツは5ピクセルになりますが、子要素＃div5を合計します。幅は95ピクセルに等しくなります！



3番目の数値についても同様に行い、要素＃div4などに1000％のフォントサイズを適用します。これはすべて良いことですが、問題は最大フォントサイズが比較的小さいことです。 次の方法と比較して「相対的」と言います。この方法は100,000未満の数値にのみ適しているという事実につながります（FF / Chromeの制限が正確に覚えていませんが、かなり低いように思えましたが、このアイデアを放棄する）。



少数の場合、この方法は非常に適しています（たとえば、このブラックジャックで行われたように、CSS3のみで作成されています（Chromeでのみ動作します）。



したがって、フォントサイズを入力コンテナーとして使用することについては説明しませんでした。 calc（）要素を試すことにしました。 残念ながら、webkitはまだサポートしていません。例として、IE9およびFirefox 4以降でのみ動作します。 フォントサイズの方法と同様に、div要素を1つに配置した同じHTML構造を使用しますが、今回は親要素から始めます。



最初の数値を選択するとき、幅＃div1の形式で値を指定します。 2番目の数値を選択するとき、＃div2の幅をcalc（1000％+ number2）の形式で設定します。 前の例のように、＃div1の幅は9ピクセルになり、＃div2の幅はcalc（1000％+ 5px）になり、幅が95ピクセルになります。 同様に、ユーザーが最大5文字を入力すると仮定して、＃div3 ...＃div5を続行できます。



さて、ユーザーが入力した値を正常に保存しました（ユーザーが実行したい計算をまだ実行していません）。 ユーザーが9146を入力すると、div要素の幅は次のようになります。



＃div1 9px

＃div2 91px

＃div3 914px

＃div4 9146px

＃div5 9146px（デフォルトは100％）



この時点で、ユーザーは乗算することにしました（現在乗算中のアクションを実行する前にユーザーが新しい数字を入力する機能を削除しました）。



次に、最初の値（幅＃div5）を、ユーザーが選択した任意の数で乗算して調整する必要があります。 最初に想定できることは、最初の例と同じ方法を使用し続けることです。 構造を変更する



＃div1>＃div2>＃div3>＃div4>＃div5>＃div6>＃div7>＃div8>＃div9など



次に、ユーザーが選択した値を使用して幅を変更します。 残念ながら、そうではありません。 同じ例で、ユーザーが9146 * 25を掛けたいとします。



つまり、ユーザーが乗算する数値の最初の文字を入力した後、つまり 「2」、＃div6の幅は200％に等しくなり、18,292になりますか？ それはかなり良くて正しいように見えます、そしてそれはそうです。



ただし、2番目の標識に移動すると、おそらくこのアプリケーション全体で最大の問題に直面します。 5を掛けることはできません。 18,292の500％は91,460であるため、500％です。これは、25 * 9146、228,650と同じではありません。calc（）で乗算を加算しても、実際の問題は解決しません。同じ値を数回乗算できないという事実にあります。 整数（25）が必要であり、それを使用して元の数（9146）を乗算する必要があります。



もう1つの問題は、＃div1が子要素の幅を固定しないため、子要素＃div5の幅が9146pxの場合、＃div5が＃div5の中にあっても＃div1はまだ9pxです。 フォントサイズの場合、これは重要ではありませんでした。



＃div1が実際の幅を反映している場合、5つのdivを5回複製し、次の構造を形成して次々に配置できます。



#container> {

＃parent1>＃div1>＃div2>＃div3>＃div4>＃div5

＃parent2>＃div1>＃div2>＃div3>＃div4>＃div5

＃parent3>＃div1>＃div2>＃div3>＃div4>＃div5

＃parent4>＃div1>＃div2>＃div3>＃div4>＃div5

＃parent5>＃div1>＃div2>＃div3>＃div4>＃div5

}



まず、1つのdiv要素のみが表示され（＃parent1）、最初の数値が乗算のために選択されるとすぐに、divの幅に2を乗算します。これにより、コンテナの幅は2x9146になります。 2番目の数値を選択すると、再び＃parent1に1000％を乗算します。その結果、コンテナーの幅は20x9146になり、その後＃parent2を表示し、500％に乗算します。その結果、最後の#containerの幅は20x9146 + 5x9146になります、つまり25x9146など、以降のすべての番号で。 ただし、これはフォントサイズメソッドなしでは実行できません。



テーブルや他のネストされた要素で膨大な数のオプションを試した後、セレクタを使用してその数を修正しました。 ここでしようとしたほぼすべての目的に違反しているため、このアイデアを拒否し続けています（数字の個々の組み合わせに対して数千の異なるCSSセレクターを作成する場合は、これは必要ありません）。



つまり、次のことが判明します。



-ユーザーが2を選択すると、＃div5の幅に200％が乗算されます。



-ユーザーが別の数字（5など）を選択すると、「digit1number2：checked」が「digit2number5：checked」に移動し、その後幅が2500％であることを登録するセレクターが取得されます。



明らかに、これにより、個々の番号ごとにセレクターが必要になります。 したがって、0から99までの任意の数で乗算できるようにする場合、個々の組み合わせごとに100個の異なるセレクターが必要です。 同様に、0〜999が必要な場合は1,000個のセレクターが必要であり、0〜9999の場合は10,000個のセレクターが必要です。したがって、このメソッドを使用して計算機を実行するのは単純です。 私はアイデアを使い果たしたという事実と、制限（後で説明します）のために、これは必ずしも大きな損失ではありません。 とにかく、いくつかのセレクターを使用して、技術的に最初の数字の長さを指定できますが、2番目の数字は0〜99に制限されます。



これで、ユーザーが入力した値に基づいてdivの幅を最終的に計算することができました。 これを今すぐユーザーに提示する方法は？ attr（）要素によってスタイルシートで指定されたcss値を表示できるようになることを期待しているかもしれませんが、残念ながらそうではありません。 前に説明したように、counter（）要素を使用しても、特に乗算と除算に関して実際の結果は得られませんが、提示する方がはるかに簡単です。



それでは幅をどのように表示しますか？ div要素の幅を調整するために前述のすべての例がどのように使用されたか覚えていますか？ この幅を、幅が100％のフローティングフレームと複数のメディアクエリと組み合わせます。 さて、今ではdiv要素内に228,650ピクセルのフローティングフレームがあり、ドキュメントの幅に基づいて個々の数値を表すために228,650の異なるメディアクエリを作成する必要がありますか？ 繰り返しますが、これはもちろん実行できますが、意味がありません。



いいえ、代わりに、数字の各文字に1つずつ、フローティングフレームの数を使用します。 つまり、6文字の量を表現したい場合、表現したいフレーム内に6つのフローティングフレームが必要です。 最初のフレームで文字数が決まります。つまり、次のようになります。



0 <幅<100：1-2文字

100 <幅<1000：3文字

1000 <幅<10000：4文字

10000 <幅<100000：5文字

100,000 <幅<1,000,000：6文字

など



その後、目的のフレームが表示されます。この場合は6桁のフレームです。



その後、このフレームには、数字の最初の文字が次のようなものであることを確認する10個のメディアクエリが含まれます。

 @media(min-width: 100px) and (max-width: 100099px) -> 0 @media(min-width: 100100px) and (max-width: 200099px) -> 1 @media(min-width: 200100px) and (max-width: 300099px) -> 2
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、その後の各メディアクエリはこの数を追加し、フローティングフレームの幅を必要な数十万、この場合は200,000ずつ減らします。その結果、次のサブフレームはdigit5.htmlに等しく、その幅は28,650です（200,000を削除したため）その100％から）。 その後、同じ方法を使用して5番目の文字を確認し、この文字を表示して、次のフレームの幅を目的の数万の分だけ減らして、最後の文字まで続けます。



最小幅は実際には0ではなく100であり、最大幅は予想よりも100大きいことに気づいたかもしれません。 これは、幅が0のフローティングフレームにはコンテンツが表示されないためです（幅が0ピクセルだからです！）。したがって、数字を表示する特定のスペースを割り当てる必要があります。



これにより、一定の数のフレームが表示され、ドキュメントの幅が表示されます。 ここでテストできます 。 ウィンドウの幅よりも100ピクセル小さいため、calc（））をサポートするブラウザーでのみ機能することに注意してください。



いいね！ これで機能する計算機ができました！ 私は他の制限があると述べました。 当然のことながら、ドキュメント/ cssプロパティの幅には最大値があり、計算できる最大値は次のとおりです。



-Firefox 17895698

-Internet Explorer 1533816



したがって、このメソッドを乗算に使用して、2番目の数字に3つ以上の文字を挿入する機会があったとしても、プロパティのこの制限値にすぐに到達します。



さらに、予想どおり、ここでは小数部分は受け入れられず、ここに表示されません（分割する場合、単に丸められます）。負の値を入力することはできません（これを修正しても問題はありません）。



この問題の作業中に、フローティングフレームとメディアクエリを使用すると、IEで興味深いメモリリークが発生しました。これにより、CSSとHTMLの数行でブラウザがフリーズします。