From ffd44c6df4ef1e1c7c1254e75c6121b9beacf847 Mon Sep 17 00:00:00 2001 From: HUC Stéphane Date: Thu, 19 Aug 2021 18:51:22 +0000 Subject: typo (#2121) Erreur ortho --- files/fr/web/css/media_queries/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'files/fr/web/css') diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html index 38aec3f36c..ad2a10fb01 100644 --- a/files/fr/web/css/media_queries/index.html +++ b/files/fr/web/css/media_queries/index.html @@ -83,5 +83,5 @@ original_slug: Web/CSS/Requêtes_média

Voir aussi

-- cgit v1.2.3-54-g00ecf From 1e5ef69352fca974bc2c3b0c507b20c97189fd1e Mon Sep 17 00:00:00 2001 From: MDN Date: Sun, 22 Aug 2021 00:45:00 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 7 +- files/de/_wikihistory.json | 18 +- .../border-image_generator/index.html | 2626 ------------------ .../border-radius_generator/index.html | 1600 ----------- .../box-shadow_generator/index.html | 2885 ------------------- .../border-image_generator/index.html | 2627 ++++++++++++++++++ .../border-radius_generator/index.html | 1601 +++++++++++ .../box-shadow_generator/index.html | 2885 +++++++++++++++++++ files/es/_redirects.txt | 4 +- files/es/_wikihistory.json | 16 +- .../border-image_generator/index.html | 2616 ------------------ .../border-radius_generator/index.html | 1601 ----------- .../border-image_generator/index.html | 2616 ++++++++++++++++++ .../border-radius_generator/index.html | 1602 +++++++++++ files/fr/_redirects.txt | 13 +- files/fr/_wikihistory.json | 18 +- .../border-image_generator/index.html | 2627 ------------------ .../border-radius_generator/index.html | 1601 ----------- .../box-shadow_generator/index.html | 2888 -------------------- .../border-image_generator/index.html | 2627 ++++++++++++++++++ .../border-radius_generator/index.html | 1601 +++++++++++ .../box-shadow_generator/index.html | 2888 ++++++++++++++++++++ files/ja/_redirects.txt | 3 + files/ja/_wikihistory.json | 52 +- .../border-image_generator/index.html | 2629 ------------------ .../border-radius_generator/index.html | 1602 ----------- .../border-image_generator/index.html | 2630 ++++++++++++++++++ .../border-radius_generator/index.html | 1603 +++++++++++ files/ja/web/guide/houdini/index.html | 94 + files/ja/web/houdini/index.html | 93 - files/ko/_redirects.txt | 3 + files/ko/_wikihistory.json | 20 +- .../border-image_generator/index.html | 2627 ------------------ .../border-radius_generator/index.html | 1601 ----------- .../box-shadow_generator/index.html | 2881 ------------------- .../border-image_generator/index.html | 2628 ++++++++++++++++++ .../border-radius_generator/index.html | 1602 +++++++++++ .../box-shadow_generator/index.html | 2882 +++++++++++++++++++ files/pt-br/_redirects.txt | 6 +- files/pt-br/_wikihistory.json | 16 +- .../border-image_generator/index.html | 2628 ------------------ .../border-radius_generator/index.html | 1594 ----------- .../border-image_generator/index.html | 2628 ++++++++++++++++++ .../border-radius_generator/index.html | 1594 +++++++++++ files/ru/_redirects.txt | 7 +- files/ru/_wikihistory.json | 18 +- .../border-image_generator/index.html | 2628 ------------------ .../border-radius_generator/index.html | 1600 ----------- .../box-shadow_generator/index.html | 2885 ------------------- .../border-image_generator/index.html | 2629 ++++++++++++++++++ .../border-radius_generator/index.html | 1600 +++++++++++ .../box-shadow_generator/index.html | 2885 +++++++++++++++++++ files/zh-cn/_redirects.txt | 8 +- files/zh-cn/_wikihistory.json | 42 +- .../border-image_generator/index.html | 2628 ------------------ .../border-radius_generator/index.html | 1600 ----------- .../box-shadow_generator/index.html | 2881 ------------------- .../border-image_generator/index.html | 2629 ++++++++++++++++++ .../border-radius_generator/index.html | 1600 +++++++++++ .../box-shadow_generator/index.html | 2881 +++++++++++++++++++ files/zh-cn/web/guide/houdini/index.html | 91 + files/zh-cn/web/houdini/index.html | 90 - 62 files changed, 48560 insertions(+), 48525 deletions(-) delete mode 100644 files/de/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/de/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/de/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html delete mode 100644 files/es/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/es/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html delete mode 100644 files/fr/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/fr/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html delete mode 100644 files/ja/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/ja/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/ja/web/guide/houdini/index.html delete mode 100644 files/ja/web/houdini/index.html delete mode 100644 files/ko/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/ko/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html delete mode 100644 files/ru/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/ru/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html delete mode 100644 files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html create mode 100644 files/zh-cn/web/guide/houdini/index.html delete mode 100644 files/zh-cn/web/houdini/index.html (limited to 'files/fr/web/css') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 1fb9242dfc..bb608a1e82 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -486,10 +486,13 @@ /de/docs/Web/CSS/Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model /de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/Using_CSS_animations /de/docs/Web/CSS/CSS_Background_and_Borders /de/docs/Web/CSS/CSS_Backgrounds_and_Borders +/de/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/de/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /de/docs/Web/CSS/CSS_Boxmodell /de/docs/Web/CSS/CSS_Box_Model -/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator /de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model /de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern /de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing /de/docs/Web/CSS/CSS_Colors /de/docs/Web/CSS/CSS_Color diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 30c3dc9b00..6c2cc8c847 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -5114,31 +5114,31 @@ "Simu" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:44:11.176Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-18T21:15:52.768Z", "contributors": [ "Sebastianz" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T22:43:49.105Z", "contributors": [ "Sebastianz" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-18T20:43:44.623Z", "contributors": [ "BychekRU", "Sebastianz" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-23T22:44:11.176Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-03-23T23:06:19.663Z", "contributors": [ diff --git a/files/de/web/css/css_background_and_borders/border-image_generator/index.html b/files/de/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 7e223feb3d..0000000000 --- a/files/de/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2626 +0,0 @@ ---- -title: Border-image Generator -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - Werkzeuge -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.

- - - -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index ced3cae5ad..0000000000 --- a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1600 +0,0 @@ ---- -title: Border-radius Generator -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -tags: - - CSS - - Werkzeuge -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.

- - - -

{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}

diff --git a/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 9ced969467..0000000000 --- a/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2885 +0,0 @@ ---- -title: Box-shadow Generator -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - CSS3 - - Werkzeuge - - box-shadow -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator ---- -

Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

diff --git a/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..2df004ab73 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Border-image Generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Werkzeuge +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.

+ + + +

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..2682c0adc8 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Border-radius Generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - Werkzeuge +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.

+ + + +

{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}

diff --git a/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..a1121165f0 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2885 @@ +--- +title: Box-shadow Generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS3 + - Werkzeuge + - box-shadow +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.

+ + + +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
+ +

Related Tool: Box Shadow CSS Generator

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index b0cfd8f626..76616b14f5 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1622,7 +1622,9 @@ /es/docs/Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS /es/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Using_CSS_animations /es/docs/Web/CSS/CSS_Background_and_Borders /es/docs/Web/CSS/CSS_Backgrounds_and_Borders -/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generador /es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator +/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generador /es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/es/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /es/docs/Web/CSS/CSS_Colors /es/docs/Web/CSS/CSS_Color /es/docs/Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color /es/docs/Web/CSS/CSS_Colors/Color_picker_tool diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 3c8ab55145..1b9437479b 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -10652,25 +10652,25 @@ "ulisescab" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:41:48.399Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-23T22:41:48.777Z", "contributors": [ "teoli", "mcclone2001" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-18T21:15:42.476Z", "contributors": [ "israel-munoz" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-23T22:41:48.399Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { "modified": "2019-03-23T22:17:03.740Z", "contributors": [ diff --git a/files/es/web/css/css_background_and_borders/border-image_generator/index.html b/files/es/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 17cb7b70bc..0000000000 --- a/files/es/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2616 +0,0 @@ ---- -title: Generador Border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - Herramientas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador ---- -

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

- -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index f445dff39b..0000000000 --- a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1601 +0,0 @@ ---- -title: Generador de border-radius -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -tags: - - Herramientas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.

- - - -

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

- -

 

diff --git a/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..13a073100e --- /dev/null +++ b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2616 @@ +--- +title: Generador Border-image +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

+ +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..bd0dc7e058 --- /dev/null +++ b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1602 @@ +--- +title: Generador de border-radius +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.

+ + + +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index ca72b29e90..4524c14581 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3927,8 +3927,8 @@ /fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS /fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS /fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations /fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS /fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders -/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image /fr/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator -/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius /fr/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Scaling_background_images /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Utiliser_des_fonds_multiples /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /fr/docs/Web/CSS/Aural /fr/docs/Web/CSS/@media/aural @@ -3939,6 +3939,9 @@ /fr/docs/Web/CSS/CSS_:_la_propriété_animation-play-state /fr/docs/Web/CSS/animation-play-state /fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS /fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations /fr/docs/Web/CSS/CSS_Background_and_Borders /fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders +/fr/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/fr/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images @@ -3948,7 +3951,7 @@ /fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau /fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables /fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes /fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout /fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille /fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout -/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /fr/docs/Web/CSS/CSS_Colors /fr/docs/conflicting/Web/CSS/CSS_Color /fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes /fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol /fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes /fr/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol @@ -4090,9 +4093,9 @@ /fr/docs/Web/CSS/Mode_de_mise_en_page /fr/docs/Web/CSS/Layout_mode /fr/docs/Web/CSS/Modèle_de_boîte /en-US/docs/Learn/CSS/Building_blocks/The_box_model /fr/docs/Web/CSS/Modèle_de_boîte_CSS /fr/docs/Web/CSS/CSS_Box_Model -/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Box-shadow_generator /fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Box-shadow_generator /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges /fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow /fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /fr/docs/Web/CSS/Modèle_de_boîte_CSS/Modèle_de_boîte /en-US/docs/Learn/CSS/Building_blocks/The_box_model /fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle /fr/docs/Web/CSS/Visual_formatting_model /fr/docs/Web/CSS/Motion_Path /fr/docs/Web/CSS/CSS_Motion_Path diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index b4de7ff0ab..d71fb0691a 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -24440,19 +24440,25 @@ "FredB" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-04-06T12:13:22.172Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-23T22:30:30.328Z", "contributors": [ "SphinxKnight" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T22:30:26.745Z", "contributors": [ "SphinxKnight" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-18T20:43:43.479Z", "contributors": [ "BychekRU", @@ -24460,12 +24466,6 @@ "kiux" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-04-06T12:13:22.172Z", - "contributors": [ - "SphinxKnight" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-06-18T19:28:42.872Z", "contributors": [ diff --git a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index c0c5db61cd..0000000000 --- a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2627 +0,0 @@ ---- -title: Générateur de border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator -original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image ---- -

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

- - - -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index ac9bc500aa..0000000000 --- a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1601 +0,0 @@ ---- -title: Générateur de border-radius -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius ---- -

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

- - - -

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 282a53d6e4..0000000000 --- a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2888 +0,0 @@ ---- -title: Générateur de box-shadow -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow ---- -

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

- - - -
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..9aa3cd49f6 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Générateur de border-image +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

+ + + +

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..993940bcdc --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Générateur de border-radius +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

+ + + +

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..78e9288be3 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2888 @@ +--- +title: Générateur de box-shadow +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

+ + + +
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
+ +

Voir aussi

+ + diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 4097581c56..d9336691fd 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3627,6 +3627,8 @@ /ja/docs/Web/CSS/Background_Backup /ja/docs/Web/CSS/background /ja/docs/Web/CSS/Block_formatting_context /ja/docs/Web/Guide/CSS/Block_formatting_context /ja/docs/Web/CSS/CSS_Background_and_Borders /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders +/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ja/docs/Web/CSS/CSS_Colors /en-US/docs/Web/CSS/CSS_Color @@ -4067,6 +4069,7 @@ /ja/docs/Web/HTTP/Response_codes/204 /ja/docs/Web/HTTP/Status/204 /ja/docs/Web/HTTP/Server-Side_Access_Control /ja/docs/Web/HTTP/CORS /ja/docs/Web/HTTP/X-Frame-Options /ja/docs/Web/HTTP/Headers/X-Frame-Options +/ja/docs/Web/Houdini /ja/docs/Web/Guide/Houdini /ja/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /ja/docs/Web/JavaScript/Equality_comparisons_and_sameness /ja/docs/Web/JavaScript/Getting_Started /ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics /ja/docs/Web/JavaScript/Guide/About /ja/docs/Web/JavaScript/Guide/Introduction diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 10d645f85f..2c3fa16cec 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -28162,20 +28162,20 @@ "yyss" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { - "modified": "2019-03-18T21:41:18.820Z", + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2020-04-17T14:34:56.933Z", "contributors": [ "mfuji09" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { - "modified": "2020-02-13T14:54:34.325Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { + "modified": "2019-03-18T21:41:18.820Z", "contributors": [ "mfuji09" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2020-04-17T14:34:56.933Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { + "modified": "2020-02-13T14:54:34.325Z", "contributors": [ "mfuji09" ] @@ -31311,20 +31311,6 @@ "sosleepy" ] }, - "Web/CSS/image/image-set()": { - "modified": "2020-11-16T08:53:38.885Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, - "Web/CSS/image/paint()": { - "modified": "2020-11-16T09:09:19.836Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, "Web/CSS/image-orientation": { "modified": "2020-10-15T21:46:42.965Z", "contributors": [ @@ -31343,6 +31329,20 @@ "Taken" ] }, + "Web/CSS/image/image-set()": { + "modified": "2020-11-16T08:53:38.885Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, + "Web/CSS/image/paint()": { + "modified": "2020-11-16T09:09:19.836Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, "Web/CSS/ime-mode": { "modified": "2020-10-15T21:14:16.842Z", "contributors": [ @@ -33640,6 +33640,12 @@ "mfuji09" ] }, + "Web/Guide/Houdini": { + "modified": "2020-07-24T06:19:03.585Z", + "contributors": [ + "Wind1808" + ] + }, "Web/Guide/Index": { "modified": "2020-12-07T13:42:04.312Z", "contributors": [ @@ -37389,12 +37395,6 @@ "silverskyvicto" ] }, - "Web/Houdini": { - "modified": "2020-07-24T06:19:03.585Z", - "contributors": [ - "Wind1808" - ] - }, "Web/JavaScript": { "modified": "2020-11-14T07:07:05.393Z", "contributors": [ diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 8ce5bab6e9..0000000000 --- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2629 +0,0 @@ ---- -title: 境界画像作成ツール -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - CSS 背景と境界 - - ツール -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。

- - - -
{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
- -

 

diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index 4ce39890a7..0000000000 --- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1602 +0,0 @@ ---- -title: Border-radius ジェネレーター -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -tags: - - CSS - - CSS Borders - - CSS 境界と背景 - - Tools -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。

- - - -
{{ EmbedLiveSample('border-radius-generator', 700, 900) }}
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..521db7ba49 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2630 @@ +--- +title: 境界画像作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - CSS 背景と境界 + - ツール +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。

+ + + +
{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
+ +

 

diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..cec4217518 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1603 @@ +--- +title: Border-radius ジェネレーター +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - CSS 境界と背景 + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。

+ + + +
{{ EmbedLiveSample('border-radius-generator', 700, 900) }}
diff --git a/files/ja/web/guide/houdini/index.html b/files/ja/web/guide/houdini/index.html new file mode 100644 index 0000000000..ab81169cda --- /dev/null +++ b/files/ja/web/guide/houdini/index.html @@ -0,0 +1,94 @@ +--- +title: CSS Houdini +slug: Web/Guide/Houdini +tags: + - API + - CSS + - Houdini + - JavaScript + - Landing + - Web +translation_of: Web/Houdini +original_slug: Web/Houdini +--- +

Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が CSS オブジェクトモデル（CSSOM）に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。

+ +

Houdini の利点

+ +

Houdini は、スタイルの変更に JavaScript の .style を使用するよりも高速な解析時間を可能にします。 ブラウザーは、スクリプトで見つかったスタイルの更新を適用する前に、CSSOM（レイアウト、ペイント、合成のプロセスを含む）を解析します。 さらに、JavaScript スタイルの更新のために、レイアウト、ペイント、および合成のプロセスが繰り返されます。 Houdini のコードは、最初のレンダリングサイクルが完了するまで待機しません。 むしろ、それは最初のサイクルに含まれ、レンダリング可能で理解可能なスタイルを作成します。 Houdini は、JavaScript で CSS 値を操作するためのオブジェクトベースの API を提供します。

+ +

Houdini の CSS Typed OM は、型とメソッドを備えた CSS オブジェクトモデルであり、値を JavaScript オブジェクトとして公開し、以前の文字列ベースの HTMLElement.style 操作よりも直感的な CSS 操作を実現します。 すべての要素とスタイルシートのルールには、StylePropertyMap を介してアクセスできるスタイルマップがあります。

+ +

CSS Houdini の機能の1つはワークレット（Worklet）です。 ワークレットを使用すると、モジュール方式の CSS を作成できます。 構成可能なコンポーネントをインポートするには、次の JavaScript の1行が必要です。 プリプロセッサー、ポストプロセッサー、JavaScript フレームワークは必要ありません。

+ +
<script>
+  CSS.paintWorklet.addModule('csscomponent.js');
+</script>
+
+ +

この追加されたモジュールには、完全に構成可能なワークレットを登録する registerPaint() 関数が含まれています。

+ +

CSS の paint() 関数のパラメーターには、オプションのパラメーターとともに、ワークレットの名前が含まれます。 ワークレットは要素のカスタムプロパティにもアクセスできます。 これらは関数の引数として渡す必要はありません。

+ +
li {
+	background-image: paint(myComponent, stroke, 10px);
+    --highlights: blue;
+    --lowlights: green;
+}
+ +
+

注: 大きな力には大きな責任が伴います。 Houdini を使用すると、独自の石積み（masonry）、グリッド、またはリージョンの実装を発明できますが、そうすることが必ずしも最良の考えであるとは限りません。 CSS ワーキンググループは、すべての機能が確実に実行され、すべてのエッジケースを処理し、セキュリティ、プライバシー、およびアクセシビリティを考慮するために多くの作業を行います。 Houdini で CSS を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。

+
+ +

Houdini の API

+ +

以下に、Houdini の傘下にある API をカバーするメインリファレンスページへのリンクと、それらの使用方法を学習する際にガイダンスが必要な場合に役立つガイドへのリンクを示します。

+ + + +
+
CSS Parser API
+
任意の CSS のような言語を穏やかに型付けされた表現に解析するために、CSS パーサーをより直接的に公開する API。
+
+ この API のガイドやリファレンスは現在書かれていません。
+
CSS Properties and Values API 
+
新しい CSS プロパティを登録するための API を定義します。 この API を使用して登録したプロパティには、型、継承の振る舞い、および初期値を定義する解析構文が提供されます。
+
+ CSS Properties and Values API リファレンス
+ CSS Properties and Values API ガイド
+
+
CSS Typed OM
+
CSSOM 値の文字列を意味のある型の JavaScript 表現に変換したり、元に戻したりすると、パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。 CSS Typed OM は、CSS 値を型付き JavaScript オブジェクトとして公開し、パフォーマンスの高い操作を可能にします。
+
+ CSS Typed OM リファレンス
+ CSS Typed OM ガイド
+
CSS Layout API 
+
+

CSS の拡張性を改善するように設計されたこの API は、開発者が石積みやラインスナップなどの独自のレイアウトアルゴリズムを作成できるようにします。 まだネイティブでは利用できません。
+
+ この API のガイドやリファレンスは現在書かれていません。

+
+
CSS Painting API
+
+

CSS の拡張性を向上させるために開発 — 開発者が paint() CSS 関数を介して要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できるようにします。
+
+ CSS Painting API リファレンス
+ CSS Painting API ガイド

+
+
Worklets 
+
+

メインの JavaScript 実行環境から独立した、レンダリングパイプラインのさまざまな段階でスクリプトを実行するための API。 ワークレットは概念的には Web Workers に似ており、レンダリングエンジンによって呼び出され、レンダリングエンジンを拡張します。
+
+ Worklets リファレンス

+
+
+ +

その他のトピック

+ +

興味深い方法で Houdini API と連携して使用できるため、興味深い関連トピック。

+ +
+
合成スクロールとアニメーション
+
diff --git a/files/ja/web/houdini/index.html b/files/ja/web/houdini/index.html deleted file mode 100644 index df3539da77..0000000000 --- a/files/ja/web/houdini/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: CSS Houdini -slug: Web/Houdini -tags: - - API - - CSS - - Houdini - - JavaScript - - Landing - - Web -translation_of: Web/Houdini ---- -

Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が CSS オブジェクトモデル（CSSOM）に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。

- -

Houdini の利点

- -

Houdini は、スタイルの変更に JavaScript の .style を使用するよりも高速な解析時間を可能にします。 ブラウザーは、スクリプトで見つかったスタイルの更新を適用する前に、CSSOM（レイアウト、ペイント、合成のプロセスを含む）を解析します。 さらに、JavaScript スタイルの更新のために、レイアウト、ペイント、および合成のプロセスが繰り返されます。 Houdini のコードは、最初のレンダリングサイクルが完了するまで待機しません。 むしろ、それは最初のサイクルに含まれ、レンダリング可能で理解可能なスタイルを作成します。 Houdini は、JavaScript で CSS 値を操作するためのオブジェクトベースの API を提供します。

- -

Houdini の CSS Typed OM は、型とメソッドを備えた CSS オブジェクトモデルであり、値を JavaScript オブジェクトとして公開し、以前の文字列ベースの HTMLElement.style 操作よりも直感的な CSS 操作を実現します。 すべての要素とスタイルシートのルールには、StylePropertyMap を介してアクセスできるスタイルマップがあります。

- -

CSS Houdini の機能の1つはワークレット（Worklet）です。 ワークレットを使用すると、モジュール方式の CSS を作成できます。 構成可能なコンポーネントをインポートするには、次の JavaScript の1行が必要です。 プリプロセッサー、ポストプロセッサー、JavaScript フレームワークは必要ありません。

- -
<script>
-  CSS.paintWorklet.addModule('csscomponent.js');
-</script>
-
- -

この追加されたモジュールには、完全に構成可能なワークレットを登録する registerPaint() 関数が含まれています。

- -

CSS の paint() 関数のパラメーターには、オプションのパラメーターとともに、ワークレットの名前が含まれます。 ワークレットは要素のカスタムプロパティにもアクセスできます。 これらは関数の引数として渡す必要はありません。

- -
li {
-	background-image: paint(myComponent, stroke, 10px);
-    --highlights: blue;
-    --lowlights: green;
-}
- -
-

注: 大きな力には大きな責任が伴います。 Houdini を使用すると、独自の石積み（masonry）、グリッド、またはリージョンの実装を発明できますが、そうすることが必ずしも最良の考えであるとは限りません。 CSS ワーキンググループは、すべての機能が確実に実行され、すべてのエッジケースを処理し、セキュリティ、プライバシー、およびアクセシビリティを考慮するために多くの作業を行います。 Houdini で CSS を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。

-
- -

Houdini の API

- -

以下に、Houdini の傘下にある API をカバーするメインリファレンスページへのリンクと、それらの使用方法を学習する際にガイダンスが必要な場合に役立つガイドへのリンクを示します。

- - - -
-
CSS Parser API
-
任意の CSS のような言語を穏やかに型付けされた表現に解析するために、CSS パーサーをより直接的に公開する API。
-
- この API のガイドやリファレンスは現在書かれていません。
-
CSS Properties and Values API 
-
新しい CSS プロパティを登録するための API を定義します。 この API を使用して登録したプロパティには、型、継承の振る舞い、および初期値を定義する解析構文が提供されます。
-
- CSS Properties and Values API リファレンス
- CSS Properties and Values API ガイド
-
-
CSS Typed OM
-
CSSOM 値の文字列を意味のある型の JavaScript 表現に変換したり、元に戻したりすると、パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。 CSS Typed OM は、CSS 値を型付き JavaScript オブジェクトとして公開し、パフォーマンスの高い操作を可能にします。
-
- CSS Typed OM リファレンス
- CSS Typed OM ガイド
-
CSS Layout API 
-
-

CSS の拡張性を改善するように設計されたこの API は、開発者が石積みやラインスナップなどの独自のレイアウトアルゴリズムを作成できるようにします。 まだネイティブでは利用できません。
-
- この API のガイドやリファレンスは現在書かれていません。

-
-
CSS Painting API
-
-

CSS の拡張性を向上させるために開発 — 開発者が paint() CSS 関数を介して要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できるようにします。
-
- CSS Painting API リファレンス
- CSS Painting API ガイド

-
-
Worklets 
-
-

メインの JavaScript 実行環境から独立した、レンダリングパイプラインのさまざまな段階でスクリプトを実行するための API。 ワークレットは概念的には Web Workers に似ており、レンダリングエンジンによって呼び出され、レンダリングエンジンを拡張します。
-
- Worklets リファレンス

-
-
- -

その他のトピック

- -

興味深い方法で Houdini API と連携して使用できるため、興味深い関連トピック。

- -
-
合成スクロールとアニメーション
-
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 11da27c514..98641a59c2 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -502,6 +502,9 @@ /ko/docs/Web/API/window.screen.unlockOrientation /ko/docs/Web/API/Screen/unlockOrientation /ko/docs/Web/CSS/All_About_The_Containing_Block /ko/docs/Web/CSS/Containing_block /ko/docs/Web/CSS/CSS_Background_and_Borders /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders +/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/ko/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ko/docs/Web/CSS/CSS_Colors /ko/docs/Web/CSS/CSS_Color /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index c666f061e0..3d73c38255 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -8035,33 +8035,33 @@ "jaemin_jo" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2020-08-10T06:40:27.369Z", + "contributors": [ + "alattalatta", + "Sheppy" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-20T10:30:55.489Z", "contributors": [ "alattalatta", "young-gratia" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-20T10:29:25.952Z", "contributors": [ "alattalatta", "young-gratia" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-20T10:32:14.015Z", "contributors": [ "alattalatta" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2020-08-10T06:40:27.369Z", - "contributors": [ - "alattalatta", - "Sheppy" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-04-08T10:28:17.719Z", "contributors": [ diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 229a9eabd0..0000000000 --- a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2627 +0,0 @@ ---- -title: Border-image 생성기 -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - CSS Borders - - Tools -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.

- - - -
{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index db9310aa83..0000000000 --- a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1601 +0,0 @@ ---- -title: Border-radius 생성기 -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -tags: - - CSS - - CSS Borders - - Tools -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.

- - - -
{{ EmbedLiveSample('border-radius-generator', 700, 900) }}
diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 63a6166cd1..0000000000 --- a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2881 +0,0 @@ ---- -title: Box-shadow 생성기 -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - CSS - - Tools -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
diff --git a/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..6b9954d8a5 --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2628 @@ +--- +title: Border-image 생성기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.

+ + + +
{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
diff --git a/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..c42e523de9 --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1602 @@ +--- +title: Border-radius 생성기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.

+ + + +
{{ EmbedLiveSample('border-radius-generator', 700, 900) }}
diff --git a/files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..d74321854c --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2882 @@ +--- +title: Box-shadow 생성기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.

+ + + +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index daca4b07f7..6f1dea3e46 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -566,6 +566,8 @@ /pt-BR/docs/Web/CSS/-moz-box-ordinal-group /pt-BR/docs/Web/CSS/box-ordinal-group /pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Background_and_Borders /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders +/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing /pt-BR/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing /pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores /pt-BR/docs/Web/CSS/CSS_Colors/Color_picker_tool @@ -587,8 +589,8 @@ /pt-BR/docs/Web/CSS/Seletor_universal /pt-BR/docs/Web/CSS/Universal_selectors /pt-BR/docs/Web/CSS/Seletores_CSS /pt-BR/docs/Web/CSS/CSS_Selectors /pt-BR/docs/Web/CSS/Sintexe_valor /pt-BR/docs/Web/CSS/Value_definition_syntax -/pt-BR/docs/Web/CSS/Tools/Border-image_generator /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator -/pt-BR/docs/Web/CSS/Tools/Border-radius_generator /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/pt-BR/docs/Web/CSS/Tools/Border-image_generator /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/pt-BR/docs/Web/CSS/Tools/Border-radius_generator /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /pt-BR/docs/Web/CSS/Using_CSS_variables /pt-BR/docs/Web/CSS/Using_CSS_custom_properties /pt-BR/docs/Web/CSS/Valor_atual /pt-BR/docs/Web/CSS/actual_value /pt-BR/docs/Web/CSS/Valor_resolvido /pt-BR/docs/Web/CSS/resolved_value diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 42e4e9b280..017e0afb74 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -7584,25 +7584,25 @@ "francisco.hansen" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:44:11.690Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-05-06T10:31:39.391Z", "contributors": [ "leodeJESUS", "Torto" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T23:07:37.174Z", "contributors": [ "Torto" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-23T22:44:11.690Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-03-23T22:59:50.758Z", "contributors": [ diff --git a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 019e1d81cf..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2628 +0,0 @@ ---- -title: Gerador de Border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - Alternativas CSS -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator -original_slug: Web/CSS/Tools/Border-image_generator ---- -

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

- - - -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index 003d65cb31..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1594 +0,0 @@ ---- -title: Gerador de Border-radius -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -tags: - - CSS - - Ferramentas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/Tools/Border-radius_generator ---- -

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

- -

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

-

 

diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..ac8d0c6c1e --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2628 @@ +--- +title: Gerador de Border-image +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - Alternativas CSS +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

+ + + +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..5567efa9f5 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1594 @@ +--- +title: Gerador de Border-radius +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - Ferramentas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

+ +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+

 

diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 619625d281..3a867ba603 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -383,10 +383,13 @@ /ru/docs/Web/CSS/Adjacent_sibling_selectors /ru/docs/Web/CSS/Adjacent_sibling_combinator /ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy /ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations /ru/docs/Web/CSS/CSS_Background_and_Borders /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders -/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор /ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ru/docs/Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor /ru/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Colors /ru/docs/Web/CSS/CSS_Color /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 43fa9641e5..1e12d65056 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -12741,30 +12741,30 @@ "ukarim" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:40:44.971Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-23T22:25:50.600Z", "contributors": [ "BychekRU" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T22:40:49.075Z", "contributors": [ "vito_falcone" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-18T20:43:50.074Z", "contributors": [ "BychekRU" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-23T22:40:44.971Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { "modified": "2019-03-23T22:13:04.810Z", "contributors": [ diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 8e798f9292..0000000000 --- a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2628 +0,0 @@ ---- -title: Генератор Border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - Tools -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.

- - - -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index d8aafac807..0000000000 --- a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1600 +0,0 @@ ---- -title: Border-radius генератор -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор ---- -

С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.

- - - -

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

- -

 

diff --git a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 4530073ad2..0000000000 --- a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2885 +0,0 @@ ---- -title: Генератор теней -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - CSS3 - - Тень - - инструменты -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator ---- -

Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Похожий инструмент: Генератор CSS Box Shadow

diff --git a/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..ebd9771810 --- /dev/null +++ b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2629 @@ +--- +title: Генератор Border-image +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.

+ + + +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..103a3e0965 --- /dev/null +++ b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1600 @@ +--- +title: Border-radius генератор +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.

+ + + +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..8252c21112 --- /dev/null +++ b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2885 @@ +--- +title: Генератор теней +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS3 + - Тень + - инструменты +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.

+ + + +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
+ +

Похожий инструмент: Генератор CSS Box Shadow

diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 566a22782a..5653358610 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1670,9 +1670,12 @@ /zh-CN/docs/Web/CSS/Block_formatting_context /zh-CN/docs/Web/Guide/CSS/Block_formatting_context /zh-CN/docs/Web/CSS/CSS3中的关键帧 /zh-CN/docs/Web/CSS/@keyframes /zh-CN/docs/Web/CSS/CSSOM_View/坐标系 /zh-CN/docs/Web/CSS/CSSOM_View/Coordinate_systems -/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器 /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器 /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods @@ -1968,6 +1971,7 @@ /zh-CN/docs/Web/HTTP/策略特征/Using_Feature_Policy /zh-CN/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy /zh-CN/docs/Web/HTTP/缓存_FAQ /zh-CN/docs/Web/HTTP/Caching /zh-CN/docs/Web/HTTP/重定向 /zh-CN/docs/Web/HTTP/Redirections +/zh-CN/docs/Web/Houdini /zh-CN/docs/Web/Guide/Houdini /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness /zh-CN/docs/Web/JavaScript/Guide/Closures /zh-CN/docs/Web/JavaScript/Closures /zh-CN/docs/Web/JavaScript/Guide/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index c7337931f9..d2764ca101 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -26104,14 +26104,22 @@ "hutuxu" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-18T21:45:20.317Z", + "contributors": [ + "PythonVsJava", + "RainSlide", + "Sheppy" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-18T21:15:13.389Z", "contributors": [ "Ende93", "yellowstar1992" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T22:42:48.406Z", "contributors": [ "FrontENG", @@ -26119,7 +26127,7 @@ "regiondavid" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-18T20:43:42.671Z", "contributors": [ "BychekRU", @@ -26127,14 +26135,6 @@ "charlie" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-18T21:45:20.317Z", - "contributors": [ - "PythonVsJava", - "RainSlide", - "Sheppy" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-03-18T21:38:07.175Z", "contributors": [ @@ -31070,6 +31070,16 @@ "Teago" ] }, + "Web/Guide/Houdini": { + "modified": "2020-11-21T05:08:58.458Z", + "contributors": [ + "xusy", + "bingoYB", + "cutefcc", + "sunfeel", + "xgqfrms" + ] + }, "Web/Guide/Introduction_to_Web_development": { "modified": "2019-03-24T00:00:33.366Z", "contributors": [ @@ -35156,16 +35166,6 @@ "WayneCui" ] }, - "Web/Houdini": { - "modified": "2020-11-21T05:08:58.458Z", - "contributors": [ - "xusy", - "bingoYB", - "cutefcc", - "sunfeel", - "xgqfrms" - ] - }, "Web/JavaScript": { "modified": "2020-09-21T00:46:20.876Z", "contributors": [ diff --git a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html deleted file mode 100644 index 85b576cfd7..0000000000 --- a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2628 +0,0 @@ ---- -title: Border-image 生成器 -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator -tags: - - CSS - - Tools -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.

- - - -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html deleted file mode 100644 index 70ffc1aad1..0000000000 --- a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1600 +0,0 @@ ---- -title: 圆角边框生成器 -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器 ---- -

使用Border-radius generator生成 CSS3 {{cssxref("border-radius")}} 样式

- - - -

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

- -

 

diff --git a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 79b9abe9e2..0000000000 --- a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2881 +0,0 @@ ---- -title: Box-shadow generator -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator ---- -

这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..870e84f663 --- /dev/null +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -0,0 +1,2629 @@ +--- +title: Border-image 生成器 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.

+ + + +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..4781337bc3 --- /dev/null +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -0,0 +1,1600 @@ +--- +title: 圆角边框生成器 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

使用Border-radius generator生成 CSS3 {{cssxref("border-radius")}} 样式

+ + + +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..2847389264 --- /dev/null +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2881 @@ +--- +title: Box-shadow generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。

+ + + +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
+ +

Related Tool: Box Shadow CSS Generator

diff --git a/files/zh-cn/web/guide/houdini/index.html b/files/zh-cn/web/guide/houdini/index.html new file mode 100644 index 0000000000..2c81ff1ed3 --- /dev/null +++ b/files/zh-cn/web/guide/houdini/index.html @@ -0,0 +1,91 @@ +--- +title: CSS Houdini +slug: Web/Guide/Houdini +tags: + - API + - CSS + - Houdini + - Web +translation_of: Web/Houdini +original_slug: Web/Houdini +--- +

Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

+ +

Houdini 的优点

+ +

当样式改变时Houdini相比JavaScript.style 的方式能够能够更快的解析。  浏览器在应用脚本中发现的任何样式更新之前，会对CSSOM进行解析--包括布局、绘制和合成过程。此外，对于JavaScript样式更新，布局、绘制和复合过程也会重复进行。Houdini代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中--创建可渲染的、可理解的样式。Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。

+ +

Houdini 的 CSS Typed OM 是一个包含类型和方法的 CSS 对象、并且暴露出了作为 JavaScript 对象的值。比起先前基于字符串的，对  HTMLElement.style 进行操作的方案，对 JavaScript 对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过  StylePropertyMap 来获得。

+ +

一个 CSS Houdini 的特性就是  Worklet。在它的帮助下，你可以通过引入一行 JavaScript 代码来引入配置化的组件，从而创建模块式的 CSS。不依赖任何前置处理器、后置处理器或者 JavaScript 框架。

+ +
<script>
+  CSS.paintWorklet.addModule('csscomponent.js');
+</script>
+
+ +

以上添加进的模块包含一个  registerPaint()函数，这个模块是完全通过可配置的 worklets 来注册的。

+ +

这个 CSS  paint()  函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。

+ +
li {
+	background-image: paint(myComponent, stroke, 10px);
+    --hilights: blue;
+    --lowlights: green;
+}
+ +
+

提醒: 能力越大，责任越大！在 Houdini 的帮助下你能够在 css 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。

+
+ +

Houdini APIs

+ +

在下面，你能够找到一些链接。这些链接指向 Houdini 范围下的 API 的主列表页面，同时链接到一些指导页来帮助你，如果你需要指导如何去使用这些API。

+ + + +
+
CSS Parser API
+
这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型。
+
目前还没有该 API 的教程或参考。
+
CSS Properties and Values API 
+
定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值。
+
+ CSS Properties and Values API reference
+ CSS Properties and Values API guide
+
+
CSS Typed OM
+
该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSS Typed OM 将 CSS 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制。
+
+ CSS Typed OM reference
+ CSS Typed OM guide
+
CSS Layout API 
+
+

作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping。该 API 目前还没有原生支持。

+ +

目前还没有该 API 的教程或参考。

+
+
CSS Painting API
+
+

作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 paint() 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域。
+
+ CSS Painting API reference
+ CSS Painting API guide

+
+
Worklets 
+
+

该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 Web Workers ，它由渲染引擎调用，并扩展了渲染引擎。
+
+ Worklets reference

+
+
+ +

其他

+ +

以下主题你可能会感兴趣，它们可能在你使用 Houdini API 的时候起一些有趣的作用。

+ +
+
Composite Scrolling and Animation 
+
diff --git a/files/zh-cn/web/houdini/index.html b/files/zh-cn/web/houdini/index.html deleted file mode 100644 index 68259ebd34..0000000000 --- a/files/zh-cn/web/houdini/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: CSS Houdini -slug: Web/Houdini -tags: - - API - - CSS - - Houdini - - Web -translation_of: Web/Houdini ---- -

Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

- -

Houdini 的优点

- -

当样式改变时Houdini相比JavaScript.style 的方式能够能够更快的解析。  浏览器在应用脚本中发现的任何样式更新之前，会对CSSOM进行解析--包括布局、绘制和合成过程。此外，对于JavaScript样式更新，布局、绘制和复合过程也会重复进行。Houdini代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中--创建可渲染的、可理解的样式。Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。

- -

Houdini 的 CSS Typed OM 是一个包含类型和方法的 CSS 对象、并且暴露出了作为 JavaScript 对象的值。比起先前基于字符串的，对  HTMLElement.style 进行操作的方案，对 JavaScript 对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过  StylePropertyMap 来获得。

- -

一个 CSS Houdini 的特性就是  Worklet。在它的帮助下，你可以通过引入一行 JavaScript 代码来引入配置化的组件，从而创建模块式的 CSS。不依赖任何前置处理器、后置处理器或者 JavaScript 框架。

- -
<script>
-  CSS.paintWorklet.addModule('csscomponent.js');
-</script>
-
- -

以上添加进的模块包含一个  registerPaint()函数，这个模块是完全通过可配置的 worklets 来注册的。

- -

这个 CSS  paint()  函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。

- -
li {
-	background-image: paint(myComponent, stroke, 10px);
-    --hilights: blue;
-    --lowlights: green;
-}
- -
-

提醒: 能力越大，责任越大！在 Houdini 的帮助下你能够在 css 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。

-
- -

Houdini APIs

- -

在下面，你能够找到一些链接。这些链接指向 Houdini 范围下的 API 的主列表页面，同时链接到一些指导页来帮助你，如果你需要指导如何去使用这些API。

- - - -
-
CSS Parser API
-
这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型。
-
目前还没有该 API 的教程或参考。
-
CSS Properties and Values API 
-
定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值。
-
- CSS Properties and Values API reference
- CSS Properties and Values API guide
-
-
CSS Typed OM
-
该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSS Typed OM 将 CSS 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制。
-
- CSS Typed OM reference
- CSS Typed OM guide
-
CSS Layout API 
-
-

作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping。该 API 目前还没有原生支持。

- -

目前还没有该 API 的教程或参考。

-
-
CSS Painting API
-
-

作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 paint() 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域。
-
- CSS Painting API reference
- CSS Painting API guide

-
-
Worklets 
-
-

该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 Web Workers ，它由渲染引擎调用，并扩展了渲染引擎。
-
- Worklets reference

-
-
- -

其他

- -

以下主题你可能会感兴趣，它们可能在你使用 Houdini API 的时候起一些有趣的作用。

- -
-
Composite Scrolling and Animation 
-
-- cgit v1.2.3-54-g00ecf From ec243392a55686d3a0f8603116c68767463dac46 Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Tue, 31 Aug 2021 21:13:27 +0200 Subject: Update French translation of the `@media` reference (#1803) * Fix broken link on French translation of the `@media` reference This PR fixes a broken link on French translation of the `@media` reference. * Update page vs. en-US and fix {{page}} transclusion * Multiple fixes * Minor fix Co-authored-by: SphinxKnight Co-authored-by: tristantheb --- files/fr/web/css/@media/index.html | 125 +++++++-------------- .../media_queries/using_media_queries/index.html | 110 +++++++++--------- 2 files changed, 93 insertions(+), 142 deletions(-) (limited to 'files/fr/web/css') diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html index 7a67bea0bb..bc94ddbaf3 100644 --- a/files/fr/web/css/@media/index.html +++ b/files/fr/web/css/@media/index.html @@ -1,29 +1,22 @@ --- title: '@media' slug: Web/CSS/@media -tags: - - CSS - - Reference - - Règle @ +browser-compat: css.at-rules.media translation_of: Web/CSS/@media ---
{{CSSRef}}
-

La règle @ @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média. La règle @media peut être utilisé au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règles conditionnel.

+

La règle @ @media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs requêtes média (media queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.

-
@media (max-width: 600px) {
-  .sidebar {
-    display: none;
-  }
-}
- -

Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.

+
+

Note : Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) grâce à l'interface CSSMediaRule.

+
-

Syntaxe

+

Syntaxe

-

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

+

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

-
/* Au niveau le plus haut du code */
+
/* Au niveau le plus haut du code */
 @media screen and (min-width: 900px) {
   article {
     padding: 1rem 3rem;
@@ -40,17 +33,37 @@ translation_of: Web/CSS/@media
 }
 

 
-
Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

+
Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

+
+
Description

+
+
Types de média

+
+
{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}

 
-
Syntaxe formelle

+
Caractéristiques de média

 
-{{csssyntax}}
+
{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}

 
-
Les caractéristiques média

+
Accessibilité

 
-
{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}

+
Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur (<length>).

 
-
Exemples

+
Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

+
+
On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

+
+
Sécurité

+
+
Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.

+
+
Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

+
+
Syntaxe formelle

+
+
{{csssyntax}}

+
+
Exemples

 
 
@media print {
   body { font-size: 10pt }
@@ -81,73 +94,19 @@ translation_of: Web/CSS/@media
 }
 

 
-
Pour plus d'exemples, voir Utiliser les requêtes média.

+
Pour plus d'exemples, voir Utiliser les requêtes média.

 
-
Accessibilité

+
Spécifications

 
-
Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur ({{cssxref("<length>")}}).

+
{{Specifications}}

 
-
Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

+
Compatibilité des navigateurs

 
-
On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

-
-
Sécurité

-
-
Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.

-
-
Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

+
{{Compat}}

 
-
Spécifications

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpécificationCommentairesRetours
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Réintègre light-level, inverted-colors et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.

-    Ajout des caractéristiques média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast et prefers-color-scheme.		Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Définition de la syntaxe de base pour la règle @media.Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS4 Media Queries', '#media', '@media')}}
-    
Ajout des caractéristiques média scripting, pointer, hover, update, overflow-block et overflow-inline.

-     Dépréciation de l'ensemble des types de média à l'exception de screen, print, speech et all.

-     La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé or.

-   		Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Définition initiale.

-
-
Compatibilité des navigateurs

-
-
{{Compat("css.at-rules.media")}}

-
-
Voir aussi

+
Voir aussi

 
 
diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html
index ef57afbdfd..21228d0eaf 100644
--- a/files/fr/web/css/media_queries/using_media_queries/index.html
+++ b/files/fr/web/css/media_queries/using_media_queries/index.html
@@ -1,14 +1,6 @@
 ---
 title: Media queries
 slug: Web/CSS/Media_Queries/Using_media_queries
-tags:
-  - Avancé
-  - CSS
-  - CSS3
-  - Guide
-  - Media Queries
-  - Requêtes média
-  - Responsive Design
 translation_of: Web/CSS/Media_Queries/Using_media_queries
 original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 ---
@@ -19,26 +11,26 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
Les requêtes média sont utilisées afin :

 
 
 
 

 
Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

 

 
-
Syntaxe

+
Syntaxe

 
 
Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

 
 
Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

 
 

-
Note : Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

+
Note : Lorsqu'une feuille de style est attachée à un élément <link> comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

 

 
-
Types de média

+
Types de média

 
 
Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

 
@@ -46,16 +38,16 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
  
all

  
Correspond pour tous les appareils.

  
print

- 
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les média paginés.

+ 
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les médias paginés.

  
screen

  
Correspond aux appareils dotés d'un écran.

  
speech

  
Correspond aux outils de synthèse vocale.

 
 
-
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.

+
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.

 
-
Caractéristiques média (media features)

+
Caractéristiques média (media features)

 
 
Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

 
@@ -185,7 +177,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
   
   
    {{cssxref("@media/prefers-contrast", "prefers-contrast")}}
-   L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.
+   L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.
    Ajoutée avec le niveau 5 du module de spécification Media Queries.
   
   
@@ -221,7 +213,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
  
 
 
-
Opérateurs logiques

+
Opérateurs logiques

 
 
Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

 
@@ -245,45 +237,45 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
 
Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

 
-
Cibler des types de média

+
Cibler des types de média

 
-
Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

+
Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possible d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

 
-
@media print { ... }

+
@media print { ... }

 
 
Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

 
-
@media screen, print { ... }

+
@media screen, print { ... }

 
 
Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

 
-
Cibler des caractéristiques média

+
Cibler des caractéristiques média

 
 
Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

 
-
@media (hover: hover) { ... }

+
@media (hover: hover) { ... }

 
 
De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

 
-
@media (max-width: 1250px) { ... }

+
@media (max-width: 1250px) { ... }

 
-

-
Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

+

+
Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

 

 
 
Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

 
-
@media (color) { ... }

+
@media (color) { ... }

 
 
Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

 
-
@media speech and (aspect-ratio: 11/5) { ... }

+
@media speech and (aspect-ratio: 11/5) { ... }

 
 
Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

 
-
Créer des requêtes média complexes

+
Créer des requêtes média complexes

 
-
Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

+
Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

 
 
Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

 
@@ -291,95 +283,95 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
Note : Dans la plupart des cas, le type de média all est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs not ou only, il est nécessaire de fournir un type de média explicite.

 

 
-
Combiner plusieurs types ou caractéristiques

+
Combiner plusieurs types ou caractéristiques

 
 
Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

 
-
@media (min-width: 30em) and (orientation: landscape) { ... }

+
@media (min-width: 30em) and (orientation: landscape) { ... }

 
 
Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

 
-
@media screen and (min-width: 30em) and (orientation: landscape) { ... }

+
@media screen and (min-width: 30em) and (orientation: landscape) { ... }

 
-
Tester plusieurs requêtes

+
Tester plusieurs requêtes

 
 
La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

 
-
@media (min-height: 680px), screen and (orientation: portrait) { ... }

+
@media (min-height: 680px), screen and (orientation: portrait) { ... }

 
 
Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

 
-
Opérer une négation

+
Opérer une négation

 
 
Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

 
-
@media not all and (monochrome) { ... }
+
@media not all and (monochrome) { ... }
 

 
 
La requête précédente est donc équivalente à :

 
-
@media not (all and (monochrome)) { ... }
+
@media not (all and (monochrome)) { ... }
 

 
 
Mais elle n'est pas équivalente à :

 
-
@media (not all) and (monochrome) { ... }

+
@media (not all) and (monochrome) { ... }

 
 
De même :

 
-
@media not screen and (color), print and (color) { ... }
+
@media not screen and (color), print and (color) { ... }
 

 
 
sera évaluée comme :

 
-
@media (not (screen and (color))), print and (color) { ... }

+
@media (not (screen and (color))), print and (color) { ... }

 
-
Améliorer la compatibilité avec les anciens navigateurs

+
Améliorer la compatibilité avec les anciens navigateurs

 
 
Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes.

 
-
@media only screen and (color) { ... }
+
@media only screen and (color) { ... }
 

 
-
Améliorations syntaxiques avec la spécification de niveau 4

+
Améliorations syntaxiques avec la spécification de niveau 4

 
 
La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

 
-
@media (max-width: 30em) { ... }

+
@media (max-width: 30em) { ... }

 
 
Avec les requêtes média de niveau 4, on peut écrire :

 
-
@media (width <= 30em) { ... }

+
@media (width <= 30em) { ... }

 
 
Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

 
-
@media (min-width: 30em) and (max-width: 50em) { ... }

+
@media (min-width: 30em) and (max-width: 50em) { ... }

 
 
Avec les requêtes média de niveau 4, on peut écrire :

 
-
@media (30em <= width <= 50em ) { ... }
+
@media (30em <= width <= 50em ) { ... }
 

 
 
Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

 
-
Tester l'absence d'une caractéristique avec not

+
Tester l'absence d'une caractéristique avec not

 
 
On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

 
-
@media (not(hover)) { ... }

+
@media (not(hover)) { ... }

 
-
Tester plusieurs caractéristiques avec or

+
Tester plusieurs caractéristiques avec or

 
 
Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

 
-
@media (not (color)) or (hover) { ... }
+
@media (not (color)) or (hover) { ... }
 

 
-
Voir aussi

+
Voir aussi

 
 
-- 
cgit v1.2.3-54-g00ecf


From 1768b43f574673545e1f2a20e92a27b050a2bb53 Mon Sep 17 00:00:00 2001
From: SphinxKnight 
Date: Tue, 31 Aug 2021 21:19:43 +0200
Subject: Fixes #2218 (#2272)

---
 .../relationship_of_grid_layout/index.html         | 83 ++++++++++------------
 1 file changed, 37 insertions(+), 46 deletions(-)

(limited to 'files/fr/web/css')

diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 65525f21d4..6cfbf09b73 100644
--- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -1,18 +1,11 @@
 ---
 title: Le modèle de grille et les autres modèles de disposition
 slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
-tags:
-  - CSS
-  - CSS Grids
-  - Guide
-  - Intermédiaire
 translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition
 ---
 
{{CSSRef}}

 
-
{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

-
 
Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

 
 
Les grilles et les boîtes flexibles (flexbox)

@@ -29,7 +22,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
@@ -56,7 +49,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   width: 500px;
   display: flex;
   flex-wrap: wrap;
@@ -79,7 +72,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
@@ -106,14 +99,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
 

 
-
{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

 

+
{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}

 
 
Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :

 
@@ -141,7 +134,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: flex;
   align-items: flex-end;
   min-height: 200px;
@@ -179,14 +172,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

 
-
{{EmbedLiveSample('Box_alignment', '300', '230')}}

+
{{EmbedLiveSample('Lalignement_des_boîtes', '300', '230')}}

 
 
L'alignement sur les grilles CSS

 
 
Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   align-items: end;
@@ -224,7 +217,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

 
-
{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

+
{{EmbedLiveSample('Lalignement_sur_les_grilles_CSS', '200', '310')}}

 
 
L'unité fr et flex-basis

 
@@ -241,7 +234,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
 }
 

 
-
{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

+
{{EmbedLiveSample('Des_pistes_qui_se_remplissent_automatiquement', '500', '170')}}

 
 
Avoir un nombre de pistes flexible

 
@@ -281,7 +274,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 

 
-
{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

+
{{EmbedLiveSample('Avoir_un_nombre_de_pistes_flexible', '500', '170')}}

 
 
On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

 
@@ -327,7 +320,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">
@@ -358,7 +351,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -376,7 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

 
-
{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}

+
{{EmbedLiveSample('Avoir_une_grille_comme_bloc_englobant', '500', '330')}}

 
 
On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

 
@@ -397,7 +390,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">Trois
@@ -429,7 +422,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -453,7 +446,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

 
-
{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}

+
{{EmbedLiveSample('Utiliser_une_zone_de_grille_comme_parent', '500', '420')}}

 
 
Utiliser une grille et display: contents

 
@@ -467,7 +460,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box box1">
     <div class="nested">a</div>
     <div class="nested">b</div>
@@ -504,7 +497,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -523,7 +516,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box box1">
     <div class="nested">a</div>
     <div class="nested">b</div>
@@ -560,7 +553,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -585,5 +578,3 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
  
  • Guides sur Flexbox
    • 
  
  • Guides sur la disposition multi-colonnes
    • 
 
-
-
    {{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}
    
-- 
cgit v1.2.3-54-g00ecf


From dda635dd6182e36ba9ac07810014cf15cf47e50a Mon Sep 17 00:00:00 2001
From: MDN 
Date: Thu, 2 Sep 2021 00:46:31 +0000
Subject: [CRON] sync translated content

---
 files/de/_redirects.txt                            |  1 +
 files/de/_wikihistory.json                         | 14 +++++-----
 files/de/conflicting/web/css/index.html            | 26 ++++++++++++++++++
 files/de/web/css/tools/index.html                  | 25 -----------------
 files/es/_redirects.txt                            |  3 ++-
 files/es/_wikihistory.json                         | 12 ++++-----
 files/es/conflicting/web/css/index.html            | 29 ++++++++++++++++++++
 files/es/web/css/tools/index.html                  | 29 --------------------
 files/fr/_redirects.txt                            |  3 ++-
 files/fr/_wikihistory.json                         | 14 +++++-----
 .../index.html                                     | 21 +++++++++++++++
 files/fr/web/css/tools/index.html                  | 21 ---------------
 files/ja/_redirects.txt                            |  1 +
 files/ja/_wikihistory.json                         | 14 +++++-----
 files/ja/conflicting/web/css/index.html            | 31 ++++++++++++++++++++++
 files/ja/web/css/tools/index.html                  | 30 ---------------------
 files/pt-br/_redirects.txt                         |  1 +
 files/pt-br/_wikihistory.json                      | 14 +++++-----
 files/pt-br/conflicting/web/css/index.html         | 31 ++++++++++++++++++++++
 files/pt-br/web/css/tools/index.html               | 30 ---------------------
 files/zh-cn/_redirects.txt                         |  1 +
 files/zh-cn/_wikihistory.json                      | 20 +++++++-------
 files/zh-cn/conflicting/web/css/index.html         | 28 +++++++++++++++++++
 files/zh-cn/web/css/tools/index.html               | 27 -------------------
 24 files changed, 218 insertions(+), 208 deletions(-)
 create mode 100644 files/de/conflicting/web/css/index.html
 delete mode 100644 files/de/web/css/tools/index.html
 create mode 100644 files/es/conflicting/web/css/index.html
 delete mode 100644 files/es/web/css/tools/index.html
 create mode 100644 files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html
 delete mode 100644 files/fr/web/css/tools/index.html
 create mode 100644 files/ja/conflicting/web/css/index.html
 delete mode 100644 files/ja/web/css/tools/index.html
 create mode 100644 files/pt-br/conflicting/web/css/index.html
 delete mode 100644 files/pt-br/web/css/tools/index.html
 create mode 100644 files/zh-cn/conflicting/web/css/index.html
 delete mode 100644 files/zh-cn/web/css/tools/index.html

(limited to 'files/fr/web/css')

diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt
index 6a5b8a39f0..1e1a223b58 100644
--- a/files/de/_redirects.txt
+++ b/files/de/_redirects.txt
@@ -531,6 +531,7 @@
 /de/docs/Web/CSS/Pseudoklasse	/de/docs/Web/CSS/Pseudo-classes
 /de/docs/Web/CSS/Referenz	/de/docs/Web/CSS/Reference
 /de/docs/Web/CSS/Spezifität	/de/docs/Web/CSS/Specificity
+/de/docs/Web/CSS/Tools	/de/docs/conflicting/Web/CSS
 /de/docs/Web/CSS/Vererbung	/de/docs/Web/CSS/inheritance
 /de/docs/Web/CSS/Wertdefinitionssyntax	/de/docs/Web/CSS/Value_definition_syntax
 /de/docs/Web/CSS/attr	/de/docs/Web/CSS/attr()
diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json
index 6e9006333c..6c44b44041 100644
--- a/files/de/_wikihistory.json
+++ b/files/de/_wikihistory.json
@@ -5602,13 +5602,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T22:43:38.676Z",
-    "contributors": [
-      "Sebastianz",
-      "creativenitish"
-    ]
-  },
   "Web/CSS/Tools/Linear-gradient_Generator": {
     "modified": "2019-03-23T22:43:38.482Z",
     "contributors": [
@@ -13590,6 +13583,13 @@
       "eminor"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T22:43:38.676Z",
+    "contributors": [
+      "Sebastianz",
+      "creativenitish"
+    ]
+  },
   "conflicting/Web/CSS/::placeholder": {
     "modified": "2019-03-23T23:08:23.797Z",
     "contributors": [
diff --git a/files/de/conflicting/web/css/index.html b/files/de/conflicting/web/css/index.html
new file mode 100644
index 0000000000..0cdc9d3d44
--- /dev/null
+++ b/files/de/conflicting/web/css/index.html
@@ -0,0 +1,26 @@
+---
+title: Tools
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+
    CSS bietet eine Reihe mächtiger Features, die knifflig in der Anwendung sein können oder eine Reihe von Parametern haben, sodass es hilfreich ist, diese während an ihnen gearbeitet wird, zu visualisieren. Dieses Seite bietet Links zu verschiedenen nützlichen Werkzeugen, die helfen, das CSS unter Verwendung dieser Features zu erstellen, um den Inhalt zu stylen.
    
+
+
    {{LandingPageListSubpages}}
    
+
+
    Weitere Werkzeuge
    
+
+
      
+ 
    • 
+  
      CSS Animation - Stylie
      
+ 
      • 
+ 
    • Um die Gerätedarstellungsinformationen zu überprüfen (hilfreich in {{Glossary("Responsive Web Design")}}) - mydevice.io
      • 
+
    
+
+
    Siehe auch
    
+
+
diff --git a/files/de/web/css/tools/index.html b/files/de/web/css/tools/index.html
deleted file mode 100644
index f107c81ddb..0000000000
--- a/files/de/web/css/tools/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Tools
-slug: Web/CSS/Tools
-tags:
-  - CSS
-translation_of: Web/CSS/Tools
----
-
    CSS bietet eine Reihe mächtiger Features, die knifflig in der Anwendung sein können oder eine Reihe von Parametern haben, sodass es hilfreich ist, diese während an ihnen gearbeitet wird, zu visualisieren. Dieses Seite bietet Links zu verschiedenen nützlichen Werkzeugen, die helfen, das CSS unter Verwendung dieser Features zu erstellen, um den Inhalt zu stylen.
    
-
-
    {{LandingPageListSubpages}}
    
-
-
    Weitere Werkzeuge
    
-
-
      
- 
    • 
-  
      CSS Animation - Stylie
      
- 
      • 
- 
    • Um die Gerätedarstellungsinformationen zu überprüfen (hilfreich in {{Glossary("Responsive Web Design")}}) - mydevice.io
      • 
-
    
-
-
    Siehe auch
    
-
-
diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index 393d653e5f..144e880d55 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1664,7 +1664,7 @@
 /es/docs/Web/CSS/Elemento_reemplazo	/es/docs/Web/CSS/Replaced_element
 /es/docs/Web/CSS/Especificidad	/es/docs/Web/CSS/Specificity
 /es/docs/Web/CSS/Gradiente	/es/docs/Web/CSS/gradient
-/es/docs/Web/CSS/Herramientas	/es/docs/Web/CSS/Tools
+/es/docs/Web/CSS/Herramientas	/es/docs/conflicting/Web/CSS
 /es/docs/Web/CSS/Introducción/Content	/es/docs/Learn/CSS/Howto/Generated_content
 /es/docs/Web/CSS/Introducción/Media	/es/docs/Web/Progressive_web_apps/Responsive/Media_types
 /es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS	/es/docs/Learn/CSS/Howto/CSS_FAQ
@@ -1681,6 +1681,7 @@
 /es/docs/Web/CSS/Selectores_hermanos_generales	/es/docs/Web/CSS/General_sibling_combinator
 /es/docs/Web/CSS/Sintaxis_definición_de_valor	/es/docs/Web/CSS/Value_definition_syntax
 /es/docs/Web/CSS/Texto_CSS	/es/docs/Web/CSS/CSS_Text
+/es/docs/Web/CSS/Tools	/es/docs/conflicting/Web/CSS
 /es/docs/Web/CSS/Transiciones_de_CSS	/es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
 /es/docs/Web/CSS/Usando_animaciones_CSS	/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /es/docs/Web/CSS/Using_CSS_transforms	/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 3808f684eb..be405acc83 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -11192,12 +11192,6 @@
       "Derhks"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T22:28:04.142Z",
-    "contributors": [
-      "arturoblack"
-    ]
-  },
   "Web/CSS/Tutorials": {
     "modified": "2019-03-23T22:52:34.225Z",
     "contributors": [
@@ -21464,6 +21458,12 @@
       "Jeremie"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T22:28:04.142Z",
+    "contributors": [
+      "arturoblack"
+    ]
+  },
   "conflicting/Web/CSS/::placeholder": {
     "modified": "2019-03-23T22:29:22.118Z",
     "contributors": [
diff --git a/files/es/conflicting/web/css/index.html b/files/es/conflicting/web/css/index.html
new file mode 100644
index 0000000000..988256afbd
--- /dev/null
+++ b/files/es/conflicting/web/css/index.html
@@ -0,0 +1,29 @@
+---
+title: Herramientas
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+
     
    
+
+
    CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.
    
+
+
    {{LandingPageListSubpages}}
    
+
+
    Otras herramientas
    
+
+
      
+ 
    • 
+  
      Animación CSS - Stylie
      
+ 
      • 
+ 
    • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
      • 
+ 
    • Menus CSS- cssmenumaker.com
      • 
+
    
+
+
    Temas relacionados
    
+
+
diff --git a/files/es/web/css/tools/index.html b/files/es/web/css/tools/index.html
deleted file mode 100644
index 3ea9e20a3f..0000000000
--- a/files/es/web/css/tools/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Herramientas
-slug: Web/CSS/Tools
-tags:
-  - CSS
-translation_of: Web/CSS/Tools
-original_slug: Web/CSS/Herramientas
----
-
     
    
-
-
    CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.
    
-
-
    {{LandingPageListSubpages}}
    
-
-
    Otras herramientas
    
-
-
      
- 
    • 
-  
      Animación CSS - Stylie
      
- 
      • 
- 
    • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
      • 
- 
    • Menus CSS- cssmenumaker.com
      • 
-
    
-
-
    Temas relacionados
    
-
-
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index 0e2dca875d..2e6bf4cbba 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -4114,7 +4114,7 @@
 /fr/docs/Web/CSS/Média/Visuel	/fr/docs/Web/CSS/@media
 /fr/docs/Web/CSS/Média_Paginé	/fr/docs/Web/CSS/Paged_Media
 /fr/docs/Web/CSS/Média_paginés	/fr/docs/Web/CSS/Paged_Media
-/fr/docs/Web/CSS/Outils	/fr/docs/Web/CSS/Tools
+/fr/docs/Web/CSS/Outils	/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244
 /fr/docs/Web/CSS/Outils/Générateur_de_courbe_de_Bézier	/fr/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
 /fr/docs/Web/CSS/Outils/Générateur_de_dégradés_linéaires	/fr/docs/Web/CSS/Tools/Linear-gradient_Generator
 /fr/docs/Web/CSS/Propriétés_raccourcies	/fr/docs/Web/CSS/Shorthand_properties
@@ -4150,6 +4150,7 @@
 /fr/docs/Web/CSS/Sélecteurs_descendant	/fr/docs/Web/CSS/Descendant_combinator
 /fr/docs/Web/CSS/Sélecteurs_enfant	/fr/docs/Web/CSS/Child_combinator
 /fr/docs/Web/CSS/Sélecteurs_universels	/fr/docs/Web/CSS/Universal_selectors
+/fr/docs/Web/CSS/Tools	/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244
 /fr/docs/Web/CSS/Tools/Cubic_Bezier_Generator	/fr/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
 /fr/docs/Web/CSS/Tools/Générateur_de_courbe_de_Bézier	/fr/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
 /fr/docs/Web/CSS/Tools/Générateur_de_dégradés_linéaires	/fr/docs/Web/CSS/Tools/Linear-gradient_Generator
diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json
index ccfb379d40..121a997e06 100644
--- a/files/fr/_wikihistory.json
+++ b/files/fr/_wikihistory.json
@@ -25688,13 +25688,6 @@
       "FredB"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-04-06T13:47:45.843Z",
-    "contributors": [
-      "SphinxKnight",
-      "velvel53"
-    ]
-  },
   "Web/CSS/Tools/Linear-gradient_Generator": {
     "modified": "2019-04-06T13:48:01.466Z",
     "contributors": [
@@ -43607,6 +43600,13 @@
       "ThePrisoner"
     ]
   },
+  "conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244": {
+    "modified": "2019-04-06T13:47:45.843Z",
+    "contributors": [
+      "SphinxKnight",
+      "velvel53"
+    ]
+  },
   "conflicting/Web/Guide": {
     "modified": "2019-03-24T00:13:07.123Z",
     "contributors": [
diff --git a/files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html b/files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html
new file mode 100644
index 0000000000..84516f2356
--- /dev/null
+++ b/files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html
@@ -0,0 +1,21 @@
+---
+title: Outils
+slug: conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+
    CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.
    
+
+
    {{LandingPageListSubpages}}
    
+
+
    Autres outils
    
+
+
      
+ 
    • Stylie pour les animations
      • 
+ 
    • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
      • 
+ 
    • Construire des menus CSS - cssmenumaker.com
      • 
+ 
    • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
      • 
+
    
diff --git a/files/fr/web/css/tools/index.html b/files/fr/web/css/tools/index.html
deleted file mode 100644
index ac24b6e9ee..0000000000
--- a/files/fr/web/css/tools/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Outils
-slug: Web/CSS/Tools
-tags:
-  - CSS
-  - Outils
-translation_of: Web/CSS/Tools
-original_slug: Web/CSS/Outils
----
-
    CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.
    
-
-
    {{LandingPageListSubpages}}
    
-
-
    Autres outils
    
-
-
      
- 
    • Stylie pour les animations
      • 
- 
    • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
      • 
- 
    • Construire des menus CSS - cssmenumaker.com
      • 
- 
    • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
      • 
-
    
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 6117892834..de680f387d 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3683,6 +3683,7 @@
 /ja/docs/Web/CSS/Reference/@viewport/zoom	/ja/docs/Web/CSS/@viewport
 /ja/docs/Web/CSS/Reference/Mozilla_Extensions	/ja/docs/Web/CSS/Mozilla_Extensions
 /ja/docs/Web/CSS/Scaling_background_images	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+/ja/docs/Web/CSS/Tools	/ja/docs/conflicting/Web/CSS
 /ja/docs/Web/CSS/Understanding_z_index	/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index
 /ja/docs/Web/CSS/Understanding_z_index/Adding_z-index	/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
 /ja/docs/Web/CSS/Understanding_z_index/Stacking_and_float	/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 71a15c0761..44f4c575d1 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -29309,13 +29309,6 @@
       "sii"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2020-07-21T12:48:32.485Z",
-    "contributors": [
-      "mfuji09",
-      "sii"
-    ]
-  },
   "Web/CSS/Type_selectors": {
     "modified": "2020-10-15T21:20:42.015Z",
     "contributors": [
@@ -48609,6 +48602,13 @@
       "Jeremie"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2020-07-21T12:48:32.485Z",
+    "contributors": [
+      "mfuji09",
+      "sii"
+    ]
+  },
   "orphaned/Building_a_Mozilla_Distribution": {
     "modified": "2019-03-23T23:49:07.062Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html
new file mode 100644
index 0000000000..9585f457ed
--- /dev/null
+++ b/files/ja/conflicting/web/css/index.html
@@ -0,0 +1,31 @@
+---
+title: ツール
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+  - Guide
+  - NeedsUpdate
+  - ガイド
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+
    
+
+
    CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。
    
+
+
    {{LandingPageListSubpages}}
    
+
+
    その他のツール
    
+
+
      
+ 
    • CSS アニメーション - Stylie
      • 
+ 
    • 端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - mydevice.io
      • 
+ 
    • CSS メニュー - cssmenumaker.com
      • 
+ 
    • 強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - stylelint
      • 
+
    
+
+
    関連情報
    
+
+
diff --git a/files/ja/web/css/tools/index.html b/files/ja/web/css/tools/index.html
deleted file mode 100644
index fb51e9d15d..0000000000
--- a/files/ja/web/css/tools/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: ツール
-slug: Web/CSS/Tools
-tags:
-  - CSS
-  - Guide
-  - NeedsUpdate
-  - ガイド
-translation_of: Web/CSS/Tools
----
-
    
-
-
    CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。
    
-
-
    {{LandingPageListSubpages}}
    
-
-
    その他のツール
    
-
-
      
- 
    • CSS アニメーション - Stylie
      • 
- 
    • 端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - mydevice.io
      • 
- 
    • CSS メニュー - cssmenumaker.com
      • 
- 
    • 強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - stylelint
      • 
-
    
-
-
    関連情報
    
-
-
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index d8fbb3ee68..c8c1a6bb45 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -593,6 +593,7 @@
 /pt-BR/docs/Web/CSS/Seletor_universal	/pt-BR/docs/Web/CSS/Universal_selectors
 /pt-BR/docs/Web/CSS/Seletores_CSS	/pt-BR/docs/Web/CSS/CSS_Selectors
 /pt-BR/docs/Web/CSS/Sintexe_valor	/pt-BR/docs/Web/CSS/Value_definition_syntax
+/pt-BR/docs/Web/CSS/Tools	/pt-BR/docs/conflicting/Web/CSS
 /pt-BR/docs/Web/CSS/Tools/Border-image_generator	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
 /pt-BR/docs/Web/CSS/Tools/Border-radius_generator	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /pt-BR/docs/Web/CSS/Using_CSS_variables	/pt-BR/docs/Web/CSS/Using_CSS_custom_properties
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index 2c13008b4e..d9f57768b3 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -7981,13 +7981,6 @@
       "fvargaspf@gmail.com"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T23:07:41.210Z",
-    "contributors": [
-      "hlays",
-      "velvel53"
-    ]
-  },
   "Web/CSS/Type_selectors": {
     "modified": "2020-10-15T22:32:30.449Z",
     "contributors": [
@@ -16469,6 +16462,13 @@
       "caio.rrs"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T23:07:41.210Z",
+    "contributors": [
+      "hlays",
+      "velvel53"
+    ]
+  },
   "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": {
     "modified": "2019-09-08T09:50:19.292Z",
     "contributors": [
diff --git a/files/pt-br/conflicting/web/css/index.html b/files/pt-br/conflicting/web/css/index.html
new file mode 100644
index 0000000000..82fa64bdf2
--- /dev/null
+++ b/files/pt-br/conflicting/web/css/index.html
@@ -0,0 +1,31 @@
+---
+title: Ferramentas
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+  - NeedsContent
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+
    {{Draft}}
    
+
+
    O CSS oferece diversos recursos poderosos e um grande número de parâmetros que, às vezes, podem ser difíceis de usar. Então, é bem melhor quando você pode visualizá-los enquanto trabalha com eles.
    
+
+
    Esta página oferece links para várias ferramentas úteis que irão te ajudar a criar o CSS para estilizar seu conteúdo usando esses recursos.
    
+
+
    {{LandingPageListSubpages}}
    
+
+
    Outras ferramentas
    
+
+
      
+ 
    • Animação em CSS - Stylie
      • 
+ 
    • Para verificar as informações de exibição do dispositivo (útil para {{Glossary("web design responsivo")}}) - mydevice.io
      • 
+ 
    • Menus CSS - cssmenumaker.com
      • 
+ 
    • Um poderoso e moderno linter CSS que ajuda a impor convenções consistentes e evitar erros em suas folhas de estilo - stylelint
      • 
+
    
+
+
    Veja também
    
+
+
diff --git a/files/pt-br/web/css/tools/index.html b/files/pt-br/web/css/tools/index.html
deleted file mode 100644
index 2e17ae96d5..0000000000
--- a/files/pt-br/web/css/tools/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Ferramentas
-slug: Web/CSS/Tools
-tags:
-  - CSS
-  - NeedsContent
-translation_of: Web/CSS/Tools
----
-
    {{Draft}}
    
-
-
    O CSS oferece diversos recursos poderosos e um grande número de parâmetros que, às vezes, podem ser difíceis de usar. Então, é bem melhor quando você pode visualizá-los enquanto trabalha com eles.
    
-
-
    Esta página oferece links para várias ferramentas úteis que irão te ajudar a criar o CSS para estilizar seu conteúdo usando esses recursos.
    
-
-
    {{LandingPageListSubpages}}
    
-
-
    Outras ferramentas
    
-
-
      
- 
    • Animação em CSS - Stylie
      • 
- 
    • Para verificar as informações de exibição do dispositivo (útil para {{Glossary("web design responsivo")}}) - mydevice.io
      • 
- 
    • Menus CSS - cssmenumaker.com
      • 
- 
    • Um poderoso e moderno linter CSS que ajuda a impor convenções consistentes e evitar erros em suas folhas de estilo - stylelint
      • 
-
    
-
-
    Veja também
    
-
-
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index f625f0a1c0..c9a3dcc7c3 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -1714,6 +1714,7 @@
 /zh-CN/docs/Web/CSS/Reference/Webkit_Extensions	/zh-CN/docs/Web/CSS/WebKit_Extensions
 /zh-CN/docs/Web/CSS/Reference/background-blend-mode	/zh-CN/docs/Web/CSS/background-blend-mode
 /zh-CN/docs/Web/CSS/Reference/mix-blend-mode	/zh-CN/docs/Web/CSS/mix-blend-mode
+/zh-CN/docs/Web/CSS/Tools	/zh-CN/docs/conflicting/Web/CSS
 /zh-CN/docs/Web/CSS/Tutorials/Using_CSS_transforms	/zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
 /zh-CN/docs/Web/CSS/Understanding_z-index	/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index
 /zh-CN/docs/Web/CSS/Understanding_z-index/Adding_z-index	/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index f4f8937676..3e599cf40f 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -27262,16 +27262,6 @@
       "yan"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T22:29:45.280Z",
-    "contributors": [
-      "runyul",
-      "pluwen",
-      "edwards1101",
-      "lucia007",
-      "lunix01"
-    ]
-  },
   "Web/CSS/Tutorials": {
     "modified": "2019-03-23T23:32:32.218Z",
     "contributors": [
@@ -47394,6 +47384,16 @@
       "qianzhangcheng"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T22:29:45.280Z",
+    "contributors": [
+      "runyul",
+      "pluwen",
+      "edwards1101",
+      "lucia007",
+      "lunix01"
+    ]
+  },
   "conflicting/Web/CSS/::placeholder": {
     "modified": "2019-03-23T23:21:18.757Z",
     "contributors": [
diff --git a/files/zh-cn/conflicting/web/css/index.html b/files/zh-cn/conflicting/web/css/index.html
new file mode 100644
index 0000000000..007a716edb
--- /dev/null
+++ b/files/zh-cn/conflicting/web/css/index.html
@@ -0,0 +1,28 @@
+---
+title: 工具
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+
    CSS提供了许多强大的功能，但这些功能要么可能很难使用，要么有许多参数，因此在使用它们时，能够可视化它们是有帮助的。此页面提供了一些有用的工具的链接，这些工具将帮助您使用这些功能构建 CSS 来设计您的内容。
    
+
+
     
    
+
+
    {{LandingPageListSubpages}}
    
+
+
    其他工具
    
+
+
      
+ 
    • CSS 动画- Stylie
      • 
+ 
    • 查看设备的显示信息(从 {{Glossary("响应式网页设计")}}处得到帮助) - mydevice.io
      • 
+ 
    • CSS 菜单- cssmenumaker.com
      • 
+ 
    • 一个 强大并现代化的 CSS linter 可以帮助你实现统一约定并避免样式表中的错误 - stylelint
      • 
+
    
+
+
    相关主题
    
+
+
diff --git a/files/zh-cn/web/css/tools/index.html b/files/zh-cn/web/css/tools/index.html
deleted file mode 100644
index a4c348fb36..0000000000
--- a/files/zh-cn/web/css/tools/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: 工具
-slug: Web/CSS/Tools
-tags:
-  - CSS
-translation_of: Web/CSS/Tools
----
-
    CSS提供了许多强大的功能，但这些功能要么可能很难使用，要么有许多参数，因此在使用它们时，能够可视化它们是有帮助的。此页面提供了一些有用的工具的链接，这些工具将帮助您使用这些功能构建 CSS 来设计您的内容。
    
-
-
     
    
-
-
    {{LandingPageListSubpages}}
    
-
-
    其他工具
    
-
-
      
- 
    • CSS 动画- Stylie
      • 
- 
    • 查看设备的显示信息(从 {{Glossary("响应式网页设计")}}处得到帮助) - mydevice.io
      • 
- 
    • CSS 菜单- cssmenumaker.com
      • 
- 
    • 一个 强大并现代化的 CSS linter 可以帮助你实现统一约定并避免样式表中的错误 - stylelint
      • 
-
    
-
-
    相关主题
    
-
-
-- 
cgit v1.2.3-54-g00ecf