Stylus を使用すると、CSS プレフィックスの実装と CSS_html/css_WEB-ITnose のリセットが簡単になります

CSS プレフィックス

CSS プレフィックス地獄から抜け出そう!
CSS プレフィックス地獄から抜け出そう!

CSS3 各ブラウザにはプライベート プロパティがあります。たとえば、-moz は Firefox ブラウザのプライベート プロパティを表し、-ms は IE ブラウザのプライベート プロパティを表します。CSS3 標準がまだ完成していない場合、CSS3 には多くのプロパティがあります。各ブラウザはまだ実験段階にあり、暫定草案仕様を独自に理解して実装していますが、仕様がまだ完成していないため、一部の記述が不明瞭であったり、処理ロジックが不完全であったりします。現在の実装の一部が将来変更される可能性があります。 -webkit-transform などの接頭辞付きプロパティを一時的に使用する本来の目的は、transform の最終実装が現在の実装と異なっていても、最初に作成した -webkit-transform は引き続き正常に動作できるようにすることです。そのため、ブラウザーは、final 属性を直接実装し、プレフィックスを放棄する傾向が強くなっています。古いブラウザは変換をサポートしていない可能性があるため、さまざまなバージョンのブラウザと互換性を持たせるために、通常は -webkit-transform 属性とtransform 属性を追加します。

• -webkit- (Google Chrome & Safari)
• -khtml- (Konqueror)
• -moz- (Mozilla Firefox)
• -ms- (Internet Explorer)
• -o- (Opéra)
• 構文標準

shell$ bower install AutoPrefixCss #下载$ bower info AutoPrefixCss #查看详情

をダウンロードする本来の目的

インターネット上には、autoprefixer や prefixfree などの CSS プレフィックスを自動的に追加する JS 実装が数多くあります。

• スタイラスの登場により、この接頭辞を追加するのはそれほど面倒ではなくなったように感じます。
• CSS を生成するだけです。ブラウザは CSS を直接レンダリングします。レンダリングのために js を通じて CSS を生成する必要はありません。

使用の前提条件

node.js とスタイラスをインストールする必要があり、スタイラス、スタイラス github、スタイラス チュートリアルの使い方も学ぶ必要があります

使用方法

reset.styl

reset.styl をプロジェクトに追加して引用するだけです@import( 'reset.styl') を実行し、参照した .styl で次のいずれかのメソッドを呼び出します:

• global-reset() # HTML5 の新しいタグを除くすべてのタグのリセット
• nested-reset() # ネストlabel replace
• reset-font()
• reset-box-model()
• reset-body()
• reset-table() # テーブルリセット
• reset-table-cell() # テーブル単一セルのリセット
• reset-html5() # HTML5 新しいタグをリセットします

例:

@import('reset.styl')global-reset()

CSS サフィックスを自動的に追加します

プロジェクトに Vendor.styl を追加して @import('vendor. styl') を引用するだけです。通常、スタイラス ファイルではスタイラス構文を使用します。効果は次のとおりです:

不透明度

IE に不透明度フィルターを追加します

body    opacity:0.5

生成:

cssbody {  opacity: 0.5;  -khtml-opacity: 0.5;  -moz-opacity: 0.5; /* old Mozilla */  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*old IE */}