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') 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