créateur et opérateur
de services internet
Sites internet
& mobiles
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 :
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
candidature
spontanée
Vous êtes développeur, chef de projet, commercial, technicien... et vous souhaitez rejoindre l'équipe CieNum ?
Postuler en ligne
de devis
inscription
newsletter
Recevez chaque mois les dernières actus de CieNum en vous inscrivant ici :
|
||
| voir nos newsletters |
l'actualité
cienum
27 août 2011
Les 3 premières positions de google rapportent 60% des clics
Le référencement joue un rôle prépondérant dans le trafic des sites internet, avec près de 60% des clics drainés par les trois premiers résultats de recherche, rapporte une étude publiée sur le Journal du Net.
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