background preloader

CSS3 Flexbox Layout module

CSS3 Flexbox Layout module
Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour. En action ! Démonstration display: flex Compatibilité Tableau des compatibilités Standardisation

http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Related:  FLEXBOX

Utiliser Grid ou Flexbox ? Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout. Par Rachel Andrew Arrière-plans avec CSS3 Backgrounds CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale

XMLHttpRequest La deuxième version du XHR ajoute de nombreuses fonctionnalités intéressantes. Pour ceux qui se posent la question, le XHR2 ne fait pas partie de la spécification du HTML5. Cependant, cette deuxième version utilise de nombreuses technologies liées au HTML5, nous allons donc nous limiter à ce qui est utilisable (et intéressant) et nous verrons le reste plus tard, dans la partie consacrée au HTML5. Tout d'abord, faisons une petite clarification : L'objet utilisé pour la deuxième version est le même que celui utilisé pour la première, à savoir XMLHttpRequest.Toutes les fonctionnalités présentes dans la première version sont présentes dans la deuxième.

Le modèle tabulaire en CSS Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils. En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML. Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS… Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre “CSS avancées, vers HTML5 et CSS3”, avec l’aimable autorisation de l’auteur :)

Oui, Flexbox est buggué – La Tête dans le Flux À force de promettre monts et merveilles à propos de Flexbox, on finit par croire que ce module de positionnement est parfait et dénué de bugs. Bah non, sans surprise, Flexbox est buggué. Comme tous les autres. Ce n’est pas la faute à Flexbox hein, mais celle des navigateurs… même si au fond ça ne change pas grand chose pour nous. Intégrer une vidéo dans un site web, compatible ie, firefox, safari, chrome, opera, iphone, ipad, android, … Comment afficher une vidéo sur une page internet en combinant les technologies HTML5 avec la balise <video> et flash pour les navigateurs non compatibles ? Avec un code HTML qui affiche les liens vers 3 formats de fichiers vidéo dans cet ordre : HTML5 MP4HTML5 WebMHTML5 OGGFlash MP4 (pas besoin de FLV depuis la version 9 rev 3 de flash) Le navigateur sautera le format qu'il ne connait pas jusqu'à trouver celui qu'il sait lire.

16 sites pour trouver des illustrations vectorielles gratuites - Pour tout designer / webmaster / auto entrepreneur web qui se respecte, le problème des images pour créer un site est récurrent. Il existe une multitude de sites pour trouver des photos stock, mais beaucoup sont malheureusement payants. Il existe heureusement quelques alternatives, qui feront l'objet d'un billet ultérieur Pour ce qui est des illustrations vectorielles, ou vector files, le problème devient un peu plus épineux.

Comprendre l'héritage et la parenté des styles CSS Les styles CSS fonctionnent sur le principe d'imbrication, de parenté et d'héritage, quelques explications. Le modèle Parent-Enfant(s) L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage tous les styles de son élément Parent. Par exemple, la balise <html> est parent de <body>, et <table> est parent de <tr> qui lui-même est parent de <td>. Cet héritage est très pratique et permet d'éviter beaucoup de répétitions inutiles : en effet, en attribuant une propriété à un parent (par exemple font-size: 1.5em), elle sera transmise à tous ses enfants, mais aussi aux enfants de ces enfants, etc...

Related: