CSS

De Memodev.

Aller à : Navigation, rechercher

Css.png CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. (article CSS sur Wikipédia)

Sommaire

Tutoriels.png Les meilleurs tutoriels CSS

Idee.png Bonnes pratiques CSS

Pour connaître les bonnes pratiques du CSS et du Web en général, n'hésitez pas à aller voir notre page sur les bonnes pratiques du Web.

Ce qu'il faut retenir du CSS

FAQ.png FAQ CSS

Fonctionnalités

Pourquoi et comment utiliser les "em" ?

Comment rendre les images élastique en utilisant les "em" ? (Exemple concret     )

D'où viennent les différences de couleurs entre mes images et mes background CSS ?

Comment supprimer le contour du focus sur les liens et les boutons ?      (Exemple intéressant      pour les liens)

Comment créer des border radius compatible avec tous les navigateurs ?

Comment créer des colonnes de même hauteur ?

Comment éviter un scintillement d'image lors du survol d'un menu qui doit changer d'aspect au survol ?

Il suffit d'utiliser la technique des sprites CSS (c'est a dire plusieurs images dans la même image, utilisé avec une technique de déplacement de cette image). Voir l'article d'Alsacréation sur les sprites CSS.

Comment créer un bouton avec image extensible en css ?

Comment forcer les navigateurs à recharger leur cache lorsqu'une image, un css, un JavaScript a été modifié ?

Quand on met un site à jour, on est souvent confronté au problème suivant : les internautes continuent à visionner le site sans la mise à jour car le navigateur utilise les fichiers (images, css, js) stockés dans son cache au lieu de télécharger à nouveau les fichiers qui ont été modifiés. Une solution couramment utilisée est de rajouter un numéro de version en paramètres des fichiers :

<script language="javascript" src="myJavascript.js?version=4"></script>
<link rel="stylesheet" type="text/css" src="myStyles.css?version=4" />
<img src="/myImage.png?version=4" alt="">

Le problème avec cette solution, c'est que d'après la spec HTTP 1.1 les requêtes avec un paramètres GET ne devrait pas être mises en cache. Malgré tout, cette solution est souvent recommande car elle est très simple à mettre en œuvre et elle marche sur tous les navigateurs à l'heure actuelle.

Sinon pour faire les choses correctement, il faut faire une réécriture d'url : What is an elegant way to force browsers to reload cached css/js files?     

Bug d'affichage IE

Comment gérer la transparence sous IE6

IE6 gère la transparence sur les fichiers gif et les png8 (png 8 bits), mais il ne gère pas la semi transparence (l'aspect translucide ou opaque) utilisable par les png32. Le mieux reste de se contenter du format gif ou png8 et donc de ne pas utiliser la semi transparence. Mais si vous tenez vraiment à l'utiliser il existe des scripts JavaScript qui permettent à IE6 d'afficher les images comme sur les autres navigateurs, mais cela peut poser quelques problèmes. Pour en savoir plus sur l'utilisation du png8 ou de scripts JavaScript pour IE6

Dans le même style, il y a un script appelé IE7.js qui permet a IE de se comporter comme un navigateur normal. (et qui inclus les méthodes JavaScript décrites dans l'article ci-dessus pour gérer la semi transparence sous IE6).

Comment corriger les bugs CSS liées au lacunes d'IE ?

Pour corriger les lacunes d'IE il peut être pratique d'exécuter un CSS uniquement pour certaines versions d'IE grâce aux commentaires conditonnels. Mais cela ne suffit pas toujours car certaines versions de IE n'implémentent pas certaines propriétés css (voir la liste de compatibilités des propriétés CSS avec les différentes versions de IE). Pour corriger ce problème, il y a deux solutions :

Bug de table avec width:100% qui dépasse du div parent et provoque un scroll sur IE6 ?

La solution consiste à encadrer le tableau avec ces div (voir l'explication complète     ):

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table ...
  </div>
</div>

Récupérée de « http://www.memodev.com/wiki/CSS »
Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Catégories
Boîte à outils