Changer la taille du texte: (Par défaut)

Colonne de droite: Cacher

Actions

Le CSS Orienté Objet

Publié par Gui, le 24 septembre 2009
Dans: CSS, Développement, Internet

6

La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet. En effet, elle permet d’avoir un code structuré, facilement réutilisable et dont la mise à jour est rapide et aisée.

Pourquoi ne pas l’adapter au CSS ?

A priori, le CSS n’a pas grand chose à voir avec de la POO. Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers:

  • Système de Classes
  • Propriétés
  • Héritage

Continuer la lecture de « Le CSS Orienté Objet »

, , , ,

guillaumevoisin.fr se fait tout beau pour la rentrée!

Publié par Gui, le 5 septembre 2009
Dans: CSS, Général

0

Comme chaque année maintenant, le site fait peau neuve. La tendance actuelle: « l’élasticité » et le « fluid design« . Au menu de ce nouveau design: des couleurs sobres mais harmonieuses, pas mal d’interactivité, une amélioration générale de l’ergonomie et bien sûr, un refus catégorique de passer 36h à faire en sorte que le site sorte propre sur IE 6.

Nouveau design pour guillaumevoisin.fr : Fluide

Nouveau design pour guillaumevoisin.fr : Fluide

Eh oui c’est une première, si vous vous plaigniez du mauvais affichage sous IE6, ce n’est pas que je l’ai oublié mais au contraire bien pensé à ne pas y faire attention ;) . Pour rappel, nous sommes passés à IE 8 maintenant, alors à vos mises à jour !

, , , ,

Développer un site accessible sur tous les navigateurs

Publié par Gui, le 1 avril 2009
Dans: CSS, Internet

1

C’est le calvaire de tout développeur web, développer un site dont le comportement sera identique sur l’ensemble des navigateurs de la toile.

Il y a aujourd’hui de plus en plus de navigateurs disponibles, même Google s’y est mis, et il y en aura demain encore plus.

Cependant, il existe trois grandes familles de navigateurs sur Internet:

  • Microsoft Internet Explorer (Version 6 et 7 principalement)
  • Gecko (Mozilla Firefox et Netscape)
  • Khtml (Safari)

Bien sûr, et ce serait trop facile sinon, chaque navigateur interprète de manière différente le contenu html de chaque site internet. Il devient donc très difficile de développer un site sans tenir compte de ces différences d’interprétation.

Il existe deux solutions principales pour parer à ces problèmes:

  • Détecter le navigateur en Javascript et appliquer une feuille de Style (CSS) particulière pour chaque navigateur.
  • Utiliser la puissance du CSS et appliquer un style en ciblant le navigateur.

Pour ma part, je recours toujours à la deuxième solution, qui me semble plus pratique (les feuilles de style ne sont pas dupliquées).

Pour cibler un navigateur dans une feuille de style, il faut appliquer une règle particulière, également appelée « Hack ».

Ainsi les règles suivantes permettent d’appliquer un style à des éléments et seront interprétées correctement par leur navigareurs respectifs:

Internet Explorer

Internet Explorer 6

 
*html #mon_div{
    color:#888;
}

ou

#mon_div {
    color:#fff;
    _color:#000;
}
Internet Explorer 7

Internet Explorer 7

 
*+html #mon_div{
    color:#777;
}

Pour IE 6 et IE 7:

#mon_div {
    color:#fff;
    *color:#000;
}
Firefox

Firefox

 
#mon_div {
    color:#999
}
Safari

Safari

 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #mon_div { color:#eee }
}

Ces astuces permettent de bien calibrer l’affichage des sites internet et maximiser les chances d’interprêtation par les navigateurs.

Il faut savoir que Firefox est le navigateur à l’heure actuelle qui interprête le mieux le code HTML (selon les standards W3C). Alors soyez gentils, facilitez nous la vie et abandonnez Internet Explorer!

, , , ,