はじめに
残念なことに、最近、 詳細要素に出会いました。これは、本質的に何かに関する情報を表示するためのウィジェットです。 私が持っている情報によると、現在サポートされているのは12.0以降のGoogle Chromeとバージョン4.0以降のAndroid Browserのみです。 さて、どんな動物なのか見てみましょう。
最も単純な表現
この要素を使用した情報の最も単純な表現は次のようになります。
<details> <summary> HTML5?</summary> </details>
そして、ブラウザでは次のようになります。
進む
質問があるので、答えてHTML5ロゴを添付しましょう。 それは通常のレイアウトと同じ方法で行われるため、より単純なものはありません-つまり divを作成し、それに見出しと段落を追加します。 このように：
<details> <summary> HTML5?</summary> <img src="./html5.jpg" alt="HTML5" /> <div> <h3>HTML5 - ...</h3> <p> , , . HTML- ( 1990 HTML4, 1997 ) 2011 . , , (-, ..). HTML5 HTML 4, XHTML 1, DOM2HTML ( JavaScript).</p> </div> </details>
サンプルを開き、矢印をクリックして...出来上がり！
そしてまだ
しかし、どういうわけかそれはすべてプロフェッショナルではありません。 スタイルを適用しませんでした。 そして、美しいディスプレイのために、これは十分簡単です。 やってみましょう。
body { font-family: sans-serif, arial; } details { overflow: hidden; background: #e3e3e3; margin-bottom: 10px; display: block; } details summary { cursor: pointer; padding: 10px; } details div { float: left; width: 65%; } details div h3 { margin-top: 0px; } details img { float: left; width: 200px; padding: 0px 30px 10px 10px; }
異常なことは何もありません。 いつものように、インデントを設定し、背景をわずかにペイントし、カーソルを変更します。 正直なところ、カーソルを操作する必要はほとんどありませんでした。
それでは、結果を見てみましょう。 ここにあります：
最後に
矢印のスタイルを変更することもできます。 彼女を赤にしましょう。 どうやってやるの？ とても簡単です。 -webkit-details-marker疑似クラスのみを使用する必要があります。 次のように：
details summary::-webkit-details-marker { color: red; font-size: 20px; }
これは次のようになります。
おわりに
実際に今日お話ししたかったのはそれだけです。 詳細要素のサポートは現在かなり貧弱であるという事実にもかかわらず、ブラウザはすぐに追いつき、完全にサポートすると思います。
じゃあね！