Css

Un article de WindowsLinux.net - Astuces pour Windows et Linux !.

Sommaire

1 Définition
2 Compatibilité
- 2.1 Soucis de compatibilité
3 Frameworks
- 3.1 BluePrint
4 Recommandations du W3C
5 Positionnement
6 Éléments flash / vidéos
7 TinyMCE
8 Liens
- 8.1 Externes
- 8.2 Internes

Définition

CSS pour Cascading Style Sheets, signifie en française : "Feuilles de style en cascade".

Ces feuilles de style sont de nos jours le complément incontournable de toute page web.

Compatibilité

De nos jours la plupart des navigateurs supportent les fichiers CSS (sauf peut être par choix : navigateur en mode texte ...).

Certains problèmes peuvent être rencontrés lors de l'affichage de pages CSS avec certains navigateurs qui ne respectent pas les règles éditées par le W3C ou prennent certaines libertés pour l'interpréter.

Soucis de compatibilité

Internet Explorer

Un "hack" pour "rediriger" Internet Explorer (toutes versions ou selon sa version) est disponible.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
<body>
<p>Test</p>
</body>
</html>

In the above example, all_browsers.css applies to all browsers, ie_only.css only applies to all versions of Internet Explorer, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, recent.css applies to all browsers except IE versions below 7, and not_ie.css applies to all non-IE browsers.

Source : http://www.webdevout.net/css-hacks

Autres articles très intéressants à lire : http://www.webdevout.net/tidings/2007/05/29/preparing-your-site-for-ienext/

et aussi : http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

Margin-top / maring-bottom / padding-top / padding-bottom

Internet Explorer ne prend pas en compte les balises "margin-top" et "margin-bottom".

Une astuce existe dans certain cas : utiliser "padding-top" et "padding-bottom" à la place de leur équivalent "margin".

Couper un mot trop long

Pour éviter une barre de défilement horizontale sur le navigateur, il faut travailler sur la propriété CSS susceptible de contenir la suite de caractère incriminée :

.forum-content {
  width: 626px;
  padding-right: 5px;
  overflow: hidden;
}

Mise en forme blockquote

Voici en exemple de mise en forme pour la balise <blockquote> :

blockquote  { margin: 1.5em; color: #666; font-style: italic;
background-image: url(/img/quote.png);
background-repeat: no-repeat;
background-position: left top;
border: 2px dotted #FF0000;
padding-top: 20px;
padding-left:-0.5em;
margin-left:-0.5em;
}

CSS Reset

Cet exemple supprime les "inherit" (héritages) sur certaines balises qui semblent poser problème, comme les marges et la taille des polices de caractères, etc...

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Cet exemple provient d'ici, la source du fichier .css est ici.

Frameworks

BluePrint

Ce Framework est disponible ici : http://www.blueprintcss.org/

Ce framework offre :

Élimine les différences entre les navigateurs.
Support des designs les plus complexes.
Styles pour les formulaires
Styles pour l'impression des pages web
Outils, editeurs, typographie, etc...

Traduction du "Quick Start tutorial" sur la page dédiée du Framework : BluePrint.

Recommandations du W3C

Recommandations sur le CSS 1 : http://www.w3.org/TR/REC-CSS1

Recommandations sur le CSS 2 : http://www.w3.org/TR/REC-CSS2

Recommandations sur le CSS 2.1 : http://www.w3.org/TR/CSS21

Positionnement

Voir : http://fr.html.net/tutorials/CSS/lesson14.asp

Éléments flash / vidéos

Certains éléments, tels que les vidéos flash, peuvent se positionner au dessus d'objets CSS, surtout lors de l'utilisation du défilement du navigateur.

L'utilisation de cette propriété, pour l'élément flash, peut résoudre le problème :

1- Ajouter :

<param name=wmode" value="opaque" />

directement après l'objet d'ouverture "object".

2- Ajouter :

wmode="opaque"

dans votre objet "embed".

Exemple : ligne 2 et ligne 6 :

<object width="123" height="123">
<param name=wmode" value="opaque" />
<param name="movie" value="http://url">
</param>
<param name="allowFullScreen" value="true"></param>
<embed wmode="opaque" src="http://url" type="application/x-shockwave-flash" allowfullscreen="true" width="123" height="123">
</embed>
</object>

TinyMCE

On peut utiliser une mise en forme spécifique pour le champ d'édition de TinyMCE. Ainsi on peut définir la couleur de fond, le texte, ou autre, de cet éditeur par la balise :

body.mceContentBody {
   background: #FFF;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}

Liens

Externes

Informations : http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade

Validateur CSS du W3C : http://jigsaw.w3.org/css-validator/

Astuces : http://pompage.net

Un bel exemple de CSS : http://www.csszengarden.com/

La "bible" : http://fr.selfhtml.org/css/

Diverses informations sur le css, et autres : http://openweb.eu.org/

Les 10 meilleurs hacks : http://stylizedweb.com/2008/02/14/10-best-css-hacks/

Un mémo très utile sur le CSS : http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

Le même genre de mémo utile pour le language HTML : http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

Internes

HTML

Récupérée de « http://www.windowslinux.net/index.php/Css »

Catégorie: CSS

Css