aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/scroll-snap-points-x
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/css/scroll-snap-points-x
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/css/scroll-snap-points-x')
-rw-r--r--files/fr/web/css/scroll-snap-points-x/index.html94
1 files changed, 94 insertions, 0 deletions
diff --git a/files/fr/web/css/scroll-snap-points-x/index.html b/files/fr/web/css/scroll-snap-points-x/index.html
new file mode 100644
index 0000000000..b7f1acea8b
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-points-x/index.html
@@ -0,0 +1,94 @@
+---
+title: scroll-snap-points-x
+slug: Web/CSS/scroll-snap-points-x
+tags:
+ - CSS
+ - Déprécié
+ - Propriété
+ - Reference
+translation_of: Web/CSS/scroll-snap-points-x
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-points-x</code></strong> définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-points-x: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-x: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-x: inherit;
+scroll-snap-points-x: initial;
+scroll-snap-points-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
+ <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
+ <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container &gt; div {
+ width: 200px;
+ height: 200px;
+ display: inline-block;
+ line-height: 200px;
+ text-align: center;
+ font-size: 100px;
+}
+
+#container &gt; div:nth-child(even) {
+ background-color: #87ea87;
+}
+
+#container &gt; div:nth-child(odd) {
+ background-color: #87ccea;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-points-x")}}</p>