diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/css_basic_user_interface | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/css_basic_user_interface')
-rw-r--r-- | files/fr/web/css/css_basic_user_interface/index.md | 99 | ||||
-rw-r--r-- | files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md | 139 |
2 files changed, 105 insertions, 133 deletions
diff --git a/files/fr/web/css/css_basic_user_interface/index.md b/files/fr/web/css/css_basic_user_interface/index.md index b8e3ba66e4..f546d114f6 100644 --- a/files/fr/web/css/css_basic_user_interface/index.md +++ b/files/fr/web/css/css_basic_user_interface/index.md @@ -9,65 +9,40 @@ tags: - Reference translation_of: Web/CSS/CSS_Basic_User_Interface --- -<p>{{CSSRef}}</p> - -<p><em><strong>CSS Basic User Interface</strong></em> est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés">Propriétés</h3> - -<ul> - <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("box-sizing")}}</li> - <li>{{CSSxRef("cursor")}}</li> - <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("outline")}}</li> - <li>{{CSSxRef("outline-width")}}</li> - <li>{{CSSxRef("outline-style")}}</li> - <li>{{CSSxRef("outline-color")}}</li> - <li>{{CSSxRef("outline-offset")}}</li> - <li>{{CSSxRef("resize")}}</li> - <li>{{CSSxRef("text-overflow")}}</li> - <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li> -</ul> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des URL pour la propriété <code>cursor</code></a></dt> - <dd>Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Basic UI")}}</td> - <td>{{Spec2("CSS4 Basic UI")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Basic UI")}}</td> - <td>{{Spec2("CSS3 Basic UI")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "ui.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +{{CSSRef}} + +**_CSS Basic User Interface_** est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur. + +## Référence + +### Propriétés + +- {{CSSxRef("appearance")}} {{Experimental_Inline}} +- {{CSSxRef("box-sizing")}} +- {{CSSxRef("cursor")}} +- {{CSSxRef("ime-mode")}} {{Deprecated_Inline}} +- {{CSSxRef("nav-down")}} {{Experimental_Inline}} +- {{CSSxRef("nav-left")}} {{Experimental_Inline}} +- {{CSSxRef("nav-right")}} {{Experimental_Inline}} +- {{CSSxRef("nav-up")}} {{Experimental_Inline}} +- {{CSSxRef("outline")}} +- {{CSSxRef("outline-width")}} +- {{CSSxRef("outline-style")}} +- {{CSSxRef("outline-color")}} +- {{CSSxRef("outline-offset")}} +- {{CSSxRef("resize")}} +- {{CSSxRef("text-overflow")}} +- {{CSSxRef("user-select")}} {{Experimental_Inline}} + +## Guides + +- [Utiliser des URL pour la propriété `cursor`](/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor) + - : Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName("CSS4 Basic UI")}} | {{Spec2("CSS4 Basic UI")}} | | +| {{SpecName("CSS3 Basic UI")}} | {{Spec2("CSS3 Basic UI")}} | | +| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}} | Définition initiale. | diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md index d9cfe6891d..bd1938e714 100644 --- a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md @@ -8,98 +8,95 @@ tags: translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.</p> +Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<p>La syntaxe de base (CSS 2.1) pour cette propriété est :</p> +La syntaxe de base (CSS 2.1) pour cette propriété est : -<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("<url>")}} , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}}</pre> + {{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} -<p>Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme <code>auto</code> ou <code>pointer</code>.</p> +Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme `auto` ou `pointer`. -<p>On pourra ainsi utiliser :</p> +On pourra ainsi utiliser : -<pre class="brush: css">cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto; -</pre> +```css +cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto; +``` -<p>En utilisant cette règle, le moteur essaiera d'abord de charger <code>toto.cur</code>. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de <code>truc.gif</code> qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur <code>auto</code> sera utilisé.</p> +En utilisant cette règle, le moteur essaiera d'abord de charger `toto.cur`. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de `truc.gif` qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur `auto` sera utilisé. -<p>Le support de la <a href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p> +Le support de la [syntaxe](https://www.w3.org/TR/css3-ui/#cursor) CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5. -<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("<uri>")}} <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> <x> <y> <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">?</a> , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} -</pre> + {{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} -<p>Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:</p> +Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est: -<pre class="eval">cursor: url(toto.png) 4 12, auto; -</pre> + cursor: url(toto.png) 4 12, auto; -<p>Le premier nombre est la coordonnée <var>x</var>, le second numéro est la coordonnée <var>y</var>. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.</p> +Le premier nombre est la coordonnée _x_, le second numéro est la coordonnée _y_. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche. -<h2 id="Limitations">Limitations</h2> +## Limitations -<p>Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.</p> +Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés. -<div class="note"> -<p><strong>Note :</strong> À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.</p> -</div> +> **Note :** À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé. -<p>Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.</p> +Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels. -<p>Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.</p> +Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété <code>cursor</code>. Toutefois :</p> +Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété `cursor`. Toutefois : -<ul> - <li>IE ne prend en charge que les formats CUR et ANI</li> - <li>IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.</li> -</ul> +- IE ne prend en charge que les formats CUR et ANI +- IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés. <table class="standard-table"> - <tbody> - <tr> - <th>Navigateur</th> - <th>Version minimum</th> - <th>Formats</th> - <th>Coordonnées x-y</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td><strong>6.0</strong></td> - <td><code>.cur | .ani</code></td> - <td>---</td> - </tr> - <tr> - <td>Firefox (Gecko), Windows et Linux</td> - <td><strong>1.5</strong> (1.8)</td> - <td><code>.cur | .png | .gif | .jpg</code></td> - <td>1.5 (1.8)</td> - </tr> - <tr> - <td>Firefox (Gecko)</td> - <td><strong>4.0</strong> (2.0)</td> - <td><code>.cur | .png | .gif | .jpg | .svg</code></td> - <td>(Gecko 2.0)</td> - </tr> - <tr> - <td>Opera</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - <tr> - <td rowspan="2">Safari (Webkit)</td> - <td><strong>3.0</strong> (522-523)</td> - <td><code>.cur | .png | .gif | .jpg</code></td> - <td rowspan="2">3.0 (522-523)</td> - </tr> - <tr> - <td colspan="2">OS X 10.5 pour la prise en charge des fichiers <code>.cur</code></td> - </tr> - </tbody> + <tbody> + <tr> + <th>Navigateur</th> + <th>Version minimum</th> + <th>Formats</th> + <th>Coordonnées x-y</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>6.0</strong></td> + <td><code>.cur | .ani</code></td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko), Windows et Linux</td> + <td><strong>1.5</strong> (1.8)</td> + <td><code>.cur | .png | .gif | .jpg</code></td> + <td>1.5 (1.8)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>4.0</strong> (2.0)</td> + <td><code>.cur | .png | .gif | .jpg | .svg</code></td> + <td>(Gecko 2.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td rowspan="2">Safari (Webkit)</td> + <td><strong>3.0</strong> (522-523)</td> + <td><code>.cur | .png | .gif | .jpg</code></td> + <td rowspan="2">3.0 (522-523)</td> + </tr> + <tr> + <td colspan="2"> + OS X 10.5 pour la prise en charge des fichiers <code>.cur</code> + </td> + </tr> + </tbody> </table> |