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... 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: The HTML: Keepin' it Clean Links can have tooltips in HTML with no fancy coding whatsoever. 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. C’est d’ailleurs par l’étude de ces deux propriétés HTML5, que nous allons commencer, puis nous verrons de l’application en elle-même, avec comme toujours un lien pour télécharger les fichiers et le site de la démo. Centering Inline Elements | Vertical Centering | HTML & CSS Workshop | 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.

Centering Inline Elements | Vertical Centering | HTML & CSS Workshop | 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. 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

So what if you don't know anything? It's still kinda doable. Not too hard: Known Child If you know the height and width of both the element to be centered and its parent element (and those measurements won't change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered. Let's say you know the exact width and height of the element you are centering, but the parent element can change in height and width.

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. 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 ? 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.