Trouver la police qu’il vous faut en deux clics

Je viens de découvrir Typetester, un petit outil en ligne bien pratique pour faire des tests avec différentes polices d’écritures. Il permet de tester tous les formats possibles (Majuscules, minuscules, italique, gras…) rapidement et en changeant les paramètres CSS de la Font dynamiquement.

Le fonctionnement est direct : vous lui spécifiez votre texte puis vous disposez de 3 colonnes d’aperçu, chacune étant générée avec une configuration différente. Vous permettant ainsi de comparer d’un coup d’œil les changements.

Je pense que je vais beaucoup l’utiliser à l’avenir. Son seul point faible selon moi et qu’il ne vous donne pas la font-familly correspondante. Il faudra donc choisir avec soin les polices « safe » (Qui fonctionnent sur tout les navigateurs/OS) afin de garantir un affichage quasi identique chez tous vos utilisateurs.

CSS tips !

Voici un petit bout de CSS pratique s’adaptant à tout vos tableaux xHTML et pouvant donner une touche de design sympathique. Elle ajoute simplement un bord arrondi sur chaque angle du tableau, quelque soit la taille et la forme du tableau. Il n’y a pas non-plus besoin de rajouter des attributs sur les balises. Exemple :

Dans l’exemple CSS ci-dessous, j’utilise la propriété -moz-border-radius, vous pouvez également la coupler avec -webkit-border-radius et border-radius. Ou même, pour que cela marche sur IE, utiliser background-image :

tr:last-child td:last-child{
-moz-border-radius-bottomright: 10px;
border: none;
}

tr:last-child td:first-child{
-moz-border-radius-bottomleft: 10px;
border: none;
}

tr:first-child th:last-child, tr:first-child td:last-child{
-moz-border-radius-topright: 10px;
border: none;
}

tr:first-child th:first-child, tr:first-child td:first-child{
-moz-border-radius-topleft: 10px;
border: none;
}

Faire un menu horizontal valide très simplement

Plusieurs personnes m’ont déjà demandés comment faire un menu horizontal simplement pour leur site. J’ai donc décidé de vous mettre à disposition un code simple et valide, fonctionnant sur tout les navigateurs et permettant de réussir à coup sur cette tache. Il vous sera possible par la suite de changer complétement le design en rajoutant vos propriétés CSS. Mais pour mon exemple j’ai voulu garder un code minimal.

Le rendu sera le suivant :

Lire la suite »

Les Hacks CSS… Proprement

Le CSS (Cascading Style Sheets : feuilles de style en cascade) est le langage utilisé pour mettre en forme les données présentes dans les fichiers HTML et XML. Ce langage a été normé par le W3C, sa version 3.0 est en préparation.

Malgré tout les différents navigateurs web développés par divers organismes ne respectent pas tous ces normes. De ce fait chaque navigateur interprète à sa manière le CSS. Il existe alors deux possibilités pour parer ces différences:

• La première est de ne pas utiliser les propriétés trop litigieuses (tel que padding). C’est celle qu’il faudrait utiliser pour la propreté et l’accessibilité de votre site.

• La seconde est l’utilisation de hacks CSS. Le principe de base est assez simple: les navigateurs ne parsant pas de la même manière les fichiers, nous pouvons leurs tendre des pièges, certain tomberont dedans, d’autre non. Permettant ainsi une séparation et donc l’application de propriétés différentes.

Le problème de la première méthode est la restriction importante des possibilités offertes par le CSS et donc elle est très peu utilisé. Le problème de la deuxième est la création d’une feuille de style éronnée pouvant poser des problèmes complexes et détruire la présentation sur les versions futures des navigateurs.

Je vais donc vous proposer quelques solutions pour résoudre le problème en évitant ces dérangements.

Lire la suite »