Retrouver article possédé ou non > https://www.sailorfuku.com/look/look.html?filter_article_ids=xxxxxx
Bloquer > https://www.sailorfuku.com/jeu.keitai.menu.html?pg=blocages&supprimer_id=xxxxxx
Prezento > https://www.sailorfuku.com/shop/shopping.html?filter_shops_ids=601
Historique tenues > https://www.sailorfuku.com/hito.tenues.html?id=400779

DISPLAY :

La propriété display définit le type d'affichage utilisée pour le rendu d'un élément (de bloc ou en ligne) et la disposition utilisée pour ses éléments fils : grille ou boîtes flexibles.

Le type d'affichage donné par display possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au flux et le type d'affichage intérieur qui définit l'organisation des éléments enfants.

Certaines valeurs de display sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.

/* Valeurs de type <display-outside> */
display: block;
display: inline;
display: run-in;

/* Valeurs de type <display-inside> */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* Combinaison de valeurs */
/* <display-outside> et <display-inside> */
display: block flow;
display: inline table;
display: flex run-in;

/* Valeurs de type <display-listitem> */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* Valeurs de type <display-internal> */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* Valeurs de type <display-box> */
display: contents;
display: none;

/* Valeurs de type <display-legacy> */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Valeurs globales */
display: inherit;
display: initial;
display: unset;


La propriété display est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.

<display-outside>
Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.

<display-inside>
Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).

<display-listitem>
L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.

<display-internal>
Certains modes de dispositions, tels que table et ruby possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.

<display-box>
Ces valeurs définissent si un élément génère une boîte ou non.

<display-legacy>
CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété display et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.

EXEMPLE
<p>Texte visible</p>
<p class="secret">Texte invisible</p>


*display: none;
Utiliser la propriété display avec la valeur none sur un élément entraînera son retrait de l'arbre d'accessibilité. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.

*display: contents;
Tout élément ciblé avec display: contents sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon la spécification CSSWG.

*Les tableaux
Modifier la valeur de display pour un élément de tableau afin d'utiliser la valeur block, grid ou flex modifiera sa représentation au sein de l'arbre d'accessibilité. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.

ELEMENT DE DIVISION DU CONTENU (<div>)

<div> : l'élément de division du contenu
L'élément HTML <div> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de CSS.

En tant que conteneur « pur », l'élément <div> ne représente rien en soi. Il est plutôt utilisé pour regrouper le contenu afin qu'il puisse être facilement stylé à l'aide des attributs class ou id, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut lang), etc.

L'élément <div> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple <article> ou <nav>).
<div>
<p>Tout type de contenu. Par exemple <p>, <table>. À vous de voir !</p>
</div>

Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <div>. On notera l'utilisation de l'attribut class sur l'élément <div> afin d'appliquer la règle "shadowbox".

<div class="shadowbox">
<p>Voici un paragraphe très intéressant inscrit dans une boîte avec une ombre.</p>
</div>
https://www.zupimages.net/up/23/42/iw28.png

ELEMENTS TITRES DE SECTION :

Les éléments HTML <h1> à <h6> représentent les six niveaux de titre de section. <h1> correspond au niveau de section le plus haut et <h6> correspond au niveau le plus faible.

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

CATEGORIES DE CONTENU :

Chaque élément HTML est membre d'un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques. Ceci est un regroupement lâche, en ce sens qu'il ne crée pas réellement de relation entre les éléments de ces types, mais il aide à définir et à décrire leur comportement et les règles associées qu'ils doivent respecter, en particulier lorsque l'on entre dans leurs détails complexes. Il est également possible que les éléments ne soient membres d'aucune de ces catégories.

*Il y a trois types différents de catégories de contenu :

Les catégories de contenu principales qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ;
Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ;
Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier.

**Principales catégories de contenu**
*Contenu de méta-données
Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données.

Les éléments appartenant à cette catégories sont : <base>, <command> Obsolète, <link>, <meta>, <noscript>, <script>, <style> et <title>.

*Contenu de flux
Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont : <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command> Obsolète, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>Obsolète, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> et le texte.

Quelques autres éléments appartiennent à cette catégorie mais seulement sous certaines conditions :

<area> s'il est un descendant de l'élément <map>
<link> si l'attribut itemprop est présent
<meta> si l'attribut itemprop est présent
<style> si l'attribut scoped Obsolète est présent

*Contenu sectionnant
Les éléments appartenant à cette catégorie sont ceux créant une nouvelle section dans le plan du document qui définit la portée des éléments <header>, des éléments <footer> et du contenu de titre.

Les éléments appartenant à cette catégorie sont les éléments <article>, <aside>, <nav> et <section>.
Note : Il ne faut pas confondre ce modèle de contenu avec la catégorie de racine de sectionnement qui isole un contenu par rapport à la structure (ou plan) principale.

*Contenu de titre
Le contenu de titre définit le titre d'une section, qu'elle soit marquée par un contenu sectionnant de manière explicite ou qu'elle soit définie de manière implicite par le contenu de titre lui-même.

Les éléments appartenant à cette catégorie sont <h1>, <h2>, <h3>, <h4>, <h5>, <h6> et <hgroup>.
Note : Bien qu'il soit probable qu'un élément <header> comporte du contenu de titre, il n'est pas lui-même un contenu de titre.
Note : <hgroup> est supprimé du document recommandé par W3C.

*Contenu phrasé
Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes.

Les éléments appartenant à cette catégorie sont <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command> Obsolète, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>Obsolète, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> et du texte brut (n'étant pas une simple suite de blancs).

Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :

<a> s'il contient seulement du contenu phrasé
<area> s'il est un descendant de l'élément <map>
<del> s'il contient seulement du contenu phrasé
<ins> s'il contient seulement du contenu phrasé
<link> si l'attribut itemprop est présent
<map> s'il contient seulement du contenu phrasé
<meta> si l'attribut itemprop est présent

*Contenu intégré
Le contenu intégré importe une autre ressource ou intègre du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document. Les éléments appartenant à cette catégorie sont : <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>.

*Contenu interactif
Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l'utilisateur. Les éléments appartenant à cette catégories sont : <a>, <button>, <details>, <embed>, <iframe>, <keygen>Obsolète , <label>, <select>, et <textarea>.

Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions :

<audio> si l'attribut controls est présent
<img> si l'attribut usemap est présent
<input> si l'attribut type ne vaut pas hidden
<menu> si l'attribut type vaut toolbar
<object> si l'attribut usemap est présent
<video>, si l'attribut controls est présent

*Contenu tangible
Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les éléments dont le modèle de contenu est de flux ou phrasé devraient toujours avoir au moins un noeud dont le contenu est tangible.

*Contenu associé aux formulaires
Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut form. Être possédé par un formulaire signifie être descendant d'un élément <form> ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut form.

Cette catégorie contient les éléments :

<button>
<fieldset>
<input>
<keygen>Obsolète
<label>
<meter>
<object>
<output>
<progress>
<select>
<textarea>
Cette catégorie peut être subdivisée en plusieurs sous-catégories.

listed (éléments listés)
Les éléments étant listés sont les ensembles IDL form.elements (en-US) et fieldset.elements. Ce sont : <button>, <fieldset>, <input>, <keygen>Obsolète , <object>, <output>, <select>, et <textarea>.

labelable (éléments étiquetables)
Les éléments pouvant être associés avec des éléments <label>. Ce sont : <button>, <input>, <keygen>Obsolète , <meter>, <output>, <progress>, <select> et <textarea>.

submittable (éléments participants à l'envoi du formulaire)
Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : <button>, <input>, <keygen>Obsolète , <object>, <select> et <textarea>.

resettable (éléments de ré-initialisation)
Éléments pouvant être impactés lorsqu'un formulaire est ré-initialisé. Ce sont : <input>, <keygen>Obsolète, <output>,<select> et <textarea>.

**Catégories secondaires**
Il existe des classifications secondaires d'éléments qu'il peut être utile de connaître également.

*Éléments supports de script
Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Au lieu de cela, ils servent à prendre en charge les scripts, soit en contenant ou en spécifiant le code de script directement, soit en spécifiant les données qui seront utilisées par les scripts. Ce sont :
<script>
<template>

**Modèle de contenu transparent**
Si l'élément possède un modèle de contenu transparent, son contenu doit alors être structuré comme du HTML5 valide, et ce, même si l'élément transparent a été enlevé et remplacé par ses éléments fils.

Les éléments <del> et <ins> sont des exemples d'éléments transparents.
<p>Bonjour <del><em>tout</em></del> <ins>le monde</ins>.</p>

Si ces éléments étaient retirés, ce fragment de code HTML serait toujours du HTML valide.
<p>Bonjour <em>tout</em> le monde.</p>

CONTEXTE D'EMPILEMENT :
Le contexte d'empilement renvoie à la façon dont les éléments d'une page web semblent se superposer à d'autres éléments, tout comme vous pouvez placer les fiches sur votre bureau côte à côte ou se chevauchant.

POSITION :

La propriété CSS position définit la façon dont un élément est positionné dans un document. Les propriétés top, right, bottom et left déterminent l'emplacement final de l'élément positionné.
https://developer.mozilla.org/fr/docs/Web/CSS/position

position: static;
- Emplacement fixe
> Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés top, right, bottom, left et z-index ne s'appliquent pas.

position: relative; top: 40px; left: 40px;
- Décalé de ?px par rapport à la position où il est censé se trouver
> L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par top, right, bottom et left. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec static.
(Cette valeur crée un nouveau contexte d'empilement lorsque z-index ne vaut pas auto. L'effet de cette valeur n'est pas défini pour les éléments table-*-group, table-row, table-column, table-cell et table-caption.)

position: absolute; top: 40px; left: 40px;
- Position fixe dans l'espace peu importe si des éléments se trouvent déjà au même emplacement où sont amenés à se décaler.
> L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de top, right, bottom et left.
(Cette valeur crée un nouveau contexte d'empilement lorsque z-index ne vaut pas auto. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.)
Les éléments qui sont positionnés de façon relative sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments.

position: sticky; top: 20px;
- Emplacement fixe par rapport à la page, peu importe si celle-ci est amenée à défiler avec la scrollbar, l'élément reste visible au même endroit
La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à son bloc englobant selon les valeurs de top, right, bottom et left. Dans tous les cas, y compris avec les éléments table, cela n'affecte pas la position des autres éléments.
(Cette valeur entraîne toujours la création d'un nouveau contexte d'empilement. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand overflow vaut hidden, scroll, auto ou overlay) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut overflow: hidden ou auto (cf. cette issue GitHub).)
Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe.

position: fixed;
> L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport), sauf si un des ancêtres a une propriété transform, perspective ou filter qui est différente de none (voir la spécification sur les transformations CSS) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page). Cette valeur crée toujours un nouveau contexte d'empilement. Certaines incohérences existent entre les navigateurs quant au rôle de perspective et filter pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de top, right, bottom et left.
(Cette valeur crée toujours un nouveau contexte d'empilement. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour chacune des pages.)
On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page.


/* Valeurs globales */
position: inherit;
position: initial;
position: revert;
position: unset;


****Types de positionnement*****
*Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky.
*Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés top ou bottom indiquent le décalage vertical à appliquer et left ou right indiquent le décalage horizontal.
*Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed. Dans ce cas, les propriétés top, bottom, right et left indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.
*Un élément positionné en adhérence est un élément dont la propriété de position calculée vaut sticky. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de top) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.
La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés height et width qui valent auto afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant top et bottom tout en laissant height indéfini (c'est-à-dire avec la valeur auto). On pourra faire de même pour l'espace horizontal avec les propriétés left et right.

Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :

Si top et bottom sont tous les deux définis (enfin, s'ils ne valent pas auto), c'est top qui aura la priorité
Si left et right sont tous les deux définis, c'est left qui aura la priorité si la direction du texte est de gauche à droite (LTR) et right qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).

*******Les éléments qui défilent avec du contenu utilisant fixed ou sticky peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisatrice ou l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter will-change: transform (cf. will-change) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.********

Sur une page web, un block est un élément HTML qui apparaît sous l'élément précédent et au-dessus du suivant (communément connu comme un block-level element ). Par exemple, <p> est par défaut un élément de type block, alors que <a> est un inline element - vous pouvez placer plusieurs liens les uns à côté des autres dans votre source HTML et ils seront placés sur la même ligne dans la sortie rendue.

En utilisant la propriété CSS display, il est possible de définir si un objet doit être affiché en bloc ou en ligne (block ou inline) ; les blocs sont également soumis aux effets des schémas de positionnement et de l'utilisation de la propriété position .

CSS FLOW LAYOUT :

Le flux normal ou « disposition en flux » (Flow Layout) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du flux, il est traité indépendamment.

Avec un flux normal, les éléments en ligne (inline elements) sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon le mode d'écriture du document. Les éléments de bloc (block elements) sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.

Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.

La première phrase contient également un élément <span> avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.