Démonstration du web de demain

Voici une vidéo réalisée rapidement par Tristan Nitot (président de Mozilla Europe) qui nous montre quelques aspects intéressants des nouvelles fonctionnalités de Firefox4. La plupart de celle-ci reposant sur l'implémentation de tout les nouveaux standards et sur des innovations technologiques tels que l'utilisation du GPU pour la 3D.

Au programme :

1. Vidéo, CSS Transitions, @font-face, et filtres SVG
2. Vidéo, SVG Clip-Path et CSS Transitions
3. WebGL, vidéo, Transforms

Web Design Checklist

Alors ça pour le coup c'est intéressant!

Findmebyip.com est un petit site qui vous permet non seulement de tester la compatibilité de votre navigateur aux nouveaux standards (HTML5 et CSS3 principalement). Mais de plus il vous propose désormais sur cette page un récapitulatif des différents navigateurs. Plutôt utile pour développer et savoir quand et pour qui contourner les lacunes.

Comme prévu, Webkit représenté par Chrome et Safari sort grand vainqueur du respect des normes. Merci Steve, Larry et Sergueï !

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 »