CSS

 

W3C : le garant des standards

Le W3C (World Wide Web Consortium) est un organisme mondial créé par Tim Berners-Lee dont l’objectif
est de garantir la pérennité et l’interopérabilité des standards de langage web. Composé de la plupart des
acteurs de la toile (Microsoft, Mozilla, Opera, IBM, …), le W3C a pour charge de rédiger et proposer les
spécifications HTML, XHTML, CSS, SVG, ECMAScript, etc.
*********************

 *********************
Priorité:

1. Poids « a » : règle CSS déclarée à l’aide de l’attribut HTML style= au sein de l’élément.
2. Poids « b » : sélecteur d’identifiant (id).
3. Poids «  c  »  : sélecteur de classe, d’attribut  ([]) ou de pseudo-classe (:hover,  :focus,
:first-child).
  4. Poids « d » : sélecteur d’élément (p, div, a,…) ou de pseudo-élément (:first-letter, :before,
:after, :first-line).
  5. Poids nul : sélecteur joker (*), de parenté (>) ou d’adjacence (+).
*********************

* une déclaration suivie du mot-clé !important devient préférentielle

*********************
Pseudo-Element :

#ariane:before {content: "Vous êtes ici : ";} /* à appliquer sur l’élément <ul
id="ariane"> */
Séparateurs « > » entre chaque élément du fil d’Ariane
#ariane li {display: inline}
#ariane li + li:before { content: "> "; }
Guillemets ouvrants au début d’un bloc de citation
blockquote:before {content: open-quote;}
Guillemets fermants à la fin d’un bloc de citation
blockquote:after {content: close-quote;}
Images de fond affichées avant et après chaque paragraphe
p:before {
  content: url(images/arrondi_haut.png);
}
p:after {
  content: url(images/arrondi_bas.png);
}
*********************
attr :

Partie HTML
<a href="http://www.alsacreations.com" title="s'ouvre dans une nouvelle fenêtre"
target="_blank">Le site d'Alsacréations</a>
Partie CSS
a[title]:after { /* on ne cible que les liens disposant d'un attribut title */
  content: " (" attr(title) ")"; /* on affiche la valeur de title à la suite du lien */
}

a[hreflang="fr"]:after { /* on ne cible que les liens disposant d'un attribut hreflang
➥ dont la valeur est « fr » */
  content: url(img/flag_fr.png); /* on affiche une image de drapeau */
}
*********************
@:

@import url(css/print.css) print;

@media
 
La règle @media indique qu’un bloc de règles ne concernera que des périphériques de sortie
déterminés. Par exemple, certains styles peuvent être définis pour l’écran uniquement, d’autres
pour l’impression :
@media screen
{
  body {background: url(img/wallpaper.jpg) center top;}
}
@media print
{
  body {background: #fff; color: #000;}
}

Les différents types de médias communément reconnus sont :
•  all (l’ensemble des médias possibles) ;
•  aural et speech (synthèses vocales) ;
•  handheld (mobiles) ;
•  print (imprimantes) ;
•  projection (projecteurs) ;
•  screen (écrans d’ordinateurs).
*********************



*********************
HTML avec microformats

<div class="vcard"> <!-- appel au format hCard -->
  <ul class="adr">  <!-- propriété globale d’adresse hCard -->
    <li class="fn org name">Alsacréations</li>
    <li class="title">Agence web exotique</li>
    <li class="street-address">5, rue des Couples</li>
    <li><span class="postal-code">67000</span>  <span class="locality">Strasbo
        </span> <span class="country-name">France</span></li>
  </ul>
  <p class="email">contact@alsacreations.fr</p>  <!-- classe hCard d’e-mail --
  <p class="tel">Tél. xx xx xx xx xx</p>  <!-- classe hCard de téléphone -->
  <p class="social url">   <!-- classes hCard de type social et de lien -->
    <a href="http://twitter.com/alsacreations">Twitter</a>
  </p>
</div>
*********************

Ordre préferé:

  1. Contenu créé : les propriétés afférentes au contenu créé via :after et :before (content, coun-
ter, quotes).
  2. Propriété display : tout ce qui affecte le rendu par défaut de l’élément (none, block, inline,
inline-block, table, table-cell, table-row, box, list-item).
  3. Positionnement : tout ce qui détermine la position de l’élément (position, float, top, right,
bottom, left, vertical-align, z-index, clear).
  4. Modèle de boîte : tout ce qui influe sur les dimensions de l’élément (width, height, min-width,
min-height, max-width, max-height, padding, margin, border, overflow).
  5. Transformations et transitions  : propriétés et valeurs CSS 3 (transform, rotate, scale,
skew, transition).
  6. Typographie  : tout ce qui détermine les caractéristiques de la police de caractères (font,
text-align, text-decoration, letter-spacing, text-indent, line-height, text-transform,
white-space, word-wrap).
  7. Décoration : les propriétés purement ornementales (background, color, list-style, outline).
*********************

Bien Commenter:

/* ----------------------------- */
/*  =     Header                 */
/* ----------------------------- */
Toujours dans l’optique de mieux appréhender un projet en commun, CSSdoc (www.cssdoc.net)
propose une convention à appliquer au sein des commentaires d’un document CSS. Toute per-
sonne partageant des fichiers CSS, qu’elle soit intégrateur, développeur ou créatif, peut tirer
bénéfice de cette recommandation née en 2008.
**********************
supprimer toutes les marges et retraits internes des éléments à l’aide du sélecteur universel étoile:

* {
  margin: 0;
  padding: 0;
}
*********************
Quelques règles utiles:

Voici une liste de quelques règles à suivre dans la mesure du possible :
•  N’utilisez pas de sélecteur universel (caractère étoile). Exemple à éviter : * {margin: 0;}.
•  Limitez le nombre de sélecteurs de descendance (caractère espace). Privilégiez #header a à
#header ul li a.
•  Choisissez si possible le sélecteur d’enfant (>) plutôt que le sélecteur de descendance (carac-
tère espace). Préférez #header  >  img à #header  img, tout en tenant compte que ce sélecteur
n’est pas reconnu par IE6.
•  Autant que possible, utilisez un identifiant, une classe ou un sélecteur d’élément, mais pas
une combinaison de deux ou trois. Préférez #header a à div#header menu a.lien.
•  Évitez de faire précéder un identifiant par le nom de l’élément ciblé (idem pour les classes).
Préférez #nav à ul#nav.

*********************
Conseils:

 *********************

Fusion des marges(verticales):

Dans les différents cas suivants, la fusion des marges ne s’applique pas entre un parent et son
enfant :
•  Lorsqu’une bordure est appliquée sur le parent. Une simple bordure haute ou basse suffit e
il est possible de rendre cette bordure invisible avec une déclaration de type border-top: 1px
solid transparent, qui est reconnue depuis IE7. Attention, toutefois, à ne pas oublier que la
largeur de la bordure compte dans le calcul des dimensions de la boîte.
•  Lorsqu’une marge interne (padding) haute ou basse est appliquée au parent. Là aussi, un
simple padding-top: 1px fonctionne, mais doit être pris en compte dans la hauteur du parent
Cette astuce fonctionne sur tous les navigateurs.
•  Lorsqu’un contenu orphelin (non balisé) est introduit avant le premier enfant : n’importe que
texte brut, ou caractère, empêche alors la fusion de marges.
•  Lorsque la déclaration overflow:  hidden ou overflow:  auto est appliquée sur le parent. Cette
solution est intéressante, mais a d’autres conséquences (empêche le dépassement des flot
tants, peut cacher les contenus qui dépassent ou faire apparaître des barres de défilement). À
utiliser avec prudence.
•  Lorsque le parent est positionné hors du flux (position absolue, fixée ou flottement). Il s’agi
là aussi d’une manœuvre séduisante, mais qui a des répercussions sur l’ensemble du design
de votre page web.
***************************
Display:

***************************
Feuille de styles par défaut fournie par la spécification CSS 2.1:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group}
tbody           { display: table-row-group }
tfoot           { display: table-footer-group}
col             { display: table-column }
colgroup        { display: table-column-group}
td, th          { display: table-cell }
caption         { display: table-caption }
input, select   { display: inline-block }
*********************
Position:absolue :

Un élément positionné en absolu se place par rapport à son premier ancêtre positionné
Le principe est le suivant : le bloc positionné en absolu remonte toute sa branche au sein de la
hiérarchie dans le code HTML. Il vérifie si son parent est « positionné », c’est-à-dire s’il est
muni de la propriété position avec une valeur autre que static. Si tel n’est pas le cas, il remonte
d’une génération et ainsi de suite jusqu’à trouver un ancêtre positionné. En dernier recours, si
l’élément positionné absolument ne rencontre aucun ancêtre positionné, son référent est l’élé-
ment racine <html>.
Nous comprenons, grâce à cette règle, qu’il devient aisé d’indiquer une référence à un bloc
absolu  : il suffit d’appliquer une déclaration position:  absolute, position:  fixed ou posi-
tion: relative à cet élément de référence (figure 4-16).
*******************
Notez que seuls les éléments « positionnés » peuvent être affectés par cette propriété d’empilement
z-index.
*******************
Étirer un élément :

Dans le cas où l’élément absolu est « dimensionné » à l’aide de ses paires contraires, il devient
possible d’occuper 100 % de la largeur tout en bénéficiant de padding et de border :
#header {
  position: absolute;
  left: 0; right: 0; /* s’étend sur toute la largeur  */
  padding: 20px; /* le padding est inclus à l’intérieur  */
  background: #abc;
}
****************************

Positionnement fixé :

•  Un élément est dit fixé lorsqu’il bénéficie de la déclaration position: fixed.
•  Puisqu’on lui applique une propriété position, l’élément est dit « positionné » (il sert donc de
référent aux éléments positionnés en absolu).
•  Un bloc fixé sort du flux et se place dans un autre plan, laissant les éléments en flux se réor-
ganiser entre eux.
•  La boîte d’un élément fixé devient dimensionnable, à l’instar des éléments absolus.
Le positionnement fixé se distingue principalement de son cousin absolu de par sa particularité
de rendu  : un élément fixé demeure ancré à l’écran même lorsque l’utilisateur fait défiler le
contenu à l’aide des ascenseurs (scrollbars).
En termes de localisation, et lorsque les propriétés top, right, bottom et left sont précisées, l’élé­
ment fixé est toujours positionné par rapport à la partie visible de la fenêtre du navigateur, quel
que soit son ancêtre, fût-il positionné.
***************************

Positionnement relatif :

Troisième et petit frère de la famille, le positionnement relatif porte à mon sens très mal son
nom, tout simplement parce qu’il ne représente en aucune manière un positionnement tel qu’il a
été défini jusque là, mais un simple décalage.
Un élément positionné relativement se place par rapport à sa position classique dans le flux,
puis est éventuellement décalé si au moins une des propriétés top, right, bottom ou left est
renseignée. La notion de « relatif » s’applique par conséquent à son emplacement initial dans le
flux (figure 4-20).
Contrairement aux schémas absolus et fixés, les propriétés top, right, bottom et left ne servent
plus à indiquer un emplacement, mais un décalage par rapport à la position initiale.
Un élément relatif demeure dans le flux et continue à interagir avec les autres éléments voisins.
D’ailleurs, l’espace laissé par un élément décalé en relatif ne peut pas être occupé par d’autres
éléments, car il est toujours censé l’occuper (figure 4-21).
****************************

Positionnement flottant :

La propriété float apparaît dès CSS 1, classée dans les « modèles de mise en forme », tels que
inline et block (un peu comme si l’idée avait été de créer une règle de type display: float).
Le principe de base est pourtant élémentaire : un élément flottant est ôté du flux et placé à l’ex­
trême gauche (float: left) ou droite (float: right) de son conteneur, tout en demeurant sur sa
hauteur de ligne initiale dans le flux.
-Cela signifie qu’un parent ne contenant que des flottants n’occupera physiquement aucune sur-
face à l’écran,
**************************
Priorité entre les propriétés display, float et position :

  1. Si display: none est appliqué, alors l’élément ne crée pas de boîte et les propriétés position
et float ne sont pas employables.
  2. Sinon, si une propriété position est appliquée et a pour valeur absolute ou fixed, ce schéma
devient prioritaire, la valeur de la propriété float est forcée à none et l’élément est placé selon
les éventuelles valeurs de top, right, bottom et left.
  3. Sinon, si une propriété float est appliquée avec la valeur left ou right, l’élément devient
flottant.
  4. Sinon, l’élément est disposé selon son mode de rendu par défaut inhérent à la propriété dis-
play (inline, block, list-item, etc.).
**************************
Parmi les schémas de positionnement offrant la possibilité de placer deux éléments dimension-
nés côte à côte, citons display:  inline-block et display:  table-cell
**************************

Astuce inline-block:

Dans la feuille de styles CSS classique
element {
  display: inline-block;
}
Dans une feuille de styles CSS conditionnelle pour les versions d’IE antérieures à IE8
element {  /* @bugfix inline-block sur IE6/IE7 */
  display: inline;
  zoom: 1; /* donner le layout */
}
*************************
Supprimer les whitespace directement au sein du code :

<div>
  <p>Lorem Elsass ipsum</p><p>réchime amet sed bissame so libero knackes
choucroute...</p><p>Hopla kuglopf flammekueche</p> /* plus de whitespace entre les
éléments */
</div>
************************
Display:table :

Partie HTML
<div id="header">en-tête</div>
<div id="main">
  <p id="menu">ici le menu</p>
  <p id="content">ici le contenu</p>
  <p id="news">ici les news</p>
</div>
<div id="footer">pied de page</div>
Partie CSS
#header {
  background: #555;
  color: white;
}
#main {
  display: table;
  width: 100%;
}
#menu, #news {
  width: 25%;
  display: table-cell
  background: #bbb;
}
#content {
  display: table-cell
}
#footer {
  background: #555;
  color: white;
}

**********************

Construire un Tableau :

#main {
  display: table;
  border-collapse: separate; /* pour apercevoir les séparations */
  border-spacing: 4px;
}
.row {
  display: table-row;
}
.row > div {  /* les div de premier niveau uniquement */
  display: table-cell;
  padding: 1em;
  background-color: #abc;
}



***************************
Le modèle de boîte flexible:



Partie HTML
<div id="main">
  <p>une boîte</p>
  <p>encore une boîte</p>
  <p>et encore une troisième boîte</p>
  <p>et hop !</p>
</div>


Partie CSS
#main {
  display: -moz-box;
  display: -webkit-box;
  display: box;
}
Empilement vertical ou horizontal :



#main {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  -moz-box-orient: vertical;

  -webkit-box-orient: vertical;
  box-orient: vertical;
}
Ordre d’empilement :




#main {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -moz-box-direction: reverse;
  -webkit-box-direction: reverse;
  box-direction: reverse;
}
************************

#main > p {
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

#main > p:last-child {
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  box-ordinal-group: 1;
}
***********************

Flexibilité : remplir l’espace :

Une boîte devient flexible à partir du moment où elle se voit attribuer la propriété box-flex avec
une valeur supérieure ou égale à 1. Elle s’étend alors sur toute la surface disponible restante au
sein de son parent .

#main {
  ...
  width: 100%;
}
#main > p:first-child {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}
*************************

ul {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center; /* alignement vertical */
  -moz-box-align: center;
  box-align: center;
  -webkit-box-pack: center; /* alignement horizontal */
  -moz-box-pack: center;
  box-pack: center;
}
*************************
Les différents schémas de positionnement CSS :


*************************

Astuces:


#toto { /* Pour IE6/IE7 et les anciens navigateurs */
  display: inline;
  zoom: 1;
}
:lang(fr) #toto {  /* Pour les navigateurs modernes et IE8 */
  display: inline-block;
}


<!--[if IE]>
  ici votre code HTML réservé à IE
<![endif]-->


<!--[if IE 6]> pour IE6 uniquement <![endif]-->
<!--[if gt IE 6]>   pour   les   versions   supérieures   à   IE 6   <![endif]-->
<!--[if gte IE 6]>   pour   les   versions   supérieures   ou   égales   à   IE 6   <![endif] -- >
<!--[if lt IE 8]>   pour   les   versions   inférieures   à   IE 8   <![endif]-->
<!--[if lte IE 8]> pour les versions inférieures ou égales à IE 8   <![endif]-->




<!--[if (gte IE 6)&(lte IE 8)]> entre les versions IE 6 et IE 8 uniquement <![endif]
-->
<!--[if (IE 6)|(IE 8)]> pour les versions IE 6 ou IE 8 uniquement <![endif]-->
<!--[if !IE]><!--> pour les navigateurs non IE <!--<![endif]-->


<link rel="stylesheet" href="styles.css" type="text/css" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="styles_ie.css" type="text/css" />
<![endif]-->


<!--[if lte IE 7]>   <body   class="ie7">   <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->