Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa.
Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps.
Mais pas encore.
On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
CSS Grid Layout, le futur de vos mises en pagematparisot
Faire des mises en pages avancées a toujours été une gageure en CSS. Nous avons utiliser les tableaux, puis des dizaines de div, et tout un tas d'astuces et de bidouilles plus ou moins élégantes. Heureusement les choses changent enfin ! Flexbox est maintenant bien rependue pour agencez nos blocs en ligne ou en colonne, mais il manquait une norme pour réaliser des mises en pages complexes. C'est l'objectif de CSS Grid qui commence à arriver dans nos navigateurs. Découvrons la syntaxe et les possibilités de cette spécification en cours de standardisation au W3C
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Je suis un développeur Web, et je n’ai pas peur de dire que désormais, j’aime le CSS !
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
CSS Grid Layout, le futur de vos mises en pagematparisot
Faire des mises en pages avancées a toujours été une gageure en CSS. Nous avons utiliser les tableaux, puis des dizaines de div, et tout un tas d'astuces et de bidouilles plus ou moins élégantes. Heureusement les choses changent enfin ! Flexbox est maintenant bien rependue pour agencez nos blocs en ligne ou en colonne, mais il manquait une norme pour réaliser des mises en pages complexes. C'est l'objectif de CSS Grid qui commence à arriver dans nos navigateurs. Découvrons la syntaxe et les possibilités de cette spécification en cours de standardisation au W3C
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Je suis un développeur Web, et je n’ai pas peur de dire que désormais, j’aime le CSS !
Quelles sont les différents outils que nous pouvons mettre en place pour mieux collaborer avec les membres de notre projet ?
Comment construire une architecture CSS modulaire ?
https://www.youtube.com/watch?v=nWWslZboeEE
Le RWD est un matériau jeune, une ébauche en plein brouillon qui prend peu à peu forme et consistance au fil du temps et de nos expériences sur le terrain. Dans quelques mois (années ?), les spécifications officielles seront bien plus abouties et stabilisées au sein de nos navigateurs. De nouvelles techniques de positionnement CSS3 telles que Flexbox, Grid layout et Regions faciliteront l'adaptation de designs multi-surfaces. Mais au-delà de ça, de réelles possibilités sont d'ores et déjà offertes par le module @viewport, les unités de viewport (vw, vh, vmin, vmax), les unités de résolution (dpi, dpcm, dppx), les solutions avancées pour gérer les images HD (image-set, srcset et picture) ainsi que les Media Queries CSS level 4 : @media (pointer), (hover), (luminosity) et (script). Gageons que le Responsive Web Design de l'avenir du futur nous épanouira un peu plus tous les matins au réveil, nous rendra encore plus heureux d'aller travailler dans notre jolie agence web, et rendra tous nos clients encore plus nombreux, comblés et enthousiastes par notre travail quotidien qu'on adore. Oups, je m'égare.
Speaker : Raphael Goetter (Alsacréations)
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website FootprintsMark D. Griffin
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website Footprints. Brought to you by www.netrix.co.uk. You can use a variety of combinations and keywords to location various sites that have scripts that allow you to get backlinks. Hunt and find places to build top quality backlinks.
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments. Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…
Parce que CSS3 c'est super, mais qu'on vit encore un peu dans le présent et que des pans entiers de CSS 2.1 ont été occultés en raison du dinosaure IE6. En attendant que tout le monde ait Internet Explorer 9 ou Firefox 4, voyons ce qu'on peut faire avec IE7 et IE8 en utilisant un langage CSS2 mal connu.
P.Lambert-Charreteur et R.Goetter se sont réunis pour proposer un atelier pratique sur un projet concret de conception de page en CSS. À partir d’une maquette au format image, l’objectif était d’obtenir une page web à mise en page sans tableau et de réaliser des menus graphiques à base de CSS.
Le diaporama rappelle les notions essentielles de positionnement.
Frontend development requires a lot a different tools. This presentation is about these technos like AngularJS, Javascript, Jquery, Sass, Grunt, Zurb foundation, Karma, Protractor, ...
This presentation was shown during a TechnoByte (session of internal formation) on 2014/06/10
Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
Quelles sont les différents outils que nous pouvons mettre en place pour mieux collaborer avec les membres de notre projet ?
Comment construire une architecture CSS modulaire ?
https://www.youtube.com/watch?v=nWWslZboeEE
Le RWD est un matériau jeune, une ébauche en plein brouillon qui prend peu à peu forme et consistance au fil du temps et de nos expériences sur le terrain. Dans quelques mois (années ?), les spécifications officielles seront bien plus abouties et stabilisées au sein de nos navigateurs. De nouvelles techniques de positionnement CSS3 telles que Flexbox, Grid layout et Regions faciliteront l'adaptation de designs multi-surfaces. Mais au-delà de ça, de réelles possibilités sont d'ores et déjà offertes par le module @viewport, les unités de viewport (vw, vh, vmin, vmax), les unités de résolution (dpi, dpcm, dppx), les solutions avancées pour gérer les images HD (image-set, srcset et picture) ainsi que les Media Queries CSS level 4 : @media (pointer), (hover), (luminosity) et (script). Gageons que le Responsive Web Design de l'avenir du futur nous épanouira un peu plus tous les matins au réveil, nous rendra encore plus heureux d'aller travailler dans notre jolie agence web, et rendra tous nos clients encore plus nombreux, comblés et enthousiastes par notre travail quotidien qu'on adore. Oups, je m'égare.
Speaker : Raphael Goetter (Alsacréations)
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website FootprintsMark D. Griffin
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website Footprints. Brought to you by www.netrix.co.uk. You can use a variety of combinations and keywords to location various sites that have scripts that allow you to get backlinks. Hunt and find places to build top quality backlinks.
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments. Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…
Parce que CSS3 c'est super, mais qu'on vit encore un peu dans le présent et que des pans entiers de CSS 2.1 ont été occultés en raison du dinosaure IE6. En attendant que tout le monde ait Internet Explorer 9 ou Firefox 4, voyons ce qu'on peut faire avec IE7 et IE8 en utilisant un langage CSS2 mal connu.
P.Lambert-Charreteur et R.Goetter se sont réunis pour proposer un atelier pratique sur un projet concret de conception de page en CSS. À partir d’une maquette au format image, l’objectif était d’obtenir une page web à mise en page sans tableau et de réaliser des menus graphiques à base de CSS.
Le diaporama rappelle les notions essentielles de positionnement.
Frontend development requires a lot a different tools. This presentation is about these technos like AngularJS, Javascript, Jquery, Sass, Grunt, Zurb foundation, Karma, Protractor, ...
This presentation was shown during a TechnoByte (session of internal formation) on 2014/06/10
Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
Cascade et héritage : concevoir, organiser, optimiser et maintenir ses feuilles de styles. Cet atelier propose des éléments de méthode pour l’intégration de sites web complexes. Présenté lors de Paris Web 2008, par Marie Destandau (Ototoï), Hugues Moreno (Gaya) et Romy Duhem-Verdière (indépendante).
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur
du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour
vous ?
Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.
Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette
présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Beaucoup d’incompréhensions accompagnent les nouveaux et excitants langages HTML5 et CSS3.
Raphaël se propose de vous en faire découvrir les grandes lignes, de démêler le vrai du faux et les nombreuses idées reçues : “HTML5 c'est encore trop tôt”, “On ne peut pas faire de HTML5 sans CSS3”, “Avec HTML5, je devrai tout réapprendre depuis zéro”, “CSS3 ne fonctionne pas sur IE”, “CSS3 c'est que de la décoration”, etc.
Le design web en 2011 consiste encore à se battre avec des positionnements flottants, absolus, relatifs, des clear, des problèmes de compatibilité, des hacks, des bidouilles, des bugs d'affichage et autres frameworks CSS encombrants.
On ne devrait plus en être là aujourd'hui. C'est du rôle des CSS de nous offrir des solutions simples, intuitives et stables (NDLR : genre "KISS" quoi).
Les propositions CSS3 avant-gardistes telles que Flexible box model et Grid Layout ne seront pas utilisables en production avant un bon bout de temps. En attendant, si la solution était sous nos yeux depuis des années ? Et si l'avenir (proche) des CSS étaient les tableaux de mise en page ?
Note : ça parlera (un peu) de tableaux HTML bien fichus, linéarisables, toussa et aussi (surtout) de CSS display: table, de ses avantages et inconvénients.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Connaissez-vous beaucoup de sessions de conférences web gratuites, où l'on peut assister à des présentations de qualité, exposées par des orateurs experts, suivies d'une soirée dans un bar, et le tout dans une ambiance détendue ?
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ?
Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.
52. <div id="origin"><p>Lorem Salu bissame ! Wie geht's les
samis ? Hans apporte moi une Wurschtsalad avec un picon
bitte, s'il te plaît. […]</p></div>
<div id="layout">
<p>1)</p>
<p>2)</p>
<img src="img.jpg" alt="">
<p>3)</p>
<p>4)</p>
<p>5)</p>
<p>6)</p>
</div>
53. <div id="origin"><p>Lorem Salu bissame ! Wie geht's les
samis ? Hans apporte moi une Wurschtsalad avec un picon
bitte, s'il te plaît. […]</p></div>
<div id="layout">
<p>1)</p>
<p>2)</p>
<img src="img.jpg" alt="">
<p>3)</p>
<p>4)</p>
<p>5)</p>
<p>6)</p>
</div>
#origin {
flow-into: kiwi;
}
#layout p {
flow-from: kiwi;
}
62. CSS evolution
es ble> ble ns / ?
m ta sition ta m
d
gri ions S4
fra < po lay lock lticolu ox
/
reg sions C S
/ p b
loa
t dis ne-b mu flex lu
f
in li exc