Formation CSS - Le blog d`Alexandre Paixao

Alex Team
FORMATION CSS
DEFINITION (WIKIPEDIA) : CSS (CASCADING STYLE SHEETS :
FEUILLES DE STYLE EN CASCADE) EST UN LANGAGE INFORMATIQUE
QUI SERT A DECRIRE LA PRESENTATION DES DOCUMENTS HTML ET
XML. LES STANDARDS DEFINISSANT CSS SONT PUBLIES PAR LE
WORLD WIDE WEB CONSORTIUM (W3C). INTRODUIT AU MILIEU
DES ANNEES 1990, CSS DEVIENT COURAMMENT UTILISE DANS LA
CONCEPTION DE SITES WEB ET BIEN PRIS EN CHARGE PAR LES
NAVIGATEURS WEB DANS LES ANNEES 2000.
SOMMAIRE
Histoire et enjeux du CSS ........................................................................................................................................ 4
L’histoire du standard ......................................................................................................................................... 4
Un concept parmi d'autres, présent dès l'origine du web .............................................................................. 4
Les premiers développements – CSS 1............................................................................................................ 4
CSS2, des ambitions précipitées...................................................................................................................... 4
CSS 2.1, retour aux implémentations .............................................................................................................. 4
CSS3, implémentation modulaire ................................................................................................................... 4
Les enjeux............................................................................................................................................................ 5
Séparer la structure d'un document de ses styles de présentation ................................................................ 5
Décliner les styles de présentation selon le récepteur ................................................................................... 5
Permettre la cascade des styles ...................................................................................................................... 6
Principes techniques et syntaxe de CSS .................................................................................................................. 7
Les concepts fondamentaux ............................................................................................................................... 7
Sélecteurs et blocs de règles ........................................................................................................................... 7
Propriétés et valeurs ....................................................................................................................................... 7
Boites et flux CSS ............................................................................................................................................. 7
Points techniques ................................................................................................................................................ 7
La propriété « display » ................................................................................................................................... 7
Les blocs flottants ......................................................................................................................................... 10
Positionnement ............................................................................................................................................. 11
Collapsing ...................................................................................................................................................... 11
Unités de mesure .......................................................................................................................................... 13
Priorités des sélecteurs ................................................................................................................................. 14
Point sur les sélecteurs ..................................................................................................................................... 14
Sélecteurs compatibles IE6 ........................................................................................................................... 14
Sélecteurs compatibles IE7 ........................................................................................................................... 17
Sélecteurs compatibles IE8 ........................................................................................................................... 20
Cibler le dispositif de visualisation .................................................................................................................... 21
@media ......................................................................................................................................................... 21
Hack CSS ........................................................................................................................................................ 22
Les plus gros bugs et particularités d’IE6 et IE7 ............................................................................................ 22
Critiques et avenir du standard CSS ...................................................................................................................... 25
Les limites du CSS .............................................................................................................................................. 25
Indépendance de la présentation et de la structure ..................................................................................... 25
Accessibilité ................................................................................................................................................... 25
Simplicité ....................................................................................................................................................... 26
Un avant gout de CSS 3 ..................................................................................................................................... 26
Implémentations propriétaires (navigateur) ................................................................................................ 26
Quelques propriétés ..................................................................................................................................... 26
Font-face ....................................................................................................................................................... 29
Modèles de boite flexible .............................................................................................................................. 29
BONUS : LessCSS ................................................................................................................................................... 33
Variables ............................................................................................................................................................ 33
Mixins ................................................................................................................................................................ 33
Nested Rules ..................................................................................................................................................... 33
Operations......................................................................................................................................................... 34
HISTOIRE ET ENJEUX DU CSS
Les origines des CSS sont liées à trois alternatives majeures :
-
HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?
Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?
La réponse aux besoins est-elle un format de description de la mise en forme, ou un langage de
transformation ?
L’HISTOIRE DU STANDARD
UN CONCEPT PARMI D'AUTRES, PRESENT DES L'ORIGINE DU WEB
-
-
En 1992, le premier navigateur Web (« WorldWideWeb », renommé par la suite « Nexus ») recoure à
un mécanisme permettant de déterminer le rendu des polices de caractères, des couleurs ou de
l'alignement du texte. Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les
premières implémentations HTML ne comportant pas non plus d'éléments de présentation.
Courant 1994-1995, le tout nouveau Netscape Navigator introduit les premiers éléments HTML de
présentation, tandis qu'apparaissent concurremment les premières propositions de formats de styles
externes.
LES PREMIERS DEVELOP PEMENTS – CSS 1
-
-
La spécification CSS1 finale est publiée le 17 décembre 1996, et définit une cinquantaine de propriétés
tout en ayant en vue une compatibilité ascendante.
En 1996, Internet Explorer 3.0 est le premier navigateur commercial à implémenter partiellement CSS
alors que celle-ci est encore en cours de formulation. Netscape Navigator milite quant à lui pour le
JSSS.
En 2000, Internet Explorer 5.0 pour Macintosh lancé en mars 2000, basé sur Tasman, un moteur de
rendu spécifique sans rapport avec Trident, est le premier navigateur à supporter complètement (à
plus de 99 %) CSS1. Il introduit également le système de Doctype Switching.
CSS2, DES AMBITIONS PRECIPITEES
-
Interruption du développement d'Internet Explorer, navigateur dominant du marché, de 2001 à 2006.
Håkon Lie écrivait en effet en 2005 : « 2001 est un tournant pour CSS. C'est l'année où Microsoft
produit Internet Explorer 6.0 qui offre une prise en charge fonctionnelle, bien qu'incomplète et
buggée, de CSS (…). Aucun autre navigateur n'a été capable de concurrencer WinIE en termes de
nombre d'utilisateurs. WinIE a, de ce fait, déterminé le sous-ensemble de CSS utilisable par les
auteurs. La prise en charge limitée de CSS par WinIE, combinée à un monopole de fait en matière de
navigateur Web, est actuellement le plus grave problème du déploiement de CSS. »
CSS 2.1, RETOUR AUX IMPLEMENTATIONS
-
Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à partir de
2001 une version révisée CSS 2.1 (« CSS Level 2, Revision 1 »), sur la base de ce qui était effectivement
adopté par les différents navigateurs.
CSS3, IMPLEMENTATION MOD ULAIRE
Le développement du troisième niveau des feuilles de styles en cascade commence dès 1999, parallèlement à
celui de CSS 2.1.
En 2008, aucun module CSS 3 n'est considéré comme terminé par le W3C, et l'implémentation dans les
navigateurs est donc marginale, souvent à titre de test, comme les fonctions -moz-xxx du moteur Gecko, dont
le préfixe limite l'utilisation aux seuls navigateurs basés sur Gecko.
LES ENJEUX
SEPARER LA STRUCTURE D'UN DOCUMENT DE SES ST YLES DE PRESENTATION
L'un des objectifs majeurs de CSS est de permettre la mise en forme hors des documents. Il est par exemple
possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une
feuille de style CSS séparée (cf Zen Garden). Les styles sont appliqués au dernier moment, dans le navigateur
web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices,
permettant d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la complexité
de l'architecture d'un document.
Ainsi, les avantages des feuilles de style sont multiples :
-
-
-
La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui
permet d'être plus efficace.
Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font
référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme
rapide de l'aspect visuel.
Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour
l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de
choisir un style parmi plusieurs.
Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de
balises ni d'attributs de présentation.
DECLINER LES STYLES DE PRESENTATION SELON LE RECEPTEUR
CSS permet de définir le rendu d'un document en fonction du média de restitution et de ses capacités (type de
moniteur ou de dispositif vocal), de celles du navigateur (texte ou graphique), ainsi que des préférences de son
utilisateur.
Les feuilles de styles peuvent être différenciées pour les médias suivants, selon CSS2.1 :
-
all : quel que soit le média
screen : écrans d'ordinateur de bureau
print : pour l'impression papier
handheld : écrans de très petite taille et clients aux capacités limitées (ex: WAP, mais pas iPhone)
projection : quand le document est projeté
tv : quand le document est affiché sur un appareil de type télévision
speech : pour le rendu via une synthèse vocale (remplaçant aural, initialement prévu par CSS2.0
puis déprécié par CSS2.1)
Dans chaque média, les styles de présentation déterminés par l'auteur du document se combinent avec ceux
par défaut de l'agent utilisateur et ceux issus des préférences de l'utilisateur et de sa configuration personnelle.
Les capacités du récepteur peuvent être prises en compte par les auteurs, à destination des agents utilisateurs
implémentant le module CSS3 « media queries » : celui-ci permet de conditionner la prise en compte d'une
feuille de style à des contraintes concernant notamment la résolution ou la capacité de restitution des
couleurs.
PERMETTRE LA CASCADE DES STYLES
La « cascade » est la combinaison de différentes sources de styles appliqués à un même document, selon leur
degré respectif de priorité. Différents modes de cascade peuvent se combiner :
-
-
-
par origine des styles, issus de l'agent utilisateur, de l'auteur et de l'utilisateur. La priorité supérieure
accordée aux styles de l'utilisateur est un des facteurs principaux de l'accessibilité des documents
présentés à l'aide de CSS.
par média : une feuille de style générique peut s'appliquer à plusieurs média de restitution (affichage à
l'écran, impression, projection) et être combinée avec des feuilles propres à chaque média.
selon l'architecture d'un ensemble de documents web : une feuille de style générique peut s'appliquer
à la totalité des pages d'un site web, être combinée avec des feuilles propres à chaque rubrique de
celui-ci, ainsi qu'avec des styles propres à telle ou telle page spécifique.
selon l'architecture des feuilles elles-mêmes : une feuille de style externe au document peut être
combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le
compose (styles « en ligne »). Une feuille de style peut également importer une ou plusieurs autres
feuilles externes.
PRINCIPES TECHNIQUES ET SYNTAXE DE CSS
LES CONCEPTS FONDAMENTAUX
SELECTEURS ET BLOCS DE REGLES
Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}. Chaque bloc est précédé d'un
sélecteur désignant les éléments structurels auxquelles les propriétés concernées doivent être appliquées :
p { font-size: 110%; font-family: Helvetica, sans-serif; }
Bien que ce code CSS ne décrive pas la totalité de la présentation d'un document, il constitue à lui seul une
feuille de style à part entière. Il fixe pour les éléments p (paragraphe), le paramètre de taille à la valeur 110% et
le paramètre de police à la valeur Helvetica, ou, si Helvetica est indisponible, une police générique sans serifs.
PROPRIETES ET VALEUR S
Les propriétés CSS ont été établies selon un compromis entre deux contraintes opposées : faciliter la lecture
des feuilles de styles par les agents utilisateurs en multipliant les propriétés individuelles, ou faciliter leur
écriture par les auteurs en recourant à un nombre plus réduit de propriétés combinées. Par exemple, la
position d'une image d'arrière-plan est déterminée par une propriété unique (background-position),
combinant les deux valeurs d'abscisse et d'ordonnée, et non par deux propriétés distinctes. De même, il existe
des propriétés raccourcies permettant aux auteurs de simplifier l'écriture d'une série de propriétés : le
raccourci font permet, par exemple, de résumer en une seule règle l'ensemble des propriétés de police de
caractères, de taille, de hauteur de ligne, de casse, de graisse et d'italique.
BOITES ET FLUX CSS
Le rendu d'un document stylé est déterminé par les concepts de boîte et de flux. Le moteur de rendu CSS
établit une « structure de formatage » reflétant l'arbre logique du document. Chaque élément de cette
structure génère une ou plusieurs zones dotées de propriétés d'affichage paramétrables. L'affichage s'effectue
à partir du flux des boîtes successivement générées pour chaque élément tel qu'il apparaît dans l'ordre linéaire
de la structure de formatage.
POINTS TECHNIQUES
LA PROPRIETE « DISPLAY »
Selon les cas de figures, ces différents types de boîtes :
-
-
peuvent avoir des propriétés de marges, de bordure, d'arrière-plan, de largeur ou de hauteur, etc.
Dans un rendu vocal, des propriétés équivalentes permettent de déterminer des pauses dans la
lecture avant ou après le contenu, de choisir une voix, de régler son débit ou son niveau sonore.
peuvent être déplacées par rapport à leur position par défaut dans le flux, ou avoir un comportement
particulier dans celui-ci (permettre un rendu en colonnes adjacentes, se superposer aux boîtes
voisines, ou être masquées par exemple).
DISPLAY : NONE
Un élément display : none est retiré entièrement du flux. Du coup on ne le voit plus, il ne prend plus aucune
place, comme s’il n’existait pas.
DISPLAY : BLOCK
Les éléments de rendu CSS block se placent toujours l'un en dessous de l'autre par défaut (comme un retour
chariot). Par exemple: une suite de paragraphes (balise <p>). Par ailleurs, un élément "bloc" occupe
automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide
des propriétés telles que width, height, min-width, ou min-height, …
L’imbrication des éléments caractéristiques d’un block sont souvent mal comprises. Par exemple : un bloc avec
un fond bleu, une largeur de 100px et un padding de 10px aura une « largeur bleue » de 120px, car le fond
contient la largeur et le padding.
DISPLAY : INLINE
Les éléments de rendu inline se placent toujours l'un à côté de l'autre afin de rester dans le texte (par exemple
la balise <strong>).
Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page, ni de leur donner des dimensions
(hauteur, largeur, profondeur) : leur taille va être déterminée par le texte ou l'élément qu'ils contiennent, de
sorte à prendre la plus petite taille possible. Certaines propriétés de marges peuvent être appliquées aux
éléments, comme les marges latérales.
DISPLAY : INLINE-BLOCK
Les éléments de rendu inline-block conservent les mêmes caractéristiques que les "inline", mais peuvent être
dimensionnés, par exemple la balise <input>.
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. The real use
of this value is when you want to give an inline element a width. In some circumstances some browsers don't
allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.
Fonctionne sur IE 6, mais uniquement si appliqué à un élément qui est naturellement inline (ex : <span>)
DISPLAY : TABLE
Les éléments de rendu table, table-row, table-cell possèdent le même comportement que les éléments de
tableaux et cellules (<table>, <tr>, <td>). Ils permettent de centrer les contenus verticalement et d'avoir des
hauteurs identiques entre éléments frères, par exemple la balise <td>.
Il existe également inline-table, table-row-group, table-column, table-column-group, table-header-group, tablefooter-group, et table-caption.
LES BLOCS FLOTTANTS
La propriété float demeure sans doute, malgré des qualités intrinsèques évidentes, la propriété la plus mal
comprise mais surtout, la plus mal employée des CSS. Sa simplicité d'utilisation apparente recèle pourtant
certaines subtilités fondamentales et lui confère malheureusement un choix inconsciemment systématique
pour toute disposition d'éléments en plusieurs colonnes.
ROLE & DETOURNEMENT DES FLOTTANTS
La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d'habillages.
Un habillage est une pratique courante dans le média print consistant à "enrouler" un texte autour d'un
élément (graphique ou texte); il était normal de retrouver cette ouverture de mise en page dans notre média
favori.
À l'instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu'occupe son contenu.
Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche
(float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à
l'envelopper. Deux objets flottants dans la même direction se rangeront côte à côte, seul un contenu demeuré
dans le flux qui les succède immédiatement initiera l'habillage. C'est justement ce caractère hâtif de disposition
adjacente de blocs qui est la cause d'une mauvaise et sur-utilisation de cette propriété trop souvent écartée de
son application originale.
NETTOYER LES FLOTTANTS
La propriété clear s'utilise conjoitement aux float et permet à un élément (qui peut être d'ailleurs lui-même
flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et,
par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants
exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).
POSITIONNEMENT
STATIC
Tout bloc non positionné explicitement est positionné en static. Il est positionné par rapport au flux, et ne peut
être déplacé. De ce fait, un élément static ignore les valeurs top, bottom, left, ou right.
La position statique (position:static) correspond simplement à la valeur par défaut d'un élément du flux. Il n'y a
que peu d'intérêt à la préciser, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi
une série qui serait positionnée hors du flux.
RELATIVE
Un élément positionné en relative a initialement le même positionnement qu’un élément static, sauf qu’il peut
être décalé grâce aux valeurs top, bottom, left, et/ou right. Un élément déplacé de restitue pas la place qu’il
prenait, un espace vide peut donc être visible.
L’intérêt de ce positionnement reste limité, on souhaite rarement décaler un élément par rapport à sa position
d’origine. Néanmoins, le positionnement relatif a un autre effet très intéressant, qui justifie le plus souvent son
utilisation : servir de conteneur au positionnement absolu.
ABSOLUTE
Un élément positionné en absolute est retire du flux. Il est positionné par rapport à son bloc « conteneur ». Un
bloc conteneur est un bloc qui n’est pas positionné en static, donc de type relative, absolute ou fixed. Dans le
cas où il n’y en a pas, c’est le bloc « html » qui tient le rôle de conteneur. C’est la cause principale de la
confusion de ce positionnement avec le positionnement fixed, car sans l’utilisation de conteneur le point
d’origine est similaire.
Puisqu’un élément positionné en absolute est sorti du flux, la place qu’il prenait est restituée.
FIXED
Un élément positionné en fixed est retire du flux et positionné par rapport à la fenêtre du navigateur. Du coup,
il conserve sa position même si on scroll sur la page.
COLLAPSING
MARGIN-COLLAPSE
Si vous travaillez sur du CSS de manière régulière, vous avez sans doute déjà rencontré ce problème. Je vous
présente l’énoncé.
En considérant ces balises :
<div>
<p>This is a paragraph within a <code>div</code></p>
</div>
Et ce bout de CSS :
div {
background-color: #3C75AE;
color: #fff;
margin-top: 10px;
}
p {
margin-top: 20px;
margin-bottom: 20px;
border: 1px solid #EB6B0E;
}
En regardant rapidement, on peut s’attendre à obtenir ceci :
Sauf qu’en réalité, on obtient ca :
Quelle est la cause ? Le phénomène du margin-collapsing (fusion des marges). Les agents utilisateurs qui le
supportent considère que les marges verticales des éléments fils ou frères fusionnent si aucun autre élément
se met en travers, les marges les plus petites étant éliminées. Illustration :
La plupart du temps, ce phénomène correspond au résultat escompté. Un cas typique serait les balises <p>, il
n’est pas souhaitable pour des paragraphes avec une marge de 10px que le premier paragraphe soit espacé des
10px puis les autres de 20px (dans ce cas, les marges côte à côte ne font qu’une).
Pour rappel, un bloc est constitué d’une marge, d’une bordure et d’un padding. Pour contrer la fusion des
marges, il suffit d’intercaller entre la marge du parent et celle du fils une bordure ou un padding. Exemple :
div {
background-color: #3C75AE;
color: #fff;
margin-top: 10px;
padding-top: 1px;
padding-bottom: 1px;
}
BORDER-COLLAPSE
Le border-collapse est similaire au margin collapse, mais s’applique sur les bordures et n’est pas actif par
défaut. Très utile pour les <table>, les bordures des cellules d’un tableau, lorsqu’il n’y a pas de cellspacing,
fusionnent. De ce fait, une bordure d’1px n’en fera pas visuellement 2px lorsque les cellules sont adjacentes.
UNITES DE MESURE
ABSOLUES
Les unités absolues s’appuie sur des dimensions réelles. Il existe plusieurs unités de longueurs absolues :
-
pt, point (mesure typographique). Le point est égal à 1/72 de pouce.
pc, pica (mesure typographique). Un pica est égal à 12 points.
in, pouce (inch). Un pouce est égal à 2.54 cm, 6 picas est égal à pouce.
cm, centimètre
mm, millimètre
RELATIVES
Il existe plusieurs unités de longueurs relatives :
-
px, une quantité de pixels, en fonction de l'appareil de visualisation.
em, m-length.
ex, x-height.
%, en fonction de la valeur de la propriété du parent.
L'unité relative em se base sur la hauteur de la police (fonte).
L'unité relative em est nommée "cadratin" en typographie française. Anciennement le cadratin correspond à la
hauteur d'un caractère de plomb utilisé dans l'imprimerie.
Par défaut, l'unité relative em prendra comme hauteur de la taille de police (font) du navigateur spécifiée par
défaut ou par l'utilisateur (via la roulette de la souris / affichage->taille de texte). Autrement, l'unité relative em
se basera sur la valeur de font-size du bloc parent. L'unité relative em ne varie pas suivant la fonte (police).
En règle générale notre navigateur est paramétré sur une taille moyenne ce qui correspond à la valeur de fontsize medium (pour le w3c), cependant cette valeur par défaut varie suivant le navigateur par exemple Internet
explorer à une valeur à small.
Dans le cas d'éléments imbriqués l'unité relative em se base sur la valeur de 'font-size' du bloc parent.
L'unité relative 1em correspond à 100% de la taille de la police par défaut. L'unité relative 1.2em correspond à
120% de la taille de la police par défaut. L'unité relative 0.7em correspond à 70% de la taille de la police par
défaut. Mettre vos tailles de polices en unité relative em améliore l'accessibilité de vote site web.
PRIORITES DES SELECTEURS
Pour permettre la cascade des styles, des règles de calcul de spécificité permettent au moteur de rendu CSS de
déterminer le degré de priorité à appliquer à différents sélecteurs visant concurremment un même élément, et
de trier ainsi les règles à lui appliquer. Ce calcul repose sur la somme des valeurs données aux différents
sélecteurs simples formant le sélecteur contextuel :
-
chaque type de sélecteur simple a sa valeur de priorité : 0,0,0,1 pour un élément, 0,0,1,0 pour une
classe, 0,1,0,0 pour un identifiant unique id.
la mention !important ajoutée dans la règle donne une spécificité de 1,0,0,0.
l'origine du style est déterminante en dernier ressort : un attribut style présent dans le document
HTML a la priorité sur les autres sources de styles auteur, afin de permettre les surcharges locales des
styles communs à une série de pages web. D'autre part, à priorités égales, un style utilisateur
l'emporte sur un style auteur, qui l'emporte sur le style par défaut de l'agent utilisateur.
POINT SUR LES SELECTEURS
Les sélecteurs sont utilisés à longueur de journée pour le CSS, mais souvent mal maitrisés. Voici une synthèse
d’un article de NetTuts : http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-mustmemorize/
Les sélecteurs compatibles IE9, issus du CSS3, ne sont pas présentés dans cette synthèse. Il est intéressant de
les connaitre car ils sont compatibles avec jQuery.
SELECTEURS COMPATIBLES IE6
1. *
* {
margin: 0;
padding: 0;
}
Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.
The star symbol will target every single element on the page. Many developers will use this trick to zero out the
margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production
code. It adds too much weight on the browser, and is unnecessary.
The * can also be used with child selectors.
#container * {
border: 1px solid black;
}
This will target every single element that is a child of the #container div. Again, try not to use this technique
very much, if ever.
2. #X
#container {
width: 960px;
margin: auto;
}
Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage,
however be cautious when using id selectors.
Ask yourself: do I absolutely need to apply an id to this element in order to target
it?
id selectors are rigid and don’t allow for reuse. If possible, first try to use a tag name, one of the new HTML5
elements, or even a pseudo-class.
3. .X
.error {
color: red;
}
This is a class selector. The difference between ids and classes is that, with the latter, you can target multiple
elements. Use classes when you want your styling to apply to a group of elements. Alternatively, use ids to find
a needle-in-a-haystack, and style only that specific element.
4. X Y
li a {
text-decoration: none;
}
The next most comment selector is the descendant selector. When you need to be more specific with your
selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the
anchors which are within an unordered list? This is specifically when you’d use a descendant selector.
Pro-tip – If your selector looks like X Y Z A B.error, you’re doing it wrong. Always
ask yourself if it’s absolutely necessary to apply all of that weight.
5. X
a { color: red; }
ul { margin-left: 0; }
What if you want to target all elements on a page, according to their type, rather than an id or classname?
Keep it simple, and use a type selector. If you need to target all unordered lists, use ul {}.
19. X:HOVER
div:hover {
background: #e3e3e3;
}
Oh come on. You know this one. The official term for this is user action pseudo class. It sounds confusing, but it
really isn't. Want to apply specific styling when a user hovers over an element? This will get the job done!
Keep in mind that older version of Internet Explorer don't respond when the
:hover pseudo class is applied to anything other than an anchor tag.
You'll most often use this selector when applying, for example, a border-bottom to anchor tags, when hovered
over.
a:hover {
border-bottom: 1px solid black;
}
Pro-tip - border-bottom: 1px solid black; looks better than text-decoration:
underline;
21. X::PSEUDOELEMENT
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the
first letter. Keep in mind that these must be applied to block level elements in order to take effect.
A pseudo-element is composed of two colons: ::
TARGET THE FIRST LETTER OF A PARAGRAPH
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
This snippet is an abstraction that will find all paragraphs on the page, and then sub-target only the first letter
of that element.
This is most often used to create newspaper-like styling for the first-letter of an article.
TARGET THE FIRST LINE OF A PARAGRAPH
p:first-line {
font-weight: bold;
font-size: 1.2em;
}
Similarly, the ::first-line pseudo element will, as expected, style the first line of the element only.
"For compatibility with existing style sheets, user agents must also accept the
previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2
(namely, :first-line, :first-letter, :before and :after). This compatibility is not
allowed for the new pseudo-elements introduced in this specification." - Source
SELECTEURS COMPATIBLES IE7
6. X:VISITED AND X:LINK
a:link { color: red; }
a:visted { color: purple; }
We use the :link pseudo-class to target all anchors tags which have yet to be clicked on.
Alternatively, we also have the :visited pseudo class, which, as you’d expected, allows us to apply specific
styling to only the anchor tags on the page which have been clicked on, or visited.
7. X + Y
ul + p {
color: red;
}
This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the
former element. In this case, only the first paragraph after each ul will have red text.
8. X > Y
div#container > ul {
border: 1px solid black;
}
The difference between the standard X Y and X > Y is that the latter will only select direct children. For
example, consider the following markup.
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container.
It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator. In fact, it’s recommended
particularly when working with JavaScript-based CSS selector engines.
9. X ~ Y
ul ~ p {
color: red;
}
This sibling combinator is similar to X + Y, however, it’s less strict. While an adjacent selector (ul + p) will only
select the first element that is immediately preceded by the former selector, this one is more generalized. It
will select, referring to our example above, any p elements, as long as they follow a ul.
10. X[TITLE]
a[title] {
color: green;
}
Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title
attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more
specific? Well…
11. X[HREF="FOO"]
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
The snippet above will style all anchor tags which link to http://net.tutsplus.com; they’ll receive our branded
green color. All other anchor tags will remain unaffected.
Note that we’re wrapping the value in quotes. Remember to also do this when
using a JavaScript CSS selector engine. When possible, always use CSS3 selectors
over unofficial methods.
This works well, though, it’s a bit rigid. What if the link does indeed direct to Nettuts+, but, maybe, the path is
nettuts.com rather than the full url? In those cases we can use a bit of the regular expressions syntax.
12. X[HREF*="NETTUTS"]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
There we go; that’s what we need. The star designates that the proceeding value must appear somewhere in
the attribute’s value. That way, this covers nettuts.com, net.tutsplus.com, and even tutsplus.com.
Keep in mind that this is a broad statement. What if the anchor tag linked to some non-Envato site with the
string tuts in the url? When you need to be more specific, use ^ and &, to reference the beginning and end of a
string, respectively.
13. X[HREF^="HTTP"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Ever wonder how some websites are able to display a little icon next to the links which are external? I’m sure
you’ve seen these before; they’re nice reminders that the link will direct you to an entirely different website.
This is a cinch with the carat symbol. It’s most commonly used in regular expressions to designate the
beginning of a string. If we want to target all anchor tags that have a href which begins with http, we could use
a selector similar to the snippet shown above.
Notice that we’re not searching for http://; that’s unnecessary, and doesn’t account for the urls that begin with
https://.
Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let’s search for
the end of the string.
14. X[HREF$=".JPG"]
a[href$=".jpg"] {
color: red;
}
Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we’re searching for all
anchors which link to an image — or at least a url that ends with .jpg. Keep in mind that this certainly won’t
work for gifs and pngs.
15. X[DATA-*="FOO"]
a[data-filetype="image"] {
color: red;
}
Refer back to number eight; how do we compensate for all of the various image types: png, jpeg,jpg, gif? Well,
we could create multiple selectors, such as:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
But, that’s a pain in the butt, and is inefficient. Another possible solution is to use custom attributes. What if
we added our own data-filetype attribute to each anchor that links to an image?
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
Then, with that hook in place, we can use a standard attributes selector to target only those anchors.
a[data-filetype="image"] {
color: red;
}
16. X[FOO~="BAR"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Here’s a special one that’ll impress your friends. Not too many people know about this trick. The tilda (~)
symbol allows us to target an attribute which has a spaced-separated list of values.
Going along with our custom attribute from number fifteen, above, we could create a data-info attribute,
which can receive a space-separated list of anything we need to make note of. In this case, we’ll make note of
external links and links to images — just for the example.
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
With that markup in place, now we can target any tags that have either of those values, by using the ~
attributes selector trick.
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
Pretty nifty, ay?
26. X:FIRST-CHILD
ul li:first-child {
border-top: none;
}
This structural pseudo class allows us to target only the first child of the element's parent. You'll often use this
to remove borders from the first and last list items.
For example, let's say you have a list of rows, and each one has a border-top and a border-bottom. Well, with
that arrangement, the first and last item in that set will look a bit odd.
Many designers apply classes of first and last to compensate for this. Instead, you can use these pseudo classes.
SELECTEURS COMPATIBLES IE8
18. X:AFTER
The before and after pseudo elements kick butt. Every day, it seems, people are finding new and creative ways
to use them effectively. They simply generate content around the selected element.
Many were first introduced to these classes when they encountered the clear-fix hack.
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
This hack uses the :after pseudo element to append a space after the element, and then clear it. It's an
excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't
possible.
For another creative use of this, refer to my quick tip on creating shadows.
According to the CSS3 Selectors specification, you should technically use the
pseudo element syntax of two colons ::. However, to remain compatible, the useragent will accept a single colon usage as well.
CIBLER LE DISPOSITIF DE VISUALISATION
@MEDIA
DEFINITION
Le média va vous permettre de spécifier le support pour lequel est destiné un ensemble de propriétés css.
Par exemple, vous pouvez avoir des propriétés css destinées à l'affichage sur l'écran et d'autres propriétés css
destinées à l'impression de la page.
Exemple de code :
<style media="screen">/*Affichage écran*/</style>
<style media="print">/*impression*/</style>
COMMENT LE SPECIFIER?
Vous pouvez spécifier un ou des médias grâce à l'attribut HTML ou XHTML MEDIA :
Exemple de code :
<link media="print" href="macss.css"/>
<style media="screen,print">
</style>
Vous pouvez spécifier un ou des médias dans la css même grâce à la règle @import ou @media :
Exemple de code :
@import url("testimport.css");
@media screen, print{}
LES TYPES LES PLUS COURANTS
-
all, convient pour tous les appareils ;
screen, pour principalement les moniteurs couleurs ;
print, destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant
impression.
handheld, pour les appareils portatifs (typiquement ceux avec petits écrans à bande passante limitée,
type smartphone) ;
HACK CSS
De part la complexité d’interprétation et d’implémentation de certaines règles CSS, les navigateurs n’ont pas
choisis la même implémentation, ce qui peut dans des cas extrêmes provoquer des différences de rendu.
A chaque problème sa solution, il est possible notamment de profiter de bugs dans l’interprétation des
sélecteurs pour cibler un ou plusieurs navigateurs bien précis.
Le hack le plus courant, utilisé pour cibler IE6, est d’utiliser un underscore devant une propriété exclusive à ce
navigateur :
div {
height: 100px ;
_height: 80px ;
}
LES PLUS GROS BUGS ET PARTICULARITES D’ IE6 ET IE7
En débuguant vos pages pour IE 7 et surtout pour IE 6, vous observerez de nombreux comportements étranges
voir aberrants (enfin, nombreux pour un site important ou un design complexe). Les plus caractéristiques sont
des disparitions d'éléments, certains décalages inexpliqués (mais pas tous), ou des problèmes de «dessin» (où
Internet Explorer n'arrive pas à bien dessiner tout l'élément, par exemple une partie des bordures et de la
couleur de fond est invisible ou «mangée»).
TRANSPARENCE PNG
Internet Explorer 6 ne gère pas la transparence sur le PNG. A l’époque, ce n’était pas d’actualité. A l’époque
également, Microsoft prenait une part active dans le développement de nouvelles fonctionnalités liées au CSS.
Fier défenseur de DirectX, il introduit cette propriété :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale, src='image.png');
Cette propriété n’a absolument rien de standard et a la fâcheuse tendance à empêcher de cliquer sur les liens à
l’intérieur du bloc.
Un exemple de solution plus avancée : http://labs.unitinteractive.com/unitpngfix.php . Ne vous y trompez pas, en
coulisse c’est la même méthode qui est utilisée mais de façon plus intelligente.
D’autres solutions : http://www.alsacreations.com/article/lire/81-transparence-png-ie6.html
MODELE DE BLOC
Le modèle de bloc d’Internet Explorer 6 a été corrigé. Néanmoins, pour conserver la compatibilité avec Internet
Explorer 5, il existe un mode « quirks ». Voici une explication en image :
Comme vous le voyez, dans l’ancien modèle de bloc le width comprenait l’ensemble de la partie visible (donc
border et padding inclus) alors que le modèle W3C ne considère que la partie utile au contenu. C’est un peu
comme considérer que le volume d’une boite en carton se mesure à l’aspect exterieur ou la capacité de
contenance.
En CSS3, une propriété a pour vocation d’adopter ce comportement : box-sizing: border-box;
De plus, la propriété « inline-block » est disponible mais ne peut être appliquée qu’à des éléments nativement
« inline » tel les span.
HASLAYOUT
Le HasLayout est un mécanisme internet d'Internet Explorer 6 et 7, qui provoque de nombreux problèmes de
rendu (bugs d'affichage) ou à l'inverse permet d'en éviter ou corriger. C’est une spécificité du navigateur
Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses.
Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le
positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une
question de cuisine interne.
Pourquoi s'en occuper, s'il s'agit de cuisine interne? Eh bien parce que cette cuisine-là n'est pas invisible, et que
ses conséquences se font sentir dans nos pages web. En effet, ce mécanisme est lié à de nombreux bugs de
rendu d'Internet Explorer.
CONCRETEMENT, QU'EST-CE-QUE C'EST?
Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra
surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout,
soit il ne l'a pas. Et suivant le cas, l'élément en question ne réagira pas de la même manière. Dans certains
contextes, un élément ne s'affichera correctement que s'il a le layout. Dans d'autres, il faudra éviter qu'il l'ait
sous peine de voir se déclencher un bug de rendu!
Mais qui a le layout? Par défaut, la grande majorité des éléments HTML n'ont pas le layout. Un élément obtient
le layout lorsque l'on lui affecte certaines propriétés CSS. Les plus courantes sont les propriétés CSS width (avec
toute valeur autre que auto) et height (avec toute valeur autre que auto). Pour une liste exhaustive, consultez
les liens donnés précédemment.
HEIGHT ET MIN-HEIGHT
Internet Explorer 6 a une drôle de façon de gérer la propriété height. Deux problèmes principaux
-
Lorsque la hauteur est très petite (de l’ordre de 2 ou 3 px) la hauteur n’est pas respectée. Peut être
corrigé en utilisant font-size : 0
IE6 ne supporte pas min-height, par contre par défaut la propriété height a un comportement très
proche (ce qui peut s’avérer utile). Peut être résolu en utilisant overflow : hidden
CRITIQUES ET AVENIR DU STANDARD CSS
LES LIMITES DU CSS
INDEPENDANCE DE LA PRESENTATION ET DE LA STRUCTURE
CSS ambitionnait initialement l'indépendance entre structure et présentation d'un document.
Ainsi, le site du CSS Zen Garden, créé en 2003 par Dave Shea, se veut la démonstration de la possibilité de
modifier librement le rendu affiché d'une même page web, uniquement grâce à CSS et sans aucune
modification de son code HTML : il présente, en décembre 2006, 986 désigns différents de sa page d'accueil.
Cependant, la plupart de ces designs reposent en tout ou partie sur le remplacement du contenu textuel de la
page par des images CSS qui le reproduisent en enrichissant son aspect : la liberté graphique repose toujours
partiellement sur la transformation du texte en image. D'autre part, le CSS Zen Garden reste un exercice de
style limité à un document unique, à la structure doublée d'éléments et attributs sémantiquement neutres, qui
ne servent qu'à donner appui à des sélecteurs CSS.
S'il existe de nombreux exemples de documents HTML pour lesquels plusieurs feuilles de style ont été
développées, il n'existe guère d'exemples de feuilles de style génériques, indépendantes de la structure du
document. Les styles par défaut des agents utilisateurs en sont un exemple, mais limité à des effets
typographiques simples, sans définition de mise en page. En général, les feuilles de style dépendent
étroitement de la structure du document à styler et sont difficilement réutilisables sur des documents
différemment structurés. C'est davantage à travers la création de design patterns HTML CSS que s'exploite
cette indépendance potentielle des styles envers la structure spécifique des documents.
Plus généralement, les difficultés et le manque d'implémentation d'une partie des propriétés CSS limitent la
liberté de mise en page, et conduisent à l'utilisation de propriétés contraignantes quant à la structure HTML
(par exemple, la propriété float impose un ordre précis du contenu ainsi mis en colonne ; de nombreux
effets de rendu reposent d'autre part sur une surcharge de balisage sémantiquement neutre, tel que div et
span).
ACCESSIBILITE
CSS favorise l'accessibilité d'une page web en donnant en dernier ressort à l'utilisateur le contrôle du rendu
d'un document dans son navigateur : il est ainsi possible de l'adapter à des contraintes ou à des préférences
concernant par exemple la taille d'affichage des caractères ou les couleurs. En séparant structure et
présentation, CSS favorise également l'écriture de documents structurés de manière sémantique,
potentiellement plus exploitables par les aides techniques : la liberté de présentation des éléments de titrage
permet par exemple de respecter strictement l'ordre hiérarchique formel de ceux-ci, ce qui permet en retour
aux aides techniques d'en établir une table des matières navigable. Enfin, en donnant aux auteurs les moyens
d'enrichir la mise en forme du texte, CSS permet de limiter le recours aux textes mis en images.
Cependant, certaines utilisations de CSS peuvent également compromettre l'accessibilité du contenu :
-
-
en substituant à celui-ci des pseudo-contenus qui ne sont accessibles qu'aux utilisateurs qui peuvent
percevoir le rendu CSS visuel : c'est le cas par exemple des informations qui seraient véhiculées par
des images d'arrière plan.
en bouleversant la cohérence nécessaire entre l'ordre linéaire de l'information dans le contenu
structuré et l'ordre visuel du rendu CSS affiché. Les aides techniques telles que les lecteurs d'écran
-
n'ont en effet accès qu'à cet ordre linéaire : une information qui ne prendrait son sens qu'en fonction
de son positionnement CSS n'est pas compréhensible pour leurs utilisateurs.
dans une démarche d'accessibilité fondée sur la pertinence de la structure HTML, l'éventail des
possibilités de mise en forme de contenu avec CSS peut faire perdre de vue la nécessité de baliser le
contenu à l'aide d'éléments signifiants. Il est par exemple possible de délimiter visuellement une
citation en la mettant en italique ou en l'encadrant de guillemets, mais l'information sur l'origine de ce
texte ne sera perceptible, au sens des normes d'accessibilité, que via l'utilisation des éléments q ou
blockquote, qui sont les seuls permettant de définir une citation HTML et d'en indiquer la source
via l'attribut approprié (cite).
Les méthodes d'application des directives d'accessibilité des contenus web (RGAA, UWEM par exemple)
définissent donc des règles d'usages des styles CSS.
SIMPLICITE
CSS répond à une volonté de disposer d'un format de présentation simple, tant dans ses fonctionnalités que
dans sa syntaxe, afin d'en favoriser la manipulation directe par les auteurs et les utilisateurs. Cependant, cette
simplicité est remise en cause par plusieurs facteurs :
-
-
la difficulté à déterminer et à contrôler le résultat de la cascade lorsque les sources de styles se
multiplient. Le rendu final d'un contenu précis dépend de la combinaison de plusieurs feuilles et peut
alors devenir malaisé à faire évoluer. L'interdépendance des feuilles de styles peut rendre difficilement
anticipable le résultat d'une modification apportée à l'une d'elle. Les auteurs sont alors placés devant
un choix entre cette interdépendance qui optimise la quantité de code et la redondance de styles qui
facilite sa maintenance.
La difficulté à écrire des styles utilisateurs sans disposer de compétences avancées. Les utilisateurs
sont en théorie les premiers bénéficiaires des CSS, qui leur donnent la possibilité d'adapter la
présentation des pages web. Cependant, le mécanisme des styles se prête difficilement au
développement d'environnements graphiques qui faciliteraient la manipulation des propriétés CSS.
Dans la pratique, le recours aux styles utilisateur reste dès lors marginal.
UN AVANT GOUT DE CSS 3
IMPLEMENTATIONS PROP RIETAIRES (NAVIGATEU R)
Il fut un temps ou les navigateurs décidaient de nouvelles propriétés sans se soucier du standard. De nos jours
ce n’est plus le cas et les navigateurs ont choisi de porter leur proposition ou implémentations prototype au
sein d’un espace de nommage. Par exemple, la propriété « border-radius » issue du CSS3 existe sous le nom « moz-border-radius » pour Firefox. Voici une liste de correspondance :
-
Gecko/Firefox/Mozilla : -moz-property
Webkit/Safari/Chrome : -webkit-property
Opera : -o-property
Internet Explorer : -ms-property
Etant des implémentations prototype, elles diffèrent parfois du "modèle choisi par la norme. Par exemple
border-top-left-radius devient -moz-border-radius-topleft sur Firefox mais -webkitborder-top-left-radius sur Webkit.
QUELQUES PROPRIETES
Plus de détails à ces adresse :
-
http://net.tutsplus.com/tutorials/html-css-techniques/10-css3-properties-you-need-to-be-familiarwith/
http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-withcss3/
Quelques éléments en vrac :
BORDER-RADIUS
BOX-SHADOW
TEXT-SHADOW
TEXT-STROKE
MULTIPLE BACKGROUNDS
BACKGROUND-SIZE
body, html { height: 100%; }
body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}
TEXT-OVERFLOW
RESIZE
TRANSITION
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
FONT-FACE
Font-face est un mécanisme CSS supporté depuis Internet Explorer 6 (et les navigateurs récents). Il permet
d’embarquer des polices pour le rendu Web. A utiliser avec moderation (pour les titres par exemple) car c’est
un téléchargement supplémentaire.
@font-face {
font-family: 'AdobeCaslonProBold';
src: url('acaslonpro-bold-webfont.eot');
src: local('☺'), url('acaslonpro-bold-webfont.woff') format('woff'),
url('acaslonpro-bold-webfont.ttf') format('truetype'), url('acaslonprobold-webfont.svg#webfontlFGR816y') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AdobeCaslonProBoldItalic';
src: url('acaslonpro-bolditalic-webfont.eot');
src: local('☺'), url('acaslonpro-bolditalic-webfont.woff')
format('woff'), url('acaslonpro-bolditalic-webfont.ttf')
format('truetype'), url('acaslonpro-bolditalicwebfont.svg#webfonttPjETEDk') format('svg');
font-weight: normal;
font-style: normal;
}
Ensuite il suffit d’appeler la police normalement :
div.titre { font-family : "AdobeCaslonProBoldItalic", serif; }
Le lien vers le générateur : http://www.fontsquirrel.com/fontface/generator
MODELES DE BOITE FLEXIBLE
Plus de détails à cette adresse : http://jeremie.patonnier.net/post/2009/11/10/Le-modele-de-boite-flexible-enCSS-3
The Flexible Box Model, will finally allow us to get away from those mangy floats. Though it takes a bit of
work to wrap your head around the new properties, once you do, it all should make perfect sense.
Let’s construct a quick demo, and create a simple two-column layout.
<div id="container">
<div id="main"> Main content here </div>
<aside> Aside content here </aside>
</div>
Now for the CSS: we first need to instruct the container to be treated as a box. I’ll also apply a generic
width and height, since we don’t have any actual content in play.
#container {
width: 960px;
height: 500px; /* just for demo */
background: #e3e3e3;
margin: auto;
display: -moz-box;
display: -webkit-box;
display: box;
}
Next, let’s apply, for the demo, unique background colors to the #main div, and the aside.
#main {
background: yellow;
}
aside {
background: red;
}
At this point, there’s not much to look at.
One thing worth noting, though, is that, when set to display: box mode, the child elements will take up all
vertical space; this is the default box-align value: stretch.
Watch what happens when we explicitly state a width on the #main content area.
#main {
background: yellow;
width: 800px;
}
Well that’s a bit better, but we still have this issue where the aside isn’t taking up all of the remaining space.
We can fix this by using the new box-flex property.
box-flex instructs the element to take up all available space.
aside {
display: block; /* cause is HTML5 element */
background: red;
/* take up all available space */
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
With this property in place, regardless of the width of the #main content area, the aside will consume every
spec of available space. Even better, you don’t have to worry about those pesky float issues, like elements
dropping below the main content area.
We’ve only scratched the surface here. Refer the Paul Irish’s excellent article for more information. Also, be
careful when using this method, as it’s not fully supported, of course, in older browsers. In those cases, you can
use feature detection or Modernizr to detect support, and provide the necessary fallbacks.
BONUS : LESSCSS
As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use
existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.
VARIABLES
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style
sheet, making global changes as easy as changing one line of code.
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
MIXINS
Mixins allow you to embed all the properties of a class into another class by simply including the class name as
one of its properties. It's just like variables, but for whole classes. Mixins can also behave like functions, and
take arguments, as seen in the example bellow.
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
NESTED RULES
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside
other selectors. This makes inheritance clear and style sheets shorter.
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
OPERATIONS
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide
and multiply property values and colors, giving you the power to do create complex relationships between
properties.
@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}