A traiter - (x)HTML(5) et CSS(3)

Facebook Twitter

TiddlyWiki

HTML5. CSS2. CSS3. Fonts. Osez HTML5 et CSS3 ! Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités.

Osez HTML5 et CSS3 !

Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres". A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.

Bubble Point Tooltips with CSS3 & jQuery. I needed some tooltips for a thing.

Bubble Point Tooltips with CSS3 & jQuery

In looking around for a little inspiration, I didn't have to go further than my dock: This is where I ended up: Créer un Post-It en HTML5 (contenteditable, localStorage), CSS3 et jQuery. Pour ce nouvel article sur le blog des nouvelles technologies nous allons parler codes, et plus précisément HTML5, CSS3 et jQuery.

Créer un Post-It en HTML5 (contenteditable, localStorage), CSS3 et jQuery

Si vous souhaitez approfondir le sujet, je tiens à vous recommander de lire les sujets suivants : contenteditable et localStorage. Gary Turner Web Development. I originally published this in June, 2006, as a simple demonstration of the results of a lot of head scratching at CSSCreator forums.

Gary Turner Web Development

I like to think I made a contribution, but it was Bruno Fasino who made the totally non-intuitive, logical leap that made everything actually work in IE≤7. Ingo Chao brought Bruno's work to those of us with slower wits, (OK, that was me; Chris..S caught on right away) and fashioned the practical model. In this evolution, I try to make practical examples of the model as you would use it in real web pages. It would be as trivial to center vertically if the majority browser—you know who you are, IE≤7—were to support the display property's table group of values. (For the purposes of this article, IE8 may be considered a modern browser.) Fixed Height Containers. Centering in the Unknown. When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is.

Centering in the Unknown

Grids

La technique du Reset CSS. Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs.

La technique du Reset CSS

Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*). Le Reset CSS classique (déconseillé) Les navigateurs n'utilisent pas toujours les mêmes marges et padding par défaut pour les différents éléments HTML. Cela peut représenter un problème, par exemple lorsqu'on veut supprimer le retrait à gauche d'une liste avec un margin-left: 0; et que certains navigateurs conservent ce retrait car ils utilisent un padding plutôt qu'une marge.

Si on souhaite aller plus loin et gommer d'autres différences en remettant tout «à zéro», on peut aboutir au code suivant: Problèmes avec cette technique. Reset CSS et outline : attention. Pour rappel le Reset CSS est une technique permettant une remise à 0 des propriétés de style par défaut pour les éléments HTML.

Reset CSS et outline : attention

Si cette technique est mal utilisée et mal maitrisée, cela peut poser des problèmes d'accessibilité. Le plus fréquent est la déclaration de la propriété outline à 0. Qu'est-ce que l'outline ? L'outline est le liseré visible autour des éléments d'une page HTML recevant un focus comme les liens, ou certains éléments de formulaire. Il permet d'apporter un repère visuel au moment où l'élément reçoit ce focus. Mon client ne trouve pas cela esthétique Deux solutions existent pour conserver ce mécanisme intact tout en l'intégrant à une charte graphique :

Une feuille de styles de base pour bien démarrer vos projets. Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet.

Une feuille de styles de base pour bien démarrer vos projets

Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. Quels objectifs? Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux: Gommer certaines différences entre les styles par défaut des navigateurs.