Archive for the ‘XHTML & CSS’ Category

Hacks CSS et commentaires conditionnels

Le 11 octobre 2008 par Benoit

Aux vues des différences d’interprétation du CSS par les différents navigateurs et leurs différentes versions, il vous sera certainement utile de pouvoir appliquer des attributs personnalisés. Pour ceci, il vous est possible d’utiliser des « CSS Hacks » dans votre feuille de style.

  • IE 6 et précédents
    * html {}
  • IE 7 et précédents
    *:first-child+html {} * html {}
  • IE 7 seulement
    *:first-child+html {}
  • IE 7 et navigateurs modernes seulement
    html>body {}
  • Navigateurs modernes seulement (pas IE 7)
    html>/**/body {}
  • Opera versions 9 et précédents
    html:first-child {}

Pour aller plus loin :

Si votre feuille de style contient beaucoup de de hacks propres à IE, alors il vous est possible d’utiliser plutôt un fichier css consacré totalement à ce navigateur. Ce nouveau fichier combiné à la technique de commentaire conditionnel (dans la balise <head>) sera uniquement interprété par les navigateurs internet explorer.

<!–[if IE]>
<link rel=« stylesheet » href=« path/ie_style.css » type=« text/css » media=« screen » />
<![endif]–>

Pour aller plus loin :

Tags: ,
Posted in XHTML & CSS | No Comments »

CSS Reset Reloaded

Le 02 mai 2007 par Benoit

Pour réinitialiser les propriétés des tags html par defaut des différents navigateurs :

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,
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-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;
   background: transparent;
}
/* remember to define focus styles! */
:focus {
   outline: 0;
}
body {
   line-height: 1;
   color: black;
   background: white;
}
ol, ul {
   list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}
caption, th, td {
   text-align: left;
   font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: "";
}
blockquote, q {
   quotes: "" "";
}

source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ via Digg

Tags: , , , , , ,
Posted in XHTML & CSS | No Comments »

Em Calculator

Le 06 août 2006 par Benoit

Une petite calculette pour faire très simplement vos calculs d’héritage de taille de typo en fonction de votre DOM – Em Calculator.

Source : http://www.fairytells.net

Tags: , , ,
Posted in XHTML & CSS | No Comments »

CSS optimizer

Le 28 mars 2006 par Benoit

Voici quelques liens pour vous permettre de formatter et optimizer voc CSS :

Tags: , , ,
Posted in XHTML & CSS | No Comments »

Spiffy corners (coins arrondis)

Le 27 mars 2006 par Benoit

créer des coins arrondis (avec Anti-Aliasing), sans images, sans javascript, mais seulement avec du CSS

Le resultat est bleufant :

 

Exemple Eniris

 

Attention si vous désirez mettre des balises « p » il vous faudra mettre le « margin:0″ sinon le résultat sera le suivant :

Ici le texte est contenu dans un paragraphe ( »p ») sans paramettrage de la marge (margin) à « 0″

Tags: , , , ,
Posted in XHTML & CSS | No Comments »