Unduh water.css - Unduh Kode Sumber water.css

water.css

Kode sumber lainnya

1.0.0

Unduh

Air.css

? Koleksi drop-in gaya CSS untuk membuat situs web sederhana sedikit lebih bagus

Sasaran

Responsif
Dapat ditanggung
Dukungan browser yang baik (bekerja di browser Kindle lama saya: P)
Ukuran kecil
Cantik
Tidak ada kelas

Mengapa?

Saya biasanya membuat halaman demo cepat atau situs web dengan konten sederhana. Untuk ini, saya tidak ingin menghabiskan waktu menata mereka tetapi tidak suka keburukan gaya default.

Water.CSS adalah kerangka kerja CSS yang tidak memerlukan kelas apa pun. Anda hanya memasukkannya ke dalam <head> Anda dan melupakannya, sementara itu diam -diam membuat semuanya lebih bagus.

Siapa?

Anda mungkin ingin menggunakan Water.css jika Anda membuat halaman statis sederhana atau situs web demo yang tidak ingin Anda habiskan untuk penataan waktu.

Meskipun awalnya tidak dibangun untuk situs web yang lebih kompleks, banyak pengembang telah menggunakan Water.css sebagai stylesheet dasar dan gaya khusus yang diterapkan secara kreatif untuk membangun seluruh aplikasi. Tidak ada yang menghentikan Anda melakukan hal yang sama!

Bagaimana?

Tempelkan saja ini di <head> Anda:

?/☀ Tema Otomatis:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">

? Tema Gelap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">

☀ Tema Cahaya:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">

Pratinjau tema yang berbeda tersedia di halaman demo ! ⚡

Bagaimana "tema otomatis" bekerja

File utama water.css secara otomatis beralih antara mode terang dan gelap tergantung pada preferensi sistem perangkat pengguna. Deteksi ini dimungkinkan melalui kueri media CSS yang disebut prefers-color-scheme . Di browser di mana preferensi tidak dapat dideteksi, water.css akan menempel pada tema cahaya.

Jika Anda ingin menghindari perilaku ini, gunakan dark.css atau light.css .

Mendukung Internet Explorer

Ketiga distribusi Water.css mendukung Internet Explorer 11, tetapi file water.css utama tidak menghormati skema warna pengguna dan akan dikunci ke mode cahaya karena kurangnya dukungan prefers-color-scheme .

Ketahuilah bahwa IE juga tidak mendukung tema runtime, dan nilai -nilai fallback tetap akan digunakan. Jika Anda ingin mengganti tema Water.css dengan cara yang kompatibel dengan IE, kami sarankan Anda menyusun tema Anda sendiri.

Build yang tidak diminiikan

Semua versi juga tersedia sebagai stylesheet yang tidak dimuliakan, yang bisa berguna selama pengembangan.
Cukup hapus .min dari nama file.

Tema

Apakah Anda ingin membuat beberapa penyesuaian atau membangun tema Anda sendiri sama sekali berbeda dari tema resmi atau terang resmi? Karena Water.CSS dibangun dengan variabel CSS, ini sangat mudah dilakukan! Berikut daftar daftar semua variabel yang dapat Anda ubah sesuai dengan keinginan Anda:

--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-arrow

Tema runtime

Jika Anda menggunakan versi dengan dukungan untuk browser lama seperti Internet Explorer, lewati untuk menyusun tema Anda sendiri!

Water.css menggunakan properti khusus ( "variabel CSS" ) untuk menentukan gaya dasarnya seperti warna. Ini dapat diubah dan ditimpa tepat di browser.

Karena itu, Anda dapat menambahkan stylesheet Anda sendiri ke halaman dan mengatur variabel CSS Anda sendiri di sana. Selama stylesheet Anda datang setelah air.css di HTML, nilai -nilai Anda akan mengesampingkan yang default dan tema Anda diterapkan!

Contoh singkat ini akan menggunakan water.css, tetapi warna semua tautan merah:

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
  :root {
    --links: red;
  }
</ style >

Jika Anda ingin mengubah nilai untuk mode gelap atau terang saja, gunakan kueri media seperti ini:

 < style >
  :root {
    --links: blue; /* Always applied */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --links: yellow; /* Only applied in dark mode (overrides blue) */
    }
  }
</ style >

Mengkompilasi tema Anda sendiri

Jika Anda menargetkan browser tanpa dukungan untuk properti khusus CSS seperti Internet Explorer, tema runtime bukanlah suatu opsi. Untuk menerapkan tema Anda sendiri, Anda harus membuat perubahan dalam file sumber itu sendiri, kemudian mengkompilasi ulang file CSS. Ini berfungsi seperti berikut: