À propos des feuilles de styles CSS
On a vu que le langage HTML permet de baliser de l’information. Pour rendre visuellement cela attrayant, on utilisera les feuilles de style en cascade CSS ! Créer une UX (expérience utilisateur) agréable avec une UI (interface utilisateur) visuellement ergonomique, optimisée et pleine d’affordance, sera un des objectifs des CSS. Les CSS utilisent des sélecteurs pour y adhérer une belle couche de peinture. Pour appliquer un style, les sélecteurs CSS utilisent des balises et propriétés HTML class et identificateur id.
Comme le HTML, les CSS se déclinent en plusieurs versions dépendantes de leur évolution et histoire. La version 1 de CSS a émergé en 1996, puis suivront CSS 2, CSS 2.1 et CSS 3. Aujourd’hui en 2020, on utilisera plutôt CSS 3. Les CSS ont dans leurs spécifications l’ajout de la possibilité d’animer des éléments de la page web : Animations autonomes, ou par interaction de l’utilisateur. De nombreux site utilisent encore de vieilles versions, et cela n’empêche pas leur bon fonctionnement. La difficulté pour le développeur de site internet est de maintenir un code qui fonctionne bien avec les versions des navigateurs utilisés. Malgré la standardisation ce qui marchait hier, ne marchera peut-être plus dans 6 mois.
Quelques remarques sur le format de fichier CSS
Un fichier CSS comporte l’extension de fichier .css, est encodé de préférence en utf-8 with no BOM, et possède le mime type text/css. Par exemple on aura des fichiers styles.css, contact_form_12h30.css, main_12h30.css en nommant si possible le fichier en 8.3 avec aucuns caractères exotiques. Plus le nom de fichier est court, plus on économisera de la bande passante.
Le code CSS peut être écrit dans un fichier externe ou directement dans la page html via la balise < style> ou en inline dans une balise HTML. La façon la plus stable d’utiliser les css, est par feuille de style externe et la plus fragile au niveau maintenance, est d’utiliser les styles inline, même si cela peut dépanner quelques situations ou on a pas accès au système de fichier.
Exemple d’utilisation pour appliquer un style à la balise < body >
< style type= »text/css »>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(../images/pattern-12h30.png) repeat scroll 0 0 black;
color: #cdcdcd;
font: 15px/23px « Dosis »,Arial,Helvetica,sans-serif !important;
}
< /style >
Lire / éditer / exécuter un document CSS
Le fichier CSS peut être ouvert avec un éditeur de code, ou visualisé via une page html et un navigateur WEB. Le fichier peut être manipulé avec un simple éditeur, ou pris au piège d’un environnement de programmation complet. Pris au piège, car selon l’environnement de programmation le fichier sera illisible, inutilisable si on est en dehors de cet environnement. Pour utiliser un fichier CSS depuis un fichier HTML, on utilise la balise HTML < link /> pour appeler le fichier CSS. Une autre façon consiste à déclarer le style css en inline, c’est à dire comme propriété de balise HTML ou encore en utilisant la balise < style > pour déclarer les CSS. Nous pouvons donc aussi directement écrire dans le fichier html.
Les navigateur moderne (2020) possède un outil de développement. Via ce outil de développement, il est possible de modifier les CSS directement dans le panneau d’inspection du DOM. Cela permet de tester en live et de manière éphémère directement les propriétés CSS de mise en forme. Cela permet aussi de faire du debugage.
À vos marques, prêt, codez !
- Manipuler des CSS via un éditeur texte 📝
- Manipuler des CSS emprisonné dans un environnement de programmation 📝
- Voir du HTML utilisant des CSS via un navigateur WEB 👁️
Voici quelques exemples :
📝Voici la balise Link
< link href= »/pathTo/foo.css » rel= »stylesheet » >
< link href= »print.css » rel= »stylesheet » media= »print » >
< link href= »mobile.css » rel= »stylesheet » media= »screen and (max-width: 600px) » >
📝Voici une déclaration inline dans un bout de code HTML
< h1 style= »font-size: 32px; »>12h30, agence de Communication dans le canton de Neuchâtel en Suisse, serait un titre h1 avec un texte de taille 32 pixels si on le visualisait dans un navigateur WEB.< /h1 >
Compatibilité 🦗
Voici un tableau de compatibilité sur w3schools CSS3 concernant les navigateur Edge, Firefox, Chrome, Safari, Opera. Si on veut creuser un peu plus, il faut voir du côté des moteurs de rendu gecko (mozilla), webkit (apple), trident (microsoft), … [article wikipedia moteur de rendu HTML]
Voici quelques notes sur le debugage : 🛠️LET’S GO DEBUG !
- Utiliser les outils de développement web intégrés au navigateur web.
- Lancer des investigations.
- Observer les messages d’erreurs, d’avertissements de la console de l’outil de dévelop-pement.
- On le répétera jamais assez : Modifier, Transférer, Vider le Cache, Actualiser !
- Empty Cache, Refresh ! Empty All cache, reboot, Refresh Refresh !!
Se documenter 📚
Un peu de documentation en ligne concernant les spécifications du langage CSS :
Pour tester des bouts de code, il est possible de directement tester dans le navigateur en ligne. Par exemple sur les sites internet:
Conclusion
Créer une interface utilisateur que ce soit pour le frontend ou un backoffice, utilisera les langages HTML, et CSS pour la base visuelle. Le contenu et le contenant sont très liés. Le HTML pour la structure d’information et les CSS pour la mise en page. L’interactivité, elle, sera mise en oeeuvre avec javascript côté client et php/MySql côté serveur.
Le prochain article concerne le langage de programmation javascript. On codera un maximum d’animation avec les CSS, et les limites atteintes on utilisera alors du javascript :
- Langage #3 : Javascript
On utilisera php pour générer des pages dynamique, des gestions d’utilisateurs, de galeries, des quizz, des blogs, des CRM, des services web.
