W3.CSS

De EduTech Wiki
Révision datée du 31 janvier 2022 à 10:06 par Kenneth Rioja (discussion | contributions) (better intro)
Aller à la navigation Aller à la recherche

Introduction

W3.CSS est une bibliothèque (framework en anglais) CSS. L'ajout de cette bibliothèque à votre page HTML vous permettra de gérer le style de n'importe quelle de vos balises. Par exemple, vous souhaitez modifier votre texte afin de l'encadrer de rouge, ajoutez simplement la classe correspondante à votre balise et le tour est joué. Voir plus bas l'implémentation de la bibliothèque à votre page HTML.

Plus généralement, W3.CSS permet aussi le développement d'applications web "réactives" (en anglais : 'responsive'), c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).

Avantages

  • Égalité d'implémentation quelque soit le moteur de recherche que vous utilisez (Chrome, Fireforx, Edge, IE, Safari, Opera) et quelque soit le support utilisé (Ordinateur de bureau/ portable, tablette, mobile).
  • CSS uniquement : pas besoin d'utiliser de bibliothèques comme jQuery ou JavaScript.
  • Facilité d'utilisation : si vous savez implémenter une classe dans une balise, c'est tout ce qu'il faut.

Comparaison avec Bootstrap

Traduit de https://blog.hubspot.com/website/w3-css-vs-bootstrap

Facilité d'utilisation
  • W3.CSS n'utilise que HTML et CSS. À l'inverse, Bootstrap utilise aussi Javascript mais surtout pour les menus déroulants donc la plupart du temps le framework Bootstrap se fera sans JavaScript.
  • W3.CSS est considéré comme un framework plus facile de prise en main et plus rapide à apprendre.
  • Cependant si vous vous donnez du temps à apprendre Bootstrap, vous aurez accès à plus de puissance avec ce dernier (menus déroulants, carousels, etc.)
Rapidité
  • Si vous téléchargez chaque framework dans leur entièreté, W3.CSS est plus léger en terme d'espace mémoire, donc plus rapide.
  • Cependant vous n'êtes pas obligés de télécharger Bootstrap dans son entièreté et il est conseillé de choisir ce dont il vous faut.
Utilisation dans le web
  • W3.CSS semble être un framework moins populaire sur internet comparativement à Bootstrap. Mais à noter que W3CSS a été publié en 2016, soit six ans après la première version de Bootstrap.

Installation

W3.CSS peut être installé tout simplement en incorporant le fichier .css dans la page HTML qui l'utilise. Pour ce faire vous pouvez :

  1. Télécharger la dernière version (4.15 au moment de l'écriture de cette page, version de Décembre 2020) depuis le site officiel
  2. Utilisez le lien en ligne de w3.css.

Fichier téléchargé

Téléchargez votre fichier w3.css depuis le site officiel.

Puis incorporez le fichier w3.css comme lien dans l'entête de votre code :

<!DOCTYPE html>
<html>
<title>Ma page web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/mondossierquicontient/w3.css">

Pensez à bien modifier le chemin d'accès à votre fichier w3.css

Lien au site

Le site officiel vous conseille d'utiliser le chemin de sa propre page web qui propose la dernière version de la bibliothèque :

<!DOCTYPE html>
<html>
<title>Ma page web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Quelles utilisations de la bibliothèque

Vous aurez la possibilité de modifier toutes vos balises selon vos envies. Par exemple, vous pourrez modifier la taille des 'containers', des 'panels', la couleur, créer des tableaux, rendre la page 'réactive', ajouter des animations, créer des barres de progression, montrer du code et bien plus encore.

W3.CSS permet in fine d'éviter d'écrire votre propre fichier .css.

Un aperçu global des fonctionnalités de W3.CSS se trouve ici.

L'intégralité des fonctionnalités de W3.CSS se trouve sur le bandeau de gauche de cette page.

Comment utiliser la bibliothèque

En général, il suffit d'ajouter une classe à la balise que vous souhaitez modifier et le tour est joué.

À noter que chaque classe de w3.css commence par le préfixe w3- , par exemple : w3-container, w3-teal, w3-input, etc.

Par exemple, pour une animation d'un texte arrivant de la droite il suffit d'ajouter à la balise souhaitée la classe w3-animate-right :

<div>
  <h1 class="w3-animate-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>

L'exemple peut être testé ici.

Ressources

Liens