次のように見えました。
html
< div class ="large_button" > <br> < span class ="buttons submit_v2-button clickable" > <br> < i class ="left left2" ></ i > <br> < i class ="body" > <br> < b > </ b > <br> < i class ="end" > <br> < i ></ i > <br> </ i > <br> </ i > <br> </ span > <br> </ div >
プロジェクトのボタンには少なくとも30のオプションがあるため、このようなコードで混乱するのは簡単です。サーバー側でこのようなボタンを作成しようとすると、歩行者の同僚の間でinりが引き起こされます。
したがって、私の暗黙のタスクは、可能な限りコードを単純化することでした。
当初、Habrの記事の1つで説明されていたように、イメージをまったく使用せずにすべてのボタンを作成するというアイデアが浮上しました。
残念ながら、この場合、ブラウザ間の互換性を実現するのはやや難しく、ユーザーとしての私はCSSシャドウが好きではありません（レイアウトデザイナーとして、私はそれらを崇拝しています）。
私に完全に合った解決策は、擬似要素の前と後を使用することでした。
最初のステップはシステム化でした。 すべてのボタンは、サイズ、画像、背景ごとにグループに分類されました。
非常に良いものにするために、すべてのボタンのグラフィックが1つのスプライトに結合されました。
その結果、画像の総量とhttpリクエストの数をかなり節約できました。
私はチームで非常に幸運だったと言わなければなりません。チームは時間をかけて共通の努力をしましたが、Internet Explorer 6でサイト
上記の重要なイベントから2週間後、私の意見では、ボタンのレイアウトのバージョンが完全に注目に値するようになりました。
html
< div class ="neobtn-thick" > </ div >
css
/* */
*[class*=neobtn]{
text-shadow: 0 1px 0 #ddd;
cursor: pointer;
background-color: transparent;
display: inline-block;
background-image: url(../images/buttons/buttons.png);
white-space: nowrap;
}
*[class*=neobtn]:before{
background-image: url(../images/buttons/buttons.png);
content: '';
float: left;
}
*[class*=neobtn]:after{
background-image: url(../images/buttons/buttons.png);
content: '';
float: right;
}
/* . 46px */
*[class*=neobtn-thick]{
height: 46px;
margin: 0 25px 0 45px;
line-height: 45px;
font-size: 24px;
background-position: 0 -153px;
}
*[class*=neobtn-thick]:before{
height: 46px;
width: 45px;
background-position: 0 -245px;
margin: 0 0 0 -45px;
}
*[class*=neobtn-thick]:after{
height: 46px;
width: 25px;
margin: 0 -25px 0 0;
background-position: 0 -199px;
}
/* */
*[class*=neobtn-thick-create]:before{background-position: 0 -291px;}
*[class*=neobtn-thick-go]:before{background-position: 0 -429px;}
*[class*=neobtn-thick-down]:before{background-position: 0 -567px;}
このメソッドの本質は非常に単純であり、簡単に見ても気付かないかもしれません。 クラス名に「neobtn」という単語が含まれる要素には、基本的な「ボタン」プロパティを追加します。 次に、修飾子を追加して要素のプロパティを調整します（この例では「-thick」です）。
妥当な範囲内にとどまることを忘れずに、必要に応じて要素を変更できます。
Internet Explorer 7の場合、コードはほぼ同じであり、必要なHTML要素を作成するために擬似要素の代わりにinsertAdjacentHTMLメソッドのみが使用され、インデントの代わりに絶対配置が使用されます。
css
*[class*=neobtn]{
zoom: expression(runtimeStyle.zoom = 1,
insertAdjacentHTML('afterBegin',' < div class ="before" ></ div >< div class ="after" ></ div > '));
position: relative;
display: inline;
}
.before,
.after{
background-image: url(../images/buttons/buttons.png);
top: 0;
position: absolute;
}
/* BUTTONS */
/* 46px */
*[class*=neobtn-thick] .before{
height: 46px;
width: 45px;
background-position: 0 -245px;
left: -45px;
}
*[class*=neobtn-thick] .after{
height: 46px;
width: 25px;
right: -25px;
background-position: 0 -199px;
}
*[class*=neobtn-thick-create] .before{
background-position: 0 -291px;
}
*[class*=neobtn-thick-go] .before{
background-position: 0 -429px;
}
*[class*=neobtn-thick-down] .before{
background-position: 0 -567px;
}
このCSSコードを別のファイルに入れて、条件付きコメントを介してInternet Explorer 7のユーザーにのみ含めることは理にかなっています。そうすれば、痛みがあった場合にそれを取り除くのは簡単です。
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/buttons_ie.css" /><![endif]-->
メソッドのマイナーな改善により、タイプがsubmitのボタンを装飾できるようになりました。
html
< div class ="neobtn-thick" >< input type ="submit" value ="" /></ div >
css
*[class*=neobtn-thick] input[type=submit]{<br> margin: 0 -17px 0 -37px;<br> padding: 0 12px 0 33px;<br> height: 46px;<br> font-size: 100%;<br> font-family: Arial;<br> text-shadow: 0 1px 0 #ddd;<br> color: #222;<br>}
また、ボタンに任意の画像を挿入する場合は、別の要素を追加して、目的の画像を背景にする必要があります。
html
< div class ="neobtn-thick" >< span class ="delete" ></ span > </ div > <br><br>
css
.delete {<br> background url(url);<br> width: 00px;<br> height: 00px;<br> display: inline-block;<br>}<br>
このメソッドの魅力は、「アスタリスク」セレクターを使用することです。これにより、「neobtn-thick-create」の代わりに「trololoNEOBTN-THICK-CREATElo」と記述することを恐れずに、任意のタグからボタンを作成できます。
この場合の唯一の重要な問題は、他の要素のクラス名の一部ではないように、クラス名の最初の単語を考え出すことです。 たとえば、「ボタン」や「btn」などのわかりやすい言葉は使用しないでください。 このため、例では、クラス名は「neobtn」で始まります。
新しいボタンを追加することも難しくありません。
- 一般的なスプライトに新しい画像を描画します
- 適切なルールをcssに追加します
- 利益！
この方法にはいくつかのマイナス面があります。
- 理論上「アスタリスク」セレクターを使用すると、ページのレンダリングプロセスが多少遅くなります。 ただし、大幅な遅延を達成できなかったことは注目に値します。 ページ上のボタンの数は1ダースまたは20ダースを超えず、タグの数の減少を考慮して、速度の差は平準化されます。
- 「テキストのみ」モードでスケーリングする場合、すべてがバラバラになります。
理論的には、クラスと修飾子の名前を別々に書くことができます。
< div class ="button button-thick button-thick-create" > </ div > <br>
しかし、この場合、何らかの冗長性とトートロジーが発生します。
その結果、高度なHTMLレイアウトテクノロジーと「クラシックな」HTMLレイアウトテクノロジーの間にクロスを獲得しました。
指定された方法を使用して、ドロップダウンリストを作成したり、水田を装飾したりすることもできます。
例
私のサイトの同じ記事 。
更新番号1： ユニバーサルセレクターの詳細
更新番号2：属性セレクターの前に「アスタリスク」セレクターが気になる場合は、それらを簡単に取り除くことができます。 ボタンのレイアウトは影響を受けません。