CSS hacks & browser detection More and more web developers are ditching tables and coming round to the idea of using CSS to control the layout of their site. With the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management, why not? The problem with CSS Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use. Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. How browser detection using CSS hacks works The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. The first command is intended for IE, the second for all other browsers.
All About Floats What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float The Great Collapse Video
La propriété border-image en CSS3 Par Estelle Weyl Bien que ce ne soit pas vraiment une nouveauté pour les navigateurs, la propriété border-image est désormais disponible dans la spécification CSS3. border-image (littéralement : image de contour, NdT) offre une méthode pour ajouter des contours décoratifs à n’importe quel élément. Avec les propriétés de border-image, vous pouvez créer des contours décoratifs pour des éléments qui vont bien au-delà des simples coins arrondis, avec des images très légères ou même avec des dégradés. La propriété border-image vous permet de prendre une petite image, de la découper virtuellement en neuf tronçons, et de disposer ou d’étirer les morceaux de votre petite image au sein d’un autre élément beaucoup plus grand. Vous pouvez prendre une image et l’étirer sur toute la largeur d’un bouton ou d’une page entière. Dans ce second exemple, au lieu d’étirer le milieu de l’image de contour, nous l’avons répété. La propriété border-image est un raccourci qui permet de déclarer : border-image-width
There’s more to the CSS rem unit than font sizing The following is a guest post by Roman Rudenko, a mad scientist at Mobify where he’s tasked with understanding why browsers misbehave and with cajoling them into playing nice. When he’s not coding, Roman is learning to ride a motorbike without crashing into too many solid objects. Many web designers and developers are familiar with the CSS rem length unit. But, you may not know that it has a couple of handy alternate uses. In this post, I’ll describe how to use the CSS rem unit to scale specific page elements while leaving others unaffected. I’ll also discuss how to use it as a replacement for the under-supported vw (viewporth width) unit. For readers unfamiliar with the rem unit (standing for "root em"), it provides a way to specify lengths as fractions of the root element’s font size. First, let’s look at how rem works and how it differs from the em unit. Rem can be used for its typical font sizing duty. Scaling document elements Replacement for vw Share On
Domptez vos puces, dressez des listes Par Mark Newhouse Dès juillet 1999, je pontifiais à propos des vertus des feuilles de style dans diverses listes de discussion. Certaines choses ne changent pas. Mais ce qui a changé, c'est la façon dont je réfléchis à la mise en forme CSS et à la structure (X)HTML sous-jacente à laquelle elle est appliquée. Bien sûr, la raison pour laquelle nous ne les implémentons pas de cette manière est que nous ne voulons pas d'une puce devant chacun des liens de notre menu. Aujourd'hui, je vais montrer comment utiliser les CSS pour reprendre le contrôle de listes peu maniables au premier abord. Préparer le terrain Dans le cadre de cet article, j'utilise des listes non ordonnées. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 - un peu plus long pour avoir plusieurs lignes</li></ul> Chaque liste est simplement placée dans un div différent, et le code CSS définit le comportement de chaque liste en fonction du div où elle se trouve. Le positionnement Les puces La navigation
Formalize CSS - Teach your forms some manners! Gérer les débordements de contenus grâce à CSS Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Exemple (HTML) : Partie CSS :
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
25 Excellent CSS3 Animations CSS3 has brought about a number of impressive new features. CSS3 animations is one of the most fun a new feature of CSS3. CSS3 Transitions in real use were introduced in late 2007 by Safari. At that time, they were referred as “CSS Animations”, but the terminology changed when Safari introduced their proprietary features also called CSS Animations. On previous post we are published article “15 CSS3 Menu Navigation Tutorials”. Create Animated Landscape using Pure CSS3 This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. Some months ago we have created an animated landscape using Photoshop and jQuery. CSS3 Hover Image Gallery FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms FormBox is a jQuery and CSS3 powered navigation menu that supports integrated forms. CSS3 Car Animation CSS3 Progress Bar Our Solar System in Modern Browsers Ajax Style Loading Animation in CSS3 (no Images) CSS3 Accordion Snow