Trucs pour feuille de style CSS3

Voici quelques trucs compatible CSS3 (bientôt tout les navigateurs en date de février 2013) pour vous facilité la vie.

Trucs retour à la ligne avec mot insécable.

Exemple pour l'affichage sur mobile avec largeur réduite on veux écrire une adresse URL au complet qui dépasse en caractère la largeur disponible.
Solution ajouter le code CSS: word-wrap:break-word;

Menu déroulant en CSS

L'utilisation du Javascript pour les menu déroulant n'est pas toujour requis. Par exemple pour une fonctionnalité de base de menu déroulant le code ce fait très bien via CSS2 et est compatible sur tout les navigateur et ne nécessite pas d'avoir Javascript.

Voici le principe de base :

Faire un menu dans une balise <nav> avec une liste <ul>

• menu1
• menu 1.1
• menu 1.2
• menu 2
• menu3
• menu 3.1
• menu 3.2
• menu 3.3

En CSS vous devez cacher les menus déroulant avec : nav ul li ul { display:none; }
Et pour afficher le menu déroulant rien de plus simple : nav ul li:hover ul { display:block;}

Par la suite on rajoute un peu de CSS pour afficher le tout de façon plus estétique, mettre les menu déroulant en position absolut et fixer la largeur du menu déroulant. Enlever les puce des listes, géré les marge et padding.

Ce site fonctionne avec ce principe
Exemple de code CSS pour menu déroulant:

nav ul {list-style:none; padding:0px; margin:0px; } 
nav ul li { float:left;  padding:0px; margin:0px; padding-right:20px; } 
nav ul li ul{  margin:0px;  padding:0px;  position:absolute;    float:none; display:none;  }  
nav ul li:hover ul {display:block; }  
nav ul li ul li { margin:0px; padding:0px; float:none;} 
nav ul li ul li a {width:150px; display:block;}

Toutes les façons de mettre du style dans une page HTML

Voici les différentes façons d'ajouter un style à une balise HTML

1 Méthode standard avec fichier CSS externe

Code source de la page web

<link href="css/style.css" media="all" rel="stylesheet" /> <h1>Titre de la page</h1>

code source du fichier css/style.css

h1 {color:red; font-size:24px; text-align:center; }

2 Avec code CSS dans le fichier directement

Code source de la page web

source code

<style media="all" type="text/css"> h1 {color:red; font-size:24px; text-align:center; } </style>

3 Avec style directement sur l'élément

Code source de la page web

source code

<h1 style="color:red; font-size:24px; text-align:center;">Titre de la page</h1>

Feuille de style pour IE

<!-- patch IE  -->
    <!--[if IE]>
    <link href="css/ie_patch.css" media="all" rel="stylesheet">
    <![endif]-->

Et remplacer css/ie_patch.css par l'emplacement de votre CSS.

Plusieurs feuilles de style différentes

Voici comment permettre a vos visiteurs de choisir parmi différents habillage css pour votre site.

Premièrement il faut avoir différents css qui permettre d'habiller différemment votre site web. Par exemple pour ce site il y a plusieurs css pour chaque couleur d'habillage différent (bleu, orange, mauve, rouge , ...).

Pour ce site j'utilise un CSS global et des css pour chaque couleur d'habillage différent :

• CSS Global ( http://www.phpascal.com/css/style_global.css)
• CSS orange : http://www.phpascal.com/css/orange.css
• CSS mauve http://www.phpascal.com/css/mauve.css

Une fois que vous avez plusieurs css de disponible il vous suffit de permettre aux visiteurs d'en choisir un en particulier.

Il y a plusieurs façon de procédé, une façon est d'utiliser une variable de session pour sauvegarder le choix du visiteur.

Pour ce faire il faut :

1. Débuter une session au début de chacune des page su site
2. Avoir une page qui recoie en paramètre le style a changé
3. Enregistrer le choix du visiteur dans une variable PHP
4. Avoir un haut de page qui affiche le bon fichier css selon la variable de session

Exemple du traitement pour faire marcher le tout :
Lien pour changer de css : index.php?style=mauve
Code source de l'include du haut des pages :
<?php
/* haut des pages du site */

if (!isset($_SESSION['debuter']))
{
session_start();
$_SESSION['debuter'] = 'oui';
}

// recuperer information et mettre dans variable de session
if (isset($_GET['style'])) $_SESSION['style'] = $_GET['style'];

// mettre dans la variable $style le style choisie et indiquer un style par defaut
if (isset($_SESSION['style'])) $style = $_SESSION['style'];
else $style = "bleu";
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
.....
<link href="http://www.phpascal.com/css/<?php print  $style; ?>.css" media="all" rel="stylesheet" />
....
</head>
<body>
....

Ceci permet d'avoir une feuille de style qui a le nom de la variable envoyer en GET. Exemple : index.php?style=rouge va mettre la feuille de style rouge.css sur le site.

Gestion global des CSS

Pour utiliser de façon intelligente les css, il faut ce donné des standards d'affichage dans notre page.

Par exemple quelle police on va utiliser pour la page, quelle taille vont avoir nos différent texte dans la page, quel couleur va être le texte, ...

Une bonne feuille de style css commence par un bon code HTML avec l'utilisation des balise sémantique.
Exemple de balise sémantique:

• <body>
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <p>
• <img>
• <strong>
• <ul>, <ol>, <li>
• <i>, <u>, <sup>, <em>

Pour un site web avec un design graphique simple, on ne devrait avoir plusieurs classe css à créé. Toutes les balise html existantes nous permet un vaste choix d'habillage avec les css.

Par exemple le code source de cette page j'utilise seulement 10 classes CSS. Ceci permet d'avoir une feuille de style simple et facile à modifier.

Exemple de base pour un CSS Global pour un site web utilisant uniquement les balise sémantique HTML:

body { background-color:#005BA3; margin:0px; font-family:Arial, Helvetica, sans-serif;}
a:link, a:hover, a:visited { text-decoration:none;}
a:visited:hover, a:hover { text-decoration:underline;}
img { border:0px; }
h1 {font-size:24px; }
h2 {font-size:20px; margin-bottom:2px; padding-bottom:0px; }
h3 {font-size:16px; margin:0px; padding:0px; margin-top:10px; margin-bottom:0px; }
li {margin-left:20px; }

Les couleurs des liens en CSS

Il y a 4 différents affichages des liens sur une page selon son état

1. Liens inactif ( a:link )
2. Liens déjà visité (a:visited)
3. Liens quand on clique dessus (a:active)
4. Liens quand on passe la souris dessus (a:hover)

On peut choisir si on veux que les liens soient souligner ou non. Dans mon exemple le lien ce souligne quand on est au dessus du lien.

Voici comment en CSS affecter les mêmes couleurs et style pour toutes les sorte de liens :

a:link, a:hover, a:visited, a:visited:hover, a:hover
{
text-decoration:none;
color:red;
}

a:visited:hover, a:hover { text-decoration:underline;}
Comme vous pouvez le voir dans l'exemple, le style a:hover à été assigner en premier avec text-decoration:none puis par la suit