An Introduction to the CSS Flexbox Module. CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we're going to talk about a new layout mode, called flexbox - new in CSS3. I'm sure you're raring to go! Let's get started after the jump. Subsequent Changes to Techniques & Software Certain aspects of applications or techniques used in this tutorial have changed since it was originally published. CSS Flexbox Support Currently, the CSS Flexbox specification is a working draft and things will change!
Please note that this tutorial will use webkit/non-vendor-prefixed examples for the sake of brevity. Background on Layout Modes CSS Flexbox is essentially a layout mode. Occasionally, when an element is not block, it's likely to be inline. Here's a quick tip for accessing the computed style of an element using JavaScript's window.getComputedStyle method. A Quickie Example.
How to Create CSS3 Speech Bubbles Without Images. I remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5. CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever… To ease you in gently, let’s examine the HTML. A single element is required, so I’m using a P tag: <p class="speech">SitePoint Rocks! First, we’ll style the outer box: Nothing too complicated there. Now we need to create the triangular bubble pointer. If we reduce the width and height of our element to 0px and use different sized borders, we can see different triangles being formed: For our speech bubble pointer, we can therefore use a solid top and left border with transparent right and bottom borders: Comments on this article are closed.
Les préfixes vendeurs en CSS. Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée.
Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Quelques inconvénients font surface : Recommandation d'usage courant. IE6 et Z-index la solution ! | Bidouilleur. Août 23 Puisque nous allons nous « payer » IE6 jusqu’en 2014 (date de fin support de micro$oft..), j’ai décidé de faire une série de posts sur les bugs de IE6 en donnant la solution pour chacun d’eux. Celui-ci concerne z-index qui permet de gérer l’empilement (profondeur) des éléments HTML sur une page. On rencontre ce bug la plupart du temps en créant un menu déroulant,quant le menu se déroule sous le contenu. Pour le résoudre il suffit d’associer les styles CSS : position:relative; et : z-index:1; à la balise parente.
Exemple : Les effets graphiques (très) avancés en CSS. Vincent De Oliveira · Kiwiparty 2012 t.co/Vw9tDej Vincent De Oliveira Les effets (presque) courants Quoi de plus? De mieux? Trois fois rien... Commençons par la poudre aux yeux! Background and Borders border-corner-shape: curve | bevel | scoop | notch Au sein de CSS4, pas de support actuellement border-clip: 10px 1fr 10px Au sein de CSS4, pas de support actuellement Quoi de neuf dans la gestion des textes? Font-variant · font-feature-settings Contrôle de l'affichage des glyphes Ligatures, crénage, fractions, variantes styllistiques, etc. font-variant Propriété raccourcie Aucun support actuellement font-feature-settings font-feature-settings Ligatures standards: efficaceefficace Ligatures optionnelles: AbbayeAbbaye Chiffres elzéviriens: 482482 Fractions: 1/3 1/41/3 1/4 Ordinaux: 13th13th Attention, fonctionne avec Firefox 4+, IE10 · Police Contenu Book Display Regular Attention, fonctionne avec Firefox 4+, IE10 · Contenu Book Display Regular disponible sur myFonts Alice & Watts Small cakes with good taste.
The Brand New CSS4 Selectors Specification. Yeah, the CSS4 specification is already in the early stages of being written (for selectors, anyway). I must stress just how work in progress this is, in the sense that some of this stuff might not make the final cut, while more stuff may be added. It will however give you an idea of what you can expect some of this to turn up in the real CSS4 specification. Most of these ideas are probably the basis of what the W3C is aiming for in the CSS4 Selectors Specification. These are perhaps my two favourite additions. You may have already heard of the :not() selector, something that turned up in the CSS3 specification. The :matches() selector will undoubtedly be new to you. Not In the CSS4 Specification it says :not() can be used for both selectors and pseudo classes.
Useful, eh? Matches matches() literally matches any pseudo class. There are a few new selectors that are mentioned in the specification, and they all have their various uses. Reference Combinators Targeting parents (with CSS!) Columns.