Télécharger water.css - water.css Code source Télécharger

water.css

Autre code source

1.0.0

Télécharger

Water.css

? Une collection de styles CSS pour rendre les sites Web simples un peu plus agréables

Objectifs

Sensible
Théorique
Bon support de navigateur (fonctionne sur mon ancien navigateur de Kindle: P)
Petite taille
Beau
Pas de cours

Pourquoi?

Je fabrique généralement des pages de démonstration rapides ou des sites Web avec un contenu simple. Pour cela, je ne veux pas passer du temps à les coiffer mais n'aime pas la laideur des styles par défaut.

Water.css est un cadre CSS qui ne nécessite aucune classe. Vous l'incluez simplement dans votre <head> et l'oubliez, tandis que cela rend silencieusement tout plus beau.

OMS?

Vous voudrez peut-être utiliser water.css si vous créez une page statique simple ou un site Web de démonstration que vous ne voulez pas passer de temps.

Bien qu'il n'ait pas été conçu à l'origine pour des sites Web plus complexes, de nombreux développeurs ont utilisé Water.CSS comme feuille de style de base et appliqué de styles personnalisés de manière créative pour créer une application entière. Rien ne vous empêche de faire de même!

Comment?

Collez-le simplement dans votre <head> :

? / ☀ Thème automatique:

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

? Thème sombre:

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

☀ Thème léger:

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

Un aperçu des différents thèmes est disponible sur la page de démonstration ! ⚡

Comment fonctionne le "thème automatique"

Le fichier water.css principal bascule automatiquement entre le mode clair et l'obscurité en fonction des préférences système de l'appareil d'un utilisateur. Cette détection est rendue possible via une requête multimédia CSS appelée prefers-color-scheme . Dans les navigateurs où la préférence ne peut pas être détectée, water.css restera au thème léger.

Si vous souhaitez éviter ce comportement, utilisez dark.css ou light.css .

Soutenir Internet Explorer

Les trois distributions de Water.css prennent en charge Internet Explorer 11, mais le fichier water.css principal ne respecte pas le schéma de couleurs de l'utilisateur et sera verrouillé en mode léger en raison du manque de prise en charge prefers-color-scheme .

Sachez que IE ne prend pas non plus la prise en charge de la thèse d'exécution et que les valeurs de secours fixes seront utilisées. Si vous souhaitez remplacer le thème Water.CSS d'une manière compatible avec IE, nous vous recommandons de compiler votre propre thème.

Buildages non mandifiés

Toutes les versions sont également disponibles sous forme de feuilles de style non mandifiées, ce qui peut être pratique pendant le développement.
Supprimez simplement le .min du nom du fichier.

Thème

Voulez-vous effectuer des ajustements ou construire votre propre thème complètement différent des thèmes sombres ou clairs officiels? Étant donné que Water.css est construit avec des variables CSS, c'est super facile à faire! Voici une liste de liste de toutes les variables que vous pouvez modifier à votre goût:

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

Téments d'exécution

Si vous utilisez une version avec la prise en charge des navigateurs hérités comme Internet Explorer, sautez pour compiler votre propre thème!

Water.css utilise des propriétés personnalisées ( "Variables CSS" ) pour définir ses styles de base tels que les couleurs. Ceux-ci peuvent être modifiés et écrasés en plein navigateur.

Pour cette raison, vous pouvez simplement ajouter votre propre feuille de style à la page et y régler vos propres variables CSS. Tant que votre feuille de style arrive après Water.css dans le HTML, vos valeurs remplaceront les par défaut et votre thème est appliqué!

Ce court exemple utilisera Water.css, mais colorez tous les liens rouges:

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

Si vous souhaitez modifier une valeur pour le mode sombre ou léger uniquement, utilisez une requête multimédia comme celle-ci:

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

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

Compilation de votre propre thème

Si vous ciblez les navigateurs sans support pour les propriétés personnalisées CSS telles que Internet Explorer, le thème de l'exécution n'est pas une option. Pour appliquer votre propre thèse, vous devrez apporter vos modifications dans les fichiers source eux-mêmes, puis recompiler les fichiers CSS. Cela fonctionne comme les suivants: