15nov

Sélectionner un code CSS en fonction du navigateur

Un des plus gros soucis pour un développeur est de rendre sa page web identique sur tous les navigateurs. La méthode décrite ci-dessous permet de détecter 14 navigateurs et 3 OS.

Liste des navigateurs compatibles:

  • ie – Internet Explorer (toutes versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (toutes versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • chrome – Google Chrome

Liste des OS compatibles:

  • win – Microsoft Windows
  • linux – Linux (x11 and linux)
  • mac – Mac OS

Pour bénéficier de cette fonction, il suffit de télécharger ce fichier javascript (moins de 1Ko):

Placer ce fichier entre les balises <head> et </head> à l’aide du code suivant:

<script src=”css_browser_selector.js” type=”text/javascript”></script>

Une fois ces opération effectué, il ne vous reste plus qu’à compléter votre code CSS comme indiquer dans l’exemple qui suit:

  1. .ie .example {
  2. background-color: yellow
  3. }
  4. .ie7 .example {
  5. background-color: orange
  6. }
  7. .gecko .example {
  8. background-color: gray
  9. }
  10. .win.gecko .example {
  11. background-color: red
  12. }
  13. .linux.gecko .example {
  14. background-color: pink
  15. }
  16. .opera .example {
  17. background-color: green
  18. }
  19. .konqueror .example {
  20. background-color: blue
  21. }
  22. .webkit .example {
  23. background-color: black
  24. }
  25. .example {
  26. width: 100px;
  27. height: 100px;
  28. }
  29.  
  30. html.gecko div#header {
  31. margin: 1em;
  32. }
  33.  
  34. .opera #header {
  35. margin: 1.2em;
  36. }
  37.  
  38. .ie .mylink {
  39. font-weight: bold;
  40. }
  41.  
  42. .mac.ie .mylink {
  43. font-weight: bold;
  44. }
  45.  
  46. .[os].[browser] .mylink {
  47. font-weight: bold;
  48. }
  49.  
  50. -> pas d'espace entre .[os] et .[browser]

Source: Rafael Lima
14nov

Combien de visites font les sites internet ?

www.statbrain.com

Statbrain.com est le site parfait pour se dire qu’on est loin de l’audience des sites connus !

En effet, Statbrain.com permet de s’informer sur le nombre de visites des sites internet. Bien sûr, c’est une valeur approximative qui est calculée en fonction de différents paramètres comme le score Alexa, le nombre de liens sur les moteurs de recherche, ou bien encore l’emplacement du serveur.

j’ai fait quelques tests sur des sites bien connus:

N’oubliez pas d’envoyer votre feedback…
13nov

Mise à jour de Google Analytics

Un des meilleurs services de Google, si ce n’est le meilleur a été mis à jour.

La page d’accueil de Google Analytics propose maintenant des informations intéressantes comme le nombre de visites par Jour, Semaine, Mois ou Année des différents sites inscrits.

On peut aussi remarquer la progression des visites en pourcentage.

Petite mise à jour mais quel confort de ne plus avoir à rentrer dans les stats de chaque site pour avoir ces informations !

Page d'accueil google analytics

N’oubliez pas que Google Analytics est un service gratuit !
13nov

Afficher du code html dans Wordpress

A la création d’un article pour woodiv, je me suis rendu compte que le code html était interprété au lieu d’être affiché !

La première solution que j’ai trouvée est d’inclure le code dans une citation. Cette solution a l’avantage d’être rapide à utiliser mais pour la lecture d’un langage de programmation, c’est un peu limite !

Suite à quelques recherches sur le sujet, je me suis arrêté sur le plugin Code Viewer

télécharger

Exemple d’affichage:

  1. ligne 1 du code
  2. ligne 2 du code

Pour installer le plugin:

  1. Transférer le fichier code-viewer.php dans le dossier /wp-content/plugins/
  2. Ouvrir le fichier et renseigner la ligne suivante

    /* Configuration Settings */
    $default_path = “Indiquer le lien pointant vers le dossier qui contiendra vos fichiers textes”

  3. Activer le plugin dans Wordpress

Pour utiliser le plugin:

  1. Créer un fichier texte comportant le code que vous voulez afficher dans l’article
  2. Transférer ce fichier sur votre serveur dans le dossier indiqué pendant l’installation
  3. Insérer ce code dans l’article: <viewcode src=”fichier.txt” /> (remplacer fichier.txt par le nom de votre fichier)
13nov

Créer un bouton à l’aide de CSS

Le terme rollover indique le changement d’état d’une image au passage de la souris. Dans cet exemple, nous allons utiliser cette fonction pour créer un bouton.

En CSS, il existe plusieurs façons de créer cet effet mais dans cet article je ne détaillerai que la méthode que j’utilise régulièrement.

Elle présente 3 avantages:

  • Les deux images sont chargées à l’ouverture de la page (pas d’attente pendant le changement d’image)
  • pas de JavaScript
  • W3C valide

Présentation du code: (voir l’exemple)

La partie HTML:

  1. <a class="bouton" href="lien.html"><img border="0" src="bouton.jpg" alt="bouton" /></a>

La partie CSS:

  1. a.bouton {
  2. display:block;
  3. width:XXpx;
  4. height:XXpx;
  5. background-image:url("bouton_hover.jpg");
  6. }
  7. a.bouton:hover {
  8. visibility:visible;
  9. }
  10. a.bouton:hover img {
  11. visibility:hidden;
  12. }

Remplacer les XX dans width et height par les dimensions de votre image !

L’exemple en téléchargement:

télécharger