Cette première page traite des connaissance générales que je juge nécessaires à une bonne compréhension du sujet: je situe le sujet, j'introduis le sujet par quelques exemples, je définis ce qu'est une CSS et comment elles sont supportées par les fureteurs.
Le Web est composé de pages web stockées sur des serveurs web, c'est-à-dire des machines connectées à Internet en permanence et chargées de fournir les pages web demandées. Chacune des pages web, et plus généralement toute ressource en ligne (image, vidéo, musique, animation, etc.), sont repérée par une adresse unique appelée adresse IP qui est reliée à un URL (Uniform Resource Locator) dans le record DNS (Domain Name Server)
L'élément clé pour la navigation au sein des pages web est le fureteur, c'est-à-dire le logiciel client capable d'interroger les serveurs web, d'exploiter leurs résultats et de mettre en page les informations grâce aux instructions contenues dans le code HTML. Le plus célèbre des fureteurs est Internet Explorer de Microsoft mais il en existe plusieurs autres tels que Firefox, Opera, Chrome, Navigator et Safari pour n'en nommer que quelques uns.
Maintenant que le contexte du Web est situé, passons au travail de composition de pages Web: avec HTML, on peut générer une page Web statique. En fait, HTML, un acronyme de Hypertext Markup Language, est un langage de « balises » qui permet d'écrire de l'hypertexte, de structurer et de mettre en forme des pages Web en y introduisant des hyperliens, des images ou des applets. Le contenu d'une page HTML est organisé en balises imbriquées, c'est à dire que les éléments sont contenus dans des éléments plus gros. Elles sont identifiées comme suit: < ... >.
CSS, l'acronyme de Cascading Style Sheets, est une extension du HTML qui permet de styliser une page Web en séparant l'apparence d'une page de son contenu.
Introduction
Au début du Web, alors qu'on ne disposait que de HTML, on devait générer une balise comme
<b>Je veux être en caractères gras</b>pour afficher un contenu (ici du texte: Je veux être en caractères gras) en caractères gras sur une page Web. Ça fonctionne bien et il n'y a rien d'incorrect avec ce genre de balise. Cependant, si on voulait modifier l'affichage de plusieurs balises de ce genre, on devait modifier la page balise par balise, ce qui était très fastidieux. De plus, on devait aussi générer des balises très complexes en y imbriquant la mise en forme comme dans l'exemple suivant
<span style="color:red; margin-left:20px"><b>Ceci est mon texte</b></apan>pour afficher "Ceci est mon texte " en caractères gras de couleur rouge avec une marge à gauche de 20 pixels.
CSS fournit une solution à ces problèmes. Avec CSS, il est possible de gérer la mise en forme de trois façons.
- CSS interne - elle est insérée dans la section <head> de la page HTML
<style type="text/css">
p {color: white; }
body {background-color: black; }
<style><head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head> Feuilles de style en cascade
Un style est simplement une règle décrivant de quelle façon formater une partie donnée d'une page web. Une feuille de style est un ensemble de styles. Ils permettent aux concepteurs de sites web de séparer la présentation du contenu dans un document HTML.
Dans les années 1990, HTML a été conçu comme un langage de marquage opérant sur un document. Avec les avancées de la technologie informatique, on a dû introduire de nombreux niveaux de formatage d'éléments et d'attributs texte dans le code HTML. Ça compliquait les balises et rendait presqu'impossible les modifications éventuelles.
C'est Microsoft qui a ouvert la voie au CSS en mettant au point le support des feuilles de style dans Internet Explorer 3.0, support qui fut beaucoup amélioré dans Internet Explorer 4.0. Netscape suivit avec Communicator et Navigator 4.0.
Maintenant elles sont là et on les utilise. Cependant, l'histoire du CSS n'a commencé qu'en 1994 alors que les auteurs de pages Web se plaignaient qu'ils n'avaient pas assez d'influence sur l'apparence de leurs pages. Elles visaient à dessiner une frontière entre le contenu d'un document et sa présentation à l'écran. Elles ont gagné en popularité avec le développement de HTML et l'août des caractéristiques incorporées par les concepteurs.
Cascading Style Sheets (CSS), littéralement feuilles de style en cascade, est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en HTML ou XML. Il a évolué à travers plusieurs versions. CSS Niveau 1 a été lancé en 1996 et republié avec des corrections en 1999. CSS Niveau 2, compatible avec CSS Niveau1, est apparu en 1998. Il ajoute un support pour la distinction des types de médias. CSS Niveau 3 est la version utilisée actuellement quoique CSS Niveau 4 soit en développement depuis juin 2012.
CSS offre plusieurs avantages.
- On peut changer l'apparence d'un document en ne modifiant que quelques règles CSS;
- Elles peuvent s'appliquer à plusieurs documents et s'appliquer à tout un site Web;
- Les sites et les pages sont faciles à entretenir car CSS réduit le nombre et la complexité des balises dans les documents;
- Elles peuvent différencier les types de médias - affichage à l'écran, impression...;
- Le téléchargement est plus rapide car CSS réduit le volume du code à télécharger.
Support des fureteurs
Actuellement, tous les fureteurs supportent CSS mais il s'avère que certains le font à leur façon, ce qui complique la mise en place des CSS qui doivent alors différencier certains fureteurs. Comme à l'habitude, Internet Explorer est dans la mire parce qu'il supporte un modèle de blocs un peu différent. C'est un sujet qui dépasse l'envergure de ce tutoriel
Note de l'auteur
Pour les plus curieux, je recommande la lecture de "Comparison of layout engines (Cascading Style Sheets)" où on décortique les différence de réponse des fureteurs aux sélecteurs CSS. Si vous pensez que vous devriez détecter les fureteurs, lisez "Browser Detection is Bad" et si vous aimez l'humour et la finesse, je recommande: "History of the browser user-agent string" par Aaron Anderson.
Modes d'opération des fureteurs
Les modes "quirks" et "strict" sont les deux modes que les fureteurs modernes supportent pour interpréter les CSS. Ces deux modes proviennent essentiellement de ce que lorsque les développeurs de fureteurs ont décidé de se rapprocher le plus possible des standards W3C, ils ont eu à faire face à un choix difficile. Oui, il était bon de se rapprocher le plus possible des standards mais qu'arriverait-il aux pages plus anciennes, seraient-elles présentées correctement?
La solution à ce problème était de
- permettre au développeurs qui connaissent les standards de développer selon leur souhait; et
- continuer d'afficher les vieilles pages selon les anciennes règles - c'est le mode "Quirks".
Document Type Definition
Pour le développeur, il faut faire un choix et le DTD (Document Type Definition) est l'outil pour ce choix. Il s'agit d'un énoncé comme l'un de ceux qui suivent.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Le DTD informe le validateur de la version de HTML qu'on utilise, et il doit apparaître en première position dans le code de chaque page web. Ils sont des composants primordiaux pour les pages conformes aux normes : ni le balisage ni les CSS ne passeront une validation sans DTD. Ils sont essentiels pour que les documents web s'affichent et fonctionnent correctement dans des navigateurs conformes aux normes.
Un DTD récent qui inclut une URI complète (une adresse web complète) commande aux fureteurs d'afficher une page en utilisant le "mode conforme" (standard-complient mode) traitant ainsi l'HTML, le CSS, et le DOM conformément aux normes.
Autrement, le mode "Quirks"(aussi appelé mode compatibilité) sera déclenché. Le but de ce mode est de faire que les vieilles pages s’affichent comme l’a voulu leur auteur. Les vieilles pages peuvent avoir été écrites pour utiliser les caractéristiques connues des vieux navigateurs ou du moins de s’y adapter. Dans ce mode, un navigateur relativement moderne simulera intentionnellement de nombreux bugs des anciens navigateurs, en particulier IE 4 et IE 5.
Le HTML se décline en deux versions appelées Strict et Transitional. Les versions Strict ne permettent que les définitions pour lesquelles la nouvelle norme a été établie alors que les versions Transitional, comme son nom l'indique, servent à faire la transition avec la version précédente.
Caveat
| Fureteur | Version |
|---|---|
| Firefox | 16.0.1 |
| Internet Explorer | 9.00 |
| Chrome | 22.0 |
| Safari | 5.1.7 |
| Navigator | 9.0 |
Je ne peux pas essayer mes pages dans tous les fureteurs utilisés aujourd'hui ou qui ont été utilisés avant. Voici la liste des fureteurs que j'utilise ainsi que leur version. Je ne peux tester l'effet des règles CSS que sur ces versions et lorsque je dirai qu'un fureteur ne peux pas styliser comme on s'y attend, je ne parle que de la version qui m'est disponible.
Syntaxe
Maintenant qu'on en sait un peu plus sur les CSS, c'est le temps de parler de sa syntaxe. Une feuille de style est constituée d'une liste de règles où chaque règle est constituée d'un ou plusieurs sélecteurs et d'un bloc de déclarations. Chaque déclaration est entouré d'accolades contenant une propriété (spécifiée par des mots anglais), un deux-point ":" , une valeur suivie d'un point-virgule comme illustré ici
sélecteurs { propriété: valeur; }Dans ce qui suit, on a décortiquer les
- les sélecteurs qui déterminent sur quelles parties d'une page une règle CSS va s'appliquer; et
- les propriétés qui déterminent de quelle façon une règle CSS va s'appliquer. Notons que les propriétés ont des valeurs.
