water.css
1.0.0
？シンプルなWebサイトをもう少し良くするためのCSSスタイルのドロップインコレクション
私は一般的に、シンプルなコンテンツを使用した簡単なデモページまたはWebサイトを作成します。これらのために、私はそれらをスタイリングするのに時間を費やしたくありませんが、デフォルトのスタイルのugさは好きではありません。
Water.CSSは、クラスを必要としないCSSフレームワークです。あなたはそれを<head>に含めるだけでそれを忘れますが、それは静かにすべてをより良くします。
Styic PageまたはDemo Webサイトを作成している場合は、時間をかけたくないデモWebサイトを作成している場合は、water.cssを使用することをお勧めします。
もともとはより複雑なWebサイト用に構築されたものではありませんでしたが、多くの開発者はwater.cssをベーススタイルシートとして使用し、アプリ全体を構築するためにカスタムスタイルを創造的に適用しました。あなたが同じことをするのを止めるものは何もありません！
これを<head>に貼り付けてください：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">
さまざまなテーマのプレビューは、デモページで入手できます！ ⚡
メインwater.cssファイルは、ユーザーのデバイスのシステム設定に応じて、明るいモードとダークモードを自動的に切り替えます。この検出はprefers-color-schemeと呼ばれるCSSメディアクエリを通じて可能になります。好みを検出できないブラウザでは、 water.css軽いテーマに固執します。
この動作を避けたい場合は、 dark.cssまたはlight.cssいずれかを使用してください。
water.cssの3つの分布はすべてインターネットエクスプローラー11をサポートしていますが、メインウォーターwater.cssファイルはユーザーの配色を尊重せず、 prefers-color-schemeサポートがないためにライトモードにロックされます。
IEはランタイムテーマもサポートせず、固定フォールバック値が使用されることに注意してください。 Water.CSSテーマをIEと互換性のある方法でオーバーライドしたい場合は、独自のテーマをコンパイルすることをお勧めします。
すべてのバージョンは、開発中に便利になる可能性のある未成年のスタイルシートとしても利用できます。
ファイル名から.minを削除するだけです。
公式のダークまたはライトテーマとはまったく異なる調整を行うか、独自のテーマを作成したいですか？ Water.CSSはCSS変数で構築されているため、これは非常に簡単です！これが、好みに変更できるすべての変数のリストです。
--background-body--background--background-alt--selection--text-main--text-bright--text-muted--links--focus--border--code--animation-duration--button-hover--scrollbar-thumb--scrollbar-thumb-hover--form-placeholder--form-text--variable--highlight--select-arrowInternet Explorerなどのレガシーブラウザのサポートを備えたバージョンを使用する場合は、スキップして独自のテーマを編集してください。
Water.CSSは、カスタムプロパティ（ 「CSS変数」 ）を使用して、色などのベーススタイルを定義します。これらは、ブラウザで変更して上書きすることができます。
このため、独自のスタイルシートをページに追加して、そこで独自のCSS変数を設定するだけです。 StyleSheetがHTMLのwater.cssの後に来る限り、あなたの値はデフォルトのものをオーバーライドし、テーマが適用されます！
この短い例ではwater.cssを使用しますが、すべてのリンクを赤色に色付けします。
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
:root {
--links: red;
}
</ style >ダークモードまたはライトモードのみの値を変更する場合は、次のようなメディアクエリを使用します。
< style >
:root {
--links: blue; /* Always applied */
}
@media (prefers-color-scheme: dark) {
:root {
--links: yellow; /* Only applied in dark mode (overrides blue) */
}
}
</ style >Internet ExplorerなどのCSSカスタムプロパティをサポートせずにブラウザをターゲットにしている場合、ランタイムテーマはオプションではありません。独自のテーマを適用するには、ソースファイル自体に変更を加えてから、CSSファイルを再コンパイルする必要があります。これは次のように機能します。
yarnを実行して依存関係をインストールしますsrc/variables-*.cssで必要なテーマ変更を行いますyarn buildを実行して、CSSファイルをコンパイルしますout/ディレクトリにコンパイルされたファイルを使用しますまた、ビルドセットアップに関する詳細情報が含まれているため、寄稿ガイドをチェックアウトすることもできます。
あなたのような人々がそれをより良くするのを手伝うとき、water.cssはすべての人にとってより良くなります！
開始方法を学ぶための寄稿ガイドをご覧ください。
そして、貢献するために時間を割いてくれてありがとう！ :)
