Choix de la feuille de style suivant le media
Comme vous l’aurez compris, la feuille de style CSS permet de définir le rendu graphique affiché au public d’une page ou d’un document suivant le media sur lequel il sera projeté mais aussi en rapport avec les capacités techniques de celui-ci, de celles du navigateur (texte ou graphique) ou encore suivant les préférences définies par l’utilisateur.
Les feuilles de styles CSS peuvent donc être différenciées suivant le média comme suit :
- all : la feuille de style CSS est interprétée de la même manière quel que soit le média ;
- screen : la feuille de style CSS est développée spécialement pour les écrans d'ordinateur de type « bureau » ;
- handheld : la feuille de style CSS est adaptée aux nombreux écrans de plus petite taille tels que les smartphones et tablettes;
- print : la feuille de style CSS est réalisée en vue d’une impression sur papier ;
- projection : la feuille de style CSS n’est interprétée que lorsque le document est projeté ;
- tv : feuille de style CSS utilisée spécifiquement pour les télévisions.
Avantages des feuilles de style
L’avantage des feuilles de style dans la création d’un site web au design professionnel est la possibilité de mettre les feuilles de style en « cascade », entendez donner une priorité à chaque feuille de style afin que les couches suivantes interprètent ou surchargent la premier afin d’en modifier l’affichage ou le comportement.
Ainsi, les propriétés attribuées à une image, un lien, un titre ou plus largement à tout élément présent dans une page web seront transmises en tout ou partie aux éléments sous-jacents.
Autre avantage, et pas des moindres, est qu’il est possible de créer une feuille de style globale dans laquelle seront insérées toutes les règles générales telles que les couleurs du texte ou du fond d’écran, des boutons, des liens avant survol, au survol ou lorsqu’ils ont été cliqués et bien d’autres encore. Cette feuille de style globale est alors associée à chaque page web développée afin qu’elle ne soit chargée qu’une seule et unique fois, rendant le site bien plus rapide.
Si certains éléments ou fonctionnalités nécessitent une présentation spécifique, une feuille de style CSS dédiée peut être créée et appelée directement après les feuille de style principale.
Contraintes des feuilles de style
Les feuilles de style CSS, à l’instar d’un fichier html, est un fichier rédigé en texte brut, entendez parfaitement lisible par la plupart des éditeurs de texte (Blocnote, Sublime Text, Notepad++, etc).
Il faut néanmoins maitriser les différents langages de programmation et les contraintes liées à chaque navigateur pour générer des feuilles de style compatibles avec la plupart.
En effet, malgré une grande compatibilité des feuilles de style CSS avec la plupart des navigateurs, certaines différences peuvent subsister suivant le navigateur, sa version ou encore le système d’exploitation sur lequel elles sont utilisées. Ainsi, Netscape ne réagit pas de la même manière qu’Internet Explorer, Chrome ou Firfeox, sous Windows ou sous Macintosh !
Découvrez quel logiciel est le mieux adapté pour concevoir votre site web : Adobe Photoshop, Sketch ou Figma. Obtenez des informations complètes sur leurs fonctionnalités et leurs avantages afin de choisir le logiciel qui répondra le mieux aux besoins de votre projet web.
Le design web réussi est une combinaison d'esthétique et d'ergonomie, qui sont complémentaires et doivent être conçus dès la conception du site afin d'offrir une expérience utilisateur optimale. Dans cet article, nous expliquons pourquoi esthétique et ergonomie doivent être gérés séparément.
Avec leur interface intuitive et leur large gamme de fonctionnalités et d'options de personnalisation, les systèmes de gestion de contenu (CMS) sont la solution idéale pour gérer efficacement le contenu web. Découvrez comment notre CMS peut vous aider à simplifier et à optimiser votre gestion de contenu.
Le Responsive Web Design, c'est ce qui permet à votre site web de s'adapter à tous les types d'appareils utilisés pour le consulter. Rendez votre site accessible sur desktop, mobiles et tablettes et offrez une expérience utilisateur optimale à vos visiteurs.
