février 2012
7 billets
2 tags
Prefix-free, pour ou contre ?
Nous avons publié récemment un article sur Alsacréations au sujet de -prefix-free, un outil générant automatiquement des préfixes vendeurs sur les propriétés CSS3, selon nécessité.
Cette ressource a certainement autant d’avantages que d’inconvénients…et donc autant de détracteurs que d’aficionados. Le premier argument, indiscutable, est tout simplement que JavaScript...
2 tags
Détecter le device-width en JavaScript, mission...
Suite à un billet récent constatant que le device-width (largeur d’écran d’un périphérique) diffère selon les navigateurs, j’ai souhaité pouvoir proposer un chargement conditionnel de mes feuilles de styles mobile voire de modifier la valeur de mon meta viewport.
Le principe est de détecter en JavaScript la valeur de device-width et de charger une feuille de style adaptée (par...
2 tags
Conférence MSTechDays : Trois avancées majeures en...
J’ai été invité hier à parler de CSS3 lors du cycle de conférences Microsoft TechDays au Palais des Congrès de Paris.
Mon exposé s’est concentré sur 3 modules CSS3 que je considère majeurs : les Media Queries, le Grid Layout et les Animations.
C’était d’ailleurs assez pittoresque de dévoiler des technologies qui ne fonctionnent pas du tout sur les versions encore...
Cahnory: UTF-8, comment ça marche � →
cahnory:
L’UTF-8 est un encodage permettant de gérer bien plus de caractères que l’ISO, limité à seulement 256. Il est universel et couvre aussi bien les caractères latins que cyrilliques, arabes, japonais… à titre personnel, il m’est nécessaire pour afficher mon prénom ;).
Si l’UTF-8 est très utile, il…
2 tags
MS TechDays 2012 →
Dans 3 jours, je serai aux Microsoft TechDays 2012 en tant qu’orateur.
J’y présenterai une conférence sur trois avancées majeures en CSS3 : MediaQueries, Animations et Grid Layout.
Fluid grids, orientation & resolution independence
responsivenews:
If you’ve spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa.)
Read More
2 tags
Les mobiles nous mentent !
Vous le savez sans doute : les périphériques mobiles disposent de trois types de largeurs différentes :
screen width : largeur physique de l’écran
device-width : largeur déclarée par le périphérique
viewport : largeur de fenêtre du navigateur
Ces données ne concernent que la largeur mais sont transposables pour la hauteur, et sont bien-sûr susceptibles de...
janvier 2012
23 billets
2 tags
Vous voulez un exemplaire du livre "CSS avancées"...
Vous le savez peut-être déjà : la 2è édition de mon livre “CSS avancées - vers HTML5 et CSS3” va sortir dans quelques jours, le 3 février exactement.
Certains m’ont dit être intéressés pour recevoir un exemplaire dédicacés par l’auteur.
Ça tombe bien, c’est possible. Je dispose d’une vingtaine d’exemplaires que je peux vous dédicacer et envoyer...
2 tags
Our Mobile Planet →
Statistiques détaillées sur l’utilisation des smartphones (sources Google, Ipsos et la MMA sur une période récente). Le gros avantage est qu’il est possible de créer ses propres graphiques selon des critères souhaités (taux de pénétration, usages, géographie, etc.)
2 tags
Adaptation du menu de goetter.fr sur mobiles
Moyennement fan des menus de navigation occupant toute la place de nos chers petits écrans de mobiles, je me suis amusé ce week-end à concevoir un menu coulissant pour mon site perso Goetter.fr, ainsi l’espace demeure dédié au contenu.
Le principe est que le menu est hors du champ visuel (en haut) et seul une barre et un bouton “menu” permet de le repérer.
En appuyant sur le...
zomigi.com » Essential considerations for crafting... →
2 tags
Le mythe de l'élément H1 unique en HTML
Depuis quelques jours, on voit se diffuser un peu partout une infographie concernant les bases du référencement naturel. Comme dans beaucoup de document vulgarisés, il y a de bonnes choses dans cette ressources, … mais aussi de grosses bêtises basées sur des rumeurs.
L’un des points évoqués qui me dérange le plus est “N’utilisez qu’un seul élément <h1> dans la...
fredericguerrier:
Colonnes, marges et nth-child en CSS3 http://ow.ly/8H0E6 WebDesign CSS
2 tags
“Float, ça pue du flux !”
– Moi
Anonyme a demandé : Bonjour, je cherche un livre pour graphiste qui aimerait apprendre le CSS et le HTML que me conseillez vous ?
Anonyme a demandé : Connais-tu des podcasts (audio) sur le monde merveilleux du webdesign (en français)? Si non, à quand des podcasts "made in" alsacreations? :)
3 tags
HTML5please →
Un rapide mais complet aperçu de tout ce qui est aujourd’hui exploitable en HTML5 (et CSS3) : supports navigateurs, conseils d’utilisation, pré-requis, etc.
Très visuel et très clair.
4 tags
Quel type de navigation pour les sites mobiles ?
Les menus de navigation sont vraiment une plaie pour les périphériques mobiles, à commencer par le menu horizontal, et - le plus vicieux d’entre tous -, le menu déroulant… (même si nous proposons une solution pertinente sur Alsacréations.)
En y réfléchissant bien, chaque type de navigation est problématique dès lors que l’écran commence à se réduire : il faut non-seulement tenter...
2 tags
Layer Styles →
Un générateur automatique d’effets graphiques CSS3 (ombrages, arrondis, dégradés, bordures)
fredericguerrier:
HTML5 Reset v2.0 Website Templates http://ow.ly/8yRf8 WebDesign #WebDev
Anonyme a demandé : Qu'est-ce qu'un WebDesigner actuellement pour toi? Dans ton métier, tu fais quoi exactement?
4 tags
Test perso : hacks CSS et performances des...
Avec l’émergence du “Web mobile”, le concept de performance web est en pleine ébullition : on peut comprendre que chaque milliseconde de perdue sur une connexion 3G est un désatre.
Parmi les thèmes où l’on entend tout et son contraire, on trouve l’idée de “Sélecteurs CSS efficients” qui prône l’usage de certains types de sélecteurs au détriment...
1 tag
Sérieusement, tu fais de la veille sur Twitter ?!
Je peux le dire d’emblée : je suis un grand fan de Twitter et il s’agit de mon outil principal de veille technologique, après en avoir testé bien d’autres : flux RSS, Facebook, Google, blogs favoris, etc.
Les principaux problèmes de Twitter… sont ses aspects éphémères, incomplets, précipités, abruptes. Bref, le problème de Twitter est… Twitter.
Je ne...
2 tags
Deuxième édition du livre "CSS avancées" !
J’ai le plaisir de vous annoncer la prochaine parution de la 2è édition du livre “CSS avancées, vers HTML5 et CSS3”, prévue très prochainement (le 3 février 2012), soit un peu moins d’un an après la première version, et déjà annoncée sur Amazon.
Ce remaniement est principalement dû à une activité riche dans le monde de la conception web et plus particulièrement HTML5 et...
1 tag
CreativeJuiz →
Le blog de Geoffrey Crofte, un collègue pour le moins inspiré dans les domaines CSS3 et jQuery.
Anonyme a demandé : Quel est ton parcours scolaire ?(de post-bac à ton 1er job)
3 tags
Comment cibler les mobiles de manière optimale ?...
Suite à quelques expérimentations personnelles concernant les performances de chargement des ressources sur smartphones et tablettes, j’en suis venu à reconsidérer ma première méthode de ciblage des mobiles pour tenter de mieux prendre en compte les bonnes pratiques de performances.
Une feuille de style pour les unir toutes
Ma technique initiale se fonde sur une double feuille de styles...
Anonyme a demandé : Ta dernière découverte en css ?
Anonyme a demandé : Tes sites de veille technologique en intégration ? :)
1 tag
CSS4Design →
L’incontournable blog CSS de Bruno Bichet
décembre 2011
25 billets
2 tags
L'incontournable Bilan annuel 2011
Il fallait bien s’y attendre, l’année 2011 se termine tranquillement et on n’a jamais été aussi proche de 2012.
Comme beaucoup, c’est l’heure de faire le bilan de ce que je vais retenir professionnellement de l’année passée. Et il faut avouer qu’elle aura été exceptionnelle sur de nombreux points.
Aboutissement de nombreux mois de compilation, de...
fredericguerrier:
OpenData : Google Public Data Explorer http://ow.ly/8eyTX
2 tags
Requêtes, parallélisation et mobiles
En 2009, Steve Souders, un expert dans le domaine de la performance web, avait annoncé qu’il ne fallait pas utiliser @import pour appeler ses feuilles de styles CSS.
L’explication est simple : plusieurs fichiers CSS appelés via <link> peuvent être “parallélisés”, c’est à dire chargés en même temps; ce qui n’est pas le cas de fichiers appelés via...
3 tags
Think Mobile First !
Le courant de pensée “Think Mobile First” (penser mobile d’abord) prend de plus en plus d’essor pour de multiples raisons, notamment :
L’utilisation de mobile explose
Le Web mobile va à l’essentiel
Le Web mobile permet bien plus
Think Mobile First, c’est quoi ?
Cette philosophie est pour le moins séduisante puisqu’elle nous oblige à repenser nos...
Inspiration : 10 Incredible Examples of Responsive WebDesign http://www.webdesigndev.com/web-development/10-incredible-examples-of-responsive-web-design
(avec des vrais morceaux d’Alsacreations dedans !)
via fredericguerrier
1 tag
CSS3create →
Une ressource francophone exclusivement dédiée à CSS3
1 tag
Un fil d'Ariane en CSS3 sans images
Même si ce n’est pas d’une utilité flagrante, je me suis amusé récemment à réaliser un fil d’Ariane sans images, en utilisant des fonctionnalités de CSS3 : coins arrondis, dégradés circulaires, rotations.
Le résultat est visible à cette adresse : http://www.ie7nomore.com/fun/breadcrumb/
Note : il est également possible d’exploiter les caractères...
2 tags
Gradient generator de Colorzilla →
Un éditeur de dégradés linéaires (et radiaux) CSS3 très intuitif.
1 tag
Ordonnez vos déclarations CSS
S’y retrouver au sein d’un fichier CSS de plusieurs centaines de lignes de déclarations est souvent fastidieux, notamment dans le cadre d’un projet web collaboratif et quand vos collègues ont d’autres habitudes d’écriture que les vôtres.
Par expérience, j’ai pu constater que l’un des moyens pour améliorer rapidement la lisibilité du code CSS est de systématiquement faire apparaître les...
2 tags
Des images sans images
Afin d’optimiser les performances des navigateurs, de nombreuses techniques permettent d’éviter des requêtes excessives et de charger des fichiers trop imposants.
Voici quelques solutions pour afficher des images ou pictogrammes sur ses pages web… sans images. Le tout dans un but de performance et de facilitation des mises à jour et des adaptations graphiques (élargissement,...
2 tags
Le tableau HTML, ce grand incompris
Diabolisé depuis des années pour ses problèmes de sémantique, d’accessibilité et de performances notamment, le tableau HTML de mise en page est aujourd’hui le vilain canard de la conception web, tant et si bien qu’on n’ose même plus l’employer pour ce dont il est fait : des données tabulaires.
(C’est aussi un peu pour ça que je me suis amusé à présenter...
Support de @font-face dans les clients mail →
kaelig:
Aujourd’hui j’ai reçu une maquette de newsletter à intégrer. Ses titres étaient habillés d’une police qui n’appartient pas à la famille des websafe fonts. Seule alternative : passer par @font-face. Dans un e-mailing, ce n’est pas possible.
Quand quelque chose n’est pas techniquement intégrable, on renvoie la maquette au graphiste avec des explications.
Avant de faire un retour à...
1 tag
Dabblet, un bac à sable CSS interactif →
3 tags
Performances : toutes les feuilles de styles sont...
La performance dans le Web mobile est une notion capitale : il est crucial de prendre en compte le poids des éléments, les temps de chargement, les requêtes superflues, sous peine de grosses désillusions selon les projets.
J’ai lu récemment qu’une feuille de style CSS dédiée “mobile” était chargée par le navigateur même si elle n’était pas applicable (par...
inline-block n'est PAS inline !
Je vois de plus en plus de personnes se jeter sur display: inline-block simplement pour aligner des éléments de liste par exemple.
Pour rappel, la valeur inline-block est très pratique mais assez particulière. Elle est surtout assez mal supportée par IE6-IE7, contrairement à inline, a des inconvénients et nécessite généralement des bidouilles pour être interprétée.
Pour résumer, inline-block...
2 tags
CSS Tricks →
Une communauté très active dans le domaine des CSS avancés
1 tag
IECSS.com - valeurs CSS par défaut des éléments →
IECSS.com affiche toutes les propriétés CSS appliquées par défaut sur les éléments HTML par les différentes versions d’Internet Explorer
1 tag
Chérie, ça va couper !
Les spécifications CSS3 apportent leur lot de propriétés et techniques pour gérer les césures et coupures des mots longs.
Certaines de ces propriétés sont déjà reconnues par les navigateurs actuels et par conséquent tout à fait utilisables en production. Intéressons-nous à deux d’entre-elles : word-wrap et hyphens
Word-wrap : la césure “barbare”
Word-wrap est une...
1 tag
