CieNum

créateur et opérateur
de services internet

accès internet & réseaux
1 400 entreprises raccordées
GTR 24H/24 7J/7
hébergement & cloud
Disponibilité > 99,9%
1 450 Serveurs et 3 Data Centers
services web & logiciels
80 infrastructures informatiques infogérées
6 600 SMS envoyés par jour

Sites internet
& mobiles

devenez revendeur Grâce à notre
programme
d'affiliation 100%
transparent...

en savoir +


Sites internet & mobiles - Technologies employées - CSS3

Feuilles de styles CSS3

Le CSS (Cascading Style Sheets) est un langage qui permet de définir l’apparence d’un site web.

Aussi appelée feuille de style, cet élément essentiel d’un site va indiquer à chaque élément d’une page comment s’afficher.

Avantage de l’utilisation des CSS

Séparation contenu / apparence

Un des premiers avantages de l’utilisation des feuilles de styles réside dans la séparation du contenu de votre page et la mise en forme proprement dite.

Concrètement cela permet aux rédacteurs de se concentrer sur la saisie des textes ainsi que leurs structures. Une fois un texte publié, si ce dernier a été structuré correctement c’est la feuille de style qui donnera l’apparence souhaitée.
En pratique, il ne sera plus nécessaire lors de la rédaction de mettre un titre dans une police spécifique, de reporter une couleur, un picto…etc… Le rédacteur se contente de saisir son titre et de lui appliquer une balise titre, et c’est la feuille de style qui fait le reste du travail.

Code HTML réduit

Un tel fonctionnement entraine une épuration naturelle du code HTML de la page.
Si nous reprenons l’exemple d’un titre,

On pourrait constater un changement comme celui-ci sans css et avec :

CSS Reduction de code

Multiplié par le nombre d’éléments de la page le code se trouve alourdi.

Changements visuels plus rapides

Choisir d’utiliser des CSS dans les pages  web permet aussi de réaliser des modifications sur l’ensemble d’un site plus rapidement.
En effet, là où il faudrait normalement passer dans chaque page pour modifier l’apparence des titres, il suffit de modifier la feuille de style.
Plus le site aura de pages, plus le gain de temps sera important.

Uniformité

Outre les avantages précédents, un site structuré en css permet d’obtenir un ensemble homogène. Tous les effets étant  centralisés, on évite les incohérences. L’utilisation de plusieurs feuilles de styles permet toutefois d’obtenir des effets plus spécifiques sur certains contenus (voir feuilles en cascade)

Concepts

Principe de feuilles en Cascade

La notion de cascade indique que les styles peuvent provenir de différents fichiers, ils seront alors appliqués selon une hiérarchie.
Par exemple on peut définir que les titres seront en orange sur le site, mais, via une feuille spécifique liée à une page on aura des titres en vert via une hiérarchisation en cascade.

Ce principe permet notamment de pallier certains problèmes d’affichages liés à des interprétations différentes des propriétés selon les navigateurs.

Structure des documents

Afin d’utiliser au mieux les feuilles de style il convient de rédiger les pages en tenant compte de la sémantique web, autrement dit, il faut utiliser les balises appropriées lors de la rédaction sans tenir compte de son effet sur l’affichage.

Exemple concret : si vous voulez saisir une liste avec des tirets devant : utilisez une liste non ordonnée (balises <ul><li >) plutôt que des symboles textes.
L’utilisation d’une sémantique appropriée permet d’éviter la surabondance de classes.

Si une rédaction correcte nous intéresse pour l’emploi des CSS, certaines personnes peuvent désactiver les css (consultation PDA, handicap…etc…), alors avoir une page rédigée avec les balise appropriées permet de garder une présentation correcte.

Les différentes versions de CSS

Quelle version utiliser

Les propriétés css ont évoluées au fil des années, on utilise aujourd’hui majoritairement CSS2.
CSS3 en est a ses débuts. Ce qui retient les développeurs d’utiliser d’anciennes méthodes, ce sont les navigateurs. 

En effet certains d’entre eux ne comprennent pas toutes les propriétés CSS. Et on peut avoir des rendus différents selon le navigateur.

Il y a alors deux politiques :

  • Soit on s’adapte pour avoir un rendu identique quel que soit le navigateur.
  • Soit on essaie d’utiliser au maximum les dernières version de html en s’arrangeant que le contenu dans les versions antérieures (et obsolètes) des navigateurs restent correctes. On a alors un site qui peut être affiché en mode dégradé ou en mode réhaussé selon le navigateur employé.

Si certains cas de figure peuvent faire  qu’on est forcé d’utiliser les méthodes les plus anciennes, il est toutefois conseillé d’utiliser les méthodes les plus modernes, ces dernières étant souvent plus adaptées aux maintenances.

Nouveautés apportées par CSS3

Avec CSS3 de nombreux effets qui étaient jusqu’à présents exclus ou nécessitaient d’utiliser des scripts (javascript, jQuery) peuvent être réalisés via les feuilles de styles.

Parmi ces effets, certains permettent de se passer d’images et d’utiliser des effets sur les textes.

On notera ainsi les possibilités de :

  • Créer des bords arrondis
  • Ajouter des effets ombrés
  • Ajouter des options de transistion
  • Des effets 3D
  • Utiliser des polices ‘exotiques’
  • Gérer des contenus selon les tailles d’écrans
demande de devis
Pour valider votre demande, veuillez répondre à la question suivante :
Combien font deux + deux ?
Afin de vérifier que les informations saisies dans ce formulaire ne sont pas l'oeuvre d'un robot malveillant qui tenterait d'envoyer des messages indésirables, nous vous demandons de bien vouloir répondre à la question.

Merci de votre compréhension.
Aide
  envoyer

candidature
spontanée

Vous êtes développeur, chef de projet, commercial, technicien... et vous souhaitez rejoindre l'équipe CieNum ?
Postuler en ligne
sites internet & mobiles
pour nous contacter 0811 856 813*
info@cienum.fr
*Prix d’un appel local
demande
de devis
Pour valider votre demande, veuillez répondre à la question suivante :
Combien font neuf + un ?
Afin de vérifier que les informations saisies dans ce formulaire ne sont pas l'oeuvre d'un robot malveillant qui tenterait d'envoyer des messages indésirables, nous vous demandons de bien vouloir répondre à la question.

Merci de votre compréhension.
Aide
  envoyer
Adista Opérateur de Services hébergés Premier opérateur de proximité

Opérateur et créateur de sites internet, Cienum a rejoint depuis la rentrée 2014 la société Adista, opérateur national de services hébergés, présent dans toute la France avec 24 agences.

Ces 2 sociétés réunies sous le nom Adista proposent un large catalogue de solutions numériques innovantes délivrées en mode service, une qualité des infrastructures d’hébergement et de télécommunications, une présence de proximité sur tout le territoire français ainsi que des compétences en développement logiciel et web.

www.adista.fr
Object23 est la marque de nos compétences web et logicielles.

Depuis 2015, la marque Object23 matérialise l’expertise historique du web qui a notamment contribué au succès de Cienum. Les 24 agences Adista proposent à leurs clients une offre complète, allant du webmarketing, de la création de sites internet ou e-commerce, aux applications mobiles et aux applications métiers innovantes.
Object23 accélère votre transformation digitale en facilitant les usages numériques.

www.object23.fr
Vous avez un compte Cienum ? Continuez à y accéder en cliquant ici