Si la qualité du contenu de votre site web doit rester la priorité, la façon dont il est affiché sur les différents médias va déterminer en partie s’il sera bien accueilli ou non. Les internautes sont sensibles au design, à l’esthétique du site. CSS est l’outil idéal pour mettre en valeur le contenu que vous produisez, pour transformer l’expérience des vos utilisateurs. Voyons comment CSS3 fonctionne et ce qu’il peut exactement apporter à votre site web.

Qu’est-ce que CSS3 ?

CSS est un acronyme signifiant Cascading Style Sheets. Ces « feuilles de style en cascade » sont utilisées pour la mise en forme des pages web. Il s’agit ni plus ni moins d’un langage informatique permettant de modifier la présentation d’une page web.

Lors de la création du web, CSS n’existait pas. Les pages étaient constituées uniquement de texte, d’images, de liens, bien loin des mises en forme que nous pouvons connaître aujourd’hui. Les standards du CSS ont été définis dans les années 1990 par le World Wide Web Consortium (W3C) et adopté par les navigateurs dans les années 2000.

CSS3 est tout simplement la troisième version du langage.

version 3 CSS

Afin de mieux comprendre le fonctionnement de CSS dans vos pages web, voyons comment elles sont constituées.

Comment fonctionne une page web ?

Fonctionnement de la page web

Pour faire simple, il est possible de distinguer trois types d’éléments dans une page web :

  • Le contenu : ce sont les informations affichées à l’utilisateur, articles, images, texte…
  • La structure : il s’agit de la façon dont est construite et organisée la page web, avec ses titres, sous-titres, paragraphes, menus, blocs…
  • La mise en forme : elle détermine de quelle façon le contenu est affiché dans la page. Le menu est-il fixe ou déroulant ? Quelle est la police et la couleur des titres et du texte ? Comment s’affichent les images ? Existe-t-il des animations au survol de la souris ou au clic sur un élément ?

A ces trois éléments peuvent s’ajouter les interactions avec l’utilisateur (actions déclenchées lors du clic sur un bouton, sur une zone de la page, défilement…). Généralement, ces interactions sont gérées grâce au langage de programmation JavaScript.

Structure et apparence d’une page web

Concentrons-nous sur les deux éléments qui vont déterminer la structure et l’apparence de votre page web.

La structure d’une page web, son squelette, est construite en HTML (HyperText Language Markup). Elle doit être soignée, car elle déterminera en partie si votre page web est accessible et si elle pourra être bien référencée. La structure HTML doit en effet permettre à un utilisateur de lire et comprendre le contenu de la page même si elle n’est absolument pas mise en forme (si le CSS est désactivé par exemple).

Le CSS quant à lui va permettre de définir l’apparence, le design, l’interface utilisateur de la page. Grâce au CSS, vous allez pouvoir indiquer la police, la taille et la couleur de chaque niveau de titre mais aussi des paragraphes de texte. Vous allez créer des effets au survol de certains éléments, ajouter des animations, rendre l’utilisation de la page et l’expérience utilisateur (UX) plus agréable.

Mise en forme d’une page web avec CSS3

CSS3 permet de définir des règles de styles. Elles sont utilisées par les navigateurs pour savoir comment afficher tel ou tel élément dans la page web.

Pourquoi utiliser CSS3 ? Tout simplement parce que le CSS permet de séparer clairement la structure de la page (définie grâce au langage HTML) et son contenu de la façon dont la page va apparaître à l’écran.

Vous pouvez donc avec une même structure de page écrite en HTML, adapter l’affichage en fonction par exemple du media auquel il est destiné. En définissant les règles CSS, vous allez pouvoir afficher la même page web différemment sur une télévision 4K, sur un écran d’ordinateur, sur une table ou sur un smartphone. C’est ce que l’on appelle un affichage « responsive ». Il est possible d’afficher la page sur n’importe quel type de terminal sans perte d’information.

CSS va même plus loin puisqu’il est possible de définir des règles qui détermineront de quelle façon une page web pourra être imprimée. Ce qui apparaît à l’écran ne sera pas forcément exploitable sous la même forme pour une impression. Il est donc possible de réorganiser la page pour qu’elle soit exploitable une fois imprimée.

css3

Avantages et inconvénients de CSS3

Avantages de CSS3

CSS3 présente de nombreux avantages pour la conception et la création de pages web, à condition bien entendu de respecter les bonnes pratiques de développement (en termes d’accessibilité notamment).

CSS3 permet notamment :

  • De séparer le contenu de la page de la façon dont il sera affiché à l’écran (cela permet également de séparer clairement les rôles dans une équipe, entre le design, l’intégration et le développement par exemple).
  • D’adapter cet affichage au média utilisé.
  • D’appliquer automatiquement des styles à un grand nombre d’éléments d’un site en évitant la répétition et la duplication de code.

  • De simplifier la maintenance et l’évolution du site.
  • De faciliter la personnalisation des pages web.
  • De réduire la quantité de données transférées, d’autant plus en utilisant des outils permettant de minifier (supprimer automatiquement tous les caractères inutiles comme les retours à la ligne ou certains espaces afin de diminuer la taille des fichiers) les fichiers CSS.

Inconvénients de CSS3

Le principal inconvénient de CSS3 vient de possibles incompatibilités entre navigateurs. C’est-à-dire qu’un style fonctionnant parfaitement avec un navigateur peut très bien ne pas fonctionner avec un autre navigateur. Il est ainsi possible d’observer une différence entre deux navigateurs en termes d’apparence et de comportement d’une page web. Cela vient du fait que les navigateurs utilisent des moteurs de rendu (outil qui converti le code CSS pour afficher le résultat) différents.

Les standards CSS sont définis par le W3C. Mais tous les navigateurs ne les intègrent pas exactement de la même façon. Certains proposent même des fonctionnalités CSS propriétaires, que l’on ne retrouvera ni dans les autres navigateurs, ni dans les définitions du W3C.

D’autre part, les fonctionnalités les plus avancées de CSS3 ne sont prises en charge que dans les navigateurs les plus récents. Du code CSS3 pourra être mal interprété, voire pas du tout interprété, par d’anciennes versions de navigateurs. Dans ce cas, le rendu obtenu ne sera pas du tout celui attendu.

Il est donc primordial lors du développement d’une page web et d’un site web plus généralement de bien identifier et maîtriser le code CSS3 utilisé en fonction des navigateurs ciblés. En vous basant uniquement sur les versions les plus récentes des navigateurs, vous prenez le risque de vous couper d’une partie de votre audience potentielle. De nombreux tests doivent donc être effectués sur différentes versions de navigateurs tout au long des développements.

CSS3 ou JavaScript ?

JavaScript est un langage de programmation couramment utilisé dans les pages web pour gérer les interactions avec les utilisateurs. Il est nativement compris par les navigateurs et donc facilement utilisable. Grâce à JavaScript, la page est plus « vivante » et l’expérience utilisateur grandement améliorée (même si elle ne doit pas uniquement être basée sur JavaScript).

JavaScript et CSS3 sont deux langages bien distincts, avec des objectifs différents. Auparavant, beaucoup d’animations dans les pages web étaient réalisées en JavaScript. Cela nécessitait bien entendu de maîtriser le langage, qui est bien moins facile d’accès que CSS. JavaScript est un langage de programmation complet demandant un long apprentissage, bien plus long que pour CSS.

En revanche, JavaScript est bien plus ancien que CSS et est donc compatible avec la plupart des navigateurs, même avec les anciennes versions.

La question de devoir choisir entre CSS3 et JavaScript ne se pose finalement pas. Ces deux langages sont deux outils complémentaires, qui combinés correctement, offriront aux utilisateurs de vos pages web une expérience bien meilleure. La gestion de la mise en page et de l’affichage sur les différents médias sera confiée à CSS alors que la plupart des interactions et des actions seront gérées en JavaScript.

Pour conclure sur le langage CSS3

CSS3 est un élément incontournable de tous les sites web. La qualité du code CSS utilisé par votre site web déterminera non seulement la satisfaction de vos utilisateurs mais également la facilité de maintenance et d’évolution du site.

En modifiant « simplement » le code CSS, vous êtes en mesure de modifier totalement l’apparence de votre site web, de changer son « habillage », sans pour autant en changer la structure ou le cœur. Cela en fait donc un outil très précieux !

Fort de mon expérience en e-commerce, je vous propose de vous accompagner pour le design et l’intégration de vos sites web. Nous déterminerons ensemble les solutions les plus adaptées à vos besoins afin d’obtenir un produit final de qualité.

N’hésitez pas à me contacter afin qui nous puissions discuter de vos projets.

Grégory Chartier
Publié par Grégory Chartier

Expert Prestashop