CSS les fondamentaux
Empêcher les flottants de dépasser de leur conteneur ( floats) : La propriété overflow Avantage: technique efficace, tient en une ligne. Inconvénient: lorsqu'on veut faire dépasser certains éléments du conteneur (par exemple un contenu court ou un élément de décoration), le overflow:hidden est gênant car il masque tout ce qui dépasse.term-62
#conteneur { overflow: hidden; /* Empêche le dépassement des flottants. */ }
inline-block
.box { display: inline-block; width: 200px; height: 100px; margin: 1em; }
Le système de notation
0,0,0 : sélecteur universel *, et style du navigateur 0,0,1 : sélecteur CSS div, p 0,1,0 : une classe .my-class 0,1,0 : une sélecteur d'attribut [class*="col-"] 0,1,0 : une pseudo-classe :only-of-type 1,0,0 : un ID #my-id 1,0,0,0: un style en ligne <ul style="padding: 0;">...</ul> 1,0,0,0,0 : le bazooka !important
Empêcher les flottants de dépasser de leur conteneur ( floats) : La propriété clear Avantage: technique éprouvée, pas ou peu d'effets indésirables. Inconvénient: il faut ajouter un élément «inutile» dans le code HTML.
<div id="conteneur"> <div class="colonne">...</div> <div class="colonne">...</div> <div class="colonne">...</div> <div class="clear"></div> </div><--#conteneur--> Notre code CSS devient: #conteneur { /* Rien de spécial ici. */} #conteneur > .clear { clear: both; height: 0; overflow: hidden; /* Précaution pour IE 7 */ }
Empêcher les flottants de dépasser de leur conteneur ( floats) : clearfix Avantage: pas d'élément rajouté dans le HTML, et pas ou peu d'effets indésirables. Inconvénient: en inspectant une page avec les outils pour développeur (Firebug, Web Inspector, etc.), les pseudo-éléments ne sont pas visibles. Sans relire le fichier CSS lui-même, on ne peut pas savoir que cette technique est utilisée. Enfin, cette technique est compatible avec tous les navigateurs récents (dont IE 8), mais pas avec IE 7.
<div id="conteneur"> <div class="colonne">...</div> <div class="colonne">...</div> <div class="colonne">...</div> </div><--#conteneur--> Et en CSS, on va générer un pseudo-élément qui va se rajouter à la fin de notre conteneur: #conteneur { /* Rien de spécial ici. */ } #conteneur::after { content: ""; /* Important, sinon l'élément n'est pas généré. */ display: table; clear: both; }
Clearfix, version Sass
@mixin clearfix { // Pour les navigateurs modernes &:before, &:after { content:""; display:table; } &:after { clear:both; } // Pour IE 6/7 (trigger hasLayout) &{ zoom:1; } } .group { @include clearfix; }
#main { width: 600px; margin: 0 auto; }
Attribuer une width à un élément block-level l'empêchera de s'étirer sur toute la largeur de son conteneur. Ensuite vous pouvez mettre la valeur auto aux propriétés margin-right et margin-left pour centrer horizontallement cet élément à l'intérieur de son conteneur.
background-repeat
Background-repeat: repeat-x L'image se répète horizontalement background-repeat: repeat-y L'image se répète verticalement background-repeat: repeat L'image se répète horizontalement et verticalement background-repeat: no-repeat L'image ne se répète pas
align-content: flex-start | flex-end | center | space-between | space-around | stretch l'ensemble est aligné sur l'axe Y
Cette propriété aligne les lignes d'un container flex à l'intérieur de l'espace où il reste de l'espace sur l'axe cross, un peu comme justify-content aligne les items sur l'axe principal. Note : cette propriété n'a pas d'effet quand la flexbox n'a qu'une seule ligne. flex-start : lignes regroupées au début du container flex-end : lignes regroupées à la fin du container center : lignes regroupées au centre du container space-between : les lignes sont réparties, la première est collée du côté start, la dernière du côté end. space-around : les lignes sont réparties avec un espacement égal autour de chacune. stretch (par défaut) : les lignes s'étirent pour remplir tout l'espace.
align-items: flex-start | flex-end | center | baseline | stretch sur l'axe Y
Cette propriété définit comment par défaut les items d'une ligne sont disposés le long de l'axe "Y". On peut le voir comme la version de justify-content pour "cross axis". flex-start : l'item est placé au début de la ligne cross-start. flex-end : la marge "cross-end" de l'item est placée sur la ligne cross-end center : les items sont centrés sur l'axe cross baseline : les items sont alignés sur leur ligne de base stretch (par défaut) : les items sont étirés jusqu'à remplir le container (tout en respectant min-width/max-width)
justify-content: flex-start | flex-end | center | space-between | space-around sur l'axe X
Cette propriété définit l'alignement le long de l'axe principal. Elle permet de distribuer l'espace excédentaire lorsque tous les items flex sur une ligne sont inflexibles ou lorsqu'ils ont atteint leur taille maximale. Elle contrôle aussi l'alignement des items lorsqu'ils débordent. flex-start (par défaut) : les items sont regroupés en début de ligne flex-end : les items sont regroupés en fin de ligne center : les items sont centrés le long de la ligne space-between : les items sont répartis sur la ligne; le premier est collé du côté start, le dernier du côté end. space-around : les items sont répartis sur la ligne avec un espacement égal autour de chacun.
propriéts des items : flex-grow
Cette propriété définit la possibilité pour un item de grandir, si nécessaire. Elle accepte une valeur sans unité qui sert de proportion. Elle dicte l'espace que peut prendre l'item à l'intérieur de l'espace disponible dans le flex container. Si tous les items ont flex-grow défini à 1, chaque enfant aura le même espace dans le container. Si vous donnez à l'un des enfants une valeur de 2, cet enfant prendra deux fois plus de place que les autres. flex-grow: <nombre entier> (par défaut = 0)
propriéts des items : flex-shrink
Cette propriété définit la possibilité pour un item flex de rétrécir si nécessaire. flex-shrink: <nombre entier> (par défaut = 1)
propriéts des items : flex-basis
Cette propriété définit la taille par défaut d'un élément avant que l'espace restant soit réparti. flex-basis: <longueur> | auto (par défaut = auto)
flex-wrap
Cette propriété définit si le container comprend une seule ligne ou plusieurs et la direction sur l'axe perpendiculaire (cross-axis), qui détermine la direction dans laquelle les nouvelles lignes seront empilées. flex-wrap: nowrap | wrap | wrap-reverse nowrap : (valeur par défaut) sur une seule ligne, de gauche à droite dans un système ltr, sinon l'inverse. La ligne peut déborder de son contenant. wrap : multiligne, de gauche à droite dans un système ltr, sinon l'inverse. Pas de débordement, on passe à la ligne. wrap-reverse : multiligne, de droite à gauche dans un système ltr, sinon l'inverse.
flex-flow
Cette propriété est un raccourci des propriétés "flex-direction" et "flex-wrap" qui ensemble définissent les axes "main" et "cross" du container flex. La valeur par défaut est row nowrap. flex-flow: <'flex-direction'> || <'flex-wrap'>
propriéts des item : align-self
Cette propriété permet à des items flex de passer outre aux alignement par défaut ou à ceux spécifiés par align-items. Les valeurs sont les mêmes que pour ce dernier. align-self: auto | flex-start | flex-end | center | baseline | stretc
Principe d'écriture pour des CSS cohérents : nommage
Choisissez un modèle de nommage cohérent et compréhensif qui a du sens à la fois dans les fichiers HTML et dans les fichiers CSS.
Les pseudo-éléments CSS
Comme les pseudo-classes, les pseudo-éléments sont ajoutés aux sélecteurs. Au lieu de décrire un état spécial, ils permettent de cibler certaines parties du document. ::before cible le premier enfant virtuel de l'élément ::after cible le dernier enfant virtuel de l'élément ::first-letter cible la première lettre de la première ligne d'un bloc ::first-line cible la première ligne de l'élément ciblé par le sélecteur ::selection applique des règles de décoration à la portion du texte qui a été surligné (non standard)
flex le principe
Flexbox (le modèle de boîte flexible) se fonde schématiquement sur une architecture de ce type : Un "flex-container" permettant de créer un contexte général d'affichage, Un ou plusieurs "flex-item" qui ne sont rien d'autre que les enfants directs du conteneur, quels qu'ils soient.
font-family
Il est recommandé de terminer la liste par une famille générique. Ainsi, la page s'affichera au moins avec une police de la même famille si aucune des polices indiquées n'était disponible.
Principe d'écriture pour des CSS cohérents : ordre
Je préfère regrouper les règles connexes ensemble et déclarer les propriétés importantes relatives à la structure (c-à-d le positionnement et le modèle de boîte) avant les règles typographiques, l'arrière-plan et les couleurs.
Sélecteur de classe CSS
L'attribut class permet de sélectionner plusieurs éléments. Le sélecteur de classe est un nom que l'ont défini librement. Il peut être réutilisé plusieurs fois dans l'HTML. Un sélecteur de classe est composé d'un nom préfixé d'un point .list-inline. Il s'applique sur sur l'élément voulu dans l'HTML avec l'attribut class="list-inline".
Sélecteur d'identifiant CSS
L'attribut id a ceci de spécial qu'il ne peut pas y avoir deux éléments avec le même id dans le document. Chaque id doit être unique. Dans le cas contraire, il faudrait utiliser l'attribut class à la place. Le sélecteur d'identifiant ou ID est un nom que l'ont défini librement. Il peut être réutilisé que seule fois dans l'HTML. Un sélecteur d'identifiant est composé d'un nom préfixé d'un dièse #product. Il s'applique sur sur l'élément voulu dans l'HTML avec l'attribut id="product".
letter-spacing
L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La valeur de la propriété est simplement celle de l'espacement désiré.
Principe d'écriture pour des CSS cohérents : organisation
L'organisation du code est une partie importante de n'importe quelle base de code CSS et devient cruciale pour les grosses bases de code. Séparez de manière logique les différentes parties de code (méthode SMACSS) ; Utilisez des fichiers distincts (concaténés au cours de l'étape de compilation) pour aider à découper le code en différents composants ; Si vous utilisez un préprocesseur, stockez le code récurrent dans des variables pour la couleur, la typographie, etc.
background-image
La propriété CSS background-image sert à insérer une image d'arrière-plan.
la propriété "display" display : (block, inline, none, list-item, table,inline-block et flex)
La propriété CSS display est la plus importante pour contrôler la mise en page. Chaque élément à une valeur display par défaut dépendante du type de l'élément. Les valeurs par défaut de la plupart des éléments sont block ou inline. http://fr.learnlayout.com/display.html
text-align
La propriété CSS text-align correspond à l'attribut align utilisé dans les versions anciennes de HTML. Le texte peut être aligné à gauche (left), à droite (right) ou centré (center). Outre cela, la valeur justify étirera chaque ligne de sorte que les marges à gauche et à droite soient droites toutes les deux.
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
La propriété background est un raccourci pour toutes les propriétés listées ci-dessous : background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
Background-attachment: scroll or Background-attachment: fixed
La propriété background-attachment définit si l'image d'arrière-plan est fixe ou bien défile avec l'élément conteneur. Une image d'arrière-plan bloquée ne bougera pas avec le texte lorsque le lecteur fait défiler la page, au contraire d'une image d'arrière-plan non bloquée qui défilera avec le texte de la page Web.
background-color
La propriété background-color décrit la couleur d'arrière-plan des éléments.
box-sizing :content-box C'est la valeur par défaut. Les propriétés width et height sont calculées en additionnant le padding, les border et le contenu. box-sizing : padding-box Les propriétés width et height sont calculées en additionnant le padding et le contenu, mais pas le border. box-sizing : border-box Les propriétés width et height incluent le padding, les border, mais pas la marge extérieure.
La propriété box-sizing est issue de la spécification CSS3. Elle est utilisée pour modifier le modèle de boîte par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments.
clear
La propriété clear est importante pour contrôler le comportement des floats. La propriété clear admet les valeurs "left", "right", "both" ou "none". Le principe est tel que, par exemple, si la valeur de clear d'une boîte est fixée à "both", la bordure supérieure de la marge de cette boîte se trouvera toujours sous la bordure de la marge inférieure des boîtes flottantes éventuelles venant du dessus. http://fr.learnlayout.com/clear.html
color
La propriété color décrit la couleur d'avant-plan d'un élément.
font-style
La propriété font-style définit si le style de la police concernée doit être normal, italic ou oblique. Dans l'exemple à suivre, tous les titres balisés par des éléments <h2> s'afficheront en italiques.
font-variant (normal ou small-caps)
La propriété font-variant sert à choisir entre les variantes normal ou small-caps d'une police. Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres en minuscules.
text-decoration
La propriété text-decoration permet d'ajouter des « décorations » ou « effets » différents au texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc.
text-indent
La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en appliquant une indentation à la première ligne du paragraphe. Dans l'exemple suivant, un alinéa de 30px est appliqué à tous les paragraphes balisés par un élément <p> : p { text-indent: 30px; }
text-transform : (capitalize, uppercase, lowercase, none)
La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation initiale, une mise en majuscules ou une mise en minuscules, indépendamment de l'aspect du texte original dans le code HTML.
width & height
La propriété width permet de définir la largeur d'un élément. On peut affecter la hauteur d'un élément avec la propriété height.
La pseudo-classe :active
La pseudo-classe :active est utilisée pour les liens qui sont activés.
La pseudo-classe :hover
La pseudo-classe :hover est utilisée lorsque le pointeur de la souris survole un lien.
La pseudo-classe :link
La pseudo-classe :link est utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées.
La pseudo-classe :visited
La pseudo-classe :visited est utilisée pour les liens menant aux pages que l'utilisateur a visitées. Par exemple, le code suivant donnera la couleur mauve foncé à tous les liens visités :
font-size : h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
Le corps d'une police se règle par la propriété font-size. Les unités « px » et « pt » font que le corps de la police est absolu, tandis que « % » et « em » permettent à l'utilisateur de l'ajuster si nécessaire. Beaucoup d'utilisateurs ont des handicaps, sont âgés ou simplement pâtissent d'une mauvaise vue ou de la piètre qualité de leur moniteur. Pour rendre votre site Web accessible à tous, vous devriez utiliser des unités ajustables telles que « % » ou « em »
boite
Le modèle de boîte CSS définit les boîtes rectangulaires qui sont générées pour les éléments de la structure HTML. En CSS une boîte est constituée de 4 valeurs : margin les marges extérieures border les bordures padding les marges intérieures width le contenu
Largeur en pourcent
Le pourcent est une unité de mesure relative au block conteneur. C'est génial pour les images : ici nous avons une image qui a toujours 50% de la largeur de son conteneur.
Le sélecteur adjacent général
Le sélecteur adjacent général cible tous les frères F suivant, directement ou non, un élément désigné E. E ~ F { propriété: valeur; } Exemple sur Codepen
Le sélecteur d'enfant
Le sélecteur d'enfant direct s'applique à l'enfant ou aux enfants de l'élément désigné. Cette règle s'applique à l'élément F s'il est l'enfant de E dans l'ordre de déclaration HTML. E > F { propriété: valeur; }
Le sélecteur de frère adjacent
Le sélecteur de frère adjacent affecte un élément à condition que celui-ci soit précédé de l'autre élément spécifié. Cette règle s'applique à l'élément F s'il est le frère de E dans l'ordre de déclaration HTML. E + F { propriété: valeur; }
----Ressources : Le texte----
Le texte
Le regroupement d'éléments (span et div)term-39
Les éléments <span> et <div> servent à regrouper et structurer un document et seront souvent utilisés avec les attributs class et id. Alors que <span> s'utilise dans un élément de type bloc comme vu précédemment, <div> sert à regrouper un ou plusieurs éléments de type bloc.
Margin et padding
Margin: La marge est la distance entre chaque côté et l'élément avoisinant (ou les bordures du document). Padding : L'espacement peut aussi être assimilé à un « remplissage ». Cela peut se comprendre dans la mesure où l'espacement n'affecte pas la distance de l'élément aux autres éléments mais définit seulement la distance interne entre la bordure et le contenu de l'élément.
Principe d'écriture pour des CSS cohérents : Une structure solide
Nous utiliserons la nomenclature HTML 5 pour la dénomination des éléments. #header pour le block d'entête #footer pour le block de pied de page #aside pour le block latéral #main pour le block de contenu principal #container pour contenir l'ensemble du site .clearfix une classe pour empêcher les flottants de dépasser de leur conteneur
background-position : 50% 25% background-position : top left background-position : 100px 250px
Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de l'écran. La propriété background-position permet de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où à l'écran.
propriéts des items : order
Par défaut, les items flex sont disposés par ordre d'arrivée. Cependant, la propriété order permet de contrôler l'ordre dans lequel ils apparaissent dans le container. order: <nombre entier>
Principe d'écriture pour des CSS cohérents : Des sélecteurs sémantiques
Préfixer vos classes en fonction l'apparence de l'élément. Il est ainsi plus simple de se retrouver dans l'HTML et dans le CSS. .btn pour les bouttons .list pour les listes .title pour les titres .breadcrumb pour le fil d'ariane
Principe d'écriture pour des CSS cohérents : Internationalisation
Préférer nommer vos classes et identifiants en anglais.
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Quand vous ajoutez la propriété box-sizing: border-box; à un élément, le padding et la bordure de cet élément n'augmentent plus sa largeur.
----Ressources : Princies d'écritures---
Quleques principes
z-index
Ranger les éléments en couches selon l'axe-Z.
flexbox
Simple mise en page avec flexbox : le Modèle de boîte flexible". .container { display: -webkit-flex; display: flex; } nav { width: 200px; } .flex-column { -webkit-flex: 1; flex: 1; }
position : fixed
Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie qu'il reste toujours à la même place même si la page défile. De la même manière qu'avec un élément positionné en relative, nous pouvons utiliser les propriétés top, right, bottom et left.
float
Une autre propriété CSS utilisée pour la mise en page est float. Un élément peut avoir une position flottante à droite ou à gauche avec la propriété float. C'est-à-dire que la boîte et son contenu peut flotter soit à droite, soit à gauche dans un document (ou dans la boîte conteneur),
----dispaly---- none : script
Une autre valeur display courante est none. Quelques éléments spéciaux comme script l'utilisent par défaut. display: none; est très utile pour masquer ou afficher facilement des éléments en CSS ou en Javascripts sans avoir à les supprimer et les recréer dans le DOM. Ne confondez pas display: none; et visibility: hidden; ! display: none; masque totalement l'élément et annule des propriétés telles que margin, padding, width, height...tandis que visibility: hidden; masque seulement l'élément, ce qui peut laisser des espaces vides.
Les pseudo-classes CSS
Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour indiquer un état particulier de l'élément qui doit être sélectionné. :link cible les liens non visités :hover cible un élément pointé :active cible un élément activé par l'utilisateur :focus cible un élément pointé physiquement :visited cible un lien déjà visité par l'utilisateur :target cible une ancre :lang() cible un élément selon sa langue ou celle du document :first-child cible le premier enfant d'un élément :last-child cible le dernier enfant d'un élément :nth-child(N) cible le Niéme enfant d'un élément :nth-of-child(N) cible le Niéme du type désigné :first-of-type cible le 1er enfant du type désigné :last-of-type cible le dernier enfant du type désigné :only-child cible l'enfant unique :only-of-type cible l'élément unique du type désigné :empty élément sans enfant :not() négation d'un sélecteur :enabled élément actif :disabled élément inactif :checked élément coché :required élément requis pour la soumission :optional élément optionnel lors de la soumission :valid élément qui remplit les exigences de son type :invalid élément qui ne remplit pas (encore) les exigences
Qu'est-ce qu'une pseudo-classe ?
Une pseudo-classe permet de tenir compte de conditions et événements différents pour la définition d'une propriété sur une balise HTML.
#main { max-width: 600px; margin: 0 auto; }
Utiliser max-width à la place de width améliorera la gestion des petites fenêtres. C'est très important lorsque l'on créé un site accessible sur mobile. Redimensionnez cette page pour voir !
mise en page avec inline-block
Vous pouvez aussi utiliser inline-block pour les mise en page. Il faut cependant garder à l'esprit que : nav { display: inline-block; vertical-align: top; width: 25%; } .column { display: inline-block; vertical-align: top; width: 75%; }
Supprimer le trait sous les liens
a { text-decoration:none; }
position : absolute
absolute est la valeur la plus délicate. absolute se comporte comme fixed sauf que son positionnement est relatif à l'élément parent positionné le plus proche au lieu d'être relatif à la fenêtre du navigateur. Si un élément positionné en absolute n'à aucun élément parent positionné, il utilise le corps du document et se déplace avec le document au défilement de la page.
border: 1px solid blue;
border-width: 1px; border-style: solid; border-color: blue;
----dispaly---- block-level standard : div header footer section form p
div est l'élément block-level standard. Un élément block-level commence sur une nouvelle ligne et s'étire autant qu'il peut sur la gauche et la droite. D'autres éléments block-level courant sont p et form, et les nouveaux en HTML5 sont header, footer, section, et plus.
display: flex | inline-flex;
flex : Cette valeur génère un container flex, de niveau block, à l'intérieur de l'élément. inline-flex : Cette valeur génère un container flex, de niveau inline, à l'intérieur de l'élément.
----Ressources : Les couleurs et les arrières-plans----
http://fr.html.net/tutorials/css/lesson3.php
----Ressources : Les polices----
http://fr.html.net/tutorials/css/lesson4.php
----Ressources : Les liens ----
http://fr.html.net/tutorials/css/lesson6.php
----Ressources : groupements et sélecteurs----
http://fr.html.net/tutorials/css/lesson7.php http://css.sutterlity.fr/les-bases-css/poids-selecteurs-css/ http://blog.organicweb.fr/comprendre-le-poids-des-regles-css
----Ressources : Le modèle des boîtes---
http://fr.html.net/tutorials/css/lesson9.php
----Ressources : mise en page----
http://fr.learnlayout.com/float.html
flex : les ressources
http://la-cascade.ghost.io/flexbox-guide-complet/
----Ressources : CSS3----
http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf http://fr.learnlayout.com http://fr.html.net/tutorials/css/
flex : les possibilités
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
font: italic bold 30px arial, sans-serif;
la propriété raccourcie font, il est possible de couvrir toutes ces différentes propriétés de police en un coup : font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;
flex proprités
les quatre possibilités principales sont : Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non, Alignements et centrages horizontaux et verticaux, justifiés, répartis, Réorganisation des éléments indépendamment de l'ordre du flux (DOM), Gestion des espaces disponibles (fluidité).
position : relative
relative se comporte de la même façon que static sauf si vous ajoutez quelques propriétés en plus.
flex-direction: row | row-reverse | column | column-reverse
row (valeur par défaut): de gauche à droite si la lecture se fait dans ce sens, de droite à gauche dans le cas inverse (1). row-reverse : inverse le sens column : comme row mais du haut vers le bas column-reverse : comme row-reverse mais du bas vers le haut
----dispaly---- inline : span a
span est l'élément inline standard. Un élément inline peut encadrer du texte dans un paragraphe <span> comme ceci </span> sans interrompre le flux de ce paragraphe. L'élément a est l'élément inline le plus courant, puisque vous l'utilisez pour vos liens.
position : static
static est la valeur par défaut de tous les éléments. Un élément avec position: static; n'est positionné d'aucune manière spéciale. Un élément static est dit non positionné et un élément avec une propriété position ayant une valeur autre que static est dit positionné.
<meta name="viewport" "$">
width : largeur de fenêtre viewport (par exemple width="device-width") height : hauteur de fenêtre viewport (par exemple height="device-height") initial-scale : niveau de zoom initial (par exemple initial-scale="1.0") minimum-scale : niveau de zoom minimal (par exemple minimum-scale="0.5") maximum-scale : niveau de zoom maximal (par exemple maximum-scale="3.0"). Attention, la valeur "1.0" interdit le zoom et peut rendre vos pages inaccessibles user-scalable : possibilité à l'utilisateur de zoomer (par exemple user-scalable="yes"). Attention, la valeur "no" interdit le zoom et peut rendre vos pages inaccessibles target-densitydpi : choix de résolution, en dpi, de l'affichage général (spécifique Webkit et semble avoir été abandonné)