Si vous devez faire une maquette en HTML5 et que vous voulez que ca marche avec Firefox 3.6 mettre en place dans le css le code suivant:

article, aside, canvas, details,
figcaption, figure, footer, header,
hgroup, nav, section, summary, video {
    display: block;
}

Il faut que les nouvelles balises, sois en display block; 

Tout simple

L’intégration CSS d’un site pour IE8 et – peut parfois devenir un vrai cauchemar. Il est donc utile de faire appel à des outils nous aidant dans cette tâche, et nous verrons ici une sympathique bibliothèque javascript répondant au nom de IE7.js. En fait, elle est livrée en 3 fichiers, un pour chaque version du navigateur (7, 8 et 9). Chaque fichier met à jour le DOM et le CSS pour qu’il soit le plus possible compatible avec le IE correspondant. Une page est disponible ici décrivant toutes les corrections apportées par le script. On pourra donc écrire opacity:0.5; sans avoir à créer une feuille de style supplémentaire pour  mettre le filtre css microsoft impossible à retenir. Bref plusieurs sélecteurs et propriétés seront maintenant supportés quelque soit la version du navigateur. Il gère même la transparence des images png pour IE6!

Voici l’exemple d’une page avant/après l’ajout du script :
Avant
Après

Le css:

.square {

position: relative;width: 80px;height: 80px;background-color: #9FF;top : 40px;right: 20px;
opacity: 0.5;
}

p:first-child { font-weight: bold; max-width: 400px; }

p:before{ content : ‘«’; }

p:after{ content : ‘»’; }

input[type='submit']{ width: 200px;}

header, section + section { color : #FFF; background: blue; padding : 20px; }

La bibliothèque est disponible en téléchargement sur Google Code:
http://code.google.com/p/ie7-js/

Ok premier article de blog depuis très longtemps et en plus je me lance a faire un petit tutoriel, donc s.v.p. un peu de compassion…

Est-ce qu’il vous est déjà arriver de vouloir charger un certain script et/ou feuille de style seulement lorsque une page est demandé. Exemple une page de contact avec une carte interactive google ou une page de complètement différente de votre site et vous voulez avoir une page de css spécialement pour elle.

Rien de plus simple, il existe un hook qui permet de savoir quel page est charger et ce hook est juste avant « wp_head », donc il vous permet de charger votre script avec wp_enqueue_script() ou wp_euqueue_style().

Pour faire ce petit bijoux de code ouvrer votre fichier functions.php de votre thème.

//ajout d'une function dans le hook 'template_redirect'

add_action('template_redirect','custom_stylesheet');

function custom_stylesheet(){

    if(is_front_page()){

        wp_enqueue_style('homestyle', get_stylesheet_directory_uri().'home.css',false, null);

    }else{

        wp_enqueue_style('style', get_stylesheet_uri(),false,null);

    }

}

Voila c’est aussi simple que ça. Si c’est notre front page on charge la feuille de style home.css qui se trouve dans le dossier de notre thème(child) sans dépendance et sans version. Sinon on charge la feuille de style par défault style.css

Et surtout ne jamais faire ça directement dans votre header.php, utiliser toujours wp_enqueue_style() ou wp_enqueue_scrypt() pour charger vos js et css.

1. Organiser le code CSS : regrouper intelligemment les différentes règles, hiérarchiser (indentation pour indiquer la profondeur des éléments), commenter.

2. Faire des scripts non intrusifs : lorsque le Javascript est désactivé, les éléments doivent rester lisibles et utilisables.

3. Utiliser au maximum des unités dynamiques pour les tailles (polices, marges), telles que 1,5em ou 50%. Elles permettent plus de souplesse que les unités fixes (12pts, 20px).

4. Utiliser la balise <label> pour le texte accompagnant les champs de formulaire, et spécifier l’attribut for=« id-du-champ ». Il permet, au clic sur le label, de mettre le focus sur le champ associé.

5. Insérer les images à la taille qu’elles doivent avoir sur le site, 1/ pour ne pas charger une plus grosse image qui rendrait la page moins optimisée, 2/ pour éviter l’affichage de mauvaise qualité (sous les vieux navigateurs comme IE 7) du au redimensionnement CSS.

6. Toujours spécifier un texte alternatif aux images qui contiennent de l’information textuelle.

7. Éviter les majuscules et caractères spéciaux dans les noms des fichiers. Séparer les différents mots par un tiret cadratin « - » et non par un tiret bas « _ ».

8. Spécifier une couleur de fond pour les éléments de formulaire input[text], textarea, select, ainsi que la police d’écriture. Selon le navigateur, le fond par défaut n’est pas toujours blanc et les propriétés font n’héritent pas du body. Spécifier une couleur de fond pour le body.

9. Spécifier un style pour tous les titres (h1, h2, h3…) en respectant leur degré d’importance (le h1 est plus gros que le h2, qui lui-même est plus gros que le h3, etc.).

10. Spécifier un style différent pour chaque état d’un lien (soulignement, changement de couleur…), comme le survol (hover), le focus (focus), le lien déjà visité (visited)…

11. Utiliser des sprites à petit niveau pour réduire le poids de la page et éliminer le chargement des images à la volée (lors du survol d’un lien par exemple).

12. Insérer le code Google Analytics dans l’en-tête du site (conseillé depuis la dernière version de Google Analytics).

14. Créer un favicon pour le site.

13. Indiquer la langue, la section, etc. en tant que class sur la balise body ; indiquer l’identifiant de la page en tant qu’id.

15. Identifier les liens externes des liens internes au site, en leur attribuant par exemple un icône indiquant le lien sortant.

On sait que de nombreuses solutions existent en matière de développement web pour ne pas se limiter aux web safe fonts lorsqu’on veut styler du texte HTML. Une nouvelle a fait son apparition il y a quelques temps déjà : Google Font API.

Comment ça fonctionne ?

On choisit une police parmi celles de la bibliothèque disponible en ligne, qui s’enrichit régulièrement de nouveautés dans différents styles. Pour pouvoir l’utiliser, il faut insérer dans le <header> de son site web le lien vers cette police afin de la rendre disponible en CSS :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine">

On remarque que l’appel se fait via une variable passée dans l’URL. De cette façon, il va être possible d’insérer plusieurs polices en même temps, ou plusieurs versions de la même police. Par exemple :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine|Inconsolata|Droid+Sans">

permet d’insérer les polices Tangerine, Inconsolata et Droid Sans ;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine:bold,bolditalic">

permet de disposer de la police Tangerine en version Bold et Bold Italic. (Attention : la police par défaut, sans ses versions Bold, Italic, etc. ne pourra en effet pas s’afficher avec les effets CSS tels que font-weight. Si on souhaite appliquer des mises en forme, mieux vaut insérer la police voulue avec toutes ses variations)

Lire la suite