Reset CSS研究(技術編)
時間が経つのは早いですね.Reset CSS研究(ゴシップ編)から3ヶ月以上経ちました.くだらないことは言わないで、急いで技術編を書き終えましょう.
最初のreset cssはTantekのundohtmlです.css、簡単なコード、Tantekは自分の必要に応じて、ブラウザのデフォルトのスタイルをいくつかリセットしました.
Ericもそうです.
YUIはcssresetのほか、cssfontsとcssbaseをセットしている.cssresetはデフォルトスタイルをクリアし、cssfontsとcssbaseは一部の要素のデフォルトスタイルをリセットします.
長い間、
その後、エリックのブログを読むと、エリックは彼のresetをダウンロードすることを望んでいないことに気づいた.css後直接持って行きます.具体的なニーズに応じて、適量の裁断と修正をしてから使用することを期待しています.
世の中のことはいつもドラマチックで、エリックの期待は思い通りにならなかった.みんなが共通の解決策を手に入れたいと思って、銀弾を期待しています.このような渇望の下で、YUI cssresetは徹底的にきれいで、広く伝わっています.
さらにドラマチックなのは、YUIのcssfontsとcssbaseは西欧文字しか考慮していないため、漢字に対する考慮は多くない.これにより、国内のユーザーの大部分はcssresetしか使用できない.武林秘籍にたとえると、私たちはずっと残巻を使っています.
モニタを調整します.工場出荷時の設定にリセットするオプションがあります.これには2つの意味があります.1つは現在の設定を削除することであり、2つは工場出荷時の設定に復元することです.CSS Resetも同様で、最初のステップはブラウザのデフォルトスタイルをクリアし、2番目のステップはブラウザのデフォルトスタイルをリセットします.明らかに、
この2つのステップははっきりと分かれているわけではない.resetの初期意図は、さまざまなブラウザでのデフォルトスタイルの違いを減らしたいことです.相違のない既定のスタイルの場合は、状況に応じて選択的にリセットするか、リセットしないかを選択できます.たとえばstrongでは、デフォルトは太字で、予想通りにリセットしないことができます.また、aのように、現在の主流ブラウザではデフォルトのスタイルに差はありませんが、可読性などの要因のために、下線を無にリセットすることも考えられます.
以上、振り返り、反省であり、次の技術実現の指導思想である.
天下は大いに写して、写して写して、いろいろなresetコード、長さはすべて差がありません.これは悪くない.問題を解決するだけでなく、技術の伝播を促進した.
しかし、2004年から今まで、あっという間に5年になりました.かつてのいくつかの考慮、例えばie 5.5のコードに対して、現在すでに大胆に捨てることができます.写す過程の中で、努力して実を求めて証明を求めて、努力して自分の理解を求めて、難しいです.しかし、こつこつと倦まない限り、結局は何かを得て、何かを得て、何かを悟ることができます.
これは親友の正淳と一緒に整理したresetです.css:
用途は注釈に明記されているので、あまり説明しません.テストページはこちら:CSS Reset Test.このテストページには私たちの心血がかかりました.転載したら、出典を明記してください.ほほほ.
先にテストしたブラウザを説明します:IE 6+,Firefox 3.5+,Safari 4+,Chrome 2+,Opera 10+
YUI cssresetとの相違点を以下に説明する.内外のマージンの要素をクリアし、div,code(テストブラウザではマージンは発見されなかった)を削除し、buttonを追加した(YUIが漏れたような気がする). YUIではhtml色と背景色の設定を外しています.テストブラウザで差は見つかりませんでした.(設置するなら address,caption,...,em,strongなどのテキストフォーマット要素について調整した.strongとthの太字が残っています. はabbrおよびacronymを調整し、非ie 6での視認性をより良くした. supとsubのスタイルを削除し、ブラウザで直接デフォルトにすればいいです. input,select,textareaフォーム要素に対してieに対するinheritを除去しfont-sizeのinherit hackのみを保持する.他のhackはテストで失効したためです. には、いくつかの要素のデフォルトスタイルが追加されています.
また,全体コードの組織形式を調整し,要素のカテゴリ別にコードをグループ化した.
万能ソリューションは永遠に存在せず、銀弾は永遠に存在しないことを覚えておいてください.
そこで私の提案はEricと同じです.具体的なニーズに応じて、適量の裁断と修正をしてから使用してください.
例えばタオバオに対してreset.cssに基づいてreset-taobaoに変更する.css .
個人ブログなら、個人的に好きな案はreset-blogです.css .
関連テストページはcssreset svnを参照してください.実際に使用する場合は、圧縮後のバージョン:reset-min.cssを使用してください.
resetについてcss自体は,できるだけ多くのシーンに適用できることを期待しているが,すべての問題を解決できることを期待していない.今のところreset.cssのデフォルトスタイルは、私や正淳ら同僚や友人の実践経験の総括であり、「細かく選ぶ」ことだが、すべての問題を解決することは期待できない.
最後に、あなたの参加とアドバイスを楽しみにしています.もしこのreset.cssはあなたのプロジェクトで使用されることができて、とてもあなたのフィードバックを期待しています.
振り返りと反省
最初のreset cssはTantekのundohtmlです.css、簡単なコード、Tantekは自分の必要に応じて、ブラウザのデフォルトのスタイルをいくつかリセットしました.
Ericもそうです.
YUIはcssresetのほか、cssfontsとcssbaseをセットしている.cssresetはデフォルトスタイルをクリアし、cssfontsとcssbaseは一部の要素のデフォルトスタイルをリセットします.
長い間、
* { margin: 0; padding: 0; }とYUI cssresetは私のresetに対する理解を曖昧にして、resetはすべてのスタイルをクリアして、すべてをゼロにするべきだと思います.その後、エリックのブログを読むと、エリックは彼のresetをダウンロードすることを望んでいないことに気づいた.css後直接持って行きます.具体的なニーズに応じて、適量の裁断と修正をしてから使用することを期待しています.
世の中のことはいつもドラマチックで、エリックの期待は思い通りにならなかった.みんなが共通の解決策を手に入れたいと思って、銀弾を期待しています.このような渇望の下で、YUI cssresetは徹底的にきれいで、広く伝わっています.
さらにドラマチックなのは、YUIのcssfontsとcssbaseは西欧文字しか考慮していないため、漢字に対する考慮は多くない.これにより、国内のユーザーの大部分はcssresetしか使用できない.武林秘籍にたとえると、私たちはずっと残巻を使っています.
モニタを調整します.工場出荷時の設定にリセットするオプションがあります.これには2つの意味があります.1つは現在の設定を削除することであり、2つは工場出荷時の設定に復元することです.CSS Resetも同様で、最初のステップはブラウザのデフォルトスタイルをクリアし、2番目のステップはブラウザのデフォルトスタイルをリセットします.明らかに、
* { margin: 0; padding: 0; }とYUI cssresetは第一歩に偏っている.この2つのステップははっきりと分かれているわけではない.resetの初期意図は、さまざまなブラウザでのデフォルトスタイルの違いを減らしたいことです.相違のない既定のスタイルの場合は、状況に応じて選択的にリセットするか、リセットしないかを選択できます.たとえばstrongでは、デフォルトは太字で、予想通りにリセットしないことができます.また、aのように、現在の主流ブラウザではデフォルトのスタイルに差はありませんが、可読性などの要因のために、下線を無にリセットすることも考えられます.
以上、振り返り、反省であり、次の技術実現の指導思想である.
テクノロジー実装
天下は大いに写して、写して写して、いろいろなresetコード、長さはすべて差がありません.これは悪くない.問題を解決するだけでなく、技術の伝播を促進した.
しかし、2004年から今まで、あっという間に5年になりました.かつてのいくつかの考慮、例えばie 5.5のコードに対して、現在すでに大胆に捨てることができます.写す過程の中で、努力して実を求めて証明を求めて、努力して自分の理解を求めて、難しいです.しかし、こつこつと倦まない限り、結局は何かを得て、何かを得て、何かを悟ることができます.
これは親友の正淳と一緒に整理したresetです.css:
/*
KISSY CSS Reset
：
：1. 2.
： ([email protected]), ([email protected])
*/
/* */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements */
dl, dt, dd, ul, ol, li, /* list elements */
pre, /* text formatting elements */
fieldset, lengend, button, input, textarea, /* form elements */
th, td { /* table elements */
margin: 0;
padding: 0;
}
/* */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, " ", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "/5b8b/4f53", sans-serif; /* ascii ， */
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* */
small { font-size: 12px; } /* 12px ， small */
/* */
ul, ol { list-style: none; }
/* */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* ：1.ie6 abbr; 2. ，ie6 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img ： img */
/* ：optgroup */
button, input, select, textarea {
font-size: 100%; /* ie */
}
/* */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* hr */
hr {
border: none;
height: 1px;
}
/* ie ， */
html { overflow-y: scroll; }
用途は注釈に明記されているので、あまり説明しません.テストページはこちら:CSS Reset Test.このテストページには私たちの心血がかかりました.転載したら、出典を明記してください.ほほほ.
先にテストしたブラウザを説明します:IE 6+,Firefox 3.5+,Safari 4+,Chrome 2+,Opera 10+
YUI cssresetとの相違点を以下に説明する.
background: transparentがおすすめ)また,全体コードの組織形式を調整し,要素のカテゴリ別にコードをグループ化した.
使用方法
万能ソリューションは永遠に存在せず、銀弾は永遠に存在しないことを覚えておいてください.
そこで私の提案はEricと同じです.具体的なニーズに応じて、適量の裁断と修正をしてから使用してください.
例えばタオバオに対してreset.cssに基づいてreset-taobaoに変更する.css .
個人ブログなら、個人的に好きな案はreset-blogです.css .
関連テストページはcssreset svnを参照してください.実際に使用する場合は、圧縮後のバージョン:reset-min.cssを使用してください.
resetについてcss自体は,できるだけ多くのシーンに適用できることを期待しているが,すべての問題を解決できることを期待していない.今のところreset.cssのデフォルトスタイルは、私や正淳ら同僚や友人の実践経験の総括であり、「細かく選ぶ」ことだが、すべての問題を解決することは期待できない.
最後に、あなたの参加とアドバイスを楽しみにしています.もしこのreset.cssはあなたのプロジェクトで使用されることができて、とてもあなたのフィードバックを期待しています.