LES FEUILLES DE STYLES

QU'EST-CE QUE LES FEUILLES DE STYLE (CSS) ?

Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis cette date qu'elles sont devenues très présentes sur le Web. Netscape 4.x est sans doute le dernier navigateur encore un peu utilisé qui les supportent mal. Si vous utilisez ce navigateur, vous aurez de gros problèmes à visualiser ce site.

Les versions de 2000 ou plus des navigateurs gecko (netscape 6 ou supérieur, Mozilla, Firefox, Galeon,...), Internet Explorer (versions 5 ou supérieures, pour Windows ou mac), Opéra (versions 4 et supérieures), KHTML (Konqueror pour linux, Safari pour Mac) sont normalement compatibles (avec quelques faiblesses pour Internet Explorer) avec les feuilles de style, donc avec ce site.

Les feuilles de styles permettent de simplifier et de rendre plus puissant un codage HTML :

Simplifier :

Rendre plus puissant :

 

SITES POUR APPRENDRE LES CSS

CSS Astuces ne forme pas à l'utilisation des feuilles de styles. Il offre des scripts prêt à l'emploi à des utilisateurs ayant au moins un petit niveau.

Pour apprendre les CSS, deux excellents sites francophones :

Mais aussi :

Un forum Usenet Francophone très actif sur les questions de développement Web, en particulier CSS : fr.comp.infosystemes.www.auteurs

Enfin, si la plupart des gens codent leurs CSS à la main, il existe des éditeurs. Le plus connu est top-style. Voir un avis paru sur le forum www.auteurs : "TopStyle (http://www.bradsoft.com/topstyle/ ) est un très bon soft de gestion des CSS, avec mode de preview. Il possède la totalité des propriétés CSS1 et CSS2 classées intelligemment, et le tout est fourni avec un petit module d'aide assez bien fait. La version light est gratuite et l'autre est en évaluation."
Attention, un éditeur vous aide pour les fonctions une par une, pas pour les scripts, c'est à dire pas pour les intéractions entre fonctions. C'est plutôt le but de ce site.

Autres sites de conception web

NAVIGATEURS ET CSS

Internet Explorer 6.0 n'a plus de nouvelle version depuis 2001, et ne devrait pas en avoir (d'après Microsoft) d'ici à 2006. De fait, la division chargée de le développer a été dissoute. Seuls les bugs de sécurité sont encore corrigés.

Internet Explorer a donc beaucoup vieillit.
Son support des feuilles de style (norme CSS2, surtout) est assez incomplet.
Ceci peut poser problème au développeur CSS, et il est bon de connaître ces limitations, si on ne veut pas s'arracher les cheveux.

Au cours des articles, les insuffisances éventuelles d'Internet Explorer (IE) sont évoquées, et les solutions de remplacement (parfois appelées " hack ") sont décrites. Ce site vise en effet à faire du codage CSS pour le plus grand nombre, c'est à dire aussi pour les utilisateurs d'IE (environs 90% des internautes).

Concernant les "vieux" navigateurs, il faut savoir que Nestscape 4 supporte très mal les CSS, et que Internet Explorer 5.0 les supporte assez moyennement. Le support est correcte à partir de IE 5.5 et plus.

Pour ceux qui souhaitent tester leurs créations CSS dans IE5.0 ou IE5.5 se pose un problème : Windows n'accepte qu'un seul IE à la fois. Une installation "arrangées" a cependant été réalisée, permettant de faire cohabiter des vieilles versions avec IE6. Si vous souhaitez réaliser cela, vous devez créer un répertoire IE 5.0 et un répertoire IE5.5, et dezipper à l'intérieur ces installations "arrangées". On peut télécharger celles-ci ici :

Windows NT4(?), 2000, XP, Server 2003
    Internet Explorer 5.01 SP2 (2.93 MB)
    Internet Explorer 5.5 SP2 (3.51 MB)

Windows 95(?), 98, Me
   Internet Explorer 5.01 SP2 (2.93 MB)
   Internet Explorer 5.5 SP2 (3.51 MB)

Le site ou a été trouvée cette info très intéressante.

Indépendamment de la question du codage CSS, vous pouvez désirer passer à un navigateur plus moderne, offrant un meilleur support des feuilles de styles, le multipage, le blocage des pop-ups et bien d'autres choses.
Vous pouvez alors opter pour Mozilla (ou ses dérivés Netscape / Firefox), totalement gratuit, ou Opéra (gratuit si on accepte une barre de pub). Ce sont aujourd'hui les meilleurs navigateurs pour Windows, Linux ou Mac, tant en terme de fonctions qu'en terme de qualité de leur interprétation des standards du web (HTML, XML, CSS2, Java Script,...).

Télécharger FirefoxTéléchargez Firefox Télécharger Téléchargez Mozilla TéléchargerTéléchargez Opéra

Pour en savoir plus sur l'offre existante en matière de navigateurs, il existe un forum (usenet) français très actif sur les navigateurs : fr.comp.infosystemes.www.navigateurs

 

GLOSSAIRE

HTML

C'est le langage de base du web. La dernière version est la version 4.01. Il mélange balises décrivant un contenu et balises mettant en forme ce contenu.

XHTML

Une façon d'écrire le HTML. XHTML 1 correspond à HTML 4.
Cette nouvelle façon d'écrire est destinée à se conformer au XML, un langage professionnel qui sort du cadre de ce site. Les différences sont assez faibles : pas de majuscule, balises de fin obligatoires là ou le HTML les rend parfois optionnelles (comme pour <li>), balises sans fin en HTML (comme <br> ou <img>) écritent avec un slash de fin (<br /> ou <img />).
Pour les gens codant à la main, qui ont le choix, il n'est pas indispensable de coder en XHTML, mais c'est une façon de prendre des habitudes qui semblent amenées à se généraliser, puisque le HTML 4.01 ne devrait pas avoir de successeur.
Pour en savoir plus sur le XHTML.

(X)HTML STRICTE OU TRANSITIONNAL

Le HTML ou le XHTML ont tous les deux 2 formes : une forme transitional (classique) et une forme stricte.
Dans le transitional, les balises de mises en forme (<font>, <u>, ....) sont acceptées. On peut utiliser les CSS, mais ce n'est pas obligatoire.
Dans le stricte, ces balises (à quelques rares exceptions, comme <b> ou <i>) disparaissent. On est alors obligé d'utiliser les CSS, séparant ainsi strictement contenu et forme (meilleure structuration).
Voir une page OpenWeb avec un tableau des balises et attributs interdits en XHTML.

CSS

Les feuilles de style aux normes CSS1 et CSS2 (la 3 devrait sortir en 2004) visent à 2 choses :
1/ séparer la description du contenu (laissé au HTML) et sa mise en forme (dévolue aux CSS). Ceci afin d'avoir un code plus simple et plus claire.
2/ Aller plus loin que les balises de mises en forme HTML, qui sont assez limitées.

DTD

C'est une déclaration placée en haut de page HTML. Elle indique le type de langage qu'on utilise. Les 4 principales DTD (mais pas les seules) sont :

Si on indique pas de DTD, on se trouve en général (selon les navigateurs) en HTML 4 transitional.
Selon la DTD utilisée, certaines balises HTML ou fonctions CSS ne fonctionnent pas à l'identique. Ces cas sont signalés dans les articles.
Pour voir la liste des DTD.

em

Il s'agit d'une des mesures de tailles les plus intéressantes, avec les % et les pixels. On peut l'utiliser pour définir des tailles de polices, mais surtout pour définir des largeurs ou des hauteurs. Un em vaut une grosse lettre de la police dans laquelle on se trouve (un peu plus gros qu'un M majuscule, en général). Il y a un avantage et un inconvénient :
- Inconvénient : c'est moins précis qu'un pixel ou qu'un %.
- Avantage : c'est beaucoup plus souple que le pixel. Ainsi, une marge d'un em fera toujours environs 1 gros caractère de largeur ou de haut, caractère redéfini dynamiquement selon la police utilisée dans la zone.
* Un seul style défini en em peut donc générer des tailles de marges différentes selon les parties du site, mais toujours proportionnelles à la police active dans cette partie.
* si on ne défini pas la taille de sa police, ce qui est souvent conseillé (la taille de la police est alors définie par le navigateur lui-même, et chacun règle alors à sa préférence), on peut créer des marges, hauteurs ou largeurs qui s'ajusteront automatiquement.