CSS リセットについて (その 3) Normalize-zh.css がリリースされました_html/css_WEB-ITnose

まえがき

前の章で Normalize.css のソース コードを解析しましたが、コードが長すぎて閲覧には適していないため、この章では Forms と Table の部分を紹介します。この章では、すべてのソース コードの翻訳と並べ替えを完了し、最後に Normalize-zh.css の中国語版を整理し、誰もが通信して使用できるように Github にオープン ソースします。

復習: CSS リセットに関すること (2) - Normalize.css ソース コード解釈のこと

ソース コード解釈の正規化 (2)

前の章では、html 要素と body 要素、HTML5 要素、リンク、セマンティック テキスト、インライン要素、グループを分析しました。グループ要素などのソース コードの内容は分析されており、この章では引き続きフォームとテーブルの部分を完成させます。

ソースコードアドレス: https://github.com/necolas/normalize.css/blob/master/normalize.css
ソースコードバージョン: v3.0.3

Forms

/** * 1. Correct color not being inherited. *    Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */button,input,optgroup,select,textarea {  color: inherit; /* 1 */  font: inherit; /* 2 */  margin: 0; /* 3 */}

色が継承されない問題を修正すべてのブラウザ

すべてのブラウザでフォントが継承されない問題を修正します

Firefox 3以降、Safari5、Chromeでマージンが異なる問題を修正します

一部のブラウザには、テキストエリア、テキスト、ボタン、フォントとフォントの色はデフォルトでユーザーのフォントまたはブラウザのフォントに設定され、親要素から継承されないため、これらの要素のデフォルトのスタイルはここでリセットされます。

/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */button {  overflow: visible;}

• IE 8/9/10/11のオーバーフロー属性をvisibleに統一

IE 8/9/10/11ではボタンのデフォルトのオーバーフローが非表示になっていたが、ここではvisibleに統一

/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */button,select {  text-transform: none;}

• すべてのブラウザを統一します テキスト変換は問題を継承しません

/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` *    and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type *    `input` and others. */button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {  -webkit-appearance: button; /* 2 */  cursor: pointer; /* 3 */}

ネイティブのオーディオおよびビデオ コントローラーを破壊する Android 4.0.* の WebKit バグを回避します

iOS でクリッカブル入力を設定できない問題を修正します

統一他の入力タイプのカーソル スタイル

ここでは、クリック可能なボタンがマウス スタイルをポインターに設定するように統一され、使いやすさが向上します

/** * Re-set default cursor for disabled elements. */button[disabled],html input[disabled] {  cursor: default;}

• ボタンが無効になっているときにカーソル スタイルをリセットします

/** * Remove inner padding and border in Firefox 4+. */button::-moz-focus-inner,input::-moz-focus-inner {  border: 0;  padding: 0;}

• Firefox の内側の端を削除します4+ 距離

/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */input {  line-height: normal;}

• 行の高さを標準に均一に設定します

Firefox ブラウザは、input[type="button"] の行の高さをデフォルトで標準に設定します

/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */input[type="checkbox"],input[type="radio"] {  box-sizing: border-box; /* 1 */  padding: 0; /* 2 */}

IE 8 を修正します! /9 box- content-box に設定されているサイズ設定の問題

IE 8/9 で余分なパディングを削除

/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {  height: auto;}

• Chrome で [type="number"] を入力したときに特定の高さとフォントで表示される下の矢印を修正-size カーソルがカーソル: テキスト効果に変わります

/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */input[type="search"] {  -webkit-appearance: textfield; /* 1 */  box-sizing: content-box; /* 2 */}

Safari 5 と Chrome で外観が searchfield に設定される問題を修正します

Safari 5 と Chrome でボックスサイズが border-box に設定される問題を修正します

searchfield は CSS3 のプロパティであり、 div 要素を任意の要素のように見せることができますが、ブラウザのサポートは良好ではありません。

/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {  -webkit-appearance: none;}

• ネイティブのデフォルト スタイルを削除し、検索入力ボックスのスタイルを統一します

/** * Define consistent border, margin, and padding. */fieldset {  border: 1px solid #c0c0c0;  margin: 0 2px;  padding: 0.35em 0.625em 0.75em;}

• 一貫した境界線を定義し、 marginsとpadding

/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */legend {  border: 0; /* 1 */  padding: 0; /* 2 */}

IE 6-9で色が継承できない問題を修正

paddingをリセット

/** * Remove default vertical scrollbar in IE 8/9/10/11. */textarea {  overflow: auto;}

• IE8-11のデフォルトの垂直スクロールバーを削除

/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */optgroup {  font-weight: bold;}

• optgroup要素のフォント設定を統一-weight は常に太字です

Tables

/** * Remove most spacing between table cells. */table {  border-collapse: collapse;  border-spacing: 0;}td,th {  padding: 0;}

Normalize-zh.css がリリースされました

Normalize-zh.css は Normalize.css のソースコード分析に基づいており、学習して整理した後、ソース内の英語のコメントがこのバージョンには多くの欠点があることは承知していますが、皆さんと協力して改善していきたいと思っています。 。

ソース コードは Github でオープンソース化されました
プロジェクト アドレス: https://github.com/Alsiso/normalize-zh

概要

2 つの章で Normalize.css のソース コードを学習した後、明確な理解 その動作原理は、従来の CSS Reset の代替として当然のことであり、完全なクロスブラウザー ソリューションをすべての人に提供します。

しかし、あなたも私と同じニーズを持っていますか? たとえば、小規模な Web サイトや PC システムを開発する場合、単純なスタイルのリセットと統合されたブラウジングだけが必要な場合があります。ブラウザの効果は良好で、HTML5 や CSS3 の一部の問題を修正する必要はありません。

それでは、次の章では、独自の CSS 基本コード ライブラリを開発する方法を紹介しましょう。