From 4d3b1c2c79113786e001e3bec551205cd34f818a Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 21 May 2021 00:42:40 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 4 +- files/de/_wikihistory.json | 30 +-- files/de/orphaned/web/css/@page/bleed/index.html | 78 ++++++ files/de/orphaned/web/css/@page/marks/index.html | 85 ++++++ files/de/web/css/@page/bleed/index.html | 77 ------ files/de/web/css/@page/marks/index.html | 84 ------ files/es/_redirects.txt | 6 +- files/es/_wikihistory.json | 24 +- .../orphaned/web/html/element/isindex/index.html | 45 ++++ .../orphaned/web/html/element/multicol/index.html | 21 ++ files/es/web/html/element/isindex/index.html | 45 ---- files/es/web/html/element/multicol/index.html | 21 -- files/fr/_redirects.txt | 16 +- files/fr/_wikihistory.json | 136 +++++----- files/fr/orphaned/web/api/svgstylable/index.html | 98 +++++++ .../@media/prefers-reduced-transparency/index.html | 85 ++++++ files/fr/orphaned/web/css/@media/scan/index.html | 86 ++++++ files/fr/orphaned/web/css/@page/bleed/index.html | 80 ++++++ files/fr/orphaned/web/css/@page/marks/index.html | 83 ++++++ .../orphaned/web/html/element/isindex/index.html | 71 +++++ .../orphaned/web/html/element/listing/index.html | 49 ++++ .../orphaned/web/html/element/multicol/index.html | 38 +++ .../fr/orphaned/web/html/element/nextid/index.html | 60 +++++ .../web/html/preloading_content/index.html | 248 ++++++++++++++++++ files/fr/web/api/svgstylable/index.html | 97 ------- .../@media/prefers-reduced-transparency/index.html | 84 ------ files/fr/web/css/@media/scan/index.html | 85 ------ files/fr/web/css/@page/bleed/index.html | 79 ------ files/fr/web/css/@page/marks/index.html | 82 ------ files/fr/web/html/element/isindex/index.html | 70 ----- files/fr/web/html/element/listing/index.html | 48 ---- files/fr/web/html/element/multicol/index.html | 37 --- files/fr/web/html/element/nextid/index.html | 59 ----- files/fr/web/html/preloading_content/index.html | 248 ------------------ files/ja/_redirects.txt | 8 + files/ja/_wikihistory.json | 110 ++++---- files/ja/orphaned/web/css/@media/scan/index.html | 89 +++++++ files/ja/orphaned/web/css/@page/bleed/index.html | 82 ++++++ files/ja/orphaned/web/css/@page/marks/index.html | 87 +++++++ .../orphaned/web/html/element/isindex/index.html | 79 ++++++ .../orphaned/web/html/element/listing/index.html | 53 ++++ .../orphaned/web/html/element/multicol/index.html | 37 +++ .../web/html/preloading_content/index.html | 244 +++++++++++++++++ .../orphaned/web/svg/element/solidcolor/index.html | 86 ++++++ files/ja/web/css/@media/scan/index.html | 88 ------- files/ja/web/css/@page/bleed/index.html | 81 ------ files/ja/web/css/@page/marks/index.html | 86 ------ files/ja/web/html/element/isindex/index.html | 78 ------ files/ja/web/html/element/listing/index.html | 52 ---- files/ja/web/html/element/multicol/index.html | 36 --- files/ja/web/html/preloading_content/index.html | 243 ----------------- files/ja/web/svg/element/solidcolor/index.html | 85 ------ files/ko/_redirects.txt | 1 + files/ko/_wikihistory.json | 12 +- .../web/html/preloading_content/index.html | 234 +++++++++++++++++ files/ko/web/html/preloading_content/index.html | 233 ----------------- files/pt-br/_redirects.txt | 2 + files/pt-br/_wikihistory.json | 36 +-- .../web/html/preloading_content/index.html | 240 +++++++++++++++++ .../web/svg/element/color-profile/index.html | 96 +++++++ files/pt-br/web/html/preloading_content/index.html | 239 ----------------- .../pt-br/web/svg/element/color-profile/index.html | 95 ------- files/ru/_redirects.txt | 1 + files/ru/_wikihistory.json | 22 +- .../web/html/preloading_content/index.html | 244 +++++++++++++++++ files/ru/web/html/preloading_content/index.html | 243 ----------------- files/zh-cn/_redirects.txt | 6 + files/zh-cn/_wikihistory.json | 86 +++--- .../orphaned/web/html/element/isindex/index.html | 41 +++ .../orphaned/web/html/element/listing/index.html | 40 +++ .../orphaned/web/html/element/multicol/index.html | 19 ++ .../orphaned/web/html/element/nextid/index.html | 141 ++++++++++ .../web/html/preloading_content/index.html | 289 +++++++++++++++++++++ .../web/svg/element/color-profile/index.html | 96 +++++++ files/zh-cn/web/html/element/isindex/index.html | 40 --- files/zh-cn/web/html/element/listing/index.html | 39 --- files/zh-cn/web/html/element/multicol/index.html | 18 -- files/zh-cn/web/html/element/nextid/index.html | 140 ---------- files/zh-cn/web/html/preloading_content/index.html | 288 -------------------- .../zh-cn/web/svg/element/color-profile/index.html | 95 ------- 80 files changed, 3590 insertions(+), 3529 deletions(-) create mode 100644 files/de/orphaned/web/css/@page/bleed/index.html create mode 100644 files/de/orphaned/web/css/@page/marks/index.html delete mode 100644 files/de/web/css/@page/bleed/index.html delete mode 100644 files/de/web/css/@page/marks/index.html create mode 100644 files/es/orphaned/web/html/element/isindex/index.html create mode 100644 files/es/orphaned/web/html/element/multicol/index.html delete mode 100644 files/es/web/html/element/isindex/index.html delete mode 100644 files/es/web/html/element/multicol/index.html create mode 100644 files/fr/orphaned/web/api/svgstylable/index.html create mode 100644 files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html create mode 100644 files/fr/orphaned/web/css/@media/scan/index.html create mode 100644 files/fr/orphaned/web/css/@page/bleed/index.html create mode 100644 files/fr/orphaned/web/css/@page/marks/index.html create mode 100644 files/fr/orphaned/web/html/element/isindex/index.html create mode 100644 files/fr/orphaned/web/html/element/listing/index.html create mode 100644 files/fr/orphaned/web/html/element/multicol/index.html create mode 100644 files/fr/orphaned/web/html/element/nextid/index.html create mode 100644 files/fr/orphaned/web/html/preloading_content/index.html delete mode 100644 files/fr/web/api/svgstylable/index.html delete mode 100644 files/fr/web/css/@media/prefers-reduced-transparency/index.html delete mode 100644 files/fr/web/css/@media/scan/index.html delete mode 100644 files/fr/web/css/@page/bleed/index.html delete mode 100644 files/fr/web/css/@page/marks/index.html delete mode 100644 files/fr/web/html/element/isindex/index.html delete mode 100644 files/fr/web/html/element/listing/index.html delete mode 100644 files/fr/web/html/element/multicol/index.html delete mode 100644 files/fr/web/html/element/nextid/index.html delete mode 100644 files/fr/web/html/preloading_content/index.html create mode 100644 files/ja/orphaned/web/css/@media/scan/index.html create mode 100644 files/ja/orphaned/web/css/@page/bleed/index.html create mode 100644 files/ja/orphaned/web/css/@page/marks/index.html create mode 100644 files/ja/orphaned/web/html/element/isindex/index.html create mode 100644 files/ja/orphaned/web/html/element/listing/index.html create mode 100644 files/ja/orphaned/web/html/element/multicol/index.html create mode 100644 files/ja/orphaned/web/html/preloading_content/index.html create mode 100644 files/ja/orphaned/web/svg/element/solidcolor/index.html delete mode 100644 files/ja/web/css/@media/scan/index.html delete mode 100644 files/ja/web/css/@page/bleed/index.html delete mode 100644 files/ja/web/css/@page/marks/index.html delete mode 100644 files/ja/web/html/element/isindex/index.html delete mode 100644 files/ja/web/html/element/listing/index.html delete mode 100644 files/ja/web/html/element/multicol/index.html delete mode 100644 files/ja/web/html/preloading_content/index.html delete mode 100644 files/ja/web/svg/element/solidcolor/index.html create mode 100644 files/ko/orphaned/web/html/preloading_content/index.html delete mode 100644 files/ko/web/html/preloading_content/index.html create mode 100644 files/pt-br/orphaned/web/html/preloading_content/index.html create mode 100644 files/pt-br/orphaned/web/svg/element/color-profile/index.html delete mode 100644 files/pt-br/web/html/preloading_content/index.html delete mode 100644 files/pt-br/web/svg/element/color-profile/index.html create mode 100644 files/ru/orphaned/web/html/preloading_content/index.html delete mode 100644 files/ru/web/html/preloading_content/index.html create mode 100644 files/zh-cn/orphaned/web/html/element/isindex/index.html create mode 100644 files/zh-cn/orphaned/web/html/element/listing/index.html create mode 100644 files/zh-cn/orphaned/web/html/element/multicol/index.html create mode 100644 files/zh-cn/orphaned/web/html/element/nextid/index.html create mode 100644 files/zh-cn/orphaned/web/html/preloading_content/index.html create mode 100644 files/zh-cn/orphaned/web/svg/element/color-profile/index.html delete mode 100644 files/zh-cn/web/html/element/isindex/index.html delete mode 100644 files/zh-cn/web/html/element/listing/index.html delete mode 100644 files/zh-cn/web/html/element/multicol/index.html delete mode 100644 files/zh-cn/web/html/element/nextid/index.html delete mode 100644 files/zh-cn/web/html/preloading_content/index.html delete mode 100644 files/zh-cn/web/svg/element/color-profile/index.html (limited to 'files') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 9010cbfccd..8f8a4abfda 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -549,6 +549,8 @@ /de/docs/Web/CSS/:-moz-ui-valid /de/docs/orphaned/Web/CSS/:-moz-ui-valid /de/docs/Web/CSS/:-webkit-autofill /de/docs/Web/CSS/:autofill /de/docs/Web/CSS/::-moz-placeholder /de/docs/conflicting/Web/CSS/::placeholder +/de/docs/Web/CSS/@page/bleed /de/docs/orphaned/Web/CSS/@page/bleed +/de/docs/Web/CSS/@page/marks /de/docs/orphaned/Web/CSS/@page/marks /de/docs/Web/CSS/Adjacent_sibling_selectors /de/docs/Web/CSS/Adjacent_sibling_combinator /de/docs/Web/CSS/Alias /de/docs/conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743 /de/docs/Web/CSS/Angrenzende_Geschwisterselektoren /de/docs/Web/CSS/Adjacent_sibling_combinator @@ -613,7 +615,7 @@ /de/docs/Web/CSS/grid-gap /de/docs/Web/CSS/gap /de/docs/Web/CSS/hidden /de/docs/Web/CSS/visibility /de/docs/Web/CSS/linear-gradient /de/docs/Web/CSS/linear-gradient() -/de/docs/Web/CSS/marks /de/docs/Web/CSS/@page/marks +/de/docs/Web/CSS/marks /de/docs/orphaned/Web/CSS/@page/marks /de/docs/Web/CSS/mq-boolean /de/docs/Web/CSS/Media_Queries/Using_media_queries /de/docs/Web/CSS/none /de/docs/conflicting/Web/CSS/float /de/docs/Web/CSS/normal /de/docs/conflicting/Web/CSS/font-variant diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index d967b0efc2..2cfc31cc6c 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -5415,21 +5415,6 @@ "Sebastianz" ] }, - "Web/CSS/@page/bleed": { - "modified": "2020-10-15T21:39:36.423Z", - "contributors": [ - "SJW", - "Prinz_Rana", - "Sebastianz" - ] - }, - "Web/CSS/@page/marks": { - "modified": "2020-10-15T21:29:09.846Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, "Web/CSS/@viewport": { "modified": "2020-10-15T21:36:26.323Z", "contributors": [ @@ -14769,6 +14754,21 @@ "Sebastianz" ] }, + "orphaned/Web/CSS/@page/bleed": { + "modified": "2020-10-15T21:39:36.423Z", + "contributors": [ + "SJW", + "Prinz_Rana", + "Sebastianz" + ] + }, + "orphaned/Web/CSS/@page/marks": { + "modified": "2020-10-15T21:29:09.846Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, "orphaned/Web/CSS/Index": { "modified": "2019-01-16T19:56:04.663Z", "contributors": [ diff --git a/files/de/orphaned/web/css/@page/bleed/index.html b/files/de/orphaned/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..7ebf9b550a --- /dev/null +++ b/files/de/orphaned/web/css/@page/bleed/index.html @@ -0,0 +1,78 @@ +--- +title: bleed +slug: orphaned/Web/CSS/@page/bleed +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/@page/bleed +original_slug: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Der bleed At-Regel Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+bleed: auto;
+
+/* <length> Werte */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

Werte

+ +
+
auto
+
Erhält den Wert 6pt, falls der Wert von {{cssxref("marks")}} crop ist. Ansonsten ist der Wert 0.
+
{{cssxref("<length>")}}
+
Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.
+
+ +

Formale Syntax

+ +{{csssyntax}} + +

Beispiel

+ +
@page {
+  bleed: 1cm;
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.at-rules.page.bleed")}}

+ +

Siehe auch

+ + diff --git a/files/de/orphaned/web/css/@page/marks/index.html b/files/de/orphaned/web/css/@page/marks/index.html new file mode 100644 index 0000000000..f867360fc4 --- /dev/null +++ b/files/de/orphaned/web/css/@page/marks/index.html @@ -0,0 +1,85 @@ +--- +title: marks +slug: orphaned/Web/CSS/@page/marks +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page/marks +original_slug: Web/CSS/@page/marks +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die marks CSS Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. Schneidemarken zeigen an, wo die Seite abgeschnitten werden soll. Registermarken verden zur Ausrichtung von Blättern benutzt.

+ +

Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+ +

Werte

+ +
+
crop
+
Es werden Schneidemarken angezeigt.
+
cross
+
Es werden Registermarken angezeigt.
+
none
+
Es werden keine Marken angezeigt.
+
+ +

Formale Syntax

+ +{{csssyntax}} + +

Beispiele

+ +
@page {
+  marks: crop cross;
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Ursprüngliche Definition
+ +

Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.

+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.page.marks")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/@page/bleed/index.html b/files/de/web/css/@page/bleed/index.html deleted file mode 100644 index 7b843e11f8..0000000000 --- a/files/de/web/css/@page/bleed/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: bleed -slug: Web/CSS/@page/bleed -tags: - - CSS - - CSS Referenz - - NeedsBrowserCompatibility - - NeedsLiveSample - - NeedsMobileBrowserCompatibility -translation_of: Web/CSS/@page/bleed ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Übersicht

- -

Der bleed At-Regel Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.

- -

{{cssinfo}}

- -

Syntax

- -
/* Schlüsselwortwerte */
-bleed: auto;
-
-/* <length> Werte */
-bleed: 8pt;
-bleed: 1cm;
-
- -

Werte

- -
-
auto
-
Erhält den Wert 6pt, falls der Wert von {{cssxref("marks")}} crop ist. Ansonsten ist der Wert 0.
-
{{cssxref("<length>")}}
-
Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.
-
- -

Formale Syntax

- -{{csssyntax}} - -

Beispiel

- -
@page {
-  bleed: 1cm;
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -

{{Compat("css.at-rules.page.bleed")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/@page/marks/index.html b/files/de/web/css/@page/marks/index.html deleted file mode 100644 index e61c0fac71..0000000000 --- a/files/de/web/css/@page/marks/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: marks -slug: Web/CSS/@page/marks -tags: - - CSS - - CSS Eigenschaft - - Layout - - NeedsBrowserCompatibility - - NeedsExample - - NeedsMobileBrowserCompatibility - - Referenz - - Web -translation_of: Web/CSS/@page/marks ---- -

{{CSSRef}}

- -

Übersicht

- -

Die marks CSS Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. Schneidemarken zeigen an, wo die Seite abgeschnitten werden soll. Registermarken verden zur Ausrichtung von Blättern benutzt.

- -

Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.

- -

{{cssinfo}}

- -

Syntax

- -
/* Schlüsselwortwerte */
-marks: none;
-marks: crop;
-marks: cross;
-marks: crop cross;
- -

Werte

- -
-
crop
-
Es werden Schneidemarken angezeigt.
-
cross
-
Es werden Registermarken angezeigt.
-
none
-
Es werden keine Marken angezeigt.
-
- -

Formale Syntax

- -{{csssyntax}} - -

Beispiele

- -
@page {
-  marks: crop cross;
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Ursprüngliche Definition
- -

Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.

- -

Browser Kompatibilität

- -{{Compat("css.at-rules.page.marks")}} - -

Siehe auch

- - diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 604e67004d..cdbad98cc4 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -2107,6 +2107,8 @@ /es/docs/Web/HTML/Canvas/A_basic_ray-caster /es/docs/Web/API/Canvas_API/A_basic_ray-caster /es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/conflicting/Web/API/Canvas_API/Tutorial /es/docs/Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/es/docs/Web/HTML/Element/isindex /es/docs/orphaned/Web/HTML/Element/isindex +/es/docs/Web/HTML/Element/multicol /es/docs/orphaned/Web/HTML/Element/multicol /es/docs/Web/HTML/Elemento /es/docs/Web/HTML/Element /es/docs/Web/HTML/Elemento/Audio2 /es/docs/Web/HTML/Element/audio /es/docs/Web/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Element/Heading_Elements @@ -2194,7 +2196,7 @@ /es/docs/Web/HTML/Elemento/input/range /es/docs/Web/HTML/Element/input/range /es/docs/Web/HTML/Elemento/input/text /es/docs/Web/HTML/Element/input/text /es/docs/Web/HTML/Elemento/ins /es/docs/Web/HTML/Element/ins -/es/docs/Web/HTML/Elemento/isindex /es/docs/Web/HTML/Element/isindex +/es/docs/Web/HTML/Elemento/isindex /es/docs/orphaned/Web/HTML/Element/isindex /es/docs/Web/HTML/Elemento/kbd /es/docs/Web/HTML/Element/kbd /es/docs/Web/HTML/Elemento/keygen /es/docs/Web/HTML/Element/keygen /es/docs/Web/HTML/Elemento/label /es/docs/Web/HTML/Element/label @@ -2207,7 +2209,7 @@ /es/docs/Web/HTML/Elemento/marquee /es/docs/Web/HTML/Element/marquee /es/docs/Web/HTML/Elemento/menu /es/docs/Web/HTML/Element/menu /es/docs/Web/HTML/Elemento/meta /es/docs/Web/HTML/Element/meta -/es/docs/Web/HTML/Elemento/multicol /es/docs/Web/HTML/Element/multicol +/es/docs/Web/HTML/Elemento/multicol /es/docs/orphaned/Web/HTML/Element/multicol /es/docs/Web/HTML/Elemento/nav /es/docs/Web/HTML/Element/nav /es/docs/Web/HTML/Elemento/nobr /es/docs/Web/HTML/Element/nobr /es/docs/Web/HTML/Elemento/noframes /es/docs/Web/HTML/Element/noframes diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 6590e27732..b3756077d8 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -15214,12 +15214,6 @@ "Jorolo" ] }, - "Web/HTML/Element/isindex": { - "modified": "2019-03-23T22:36:13.994Z", - "contributors": [ - "jcr4" - ] - }, "Web/HTML/Element/kbd": { "modified": "2019-03-18T21:11:05.093Z", "contributors": [ @@ -15334,12 +15328,6 @@ "Jorolo" ] }, - "Web/HTML/Element/multicol": { - "modified": "2019-03-23T22:36:14.458Z", - "contributors": [ - "jcr4" - ] - }, "Web/HTML/Element/nav": { "modified": "2020-12-08T21:27:47.077Z", "contributors": [ @@ -23635,6 +23623,18 @@ "kramery" ] }, + "orphaned/Web/HTML/Element/isindex": { + "modified": "2019-03-23T22:36:13.994Z", + "contributors": [ + "jcr4" + ] + }, + "orphaned/Web/HTML/Element/multicol": { + "modified": "2019-03-23T22:36:14.458Z", + "contributors": [ + "jcr4" + ] + }, "orphaned/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5": { "modified": "2019-03-23T22:40:57.260Z", "contributors": [ diff --git a/files/es/orphaned/web/html/element/isindex/index.html b/files/es/orphaned/web/html/element/isindex/index.html new file mode 100644 index 0000000000..a0b5d74166 --- /dev/null +++ b/files/es/orphaned/web/html/element/isindex/index.html @@ -0,0 +1,45 @@ +--- +title: +slug: orphaned/Web/HTML/Element/isindex +tags: + - Deprecado + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/isindex +original_slug: Web/HTML/Element/isindex +--- +
{{Deprecated_header}}
+ +

Resumen

+ +

<isindex> es un elemento HTML  obsoleto que posiciona un campo de texto en una página para buscar en el documento . <isindex> fue pensado por el W3C  para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .

+ +

<isindex> fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. 

+ +

Atributos 

+ +

Como todos los otros elementos HTML , este elemento acepta los atributos globales .

+ +
+
{{htmlattrdef("prompt")}}
+
Este atributo añade su valor como una ventana para un campo de texto.
+
{{htmlattrdef("action")}}
+
Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .
+
+ +

Ejemplo

+ +
<head>
+  <isindex prompt="Search Document... " />
+</head>
+ +

Ver también

+ + + +

{{HTMLRef}}

diff --git a/files/es/orphaned/web/html/element/multicol/index.html b/files/es/orphaned/web/html/element/multicol/index.html new file mode 100644 index 0000000000..9ebbd8cb22 --- /dev/null +++ b/files/es/orphaned/web/html/element/multicol/index.html @@ -0,0 +1,21 @@ +--- +title: +slug: orphaned/Web/HTML/Element/multicol +tags: + - HTML +translation_of: Web/HTML/Element/multicol +original_slug: Web/HTML/Element/multicol +--- +
{{non-standard_header}}
+ +

Resumen

+ +

El elemento HTML <multicol> fue un elemento experimental diseñado para permitir diseños multi columna . Nunca tuvo una recepción significante y no es implementado en alguno de los principales exploradores .

+ +
+

No usar esto ! Para implementar un diseño multi columna , debería de usar los elementos HTML regulares como {{HTMLElement("div")}} en conjunto con la característica de CSS Column ,

+
+ +

Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <multicol> fue asociado con un {{domxref("HTMLSpanElement")}}.  Después fue arreglado y ahora esta asociado con un {{domxref("HTMLUnknownElement")}} como se solocita en la especificación .

+ +

 

diff --git a/files/es/web/html/element/isindex/index.html b/files/es/web/html/element/isindex/index.html deleted file mode 100644 index 1a3a9637f2..0000000000 --- a/files/es/web/html/element/isindex/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: -slug: Web/HTML/Element/isindex -tags: - - Deprecado - - Elemento - - HTML - - Referencia - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Elemento/isindex ---- -
{{Deprecated_header}}
- -

Resumen

- -

<isindex> es un elemento HTML  obsoleto que posiciona un campo de texto en una página para buscar en el documento . <isindex> fue pensado por el W3C  para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .

- -

<isindex> fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. 

- -

Atributos 

- -

Como todos los otros elementos HTML , este elemento acepta los atributos globales .

- -
-
{{htmlattrdef("prompt")}}
-
Este atributo añade su valor como una ventana para un campo de texto.
-
{{htmlattrdef("action")}}
-
Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .
-
- -

Ejemplo

- -
<head>
-  <isindex prompt="Search Document... " />
-</head>
- -

Ver también

- -
    -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("form")}}
    • -
- -

{{HTMLRef}}

diff --git a/files/es/web/html/element/multicol/index.html b/files/es/web/html/element/multicol/index.html deleted file mode 100644 index a72b10be86..0000000000 --- a/files/es/web/html/element/multicol/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: -slug: Web/HTML/Element/multicol -tags: - - HTML -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Elemento/multicol ---- -
{{non-standard_header}}
- -

Resumen

- -

El elemento HTML <multicol> fue un elemento experimental diseñado para permitir diseños multi columna . Nunca tuvo una recepción significante y no es implementado en alguno de los principales exploradores .

- -
-

No usar esto ! Para implementar un diseño multi columna , debería de usar los elementos HTML regulares como {{HTMLElement("div")}} en conjunto con la característica de CSS Column ,

-
- -

Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <multicol> fue asociado con un {{domxref("HTMLSpanElement")}}.  Después fue arreglado y ahora esta asociado con un {{domxref("HTMLUnknownElement")}} como se solocita en la especificación .

- -

 

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index ea72d16830..1e182bf7a1 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -617,7 +617,7 @@ /fr/docs/CSS/margin-left /fr/docs/Web/CSS/margin-left /fr/docs/CSS/margin-right /fr/docs/Web/CSS/margin-right /fr/docs/CSS/margin-top /fr/docs/Web/CSS/margin-top -/fr/docs/CSS/marks /fr/docs/Web/CSS/@page/marks +/fr/docs/CSS/marks /fr/docs/orphaned/Web/CSS/@page/marks /fr/docs/CSS/max-height /fr/docs/Web/CSS/max-height /fr/docs/CSS/max-width /fr/docs/Web/CSS/max-width /fr/docs/CSS/min-height /fr/docs/Web/CSS/min-height @@ -3822,6 +3822,7 @@ /fr/docs/Web/API/Référence_du_DOM_Gecko/document /fr/docs/Web/API/Document /fr/docs/Web/API/Référence_du_DOM_Gecko/element /fr/docs/Web/API/Element /fr/docs/Web/API/Référence_du_DOM_Gecko/window /fr/docs/Web/API/Window +/fr/docs/Web/API/SVGStylable /fr/docs/orphaned/Web/API/SVGStylable /fr/docs/Web/API/Selection.toString /fr/docs/Web/API/Selection/toString /fr/docs/Web/API/Selection_API /fr/docs/conflicting/Web/API/Selection /fr/docs/Web/API/Storage/LocalStorage /fr/docs/conflicting/Web/API/Window/localStorage @@ -4011,6 +4012,10 @@ /fr/docs/Web/CSS/:before /fr/docs/Web/CSS/::before /fr/docs/Web/CSS/:matches /fr/docs/Web/CSS/:is /fr/docs/Web/CSS/:visited_et_la_vie_privée /fr/docs/Web/CSS/Privacy_and_the_:visited_selector +/fr/docs/Web/CSS/@media/prefers-reduced-transparency /fr/docs/orphaned/Web/CSS/@media/prefers-reduced-transparency +/fr/docs/Web/CSS/@media/scan /fr/docs/orphaned/Web/CSS/@media/scan +/fr/docs/Web/CSS/@page/bleed /fr/docs/orphaned/Web/CSS/@page/bleed +/fr/docs/Web/CSS/@page/marks /fr/docs/orphaned/Web/CSS/@page/marks /fr/docs/Web/CSS/@styleset /fr/docs/Web/CSS/@font-feature-values /fr/docs/Web/CSS/@viewport/height /fr/docs/conflicting/Web/CSS/@viewport /fr/docs/Web/CSS/@viewport/max-height /fr/docs/conflicting/Web/CSS/@viewport_516ab4b0283b5b2231fb657505e22440 @@ -4291,7 +4296,7 @@ /fr/docs/Web/CSS/imagefunction /fr/docs/Web/CSS/image() /fr/docs/Web/CSS/linear-gradient /fr/docs/Web/CSS/linear-gradient() /fr/docs/Web/CSS/longueur /fr/docs/Web/CSS/length -/fr/docs/Web/CSS/marks /fr/docs/Web/CSS/@page/marks +/fr/docs/Web/CSS/marks /fr/docs/orphaned/Web/CSS/@page/marks /fr/docs/Web/CSS/max /fr/docs/Web/CSS/max() /fr/docs/Web/CSS/min /fr/docs/Web/CSS/min() /fr/docs/Web/CSS/minmax /fr/docs/Web/CSS/minmax() @@ -4530,6 +4535,10 @@ /fr/docs/Web/HTML/Element/h4 /fr/docs/Web/HTML/Element/Heading_Elements /fr/docs/Web/HTML/Element/h5 /fr/docs/Web/HTML/Element/Heading_Elements /fr/docs/Web/HTML/Element/h6 /fr/docs/Web/HTML/Element/Heading_Elements +/fr/docs/Web/HTML/Element/isindex /fr/docs/orphaned/Web/HTML/Element/isindex +/fr/docs/Web/HTML/Element/listing /fr/docs/orphaned/Web/HTML/Element/listing +/fr/docs/Web/HTML/Element/multicol /fr/docs/orphaned/Web/HTML/Element/multicol +/fr/docs/Web/HTML/Element/nextid /fr/docs/orphaned/Web/HTML/Element/nextid /fr/docs/Web/HTML/Element/video/canplaythrough_event /fr/docs/Web/API/HTMLMediaElement/canplaythrough_event /fr/docs/Web/HTML/Element/video/durationchange_event /fr/docs/Web/API/HTMLMediaElement/durationchange_event /fr/docs/Web/HTML/Formats_date_heure_HTML /fr/docs/Web/HTML/Date_and_time_formats @@ -4552,7 +4561,8 @@ /fr/docs/Web/HTML/La_vérification_orthographique_dans_les_formulaires /fr/docs/Web/HTML/Global_attributes/spellcheck /fr/docs/Web/HTML/Microdonnées /fr/docs/Web/HTML/Microdata /fr/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /fr/docs/Glossary/speculative_parsing -/fr/docs/Web/HTML/Précharger_du_contenu /fr/docs/Web/HTML/Preloading_content +/fr/docs/Web/HTML/Preloading_content /fr/docs/orphaned/Web/HTML/Preloading_content +/fr/docs/Web/HTML/Précharger_du_contenu /fr/docs/orphaned/Web/HTML/Preloading_content /fr/docs/Web/HTML/Reglages_des_attributs_CORS /fr/docs/Web/HTML/Attributes/crossorigin /fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /fr/docs/Web/HTML/Types_de_lien /fr/docs/Web/HTML/Link_types diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index f20bdd5d89..d56cba1bcd 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -19699,13 +19699,6 @@ "Arzak656" ] }, - "Web/API/SVGStylable": { - "modified": "2020-10-15T21:34:30.185Z", - "contributors": [ - "SphinxKnight", - "B_M" - ] - }, "Web/API/SVGTitleElement": { "modified": "2019-03-23T22:57:49.129Z", "contributors": [ @@ -24862,24 +24855,12 @@ "SphinxKnight" ] }, - "Web/CSS/@media/prefers-reduced-transparency": { - "modified": "2020-10-15T22:20:20.333Z", - "contributors": [ - "SphinxKnight" - ] - }, "Web/CSS/@media/resolution": { "modified": "2020-10-15T21:47:24.193Z", "contributors": [ "SphinxKnight" ] }, - "Web/CSS/@media/scan": { - "modified": "2020-10-15T21:47:29.526Z", - "contributors": [ - "SphinxKnight" - ] - }, "Web/CSS/@media/scripting": { "modified": "2020-10-15T21:47:29.228Z", "contributors": [ @@ -24921,20 +24902,6 @@ "Skoua" ] }, - "Web/CSS/@page/bleed": { - "modified": "2020-10-15T21:47:32.177Z", - "contributors": [ - "SphinxKnight" - ] - }, - "Web/CSS/@page/marks": { - "modified": "2020-10-15T21:20:05.400Z", - "contributors": [ - "SphinxKnight", - "teoli", - "FredB" - ] - }, "Web/CSS/@page/size": { "modified": "2020-10-15T21:47:32.255Z", "contributors": [ @@ -32311,13 +32278,6 @@ "tregagnon" ] }, - "Web/HTML/Element/isindex": { - "modified": "2020-10-15T21:24:06.247Z", - "contributors": [ - "SphinxKnight", - "tregagnon" - ] - }, "Web/HTML/Element/kbd": { "modified": "2020-10-15T21:23:28.702Z", "contributors": [ @@ -32352,13 +32312,6 @@ "Mgjbot" ] }, - "Web/HTML/Element/listing": { - "modified": "2020-10-15T21:24:01.189Z", - "contributors": [ - "SphinxKnight", - "tregagnon" - ] - }, "Web/HTML/Element/main": { "modified": "2020-10-15T21:24:00.758Z", "contributors": [ @@ -32427,13 +32380,6 @@ "tregagnon" ] }, - "Web/HTML/Element/multicol": { - "modified": "2020-10-15T21:27:07.686Z", - "contributors": [ - "SphinxKnight", - "msherefel" - ] - }, "Web/HTML/Element/nav": { "modified": "2020-10-15T21:23:13.672Z", "contributors": [ @@ -32443,12 +32389,6 @@ "tregagnon" ] }, - "Web/HTML/Element/nextid": { - "modified": "2020-10-15T21:51:55.717Z", - "contributors": [ - "SphinxKnight" - ] - }, "Web/HTML/Element/nobr": { "modified": "2020-10-15T21:23:31.399Z", "contributors": [ @@ -33125,14 +33065,6 @@ "Emmanuel.KWENE" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-10-15T21:55:30.755Z", - "contributors": [ - "nhoizey", - "SphinxKnight", - "Goofy" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2019-05-21T08:04:30.230Z", "contributors": [ @@ -45221,6 +45153,13 @@ "loella16" ] }, + "orphaned/Web/API/SVGStylable": { + "modified": "2020-10-15T21:34:30.185Z", + "contributors": [ + "SphinxKnight", + "B_M" + ] + }, "orphaned/Web/API/URLUtilsReadOnly": { "modified": "2020-10-15T22:17:11.893Z", "contributors": [ @@ -45241,6 +45180,32 @@ "Aaaaaaa" ] }, + "orphaned/Web/CSS/@media/prefers-reduced-transparency": { + "modified": "2020-10-15T22:20:20.333Z", + "contributors": [ + "SphinxKnight" + ] + }, + "orphaned/Web/CSS/@media/scan": { + "modified": "2020-10-15T21:47:29.526Z", + "contributors": [ + "SphinxKnight" + ] + }, + "orphaned/Web/CSS/@page/bleed": { + "modified": "2020-10-15T21:47:32.177Z", + "contributors": [ + "SphinxKnight" + ] + }, + "orphaned/Web/CSS/@page/marks": { + "modified": "2020-10-15T21:20:05.400Z", + "contributors": [ + "SphinxKnight", + "teoli", + "FredB" + ] + }, "orphaned/Web/Guide/Events": { "modified": "2020-08-30T07:20:46.985Z", "contributors": [ @@ -45264,6 +45229,41 @@ "loella16" ] }, + "orphaned/Web/HTML/Element/isindex": { + "modified": "2020-10-15T21:24:06.247Z", + "contributors": [ + "SphinxKnight", + "tregagnon" + ] + }, + "orphaned/Web/HTML/Element/listing": { + "modified": "2020-10-15T21:24:01.189Z", + "contributors": [ + "SphinxKnight", + "tregagnon" + ] + }, + "orphaned/Web/HTML/Element/multicol": { + "modified": "2020-10-15T21:27:07.686Z", + "contributors": [ + "SphinxKnight", + "msherefel" + ] + }, + "orphaned/Web/HTML/Element/nextid": { + "modified": "2020-10-15T21:51:55.717Z", + "contributors": [ + "SphinxKnight" + ] + }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-10-15T21:55:30.755Z", + "contributors": [ + "nhoizey", + "SphinxKnight", + "Goofy" + ] + }, "orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear": { "modified": "2020-10-15T21:30:59.712Z", "contributors": [ diff --git a/files/fr/orphaned/web/api/svgstylable/index.html b/files/fr/orphaned/web/api/svgstylable/index.html new file mode 100644 index 0000000000..f0f30a82ce --- /dev/null +++ b/files/fr/orphaned/web/api/svgstylable/index.html @@ -0,0 +1,98 @@ +--- +title: SVGStylable +slug: orphaned/Web/API/SVGStylable +tags: + - API + - Reference + - SVG + - SVG DOM +translation_of: Web/API/SVGStylable +original_slug: Web/API/SVGStylable +--- +
{{APIRef("SVG")}}
+ +

Interface SVG stylisable

+ +

L'interface SVGStylable est implémentée sur tout les objets SVG pouvant avoir des attributs {{ SVGAttr("style") }}, {{SVGAttr("class")}} ou d'autre attributs modifiants leur présentation, leur affichage.

+ +

Aperçu de l'interface

+ + + + + + + + + + + + + + + + + + + + +
Implémente aussi/
Métodes +
    +
  • {{ domxref("CSSValue") }} getPresentationAttribute(in {{ domxref("DOMString") }} name)
    • +
+
Propriétés +
    +
  • readonly {{ domxref("SVGAnimatedString") }} className
    • +
  • readonly {{ domxref("CSSStyleDeclaration") }} style
    • +
+
NormeSVG 1.1 (2e Édition)
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
className{{ domxref("SVGAnimatedString") }}Correspond à l'attribut {{ SVGAttr("class") }} de l'élément donné.
style{{ domxref("CSSStyleDeclaration") }}Correspond à l'attribut {{ SVGAttr("style") }} de l'élément donné.
+ +

Métodes

+ + + + + + + + + + + + + + + + +
Nom & ArgumentsRetourneDescription
getPresentationAttribute(in {{ domxref("DOMString") }} name){{ domxref("CSSValue") }}Retourne la valeur par défaut (ex: static) d'un attribut de présentation donné comme un objet de type {{ domxref("CSSValue") }}.
+ The returned object is live; changes to the objects represent immediate changes to the objects to which the {{ domxref("CSSValue") }} is attached.
+ +

Compatibilité entre les navigateurs

+ + + +

{{Compat("api.SVGStylable")}}

diff --git a/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html new file mode 100644 index 0000000000..cba1deb11d --- /dev/null +++ b/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html @@ -0,0 +1,85 @@ +--- +title: prefers-reduced-transparency +slug: orphaned/Web/CSS/@media/prefers-reduced-transparency +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-reduced-transparency +original_slug: Web/CSS/@media/prefers-reduced-transparency +--- +

{{CSSRef}}{{SeeCompatTable}}{{draft}}

+ +

La caractéristique média prefers-reduced-transparency permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à false lorsqu'il est utilisé dans un contexte booléen.
+
reduce
+
Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.

+ +

Exemples

+ +

Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.

+ +

HTML

+ +
<div class="transparency">Boîte transparente</div>
+
+ +

CSS

+ +
.transparency {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .transparency {
+    opacity: 1;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + + +

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/orphaned/web/css/@media/scan/index.html b/files/fr/orphaned/web/css/@media/scan/index.html new file mode 100644 index 0000000000..4d9d38cde6 --- /dev/null +++ b/files/fr/orphaned/web/css/@media/scan/index.html @@ -0,0 +1,86 @@ +--- +title: scan +slug: orphaned/Web/CSS/@media/scan +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/scan +original_slug: Web/CSS/@media/scan +--- +
{{CSSRef}}
+ +

scan est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique scan est définie avec un mot-clé parmi ceux qui suivent :

+ +
+
interlace
+
L'image est composée avec un entrelacement grâce à des lignes intercalées (en deux passes).
+
progressive
+
L'image est composée ligne par ligne avec un balayage progressif.
+
+ +

Exemples

+ +

HTML

+ +
<p>Si votre écran utilise une composition avec entrelacement, ce texte devrait
+   être écrit avec une police sans serif/empattement. S'il utilise une composition
+   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
+</p>
+
+ +

CSS

+ +
p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/orphaned/web/css/@page/bleed/index.html b/files/fr/orphaned/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..3465aa1178 --- /dev/null +++ b/files/fr/orphaned/web/css/@page/bleed/index.html @@ -0,0 +1,80 @@ +--- +title: bleed +slug: orphaned/Web/CSS/@page/bleed +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@page/bleed +original_slug: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le descripteur bleed, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+bleed: auto;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

Valeurs

+ +
+
auto
+
Cette valeur correspond à 6pt si {{cssxref("marks")}} vaut crop. Dans les autres cas, cette valeur vaut zéro.
+
{{cssxref("<length>")}}
+
Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@page {
+  bleed: 1cm;
+  marks: crop;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.page.bleed")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("@page/marks", "marks")}}
    • +
  • {{cssxref("@page/size", "size")}}
    • +
diff --git a/files/fr/orphaned/web/css/@page/marks/index.html b/files/fr/orphaned/web/css/@page/marks/index.html new file mode 100644 index 0000000000..bb0558bd4e --- /dev/null +++ b/files/fr/orphaned/web/css/@page/marks/index.html @@ -0,0 +1,83 @@ +--- +title: marks +slug: orphaned/Web/CSS/@page/marks +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@page/marks +original_slug: Web/CSS/@page/marks +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le descripteur marks, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (crop marks) ou des croix d'alignement (cross marks). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.

+ +

Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+
+ +

Valeurs

+ +
+
crop
+
Les marques de découpe seront affichées sur la page finale.
+
cross
+
Les marques d'alignement seront affichées sur la page finale.
+
none
+
Aucune marque ne sera affichée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@page {
+  marks: crop cross;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Définition initiale.
+ +

Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.page.marks")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("@page/bleed", "bleed")}}
    • +
  • {{cssxref("@page/size", "size")}}
    • +
diff --git a/files/fr/orphaned/web/html/element/isindex/index.html b/files/fr/orphaned/web/html/element/isindex/index.html new file mode 100644 index 0000000000..90e3a1539f --- /dev/null +++ b/files/fr/orphaned/web/html/element/isindex/index.html @@ -0,0 +1,71 @@ +--- +title: +slug: orphaned/Web/HTML/Element/isindex +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/isindex +original_slug: Web/HTML/Element/isindex +--- +
{{Obsolete_header}}{{HTMLRef}}
+ +

L'élément HTML <isindex> est un élément obsolète qui permet de placer un champ sur une page afin d'effectuer des recherches dans le document. <isindex> devait permettre de saisir une ligne de texte pour une requête, à la suite de cette saisie, le serveur renvoyait une liste de pages qui correspondait à la requête. La prise en charge de cet élément dépendait du navigateur et du serveur.

+ +

<isindex> est un élément déprécié depuis HTML 4.01 car on peut obtenir le même comportement grâce à un formulaire HTML (cf. {{HTMLElement("form")}}). Tous les navigateurs ont désormais retiré <isindex> comme élément (ce dernier est classé comme une fonctionnalité non-conforme dans le standard WHATWG).

+ +

Attributs

+ +

Comme les autres éléments HTML, cet élément prend en charge les attributs universels.

+ +
+
{{htmlattrdef("prompt")}}
+
La valeur de cet attribut sera le texte affiché dans le champ de saisie avant que l'utilisateur y saisisse un texte.
+
{{htmlattrdef("action")}}
+
Cet atttribut peut être utilisé afin d'envoyer la requête vers une URL différente. Cet attribut n'est pas défini par le W3C.
+
+ +

Exemples

+ +

HTML

+ +
<isindex prompt="Rechercher…" />
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Historique

+ +

En juin 1992, Dan Connolly indiquant sa préférence pour un autre type d'ancre par rapport à isindex.

+ +

En novembre 1992, les index sont plus considérés comme des liens que comme des documents. Pour cette raison, différentes solutions sont proposées et l'ergonomie des formulaires est mentionnée en référence au navigateur Dynatext : « le navigateur affiche des boutons, les champs textuels, l'utilisateur remplit les champs puis clique sur OK et les résultats de la requête sont récupérés sous la forme d'un tableau de contenu ».

+ +

Lors d'une discussion en novembre 1992, Kevin Hoadley remet en cause le besoin d'un élément isindex et propose de l'abandonné. Il propose d'utiliser un élément {{HTMLElement("input")}} (une idée également poussée par Steve Putz). Tim Berners-Lee explique alors que le but de isindex est de pouvoir agréger les résultats d'une recherche. Kevin répond alors qu'il n'apprécie pas le côté booléen de isindex et qu'il serait préférable d'avoir un système où tout puisse être recherché, il propose d'étendre le cadre du WWW avec une configuration httpd spécifique et de définir une correspondance entre les URI et les requêtes de recherche.

+ +

En 2016, le retrait de isindex de la spécification est proposé.

+ +

Spécifications

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.isindex")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("input")}}
    • +
  • {{HTMLElement("form")}}
    • +
diff --git a/files/fr/orphaned/web/html/element/listing/index.html b/files/fr/orphaned/web/html/element/listing/index.html new file mode 100644 index 0000000000..ccccd2af09 --- /dev/null +++ b/files/fr/orphaned/web/html/element/listing/index.html @@ -0,0 +1,49 @@ +--- +title: +slug: orphaned/Web/HTML/Element/listing +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/listing +original_slug: Web/HTML/Element/listing +--- +
{{Obsolete_header}}{{HTMLRef}}
+ +

L'élément HTML <listing> affiche le texte compris entre les balises d'ouverture et de fermeture sans interpréter le HTML contenu, et en utilisant une police à chasse fixe. Le standard HTML 2 recommande de ne pas casser les lignes si elles ne sont pas plus grandes que 132 caractères.

+ +
Note : N'utilisez pas cet élément + +
    +
  • Il est déprécié depuis HTML 3.2 et n'a jamais été implémenté d'une manière cohérente par tous les navigateurs. De plus, il est obsolète dans HTML5 et peut être rendu par les agents-utilisateurs conformes comme l'élément {{HTMLElement("pre")}}, qui interprète l'HTML contenu !
    • +
  • Utilisez plutôt l'élément {{HTMLElement("pre")}} ou si sémantiquement approprié, l'élément {{HTMLElement("code")}} en échappant '<' et '>' pour qu'ils ne soient pas interprétés.
    • +
  • Une police à espacement fixe peut aussi être obtenue en utilisant un simple élément {{HTMLElement("div")}}, et en appliquant une règle CSS utilisant la valeur de police générique monospace dans la propriété {{cssxref("font-family")}}
    • +
+
+ +

Attributs

+ +

Cet élément a aucun attribut spécifique en dehors des attributs universels, communs à tous les éléments.

+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref('HTMLElement')}}.

+ +
+

Note d'implémentation : jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.

+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.listing")}}

+ +

Voir aussi

+ +
    +
  • Utilisez plutôt les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}}.
    • +
  • Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("xmp")}} sont similaires à {{HTMLElement("listing")}} mais sont également obsolètes.
    • +
diff --git a/files/fr/orphaned/web/html/element/multicol/index.html b/files/fr/orphaned/web/html/element/multicol/index.html new file mode 100644 index 0000000000..49034047bc --- /dev/null +++ b/files/fr/orphaned/web/html/element/multicol/index.html @@ -0,0 +1,38 @@ +--- +title: +slug: orphaned/Web/HTML/Element/multicol +tags: + - Experimental + - HTML + - Non-standard + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/multicol +original_slug: Web/HTML/Element/multicol +--- +
{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}
+ +

L'élément HTML <multicol> était un élement expérimental conçu afin de réaliser des agencements sur plusieurs colonnes.
+ Il n'a jamais eu une traction significative et n'est pas implémenté dans la plupart des navigateurs.

+ +
+

N'utilisez pas cet élément ! Pour implémenter un agencement sur plusieurs colonnes, vous devez utilisez les élements HTML classiques comme {{HTMLElement("div")}} et les fonctionnalités CSS permettant d'organiser plusieurs colonnes.

+
+ +

Spécifications

+ +

Cet élément ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.multicol")}}

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/html/element/nextid/index.html b/files/fr/orphaned/web/html/element/nextid/index.html new file mode 100644 index 0000000000..4f576ca0d1 --- /dev/null +++ b/files/fr/orphaned/web/html/element/nextid/index.html @@ -0,0 +1,60 @@ +--- +title: ' : l''élément NeXT ID (Obsolète)' +slug: orphaned/Web/HTML/Element/nextid +tags: + - Déprécié + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/nextid +original_slug: Web/HTML/Element/nextid +--- +
{{HTMLRef}}{{Deprecated_header}}
+ +

L'élément HTML <nextid> est un élément obsolète qui était utilisé par l'outil de conception web NeXT afin de générer automatiquement des attributs {{htmlattrxref("name","a")}}. Cet élément fut l'un des premiers à disparaître du DTD public des versions HTML et est également l'un des premiers éléments HTML les moins compris.

+ +
+
HTML "0.a" - valable jusqu'au 10 janvier 1991
+
Aucun exemple disponible.
+
HTML "0.c" - à partir du 23 janvier 1991 et jusqu'au 23 novembre 1992
+
Cette version d'HTML ajoute <NEXTID> en tant que formulaire, non conforme à SGML, simplement utilisé comme valeur numérique.
+
HTML "0.d" - à partir du 26 novembre 1992 jusqu'au 4 mai 1993
+
Pendant cette période, NeXT et les anciens DTD indiquent que <NEXTID> ne peut prendre qu'un nombre comme valeur pour son attribut N.
+
HTML "1.k" - Version 1 (première version officielle)
+
Dans le premier brouillon officiel de HTML, <NEXTID> permet d'utiliser un nom dans son attribut plutôt qu'un seul nombre.
+
HTML "1.m" - Version 1 (deuxième version)
+
Dans le brouillon HTML qui suit, <NEXTID> peut être retiré de l'affichage grâce à une commande SGML.
+
HTML Version 2, niveau 1
+
L'élément ne peut être inclus dans les éléments {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("option")}}.
+
HTML Version 2, niveau 1 strict
+
Ajoute des exclusions supplémentaires pour les éléments dépréciés.
+
HTML Version 2, niveau 2
+
La version par défaut, qui permet d'utiliser et d'inclure l'ensemble des éléments et attributs d'HTML 2.
+
HTML Version 2, niveau 2 strict
+
Cette version exclut les éléments dépréciés et interdit d'utiliser certaines constructions (comme l'inclusion d'un titre (<h1-h6>) dans un lien ({{HTMLElement("a")}} ou des champs de saisie {{HTMLElement("input")}} qui ne soient pas des éléments de bloc).
+
HTML Version 3.2
+
<NEXTID> disparaît du DTD.
+
+ +

Attributs

+ +

À l'instar de l'ensemble des éléments HTML, cet élément inclut les attribus universels.

+ +
+
{{htmlattrdef("n")}}
+
Une référence à une ancre.
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.nextid")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("isindex")}}
    • +
diff --git a/files/fr/orphaned/web/html/preloading_content/index.html b/files/fr/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..f5a7840335 --- /dev/null +++ b/files/fr/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,248 @@ +--- +title: Précharger du contenu avec rel="preload" +slug: orphaned/Web/HTML/Preloading_content +tags: + - Guide + - HTML + - JavaScript + - Link + - Media + - Performance + - Web Performance + - as + - preload + - rel +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

La valeur preload de l'attribut rel pour l'élément <link> permet d'écrire des requêtes déclaratives de récupération au sein de l'élément <head>. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances.

+ +

Cet article est un guide sur le fonctionnement de <link rel="preload">.

+ +

Les bases

+ +

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer :

+ +
    +
  • le chemin de la ressource à précharger via l'attribut href
    • +
  • et le type de la ressource via l'attribut as.
    • +
+ +

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement pour JS et CSS</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Balles rebondissantes</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

Ici, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils seront nécessaires au rendu de la page par la suite. Cet exemple est trivial, car le navigateur découvre probablement les éléments <link rel="stylesheet"> et <script> dans le même morceau de HTML que les préchargements, mais les avantages sont d'autant plus évidents que les ressources sont découvertes tardivement et qu'elles sont importantes. Par exemple :

+ +
    +
  • Les ressources qui sont pointées à partir du CSS, comme les polices ou les images.
    • +
  • Les ressources que JavaScript peut demander, comme JSON, les scripts importés ou les web workers.
    • +
  • Images et fichiers vidéo plus volumineux.
    • +
+ +

preload présente également d'autres avantages. L'utilisation de as pour spécifier le type de contenu à précharger permet au navigateur de :

+ +
    +
  • Donner la priorité au chargement des ressources de façon plus précise.
    • +
  • Stocker dans le cache pour les demandes futures, en réutilisant la ressource si nécessaire.
    • +
  • Appliquer la bonne politique de sécurité du contenu à la ressource.
    • +
  • Définissez les bons en-têtes de requête Accept pour celle-ci.
    • +
+ +

Quels sont les types de contenu qu'on peut précharger ?

+ +

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

+ +
    +
  • audio : un fichier audio.
    • +
  • document : un document HTML destiné à être intégré dans un élément <frame> ou dans un élément <iframe>.
    • +
  • embed : une ressource destinée à être intégrée dans un élément <embed>.
    • +
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
    • +
  • font : un fichier de police de caractère.
    • +
  • image : un fichier contenant une image .
    • +
  • object : une ressource à intégrer dans un élément <object>.
    • +
  • script : un fichier JavaScript.
    • +
  • style : une feuille de style CSS.
    • +
  • track : un fichier WebVTT.
    • +
  • worker : un web worker ou un worker partagé JavaScript.
    • +
  • video : un fichier vidéo, généralement utilisé dans un élément <video>.
    • +
+ +
+

Note : Le préchargement de vidéo est inclus dans la spécification Preload, mais n'est pas actuellement mis en œuvre par les navigateurs.

+
+ +
+

Note : Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

+
+ +

Ajouter un type MIME

+ +

Les éléments <link> permettent d'utiliser un attribut type qui contient le type MIME de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut type afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.

+ +

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement d'une vidéo</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
+       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
+  </video>
+</body>
+ +

Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.

+ +

Récupérer des ressources de différentes origines

+ +

Lors du préchargement de ressources qui sont récupérées avec CORS activé (par exemple. fetch(), XMLHttpRequest ou fonts), une attention particulière doit être apportée au paramétrage de l'attribut crossorigin sur votre <link>. L'attribut doit être défini pour correspondre au mode CORS et aux informations d'identification de la ressource, même lorsque la récupération n'est pas d'origine croisée.

+ +

Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

+ +

Utilisons ce cas de figure comme exemple. Vous pouvez consulter le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Web font example</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
+
+  <link href="style.css" rel="stylesheet">
+</head>
+<body>
+  …
+</body>
+ +

Non seulement nous fournissons les indications relatives au type MIME dans les attributs type, mais nous fournissons également l'attribut crossorigin pour nous assurer que le mode CORS du préchargement correspond à l'éventuelle demande de ressource de police.

+ +

Gérer les différents médias

+ +

Une qualité des éléments <link> est qu'ils gèrent l'attribut media. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

+ +

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement responsive</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>Mon site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc Window.matchMedia / MediaQueryList (lire Tester les requêtes média pour plus d'informations sur ce point).

+ +

Il est ainsi beaucoup plus probable que la police soit disponible pour le rendu de la page, ce qui réduit les FOUT (flash de texte non stylisé).

+ +

Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.

+ +

Utiliser des scripts et des préchargements différés

+ +

Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de HTMLLinkElement qu'on attache au DOM :

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

+ +

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+ +

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

+ +

Les autres mécanismes de préchargement

+ +

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

+ +
    +
  • <link rel="prefetch"> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
    • +
  • <link rel="prerender"> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère prerender comme un préchargement NoState.
    • +
  • <link rel="subresource"> {{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
    • +
  • De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Définition simple de preload.
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.link.rel.preload")}}

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}
diff --git a/files/fr/web/api/svgstylable/index.html b/files/fr/web/api/svgstylable/index.html deleted file mode 100644 index 7bb1f743fa..0000000000 --- a/files/fr/web/api/svgstylable/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: SVGStylable -slug: Web/API/SVGStylable -tags: - - API - - Reference - - SVG - - SVG DOM -translation_of: Web/API/SVGStylable ---- -
{{APIRef("SVG")}}
- -

Interface SVG stylisable

- -

L'interface SVGStylable est implémentée sur tout les objets SVG pouvant avoir des attributs {{ SVGAttr("style") }}, {{SVGAttr("class")}} ou d'autre attributs modifiants leur présentation, leur affichage.

- -

Aperçu de l'interface

- - - - - - - - - - - - - - - - - - - - -
Implémente aussi/
Métodes -
    -
  • {{ domxref("CSSValue") }} getPresentationAttribute(in {{ domxref("DOMString") }} name)
    • -
-
Propriétés -
    -
  • readonly {{ domxref("SVGAnimatedString") }} className
    • -
  • readonly {{ domxref("CSSStyleDeclaration") }} style
    • -
-
NormeSVG 1.1 (2e Édition)
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
className{{ domxref("SVGAnimatedString") }}Correspond à l'attribut {{ SVGAttr("class") }} de l'élément donné.
style{{ domxref("CSSStyleDeclaration") }}Correspond à l'attribut {{ SVGAttr("style") }} de l'élément donné.
- -

Métodes

- - - - - - - - - - - - - - - - -
Nom & ArgumentsRetourneDescription
getPresentationAttribute(in {{ domxref("DOMString") }} name){{ domxref("CSSValue") }}Retourne la valeur par défaut (ex: static) d'un attribut de présentation donné comme un objet de type {{ domxref("CSSValue") }}.
- The returned object is live; changes to the objects represent immediate changes to the objects to which the {{ domxref("CSSValue") }} is attached.
- -

Compatibilité entre les navigateurs

- - - -

{{Compat("api.SVGStylable")}}

diff --git a/files/fr/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/web/css/@media/prefers-reduced-transparency/index.html deleted file mode 100644 index a2eddd14bd..0000000000 --- a/files/fr/web/css/@media/prefers-reduced-transparency/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: prefers-reduced-transparency -slug: Web/CSS/@media/prefers-reduced-transparency -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/prefers-reduced-transparency ---- -

{{CSSRef}}{{SeeCompatTable}}{{draft}}

- -

La caractéristique média prefers-reduced-transparency permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.

- -

Syntaxe

- -
-
no-preference
-
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à false lorsqu'il est utilisé dans un contexte booléen.
-
reduce
-
Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.
-
- -

Préférences utilisateur

- -

À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.

- -

Exemples

- -

Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.

- -

HTML

- -
<div class="transparency">Boîte transparente</div>
-
- -

CSS

- -
.transparency {
-  opacity: 0.5;
-}
-
-@media (prefers-reduced-transparency: reduce) {
-  .transparency {
-    opacity: 1;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - - -

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/scan/index.html b/files/fr/web/css/@media/scan/index.html deleted file mode 100644 index be71b32a45..0000000000 --- a/files/fr/web/css/@media/scan/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: scan -slug: Web/CSS/@media/scan -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/scan ---- -
{{CSSRef}}
- -

scan est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.

- -

Syntaxe

- -

La caractéristique scan est définie avec un mot-clé parmi ceux qui suivent :

- -
-
interlace
-
L'image est composée avec un entrelacement grâce à des lignes intercalées (en deux passes).
-
progressive
-
L'image est composée ligne par ligne avec un balayage progressif.
-
- -

Exemples

- -

HTML

- -
<p>Si votre écran utilise une composition avec entrelacement, ce texte devrait
-   être écrit avec une police sans serif/empattement. S'il utilise une composition
-   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
-</p>
-
- -

CSS

- -
p {
-  font-family: cursive;
-}
-
-@media (scan: interlace) {
-  p {
-    font-family: sans-serif;
-  }
-}
-
-@media (scan: progressive) {
-  p {
-    font-family: serif;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/css/@page/bleed/index.html b/files/fr/web/css/@page/bleed/index.html deleted file mode 100644 index 576781614b..0000000000 --- a/files/fr/web/css/@page/bleed/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: bleed -slug: Web/CSS/@page/bleed -tags: - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@page/bleed ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le descripteur bleed, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-bleed: auto;
-
-/* Valeurs de longueur */
-/* Type <length>       */
-bleed: 8pt;
-bleed: 1cm;
-
- -

Valeurs

- -
-
auto
-
Cette valeur correspond à 6pt si {{cssxref("marks")}} vaut crop. Dans les autres cas, cette valeur vaut zéro.
-
{{cssxref("<length>")}}
-
Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@page {
-  bleed: 1cm;
-  marks: crop;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.page.bleed")}}

- -

Voir aussi

- -
    -
  • {{cssxref("@page/marks", "marks")}}
    • -
  • {{cssxref("@page/size", "size")}}
    • -
diff --git a/files/fr/web/css/@page/marks/index.html b/files/fr/web/css/@page/marks/index.html deleted file mode 100644 index 5b37cfb6ad..0000000000 --- a/files/fr/web/css/@page/marks/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: marks -slug: Web/CSS/@page/marks -tags: - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@page/marks ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le descripteur marks, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (crop marks) ou des croix d'alignement (cross marks). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.

- -

Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-marks: none;
-marks: crop;
-marks: cross;
-marks: crop cross;
-
- -

Valeurs

- -
-
crop
-
Les marques de découpe seront affichées sur la page finale.
-
cross
-
Les marques d'alignement seront affichées sur la page finale.
-
none
-
Aucune marque ne sera affichée.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@page {
-  marks: crop cross;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Définition initiale.
- -

Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.page.marks")}}

- -

Voir aussi

- -
    -
  • {{cssxref("@page/bleed", "bleed")}}
    • -
  • {{cssxref("@page/size", "size")}}
    • -
diff --git a/files/fr/web/html/element/isindex/index.html b/files/fr/web/html/element/isindex/index.html deleted file mode 100644 index fc1cfc8f62..0000000000 --- a/files/fr/web/html/element/isindex/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: -slug: Web/HTML/Element/isindex -tags: - - Déprécié - - Element - - HTML - - Reference - - Web -translation_of: Web/HTML/Element/isindex ---- -
{{Obsolete_header}}{{HTMLRef}}
- -

L'élément HTML <isindex> est un élément obsolète qui permet de placer un champ sur une page afin d'effectuer des recherches dans le document. <isindex> devait permettre de saisir une ligne de texte pour une requête, à la suite de cette saisie, le serveur renvoyait une liste de pages qui correspondait à la requête. La prise en charge de cet élément dépendait du navigateur et du serveur.

- -

<isindex> est un élément déprécié depuis HTML 4.01 car on peut obtenir le même comportement grâce à un formulaire HTML (cf. {{HTMLElement("form")}}). Tous les navigateurs ont désormais retiré <isindex> comme élément (ce dernier est classé comme une fonctionnalité non-conforme dans le standard WHATWG).

- -

Attributs

- -

Comme les autres éléments HTML, cet élément prend en charge les attributs universels.

- -
-
{{htmlattrdef("prompt")}}
-
La valeur de cet attribut sera le texte affiché dans le champ de saisie avant que l'utilisateur y saisisse un texte.
-
{{htmlattrdef("action")}}
-
Cet atttribut peut être utilisé afin d'envoyer la requête vers une URL différente. Cet attribut n'est pas défini par le W3C.
-
- -

Exemples

- -

HTML

- -
<isindex prompt="Rechercher…" />
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Historique

- -

En juin 1992, Dan Connolly indiquant sa préférence pour un autre type d'ancre par rapport à isindex.

- -

En novembre 1992, les index sont plus considérés comme des liens que comme des documents. Pour cette raison, différentes solutions sont proposées et l'ergonomie des formulaires est mentionnée en référence au navigateur Dynatext : « le navigateur affiche des boutons, les champs textuels, l'utilisateur remplit les champs puis clique sur OK et les résultats de la requête sont récupérés sous la forme d'un tableau de contenu ».

- -

Lors d'une discussion en novembre 1992, Kevin Hoadley remet en cause le besoin d'un élément isindex et propose de l'abandonné. Il propose d'utiliser un élément {{HTMLElement("input")}} (une idée également poussée par Steve Putz). Tim Berners-Lee explique alors que le but de isindex est de pouvoir agréger les résultats d'une recherche. Kevin répond alors qu'il n'apprécie pas le côté booléen de isindex et qu'il serait préférable d'avoir un système où tout puisse être recherché, il propose d'étendre le cadre du WWW avec une configuration httpd spécifique et de définir une correspondance entre les URI et les requêtes de recherche.

- -

En 2016, le retrait de isindex de la spécification est proposé.

- -

Spécifications

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.isindex")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("form")}}
    • -
diff --git a/files/fr/web/html/element/listing/index.html b/files/fr/web/html/element/listing/index.html deleted file mode 100644 index 8ecf9a1d69..0000000000 --- a/files/fr/web/html/element/listing/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: -slug: Web/HTML/Element/listing -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/listing ---- -
{{Obsolete_header}}{{HTMLRef}}
- -

L'élément HTML <listing> affiche le texte compris entre les balises d'ouverture et de fermeture sans interpréter le HTML contenu, et en utilisant une police à chasse fixe. Le standard HTML 2 recommande de ne pas casser les lignes si elles ne sont pas plus grandes que 132 caractères.

- -
Note : N'utilisez pas cet élément - -
    -
  • Il est déprécié depuis HTML 3.2 et n'a jamais été implémenté d'une manière cohérente par tous les navigateurs. De plus, il est obsolète dans HTML5 et peut être rendu par les agents-utilisateurs conformes comme l'élément {{HTMLElement("pre")}}, qui interprète l'HTML contenu !
    • -
  • Utilisez plutôt l'élément {{HTMLElement("pre")}} ou si sémantiquement approprié, l'élément {{HTMLElement("code")}} en échappant '<' et '>' pour qu'ils ne soient pas interprétés.
    • -
  • Une police à espacement fixe peut aussi être obtenue en utilisant un simple élément {{HTMLElement("div")}}, et en appliquant une règle CSS utilisant la valeur de police générique monospace dans la propriété {{cssxref("font-family")}}
    • -
-
- -

Attributs

- -

Cet élément a aucun attribut spécifique en dehors des attributs universels, communs à tous les éléments.

- -

Interface DOM

- -

Cet élément implémente l'interface {{domxref('HTMLElement')}}.

- -
-

Note d'implémentation : jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.

-
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.listing")}}

- -

Voir aussi

- -
    -
  • Utilisez plutôt les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}}.
    • -
  • Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("xmp")}} sont similaires à {{HTMLElement("listing")}} mais sont également obsolètes.
    • -
diff --git a/files/fr/web/html/element/multicol/index.html b/files/fr/web/html/element/multicol/index.html deleted file mode 100644 index a1bcd53f85..0000000000 --- a/files/fr/web/html/element/multicol/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: -slug: Web/HTML/Element/multicol -tags: - - Experimental - - HTML - - Non-standard - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/multicol ---- -
{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}
- -

L'élément HTML <multicol> était un élement expérimental conçu afin de réaliser des agencements sur plusieurs colonnes.
- Il n'a jamais eu une traction significative et n'est pas implémenté dans la plupart des navigateurs.

- -
-

N'utilisez pas cet élément ! Pour implémenter un agencement sur plusieurs colonnes, vous devez utilisez les élements HTML classiques comme {{HTMLElement("div")}} et les fonctionnalités CSS permettant d'organiser plusieurs colonnes.

-
- -

Spécifications

- -

Cet élément ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.multicol")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/nextid/index.html b/files/fr/web/html/element/nextid/index.html deleted file mode 100644 index 6b2179c76e..0000000000 --- a/files/fr/web/html/element/nextid/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ' : l''élément NeXT ID (Obsolète)' -slug: Web/HTML/Element/nextid -tags: - - Déprécié - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/nextid ---- -
{{HTMLRef}}{{Deprecated_header}}
- -

L'élément HTML <nextid> est un élément obsolète qui était utilisé par l'outil de conception web NeXT afin de générer automatiquement des attributs {{htmlattrxref("name","a")}}. Cet élément fut l'un des premiers à disparaître du DTD public des versions HTML et est également l'un des premiers éléments HTML les moins compris.

- -
-
HTML "0.a" - valable jusqu'au 10 janvier 1991
-
Aucun exemple disponible.
-
HTML "0.c" - à partir du 23 janvier 1991 et jusqu'au 23 novembre 1992
-
Cette version d'HTML ajoute <NEXTID> en tant que formulaire, non conforme à SGML, simplement utilisé comme valeur numérique.
-
HTML "0.d" - à partir du 26 novembre 1992 jusqu'au 4 mai 1993
-
Pendant cette période, NeXT et les anciens DTD indiquent que <NEXTID> ne peut prendre qu'un nombre comme valeur pour son attribut N.
-
HTML "1.k" - Version 1 (première version officielle)
-
Dans le premier brouillon officiel de HTML, <NEXTID> permet d'utiliser un nom dans son attribut plutôt qu'un seul nombre.
-
HTML "1.m" - Version 1 (deuxième version)
-
Dans le brouillon HTML qui suit, <NEXTID> peut être retiré de l'affichage grâce à une commande SGML.
-
HTML Version 2, niveau 1
-
L'élément ne peut être inclus dans les éléments {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("option")}}.
-
HTML Version 2, niveau 1 strict
-
Ajoute des exclusions supplémentaires pour les éléments dépréciés.
-
HTML Version 2, niveau 2
-
La version par défaut, qui permet d'utiliser et d'inclure l'ensemble des éléments et attributs d'HTML 2.
-
HTML Version 2, niveau 2 strict
-
Cette version exclut les éléments dépréciés et interdit d'utiliser certaines constructions (comme l'inclusion d'un titre (<h1-h6>) dans un lien ({{HTMLElement("a")}} ou des champs de saisie {{HTMLElement("input")}} qui ne soient pas des éléments de bloc).
-
HTML Version 3.2
-
<NEXTID> disparaît du DTD.
-
- -

Attributs

- -

À l'instar de l'ensemble des éléments HTML, cet élément inclut les attribus universels.

- -
-
{{htmlattrdef("n")}}
-
Une référence à une ancre.
-
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.nextid")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("isindex")}}
    • -
diff --git a/files/fr/web/html/preloading_content/index.html b/files/fr/web/html/preloading_content/index.html deleted file mode 100644 index 4c60404ec0..0000000000 --- a/files/fr/web/html/preloading_content/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: Précharger du contenu avec rel="preload" -slug: Web/HTML/Preloading_content -tags: - - Guide - - HTML - - JavaScript - - Link - - Media - - Performance - - Web Performance - - as - - preload - - rel -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Précharger_du_contenu ---- -

La valeur preload de l'attribut rel pour l'élément <link> permet d'écrire des requêtes déclaratives de récupération au sein de l'élément <head>. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances.

- -

Cet article est un guide sur le fonctionnement de <link rel="preload">.

- -

Les bases

- -

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

- -
<link rel="stylesheet" href="styles/main.css">
- -

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer :

- -
    -
  • le chemin de la ressource à précharger via l'attribut href
    • -
  • et le type de la ressource via l'attribut as.
    • -
- -

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement pour JS et CSS</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>Balles rebondissantes</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Ici, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils seront nécessaires au rendu de la page par la suite. Cet exemple est trivial, car le navigateur découvre probablement les éléments <link rel="stylesheet"> et <script> dans le même morceau de HTML que les préchargements, mais les avantages sont d'autant plus évidents que les ressources sont découvertes tardivement et qu'elles sont importantes. Par exemple :

- -
    -
  • Les ressources qui sont pointées à partir du CSS, comme les polices ou les images.
    • -
  • Les ressources que JavaScript peut demander, comme JSON, les scripts importés ou les web workers.
    • -
  • Images et fichiers vidéo plus volumineux.
    • -
- -

preload présente également d'autres avantages. L'utilisation de as pour spécifier le type de contenu à précharger permet au navigateur de :

- -
    -
  • Donner la priorité au chargement des ressources de façon plus précise.
    • -
  • Stocker dans le cache pour les demandes futures, en réutilisant la ressource si nécessaire.
    • -
  • Appliquer la bonne politique de sécurité du contenu à la ressource.
    • -
  • Définissez les bons en-têtes de requête Accept pour celle-ci.
    • -
- -

Quels sont les types de contenu qu'on peut précharger ?

- -

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

- -
    -
  • audio : un fichier audio.
    • -
  • document : un document HTML destiné à être intégré dans un élément <frame> ou dans un élément <iframe>.
    • -
  • embed : une ressource destinée à être intégrée dans un élément <embed>.
    • -
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
    • -
  • font : un fichier de police de caractère.
    • -
  • image : un fichier contenant une image .
    • -
  • object : une ressource à intégrer dans un élément <object>.
    • -
  • script : un fichier JavaScript.
    • -
  • style : une feuille de style CSS.
    • -
  • track : un fichier WebVTT.
    • -
  • worker : un web worker ou un worker partagé JavaScript.
    • -
  • video : un fichier vidéo, généralement utilisé dans un élément <video>.
    • -
- -
-

Note : Le préchargement de vidéo est inclus dans la spécification Preload, mais n'est pas actuellement mis en œuvre par les navigateurs.

-
- -
-

Note : Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

-
- -

Ajouter un type MIME

- -

Les éléments <link> permettent d'utiliser un attribut type qui contient le type MIME de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut type afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.

- -

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement d'une vidéo</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
-       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
-  </video>
-</body>
- -

Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.

- -

Récupérer des ressources de différentes origines

- -

Lors du préchargement de ressources qui sont récupérées avec CORS activé (par exemple. fetch(), XMLHttpRequest ou fonts), une attention particulière doit être apportée au paramétrage de l'attribut crossorigin sur votre <link>. L'attribut doit être défini pour correspondre au mode CORS et aux informations d'identification de la ressource, même lorsque la récupération n'est pas d'origine croisée.

- -

Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

- -

Utilisons ce cas de figure comme exemple. Vous pouvez consulter le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
-
-  <link href="style.css" rel="stylesheet">
-</head>
-<body>
-  …
-</body>
- -

Non seulement nous fournissons les indications relatives au type MIME dans les attributs type, mais nous fournissons également l'attribut crossorigin pour nous assurer que le mode CORS du préchargement correspond à l'éventuelle demande de ressource de police.

- -

Gérer les différents médias

- -

Une qualité des éléments <link> est qu'ils gèrent l'attribut media. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

- -

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement responsive</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>Mon site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc Window.matchMedia / MediaQueryList (lire Tester les requêtes média pour plus d'informations sur ce point).

- -

Il est ainsi beaucoup plus probable que la police soit disponible pour le rendu de la page, ce qui réduit les FOUT (flash de texte non stylisé).

- -

Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.

- -

Utiliser des scripts et des préchargements différés

- -

Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de HTMLLinkElement qu'on attache au DOM :

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

- -

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
- -

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

- -

Les autres mécanismes de préchargement

- -

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

- -
    -
  • <link rel="prefetch"> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
    • -
  • <link rel="prerender"> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère prerender comme un préchargement NoState.
    • -
  • <link rel="subresource"> {{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
    • -
  • De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Définition simple de preload.
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.link.rel.preload")}}

- -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index e3b3605391..62ba5264fa 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -4301,6 +4301,9 @@ /ja/docs/Web/CSS/:any /ja/docs/Web/CSS/:is /ja/docs/Web/CSS/:matches /ja/docs/Web/CSS/:is /ja/docs/Web/CSS/@media/Index /ja/docs/orphaned/Web/CSS/@media/Index +/ja/docs/Web/CSS/@media/scan /ja/docs/orphaned/Web/CSS/@media/scan +/ja/docs/Web/CSS/@page/bleed /ja/docs/orphaned/Web/CSS/@page/bleed +/ja/docs/Web/CSS/@page/marks /ja/docs/orphaned/Web/CSS/@page/marks /ja/docs/Web/CSS/@viewport/height /ja/docs/conflicting/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/max-height /ja/docs/conflicting/Web/CSS/@viewport_516ab4b0283b5b2231fb657505e22440 /ja/docs/Web/CSS/@viewport/max-zoom /ja/docs/conflicting/Web/CSS/@viewport_d03ebc763769680c55d1a4258592d3ed @@ -4652,6 +4655,9 @@ /ja/docs/Web/HTML/Element/h4 /ja/docs/Web/HTML/Element/Heading_Elements /ja/docs/Web/HTML/Element/h5 /ja/docs/Web/HTML/Element/Heading_Elements /ja/docs/Web/HTML/Element/h6 /ja/docs/Web/HTML/Element/Heading_Elements +/ja/docs/Web/HTML/Element/isindex /ja/docs/orphaned/Web/HTML/Element/isindex +/ja/docs/Web/HTML/Element/listing /ja/docs/orphaned/Web/HTML/Element/listing +/ja/docs/Web/HTML/Element/multicol /ja/docs/orphaned/Web/HTML/Element/multicol /ja/docs/Web/HTML/Element/video/waiting_event /ja/docs/Web/API/HTMLMediaElement/waiting_event /ja/docs/Web/HTML/Focus_management_in_HTML /ja/docs/Web/API/Document/hasFocus /ja/docs/Web/HTML/Forms /ja/docs/Learn/Forms @@ -4717,6 +4723,7 @@ /ja/docs/Web/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/Web/HTML/Introduction_to_HTML5 /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /ja/docs/Glossary/speculative_parsing +/ja/docs/Web/HTML/Preloading_content /ja/docs/orphaned/Web/HTML/Preloading_content /ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ja/docs/Web/HTML/Supported_media_formats /ja/docs/Web/Media/Formats /ja/docs/Web/HTML/Tips_for_authoring_fast-loading_HTML_pages /ja/docs/conflicting/Learn/HTML/Howto/Author_fast-loading_HTML_pages @@ -5040,6 +5047,7 @@ /ja/docs/Web/Reference/Events/vrdisplayconnected /ja/docs/Web/API/Window/vrdisplayconnect_event /ja/docs/Web/Reference/Events/vrdisplaydisconnected /ja/docs/Web/API/Window/vrdisplaydisconnect_event /ja/docs/Web/Reference/Events/vrdisplaypresentchange /ja/docs/Web/API/Window/vrdisplaypresentchange_event +/ja/docs/Web/SVG/Element/solidColor /ja/docs/orphaned/Web/SVG/Element/solidColor /ja/docs/Web/Security/CSP /ja/docs/Web/HTTP/CSP /ja/docs/Web/Security/CSP/CSP_policy_directives /ja/docs/Web/HTTP/Headers/Content-Security-Policy /ja/docs/Web/Security/CSP/Default_CSP_restrictions /ja/docs/Web/HTTP/Headers/Content-Security-Policy diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 36ccd3a7fd..71896bcfdf 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -28257,12 +28257,6 @@ "mfuji09" ] }, - "Web/CSS/@media/scan": { - "modified": "2020-10-15T22:06:00.879Z", - "contributors": [ - "mfuji09" - ] - }, "Web/CSS/@media/scripting": { "modified": "2020-10-15T22:05:28.884Z", "contributors": [ @@ -28306,18 +28300,6 @@ "sosleepy" ] }, - "Web/CSS/@page/bleed": { - "modified": "2020-10-15T22:06:40.908Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/CSS/@page/marks": { - "modified": "2020-10-15T22:06:39.164Z", - "contributors": [ - "mfuji09" - ] - }, "Web/CSS/@page/size": { "modified": "2020-10-15T22:06:41.062Z", "contributors": [ @@ -35043,13 +35025,6 @@ "ethertank" ] }, - "Web/HTML/Element/isindex": { - "modified": "2020-12-02T06:54:17.873Z", - "contributors": [ - "mfuji09", - "yyss" - ] - }, "Web/HTML/Element/kbd": { "modified": "2020-10-15T21:18:52.497Z", "contributors": [ @@ -35106,13 +35081,6 @@ "takahashim" ] }, - "Web/HTML/Element/listing": { - "modified": "2020-10-15T21:26:18.688Z", - "contributors": [ - "mfuji09", - "yyss" - ] - }, "Web/HTML/Element/main": { "modified": "2020-12-14T11:24:00.171Z", "contributors": [ @@ -35188,12 +35156,6 @@ "ethertank" ] }, - "Web/HTML/Element/multicol": { - "modified": "2020-10-15T22:02:51.939Z", - "contributors": [ - "mfuji09" - ] - }, "Web/HTML/Element/nav": { "modified": "2020-10-15T21:02:35.133Z", "contributors": [ @@ -35936,17 +35898,6 @@ "momdo" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-12-13T02:32:11.039Z", - "contributors": [ - "kobayashitomoya", - "maechabin", - "rigani", - "8tak4", - "mfuji09", - "turenar" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2020-10-03T02:41:16.100Z", "contributors": [ @@ -47549,12 +47500,6 @@ "manzyun" ] }, - "Web/SVG/Element/solidColor": { - "modified": "2020-12-06T03:41:32.485Z", - "contributors": [ - "mfuji09" - ] - }, "Web/SVG/Element/svg": { "modified": "2020-10-15T21:25:51.866Z", "contributors": [ @@ -52609,6 +52554,24 @@ "mfuji09" ] }, + "orphaned/Web/CSS/@media/scan": { + "modified": "2020-10-15T22:06:00.879Z", + "contributors": [ + "mfuji09" + ] + }, + "orphaned/Web/CSS/@page/bleed": { + "modified": "2020-10-15T22:06:40.908Z", + "contributors": [ + "mfuji09" + ] + }, + "orphaned/Web/CSS/@page/marks": { + "modified": "2020-10-15T22:06:39.164Z", + "contributors": [ + "mfuji09" + ] + }, "orphaned/Web/CSS/Index": { "modified": "2019-01-16T21:57:06.536Z", "contributors": [ @@ -52804,6 +52767,26 @@ "masa100" ] }, + "orphaned/Web/HTML/Element/isindex": { + "modified": "2020-12-02T06:54:17.873Z", + "contributors": [ + "mfuji09", + "yyss" + ] + }, + "orphaned/Web/HTML/Element/listing": { + "modified": "2020-10-15T21:26:18.688Z", + "contributors": [ + "mfuji09", + "yyss" + ] + }, + "orphaned/Web/HTML/Element/multicol": { + "modified": "2020-10-15T22:02:51.939Z", + "contributors": [ + "mfuji09" + ] + }, "orphaned/Web/HTML/Global_attributes/dropzone": { "modified": "2020-12-07T13:17:08.707Z", "contributors": [ @@ -52820,6 +52803,17 @@ "Marsf" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-12-13T02:32:11.039Z", + "contributors": [ + "kobayashitomoya", + "maechabin", + "rigani", + "8tak4", + "mfuji09", + "turenar" + ] + }, "orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages": { "modified": "2019-01-16T14:43:33.903Z", "contributors": [ @@ -53262,6 +53256,12 @@ "mfuji09" ] }, + "orphaned/Web/SVG/Element/solidColor": { + "modified": "2020-12-06T03:41:32.485Z", + "contributors": [ + "mfuji09" + ] + }, "orphaned/Web/Security/Information_Security_Basics": { "modified": "2020-03-15T03:29:26.429Z", "contributors": [ diff --git a/files/ja/orphaned/web/css/@media/scan/index.html b/files/ja/orphaned/web/css/@media/scan/index.html new file mode 100644 index 0000000000..5999f2552b --- /dev/null +++ b/files/ja/orphaned/web/css/@media/scan/index.html @@ -0,0 +1,89 @@ +--- +title: scan +slug: orphaned/Web/CSS/@media/scan +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/scan +original_slug: Web/CSS/@media/scan +--- +
{{cssref}}
+ +

scan は CSS のメディア特性は、 (もしあれば) 出力端末で使用されているスキャン方式を調べるために使用することができます。ここで使われるスキャンという言葉は、写真をディジタル化するためのイメージスキャナを指すものではありません。そうではなく、テレビ画面 (またはその他の端末) に画像を描画するプロセスを意味します。

+ +

構文

+ +

scan 特性は以下の一覧のうち一つのキーワード値で指定します。

+ +
+
interlace
+
その端末では奇数の走査線と偶数の走査線を別々に描きます。一部のテレビはインターレスのスキャン方式を採用しています。
+
progressive
+
その端末ではすべての走査線を順番に描きます。コンピューターの画面はすべてプログレッシブのスキャン方式を採用しています。
+
+ +

例

+ +

HTML

+ +
<p>この画面がインターレスで描画されていると、
+   文字列はサンセリフのフォントになります。プログレッシブのスキャン方式では、
+   セリフフォントで見えるでしょう。</p>
+
+ +

CSS

+ +
p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}変更なし。
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/orphaned/web/css/@page/bleed/index.html b/files/ja/orphaned/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..062c48e6ab --- /dev/null +++ b/files/ja/orphaned/web/css/@page/bleed/index.html @@ -0,0 +1,82 @@ +--- +title: bleed +slug: orphaned/Web/CSS/@page/bleed +tags: + - '@page' + - CSS + - CSS ページ化メディア + - CSS 記述子 + - Experimental + - Reference + - bleed + - ウェブ +translation_of: Web/CSS/@page/bleed +original_slug: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の bleed @-規則記述子は、 {{cssxref("@page")}} @-規則で使用し、ページボックスの外にあるページの裁ち落とし領域の大きさを指定します。このプロパティは、 {{cssxref("@page/marks", "marks")}} プロパティを使用して裁ち落とし記号を有効にしている場合のみ効果があります。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+bleed: auto;
+
+/* <length> 値 */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

値

+ +
+
auto
+
{{cssxref("@page/marks", "marks")}} が crop の場合、 6pt に計算します。それ以外の場合はゼロに計算します。
+
{{cssxref("<length>")}}
+
ページボックスの外に裁ち落とし領域を、各方向に、どれだけ広げるかを指定します。値は負の数にすることができますが、実装に依存する制限があるかもしれません。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
@page {
+  bleed: 1cm;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}初回定義。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.page.bleed")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("@page/marks", "marks")}}
    • +
  • {{Cssxref("@page/size", "size")}}
    • +
diff --git a/files/ja/orphaned/web/css/@page/marks/index.html b/files/ja/orphaned/web/css/@page/marks/index.html new file mode 100644 index 0000000000..2e3f359a58 --- /dev/null +++ b/files/ja/orphaned/web/css/@page/marks/index.html @@ -0,0 +1,87 @@ +--- +title: marks +slug: orphaned/Web/CSS/@page/marks +tags: + - '@page' + - CSS + - CSS ページ化メディア + - CSS 記述子 + - Experimental + - Reference + - ウェブ + - レイアウト +translation_of: Web/CSS/@page/marks +original_slug: Web/CSS/@page/marks +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の marks @-規則記述子は、 {{cssxref("@page")}} @-規則で使用し、文書の表現に対して裁ち落とし記号や十字記号を追加します。裁ち落とし記号はページを切断するべき場所を示します。十字記号はシートの配置のために使用します。

+ +

裁ち落とし記号や十字記号はページボックスの外側に印刷されます。裁ち落とし記号や十字記号を表示する余地を確保するため、最終的なページはページボックスよりいくらか大きくする必要があります。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+
+ +

値

+ +
+
crop
+
裁ち落とし記号を表示します。
+
cross
+
十字記号を表示します。
+
none
+
記号を表示しません。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
@page {
+  marks: crop cross;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}初回定義。
+ +

この CSS プロパティは当初は CSS Level 2 で提案されましたが、 CSS Level 2 (Revision 1) で落とされました。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.page.marks")}}

+ +

関連情報

+ +
    +
  • {{Cssxref("@page/bleed", "bleed")}}
    • +
  • {{Cssxref("@page/size", "size")}}
    • +
diff --git a/files/ja/orphaned/web/html/element/isindex/index.html b/files/ja/orphaned/web/html/element/isindex/index.html new file mode 100644 index 0000000000..95ee2735ca --- /dev/null +++ b/files/ja/orphaned/web/html/element/isindex/index.html @@ -0,0 +1,79 @@ +--- +title: +slug: orphaned/Web/HTML/Element/isindex +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/isindex +original_slug: Web/HTML/Element/isindex +--- +
{{HTMLRef}}{{Obsolete_header}}
+ +

<isindex> は廃止された HTML 要素であり、文書に問い合わせを行うためのテキストフィールドをページに追加します。 <isindex> は、問い合わせ文字列を入力するための 1 行テキスト入力フィールドを提供していました。これを送信すると、サーバーが問い合わせに一致するページの一覧を返していました。この対応状況は、ブラウザーとクエリに対応するサーバーの両方に依存していました。

+ +

<isindex> は HTML 標準から削除されました。 HTML 4.01 で非推奨になりました。同じ動作は HTML フォームを使用して実現することができます。すべての主要なブラウザーが <isindex> を削除しています。

+ +

属性

+ +

他のすべての HTML 要素と同様に、この要素はグローバル属性を受け付けます。

+ +
+
{{htmlattrdef("prompt")}}
+
この属性の値を、テキストフィールド用のプロンプトとして追加します。
+
{{htmlattrdef("action")}}
+
この属性は、異なる URL に対してクエリーを送信する必要がある場合に使用します。アクションは W3C で定義されていません。
+
+ +

例

+ +
<head>
+  <isindex prompt="Search Document..." action="/search">
+</head>
+ +

過去のブラウザーでは、解釈時に、 DOM ツリーに以下の HTML と同等のものを作成していました。

+ +
<form action="/search">
+  <hr>
+  <label>
+    Search Document...
+    <input name="isindex">
+  </label>
+  <hr>
+</form>
+
+ +

歴史

+ +

1992 年 6 月に Dan Connolly は、isindex よりも別の アンカー タイプを 好むと表明しました。

+ +

1992 年 11 月に、インデックスは文書よりもリンクであるという考えを推進する Dan Connolly によって indexes as links rather than documents の議論が始まりました。このスレッドでは、さまざまな解決策が提案されました。クエリーを作成する方式への疑問が、Dynatext browser に関連して 言及されました: "The browser displays toggle buttons, text fields etc. The user fills in the fields, clicks OK, and the query results come up in the table of contents window."

+ +

1992 年 11 月の isindex に関するスレッドで、Kevin Hoadley は isindex 要素の必要性に 疑問を持って、 廃止を提案しました。彼は、代わりに input 要素 (Steve Putz が 支持した アイデア) を持つよう提案しました。Tim Berners-Lee は、検索結果を集約したものになるという、isindex の目的を 説明しました。Kevin は isindex の二者択一的な性質が嫌いであり、すべてを検索可能なシステムが好ましいと 返信する とともに、当時の WWW Framework を特定の httpd 設定で拡張して、ある URI と検索クエリーの作成を関連付けることを提案しました。

+ +

2016 年に、 isindex は Edge および Chrome から削除された後で、標準から削除する提案が行われました。この削除は、 Safari と Firefox の対応が削除された後に翌日に完了しました。

+ +

HTML リファレンス

+ + + +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.isindex")}}

+ +

関連情報

+ +
    +
  • {{HTMLElement("input")}}
    • +
  • {{HTMLElement("form")}}
    • +
diff --git a/files/ja/orphaned/web/html/element/listing/index.html b/files/ja/orphaned/web/html/element/listing/index.html new file mode 100644 index 0000000000..f42c20aef2 --- /dev/null +++ b/files/ja/orphaned/web/html/element/listing/index.html @@ -0,0 +1,53 @@ +--- +title: +slug: orphaned/Web/HTML/Element/listing +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/listing +original_slug: Web/HTML/Element/listing +--- +
{{Obsolete_header}}
+ +

概要

+ +

HTML の Listing 要素 (<listing>) は、開始タグと終了タグの間にあるテキストを HTML として解釈せず、等幅フォントを使用して表示します。HTML 2 標準では、1 行が 132 文字を超えない場合は改行すべきではないと勧告しています。

+ +
注記: この要素を使用してはいけません。 + +
    +
  • この要素は HTML 3.2 で非推奨とされており、実装していないブラウザがあることに加えて実装に一貫性がありません。さらにこの要素は HTML5 で廃止されており、適合するユーザエージェントによっては {{HTMLElement("pre")}} 要素のように表示されるかもしれませんが、内部の HTML を解釈するでしょう!
    • +
  • 代わりに {{HTMLElement("pre")}} 要素、または意味的に適切な場合は {{HTMLElement("code")}} 要素を使用して、タグが解釈されないようにするため HTML の '<' と '>' をエスケープしてください。
    • +
  • 等幅フォントによる表示は {{cssxref("font-family")}} プロパティの総称フォントとして monospace を使用する、適切な CSS スタイルを適用した {{HTMLElement("div")}} 要素でも実現できます。
    • +
+
+ +

属性

+ +

この要素は、すべての要素で共通のグローバル属性以外の属性がありません。

+ +

DOM インタフェース

+ +

この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。

+ +
+

実装メモ: Gecko 1.9.2 まで、Firefox はこの要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装していました。

+
+ +

ブラウザーの対応

+ + + +

{{Compat("html.elements.listing")}}

+ +

関連情報

+ +
    +
  • 代わりに {{HTMLElement("pre")}} 要素や {{HTMLElement("code")}} 要素を使用します。
    • +
  • {{HTMLElement("listing")}} と同様に {{HTMLElement("plaintext")}} 要素や {{HTMLElement("xmp")}} 要素も廃止されています。
    • +
+ +
{{HTMLRef}}
diff --git a/files/ja/orphaned/web/html/element/multicol/index.html b/files/ja/orphaned/web/html/element/multicol/index.html new file mode 100644 index 0000000000..b2434f0cc1 --- /dev/null +++ b/files/ja/orphaned/web/html/element/multicol/index.html @@ -0,0 +1,37 @@ +--- +title: ': HTML 段組みレイアウト要素（廃止）' +slug: orphaned/Web/HTML/Element/multicol +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Reference + - 段組み +translation_of: Web/HTML/Element/multicol +original_slug: Web/HTML/Element/multicol +--- +
{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}
+ +

HTML の段組みレイアウト要素 (<multicol>) は段組みレイアウトを実現するために設計された実験的な要素でしたが、使用しないでください。これは支持されたことがなく、ほとんどの主要ブラウザーでは実装されていません。ここでは他の文書で見かけたときに警告するだけの目的で説明しています。

+ +
+

使用しないでください！段組みレイアウトを実装するためであれば、 {{HTMLElement("div")}} のような普通の HTML 要素と CSS 段組みレイアウトとの組み合わせを使用してください。

+
+ +

仕様策定状況

+ +

なし。

+ +

ブラウザーの対応

+ + + +

{{Compat("html.elements.multicol")}}

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/html/preloading_content/index.html b/files/ja/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..a795bdb75a --- /dev/null +++ b/files/ja/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,244 @@ +--- +title: rel="preload" によるコンテンツの先読み +slug: orphaned/Web/HTML/Preloading_content +tags: + - Guide + - HTML + - JavaScript + - Link + - Media + - Performance + - Web Performance + - as + - preload + - rel +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

{{htmlelement("link")}} 要素の {{htmlattrxref("rel", "link")}} 属性で preload を指定すると、 HTML の {{htmlelement("head")}} 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。

+ +

この記事では <link rel="preload"> がどのように動作するのかについての基本的なガイドを提供します。

+ +

基本概念

+ +

多くの場合は以下のように、 <link> を使用して CSS ファイルを読み込み、ページにスタイルを適用します。

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

しかしここで、 rel の値に preload を使用すると、 <link> 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。

+ +
    +
  • リソースへのパスを {{htmlattrxref("href", "link")}} 属性へ。
    • +
  • リソースの種類を {{htmlattrxref("as", "link")}} 属性へ。
    • +
+ +

簡単な例は以下のようになります (JS と CSS のサンプルコード および デモ) も参照してください)。

+ +
<head>
+  <meta charset="utf-8">
+  <title>JS and CSS preload example</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>bouncing balls</h1>
+  <canvas></canvas>
+
+  <script src="main.js" defer></script>
+</body>
+ +

ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 <link rel="stylesheet"> と <script> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。

+ +
    +
  • フォントや画像など、 CSS の中から指しているリソース
    • +
  • JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース
    • +
  • より大きな画像や動画ファイル。
    • +
+ +

preload には他の利点もあります。 as によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。

+ +
    +
  • リソースの読み込みの優先付けがより正確にできます。
    • +
  • 可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。
    • +
  • リソースに対して正しくコンテンツセキュリティポリシーを適用できます。
    • +
  • 正しい {{HTTPHeader("Accept")}} リクエストヘッダーを設定できます。
    • +
+ +

先読みできるコンテンツの種類

+ +

さまざまな種類のコンテンツが先読みできます。 as 属性で使用できる値は以下の通りです。

+ +
    +
  • audio: 通常は {{htmlelement("audio")}} で使用される音声ファイル。
    • +
  • document: {{htmlelement("frame")}} や {{htmlelement("iframe")}} に埋め込まれる HTML 文書。
    • +
  • embed: {{htmlelement("embed")}} 要素の中に埋め込まれるリソース。
    • +
  • fetch: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
    • +
  • font: フォントファイル。
    • +
  • image: 画像ファイル。
    • +
  • object: {{htmlelement("object")}} 要素の中に埋め込まれるリソース。
    • +
  • script: JavaScript ファイル。
    • +
  • style: CSS スタイルシート。
    • +
  • track: WebVTT ファイル。
    • +
  • worker: JavaScript ウェブワーカーまたは共有ワーカー。
    • +
  • video: 通常は {{htmlelement("video")}} で使用される動画ファイル。
    • +
+ +
+

メモ: 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — link element extensions を参照してください。また、フェッチの仕様書で管理されている as 属性の値の完全な一覧は、 request destinations を参照してください。

+
+ +

MIME タイプを含める

+ +

<link> 要素は {{htmlattrxref("type", "link")}} 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは type 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。

+ +

この例を動画のデモで見ることができます (ソースコード全体とデモ版もご覧ください。)。

+ +
<head>
+  <meta charset="utf-8">
+  <title>Video preload example</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
+  </video>
+</body>
+ +

この場合、MP4 をサポートしているブラウザーは MP4 を先読みして使用し、ユーザーにとって動画プレイヤーをよりスムーズまたはレスポンシブにできるでしょう。ブラウザーが MP4 をサポートしていない場合は WebM バージョンを読み込みますが、先読みの利点は得られません。これは、どのように先読みコンテンツがプログレッシブエンハンスメントの哲学と結ばれているかを示しています。

+ +

オリジンをまたいだフェッチ

+ +

CORSを有効にしてフェッチ（例えば、fetch(), XMLHttpRequest or fonts）されたリソースをプリロードするとき、<link>要素に{{htmlattrxref("crossorigin", "link")}}属性を設定する場合には特別な注意が必要です。

+ +

上記のように、これが当てはまる興味深いケースの1つは、フォントファイルです。さまざまな理由により、これらは匿名モードのCORSを使用してフェッチする必要があります（Font fetching requirements参照）。

+ +

このケースを例として使用してみましょう。完全なサンプルソースコードは example source code on GitHub (also see it live):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Web font example</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
+
+  <link href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  …
+</body>
+ +

type属性にMIMEタイプヒントを提供するだけでなく、プリロードのCORSモードが最終的なフォントリソースリクエストと一致することを確認するために、crossorigin属性も提供しています。

+ +

media を含める

+ +

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

+ +

Let's look at an example (see it on GitHub — source code, live example):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Responsive preload example</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>My site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if (mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

We include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see Testing media queries for more).

+ +

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

+ +

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

+ +

スクリプトと先読み

+ +

これらのプリロードに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは {{domxref("HTMLLinkElement")}} インスタンスを作成し、それを DOM に適用させています。

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

これは、ブラウザは myscript.js ファイルをプリロードしますが、実際はまだ使用されていません。これを使用するには、以下のようにします。

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

これは、スクリプトをプリロードしたいが、必要なときまで実行を延期する場合に便利です。

+ +

他のリソースの先読み機構

+ +

Other preloading features exist, but none are quite as fit for purpose as <link rel="preload">:

+ +
    +
  • <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give prefetch resources a lower priority than preload ones — the current page is more important than the next. See Link prefetching FAQ for more details.
    • +
  • <link rel="prerender"> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats prerender as a NoState prefetch instead.
    • +
  • <link rel="subresource"> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist back then), so they all got fetched with fairly low priority.
    • +
  • There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.
    • +
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}preload の詳細
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}preload の定義
+ +

ブラウザーの対応

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

関連情報

+ + + +

{{QuickLinksWithSubpages("/ja/docs/Web/HTML")}}

diff --git a/files/ja/orphaned/web/svg/element/solidcolor/index.html b/files/ja/orphaned/web/svg/element/solidcolor/index.html new file mode 100644 index 0000000000..ef66e31943 --- /dev/null +++ b/files/ja/orphaned/web/svg/element/solidcolor/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: orphaned/Web/SVG/Element/solidColor +tags: + - Element + - Experimental + - Reference + - SVG +translation_of: Web/SVG/Element/solidColor +original_slug: Web/SVG/Element/solidColor +--- +
{{SVGRef}}{{obsolete_header}}
+ +

<solidcolor> は SVG の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。

+ +

注: これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <solidcolor> とは異なり、それ自身をグラデーションの定義に使用することができません。

+ +

使用場面

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

固有の属性

+ +

なし。

+ +

DOM インターフェイス

+ +

この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。

+ +

例

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150">
+  <defs>
+    <!-- solidColor is experimental. -->
+    <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/>
+
+    <!-- linearGradient with a single color stop is a less elegant way to
+         achieve the same effect, but it works in current browsers. -->
+    <linearGradient id="myGradient">
+      <stop offset="0" stop-color="green" />
+    </linearGradient>
+  </defs>
+
+  <text x="10" y="20">Circles colored with solidColor</text>
+  <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)"
+      fill="white"/>
+  <circle cx="50" cy="65" r="35" fill="url(#myColor)"/>
+
+  <text x="10" y="120">Circles colored with linearGradient</text>
+  <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)"
+      fill="white"/>
+  <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/>
+</svg>
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.elements.solidcolor")}}

+ +

関連情報

+ +
    +
  • {{domxref("SVGSolidcolorElement")}}
    • +
  • {{cssxref("solid-color")}}
    • +
  • {{cssxref("solid-opacity")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
diff --git a/files/ja/web/css/@media/scan/index.html b/files/ja/web/css/@media/scan/index.html deleted file mode 100644 index a67c63a5f9..0000000000 --- a/files/ja/web/css/@media/scan/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: scan -slug: Web/CSS/@media/scan -tags: - - '@media' - - CSS - - Media Queries - - Reference - - media feature - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/scan ---- -
{{cssref}}
- -

scan は CSS のメディア特性は、 (もしあれば) 出力端末で使用されているスキャン方式を調べるために使用することができます。ここで使われるスキャンという言葉は、写真をディジタル化するためのイメージスキャナを指すものではありません。そうではなく、テレビ画面 (またはその他の端末) に画像を描画するプロセスを意味します。

- -

構文

- -

scan 特性は以下の一覧のうち一つのキーワード値で指定します。

- -
-
interlace
-
その端末では奇数の走査線と偶数の走査線を別々に描きます。一部のテレビはインターレスのスキャン方式を採用しています。
-
progressive
-
その端末ではすべての走査線を順番に描きます。コンピューターの画面はすべてプログレッシブのスキャン方式を採用しています。
-
- -

例

- -

HTML

- -
<p>この画面がインターレスで描画されていると、
-   文字列はサンセリフのフォントになります。プログレッシブのスキャン方式では、
-   セリフフォントで見えるでしょう。</p>
-
- -

CSS

- -
p {
-  font-family: cursive;
-}
-
-@media (scan: interlace) {
-  p {
-    font-family: sans-serif;
-  }
-}
-
-@media (scan: progressive) {
-  p {
-    font-family: serif;
-  }
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}変更なし。
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}初回定義。
- -

ブラウザーの互換性

- - - -

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

diff --git a/files/ja/web/css/@page/bleed/index.html b/files/ja/web/css/@page/bleed/index.html deleted file mode 100644 index a5f275ba89..0000000000 --- a/files/ja/web/css/@page/bleed/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: bleed -slug: Web/CSS/@page/bleed -tags: - - '@page' - - CSS - - CSS ページ化メディア - - CSS 記述子 - - Experimental - - Reference - - bleed - - ウェブ -translation_of: Web/CSS/@page/bleed ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の bleed @-規則記述子は、 {{cssxref("@page")}} @-規則で使用し、ページボックスの外にあるページの裁ち落とし領域の大きさを指定します。このプロパティは、 {{cssxref("@page/marks", "marks")}} プロパティを使用して裁ち落とし記号を有効にしている場合のみ効果があります。

- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-bleed: auto;
-
-/* <length> 値 */
-bleed: 8pt;
-bleed: 1cm;
-
- -

値

- -
-
auto
-
{{cssxref("@page/marks", "marks")}} が crop の場合、 6pt に計算します。それ以外の場合はゼロに計算します。
-
{{cssxref("<length>")}}
-
ページボックスの外に裁ち落とし領域を、各方向に、どれだけ広げるかを指定します。値は負の数にすることができますが、実装に依存する制限があるかもしれません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
@page {
-  bleed: 1cm;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}初回定義。
- -

ブラウザーの対応

- - - -

{{Compat("css.at-rules.page.bleed")}}

- -

関連情報

- -
    -
  • {{Cssxref("@page/marks", "marks")}}
    • -
  • {{Cssxref("@page/size", "size")}}
    • -
diff --git a/files/ja/web/css/@page/marks/index.html b/files/ja/web/css/@page/marks/index.html deleted file mode 100644 index 61384437ef..0000000000 --- a/files/ja/web/css/@page/marks/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: marks -slug: Web/CSS/@page/marks -tags: - - '@page' - - CSS - - CSS ページ化メディア - - CSS 記述子 - - Experimental - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/@page/marks ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の marks @-規則記述子は、 {{cssxref("@page")}} @-規則で使用し、文書の表現に対して裁ち落とし記号や十字記号を追加します。裁ち落とし記号はページを切断するべき場所を示します。十字記号はシートの配置のために使用します。

- -

裁ち落とし記号や十字記号はページボックスの外側に印刷されます。裁ち落とし記号や十字記号を表示する余地を確保するため、最終的なページはページボックスよりいくらか大きくする必要があります。

- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-marks: none;
-marks: crop;
-marks: cross;
-marks: crop cross;
-
- -

値

- -
-
crop
-
裁ち落とし記号を表示します。
-
cross
-
十字記号を表示します。
-
none
-
記号を表示しません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
@page {
-  marks: crop cross;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}初回定義。
- -

この CSS プロパティは当初は CSS Level 2 で提案されましたが、 CSS Level 2 (Revision 1) で落とされました。

- -

ブラウザーの対応

- - - -

{{Compat("css.at-rules.page.marks")}}

- -

関連情報

- -
    -
  • {{Cssxref("@page/bleed", "bleed")}}
    • -
  • {{Cssxref("@page/size", "size")}}
    • -
diff --git a/files/ja/web/html/element/isindex/index.html b/files/ja/web/html/element/isindex/index.html deleted file mode 100644 index 7443d92c49..0000000000 --- a/files/ja/web/html/element/isindex/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: -slug: Web/HTML/Element/isindex -tags: - - Deprecated - - Element - - HTML - - Reference - - Web -translation_of: Web/HTML/Element/isindex ---- -
{{HTMLRef}}{{Obsolete_header}}
- -

<isindex> は廃止された HTML 要素であり、文書に問い合わせを行うためのテキストフィールドをページに追加します。 <isindex> は、問い合わせ文字列を入力するための 1 行テキスト入力フィールドを提供していました。これを送信すると、サーバーが問い合わせに一致するページの一覧を返していました。この対応状況は、ブラウザーとクエリに対応するサーバーの両方に依存していました。

- -

<isindex> は HTML 標準から削除されました。 HTML 4.01 で非推奨になりました。同じ動作は HTML フォームを使用して実現することができます。すべての主要なブラウザーが <isindex> を削除しています。

- -

属性

- -

他のすべての HTML 要素と同様に、この要素はグローバル属性を受け付けます。

- -
-
{{htmlattrdef("prompt")}}
-
この属性の値を、テキストフィールド用のプロンプトとして追加します。
-
{{htmlattrdef("action")}}
-
この属性は、異なる URL に対してクエリーを送信する必要がある場合に使用します。アクションは W3C で定義されていません。
-
- -

例

- -
<head>
-  <isindex prompt="Search Document..." action="/search">
-</head>
- -

過去のブラウザーでは、解釈時に、 DOM ツリーに以下の HTML と同等のものを作成していました。

- -
<form action="/search">
-  <hr>
-  <label>
-    Search Document...
-    <input name="isindex">
-  </label>
-  <hr>
-</form>
-
- -

歴史

- -

1992 年 6 月に Dan Connolly は、isindex よりも別の アンカー タイプを 好むと表明しました。

- -

1992 年 11 月に、インデックスは文書よりもリンクであるという考えを推進する Dan Connolly によって indexes as links rather than documents の議論が始まりました。このスレッドでは、さまざまな解決策が提案されました。クエリーを作成する方式への疑問が、Dynatext browser に関連して 言及されました: "The browser displays toggle buttons, text fields etc. The user fills in the fields, clicks OK, and the query results come up in the table of contents window."

- -

1992 年 11 月の isindex に関するスレッドで、Kevin Hoadley は isindex 要素の必要性に 疑問を持って、 廃止を提案しました。彼は、代わりに input 要素 (Steve Putz が 支持した アイデア) を持つよう提案しました。Tim Berners-Lee は、検索結果を集約したものになるという、isindex の目的を 説明しました。Kevin は isindex の二者択一的な性質が嫌いであり、すべてを検索可能なシステムが好ましいと 返信する とともに、当時の WWW Framework を特定の httpd 設定で拡張して、ある URI と検索クエリーの作成を関連付けることを提案しました。

- -

2016 年に、 isindex は Edge および Chrome から削除された後で、標準から削除する提案が行われました。この削除は、 Safari と Firefox の対応が削除された後に翌日に完了しました。

- -

HTML リファレンス

- - - -

ブラウザーの互換性

- - - -

{{Compat("html.elements.isindex")}}

- -

関連情報

- -
    -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("form")}}
    • -
diff --git a/files/ja/web/html/element/listing/index.html b/files/ja/web/html/element/listing/index.html deleted file mode 100644 index a359093d17..0000000000 --- a/files/ja/web/html/element/listing/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: -slug: Web/HTML/Element/listing -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/listing ---- -
{{Obsolete_header}}
- -

概要

- -

HTML の Listing 要素 (<listing>) は、開始タグと終了タグの間にあるテキストを HTML として解釈せず、等幅フォントを使用して表示します。HTML 2 標準では、1 行が 132 文字を超えない場合は改行すべきではないと勧告しています。

- -
注記: この要素を使用してはいけません。 - -
    -
  • この要素は HTML 3.2 で非推奨とされており、実装していないブラウザがあることに加えて実装に一貫性がありません。さらにこの要素は HTML5 で廃止されており、適合するユーザエージェントによっては {{HTMLElement("pre")}} 要素のように表示されるかもしれませんが、内部の HTML を解釈するでしょう!
    • -
  • 代わりに {{HTMLElement("pre")}} 要素、または意味的に適切な場合は {{HTMLElement("code")}} 要素を使用して、タグが解釈されないようにするため HTML の '<' と '>' をエスケープしてください。
    • -
  • 等幅フォントによる表示は {{cssxref("font-family")}} プロパティの総称フォントとして monospace を使用する、適切な CSS スタイルを適用した {{HTMLElement("div")}} 要素でも実現できます。
    • -
-
- -

属性

- -

この要素は、すべての要素で共通のグローバル属性以外の属性がありません。

- -

DOM インタフェース

- -

この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。

- -
-

実装メモ: Gecko 1.9.2 まで、Firefox はこの要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装していました。

-
- -

ブラウザーの対応

- - - -

{{Compat("html.elements.listing")}}

- -

関連情報

- -
    -
  • 代わりに {{HTMLElement("pre")}} 要素や {{HTMLElement("code")}} 要素を使用します。
    • -
  • {{HTMLElement("listing")}} と同様に {{HTMLElement("plaintext")}} 要素や {{HTMLElement("xmp")}} 要素も廃止されています。
    • -
- -
{{HTMLRef}}
diff --git a/files/ja/web/html/element/multicol/index.html b/files/ja/web/html/element/multicol/index.html deleted file mode 100644 index 9f6b50d3e1..0000000000 --- a/files/ja/web/html/element/multicol/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: ': HTML 段組みレイアウト要素（廃止）' -slug: Web/HTML/Element/multicol -tags: - - Element - - HTML - - Non-standard - - Obsolete - - Reference - - 段組み -translation_of: Web/HTML/Element/multicol ---- -
{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}
- -

HTML の段組みレイアウト要素 (<multicol>) は段組みレイアウトを実現するために設計された実験的な要素でしたが、使用しないでください。これは支持されたことがなく、ほとんどの主要ブラウザーでは実装されていません。ここでは他の文書で見かけたときに警告するだけの目的で説明しています。

- -
-

使用しないでください！段組みレイアウトを実装するためであれば、 {{HTMLElement("div")}} のような普通の HTML 要素と CSS 段組みレイアウトとの組み合わせを使用してください。

-
- -

仕様策定状況

- -

なし。

- -

ブラウザーの対応

- - - -

{{Compat("html.elements.multicol")}}

- -

関連情報

- - diff --git a/files/ja/web/html/preloading_content/index.html b/files/ja/web/html/preloading_content/index.html deleted file mode 100644 index daef71acd9..0000000000 --- a/files/ja/web/html/preloading_content/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: rel="preload" によるコンテンツの先読み -slug: Web/HTML/Preloading_content -tags: - - Guide - - HTML - - JavaScript - - Link - - Media - - Performance - - Web Performance - - as - - preload - - rel -translation_of: Web/HTML/Preloading_content ---- -

{{htmlelement("link")}} 要素の {{htmlattrxref("rel", "link")}} 属性で preload を指定すると、 HTML の {{htmlelement("head")}} 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。

- -

この記事では <link rel="preload"> がどのように動作するのかについての基本的なガイドを提供します。

- -

基本概念

- -

多くの場合は以下のように、 <link> を使用して CSS ファイルを読み込み、ページにスタイルを適用します。

- -
<link rel="stylesheet" href="styles/main.css">
- -

しかしここで、 rel の値に preload を使用すると、 <link> 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。

- -
    -
  • リソースへのパスを {{htmlattrxref("href", "link")}} 属性へ。
    • -
  • リソースの種類を {{htmlattrxref("as", "link")}} 属性へ。
    • -
- -

簡単な例は以下のようになります (JS と CSS のサンプルコード および デモ) も参照してください)。

- -
<head>
-  <meta charset="utf-8">
-  <title>JS and CSS preload example</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>bouncing balls</h1>
-  <canvas></canvas>
-
-  <script src="main.js" defer></script>
-</body>
- -

ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 <link rel="stylesheet"> と <script> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。

- -
    -
  • フォントや画像など、 CSS の中から指しているリソース
    • -
  • JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース
    • -
  • より大きな画像や動画ファイル。
    • -
- -

preload には他の利点もあります。 as によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。

- -
    -
  • リソースの読み込みの優先付けがより正確にできます。
    • -
  • 可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。
    • -
  • リソースに対して正しくコンテンツセキュリティポリシーを適用できます。
    • -
  • 正しい {{HTTPHeader("Accept")}} リクエストヘッダーを設定できます。
    • -
- -

先読みできるコンテンツの種類

- -

さまざまな種類のコンテンツが先読みできます。 as 属性で使用できる値は以下の通りです。

- -
    -
  • audio: 通常は {{htmlelement("audio")}} で使用される音声ファイル。
    • -
  • document: {{htmlelement("frame")}} や {{htmlelement("iframe")}} に埋め込まれる HTML 文書。
    • -
  • embed: {{htmlelement("embed")}} 要素の中に埋め込まれるリソース。
    • -
  • fetch: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
    • -
  • font: フォントファイル。
    • -
  • image: 画像ファイル。
    • -
  • object: {{htmlelement("object")}} 要素の中に埋め込まれるリソース。
    • -
  • script: JavaScript ファイル。
    • -
  • style: CSS スタイルシート。
    • -
  • track: WebVTT ファイル。
    • -
  • worker: JavaScript ウェブワーカーまたは共有ワーカー。
    • -
  • video: 通常は {{htmlelement("video")}} で使用される動画ファイル。
    • -
- -
-

メモ: 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — link element extensions を参照してください。また、フェッチの仕様書で管理されている as 属性の値の完全な一覧は、 request destinations を参照してください。

-
- -

MIME タイプを含める

- -

<link> 要素は {{htmlattrxref("type", "link")}} 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは type 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。

- -

この例を動画のデモで見ることができます (ソースコード全体とデモ版もご覧ください。)。

- -
<head>
-  <meta charset="utf-8">
-  <title>Video preload example</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
-  </video>
-</body>
- -

この場合、MP4 をサポートしているブラウザーは MP4 を先読みして使用し、ユーザーにとって動画プレイヤーをよりスムーズまたはレスポンシブにできるでしょう。ブラウザーが MP4 をサポートしていない場合は WebM バージョンを読み込みますが、先読みの利点は得られません。これは、どのように先読みコンテンツがプログレッシブエンハンスメントの哲学と結ばれているかを示しています。

- -

オリジンをまたいだフェッチ

- -

CORSを有効にしてフェッチ（例えば、fetch(), XMLHttpRequest or fonts）されたリソースをプリロードするとき、<link>要素に{{htmlattrxref("crossorigin", "link")}}属性を設定する場合には特別な注意が必要です。

- -

上記のように、これが当てはまる興味深いケースの1つは、フォントファイルです。さまざまな理由により、これらは匿名モードのCORSを使用してフェッチする必要があります（Font fetching requirements参照）。

- -

このケースを例として使用してみましょう。完全なサンプルソースコードは example source code on GitHub (also see it live):

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  …
-</body>
- -

type属性にMIMEタイプヒントを提供するだけでなく、プリロードのCORSモードが最終的なフォントリソースリクエストと一致することを確認するために、crossorigin属性も提供しています。

- -

media を含める

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Let's look at an example (see it on GitHub — source code, live example):

- -
<head>
-  <meta charset="utf-8">
-  <title>Responsive preload example</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>My site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if (mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

We include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see Testing media queries for more).

- -

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

- -

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

- -

スクリプトと先読み

- -

これらのプリロードに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは {{domxref("HTMLLinkElement")}} インスタンスを作成し、それを DOM に適用させています。

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

これは、ブラウザは myscript.js ファイルをプリロードしますが、実際はまだ使用されていません。これを使用するには、以下のようにします。

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

これは、スクリプトをプリロードしたいが、必要なときまで実行を延期する場合に便利です。

- -

他のリソースの先読み機構

- -

Other preloading features exist, but none are quite as fit for purpose as <link rel="preload">:

- -
    -
  • <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give prefetch resources a lower priority than preload ones — the current page is more important than the next. See Link prefetching FAQ for more details.
    • -
  • <link rel="prerender"> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats prerender as a NoState prefetch instead.
    • -
  • <link rel="subresource"> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist back then), so they all got fetched with fairly low priority.
    • -
  • There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.
    • -
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}preload の詳細
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}preload の定義
- -

ブラウザーの対応

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

関連情報

- - - -

{{QuickLinksWithSubpages("/ja/docs/Web/HTML")}}

diff --git a/files/ja/web/svg/element/solidcolor/index.html b/files/ja/web/svg/element/solidcolor/index.html deleted file mode 100644 index ad7be1eee8..0000000000 --- a/files/ja/web/svg/element/solidcolor/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: -slug: Web/SVG/Element/solidColor -tags: - - Element - - Experimental - - Reference - - SVG -translation_of: Web/SVG/Element/solidColor ---- -
{{SVGRef}}{{obsolete_header}}
- -

<solidcolor> は SVG の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。

- -

注: これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <solidcolor> とは異なり、それ自身をグラデーションの定義に使用することができません。

- -

使用場面

- -

{{svginfo}}

- -

属性

- -

グローバル属性

- - - -

固有の属性

- -

なし。

- -

DOM インターフェイス

- -

この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。

- -

例

- -

SVG

- -
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150">
-  <defs>
-    <!-- solidColor is experimental. -->
-    <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/>
-
-    <!-- linearGradient with a single color stop is a less elegant way to
-         achieve the same effect, but it works in current browsers. -->
-    <linearGradient id="myGradient">
-      <stop offset="0" stop-color="green" />
-    </linearGradient>
-  </defs>
-
-  <text x="10" y="20">Circles colored with solidColor</text>
-  <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)"
-      fill="white"/>
-  <circle cx="50" cy="65" r="35" fill="url(#myColor)"/>
-
-  <text x="10" y="120">Circles colored with linearGradient</text>
-  <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)"
-      fill="white"/>
-  <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/>
-</svg>
-
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

ブラウザーの互換性

- - - -

{{Compat("svg.elements.solidcolor")}}

- -

関連情報

- -
    -
  • {{domxref("SVGSolidcolorElement")}}
    • -
  • {{cssxref("solid-color")}}
    • -
  • {{cssxref("solid-opacity")}}
    • -
  • {{SVGElement("linearGradient")}}
    • -
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index e706b0dd92..8912a38333 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -821,6 +821,7 @@ /ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽 /ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /ko/docs/Web/HTML/HTML에서_폼 /ko/docs/Learn/Forms /ko/docs/Web/HTML/Introduction /ko/docs/Learn/HTML/Introduction_to_HTML +/ko/docs/Web/HTML/Preloading_content /ko/docs/orphaned/Web/HTML/Preloading_content /ko/docs/Web/HTTP/Access_control_CORS /ko/docs/Web/HTTP/CORS /ko/docs/Web/HTTP/Access_control_CORS/Errors /ko/docs/Web/HTTP/CORS/Errors /ko/docs/Web/HTTP/Access_control_CORS/Errors/CORSDidNotSucceed /ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 96e9e4b018..519e9ba4e4 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -11383,12 +11383,6 @@ "young-gratia" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-10-15T22:35:17.448Z", - "contributors": [ - "sukyology" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2019-03-18T20:35:03.733Z", "contributors": [ @@ -18496,6 +18490,12 @@ "dolmoon" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-10-15T22:35:17.448Z", + "contributors": [ + "sukyology" + ] + }, "orphaned/Web/JavaScript/Differential_inheritance_in_JavaScript": { "modified": "2020-09-14T22:22:46.677Z", "contributors": [ diff --git a/files/ko/orphaned/web/html/preloading_content/index.html b/files/ko/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..dfb4465eb6 --- /dev/null +++ b/files/ko/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,234 @@ +--- +title: Preloading content with rel="preload" +slug: orphaned/Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

 {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 preload라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML  {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. 

+ +

이 문서는 <link rel="preload"> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.

+ +

The basics

+ +

You most commonly use <link> to load a CSS file to style your page with:

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

Here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. You will also need to specify:

+ +
    +
  • The path to the resource in the {{htmlattrxref("href", "link")}} attribute.
    • +
  • The type of resource in the {{htmlattrxref("as", "link")}} attribute.
    • +
+ +

A simple example might look like this (see our JS and CSS example source, and also live):

+ +
<head>
+  <meta charset="utf-8">
+  <title>JS and CSS preload example</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>bouncing balls</h1>
+  <canvas></canvas>
+
+  <script src="main.js" defer></script>
+</body>
+ +

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:

+ +
    +
  • Resources that are pointed to from inside CSS, like fonts or images.
    • +
  • Resources that JavaScript can request, like JSON, imported scripts, or web workers.
    • +
  • Larger images and video files.
    • +
+ +

preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

+ +
    +
  • Prioritize resource loading more accurately.
    • +
  • Store in the cache for future requests, reusing the resource if appropriate.
    • +
  • Apply the correct content security policy to the resource.
    • +
  • Set the correct {{HTTPHeader("Accept")}} request headers for it.
    • +
+ +

What types of content can be preloaded?

+ +

Many different content types can be preloaded. The possible as attribute values are:

+ +
    +
  • audio: Audio file, as typically used in {{htmlelement("audio")}}.
    • +
  • document: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.
    • +
  • embed: A resource to be embedded inside an {{htmlelement("embed")}} element.
    • +
  • fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
    • +
  • font: Font file.
    • +
  • image: Image file.
    • +
  • object: A resource to be embedded inside an {{htmlelement("object")}} element.
    • +
  • script: JavaScript file.
    • +
  • style: CSS stylesheet.
    • +
  • track: WebVTT file.
    • +
  • worker: A JavaScript web worker or shared worker.
    • +
  • video: Video file, as typically used in {{htmlelement("video")}}.
    • +
+ +
+

Note: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see link element extensions. Also note that the full list of values the as attribute can take is governed by the Fetch spec — see request destinations.

+
+ +

Including a MIME type

+ +

<link> elements can accept a {{htmlattrxref("type", "link")}} attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.

+ +

You can see an example of this in our video example (see the full source code, and also the live version):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Video preload example</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+  <link rel="preload" href="sintel-short.webm" as="video" type="video/webm">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
+  </video>
+</body>
+ +

So in this case, browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support MP4 can still load the WebM version, but don't get the advantages of preloading. This shows how preloading content can be combined with the philosophy of progressive enhancement.

+ +

Cross-origin fetches

+ +

If you've got your sites' CORS settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <link> element.

+ +

One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see Font fetching requirements).

+ +

Let's use this case as an example. You can see the full example source code on GitHub (also see it live):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Web font example</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
+
+  <link href="style.css" rel="stylesheet">
+</head>
+<body>
+  …
+</body>
+ +

Not only are we providing the MIME type hints in the type attributes, but we are also providing the crossorigin attribute to handle the CORS issue.

+ +

Including media

+ +

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

+ +

Let's look at an example (see it on GitHub — source code, live example):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Responsive preload example</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>My site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if (mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

We include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see Testing media queries for more).

+ +

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

+ +

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

+ +

Scripting and preloads

+ +

Another nice thing about these preloads is that you can execute them with script. For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the DOM:

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

This means that the browser will preload the myscript.js file, but not actually use it yet. To use it, you could do this:

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

This is useful when you want to preload a script, but then defer execution until exactly when you need it.

+ +

Other resource preloading mechanisms

+ +

Other preloading features exist, but none are quite as fit for purpose as <link rel="preload">:

+ +
    +
  • <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give prefetch resources a lower priority than preload ones — the current page is more important than the next. See Link prefetching FAQ for more details.
    • +
  • <link rel="prerender"> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats prerender as a NoState prefetch instead.
    • +
  • <link rel="subresource"> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist back then), so they all got fetched with fairly low priority.
    • +
  • There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.
    • +
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

See also

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/ko/web/html/preloading_content/index.html b/files/ko/web/html/preloading_content/index.html deleted file mode 100644 index 30e602fbca..0000000000 --- a/files/ko/web/html/preloading_content/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content ---- -

 {{htmlelement("link")}}엘리먼트의 {{htmlattrxref("rel", "link")}} 속성에 preload라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML  {{htmlelement("head")}} 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더링의 방해가 일어나지 않게 함으로서 성능을 개선한다. 

- -

이 문서는 <link rel="preload"> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.

- -

The basics

- -

You most commonly use <link> to load a CSS file to style your page with:

- -
<link rel="stylesheet" href="styles/main.css">
- -

Here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. You will also need to specify:

- -
    -
  • The path to the resource in the {{htmlattrxref("href", "link")}} attribute.
    • -
  • The type of resource in the {{htmlattrxref("as", "link")}} attribute.
    • -
- -

A simple example might look like this (see our JS and CSS example source, and also live):

- -
<head>
-  <meta charset="utf-8">
-  <title>JS and CSS preload example</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>bouncing balls</h1>
-  <canvas></canvas>
-
-  <script src="main.js" defer></script>
-</body>
- -

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:

- -
    -
  • Resources that are pointed to from inside CSS, like fonts or images.
    • -
  • Resources that JavaScript can request, like JSON, imported scripts, or web workers.
    • -
  • Larger images and video files.
    • -
- -

preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

- -
    -
  • Prioritize resource loading more accurately.
    • -
  • Store in the cache for future requests, reusing the resource if appropriate.
    • -
  • Apply the correct content security policy to the resource.
    • -
  • Set the correct {{HTTPHeader("Accept")}} request headers for it.
    • -
- -

What types of content can be preloaded?

- -

Many different content types can be preloaded. The possible as attribute values are:

- -
    -
  • audio: Audio file, as typically used in {{htmlelement("audio")}}.
    • -
  • document: An HTML document intended to be embedded by a {{htmlelement("frame")}} or {{htmlelement("iframe")}}.
    • -
  • embed: A resource to be embedded inside an {{htmlelement("embed")}} element.
    • -
  • fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
    • -
  • font: Font file.
    • -
  • image: Image file.
    • -
  • object: A resource to be embedded inside an {{htmlelement("object")}} element.
    • -
  • script: JavaScript file.
    • -
  • style: CSS stylesheet.
    • -
  • track: WebVTT file.
    • -
  • worker: A JavaScript web worker or shared worker.
    • -
  • video: Video file, as typically used in {{htmlelement("video")}}.
    • -
- -
-

Note: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see link element extensions. Also note that the full list of values the as attribute can take is governed by the Fetch spec — see request destinations.

-
- -

Including a MIME type

- -

<link> elements can accept a {{htmlattrxref("type", "link")}} attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.

- -

You can see an example of this in our video example (see the full source code, and also the live version):

- -
<head>
-  <meta charset="utf-8">
-  <title>Video preload example</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-  <link rel="preload" href="sintel-short.webm" as="video" type="video/webm">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
-  </video>
-</body>
- -

So in this case, browsers that support MP4s will preload and use the MP4, making the video player hopefully smoother/more responsive for users. Browsers that don't support MP4 can still load the WebM version, but don't get the advantages of preloading. This shows how preloading content can be combined with the philosophy of progressive enhancement.

- -

Cross-origin fetches

- -

If you've got your sites' CORS settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <link> element.

- -

One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see Font fetching requirements).

- -

Let's use this case as an example. You can see the full example source code on GitHub (also see it live):

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
-
-  <link href="style.css" rel="stylesheet">
-</head>
-<body>
-  …
-</body>
- -

Not only are we providing the MIME type hints in the type attributes, but we are also providing the crossorigin attribute to handle the CORS issue.

- -

Including media

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Let's look at an example (see it on GitHub — source code, live example):

- -
<head>
-  <meta charset="utf-8">
-  <title>Responsive preload example</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>My site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if (mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

We include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see Testing media queries for more).

- -

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

- -

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

- -

Scripting and preloads

- -

Another nice thing about these preloads is that you can execute them with script. For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the DOM:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

This means that the browser will preload the myscript.js file, but not actually use it yet. To use it, you could do this:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

This is useful when you want to preload a script, but then defer execution until exactly when you need it.

- -

Other resource preloading mechanisms

- -

Other preloading features exist, but none are quite as fit for purpose as <link rel="preload">:

- -
    -
  • <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give prefetch resources a lower priority than preload ones — the current page is more important than the next. See Link prefetching FAQ for more details.
    • -
  • <link rel="prerender"> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats prerender as a NoState prefetch instead.
    • -
  • <link rel="subresource"> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist back then), so they all got fetched with fairly low priority.
    • -
  • There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.
    • -
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
- -

Browser compatibility

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

See also

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 488bea6ccb..4c036c3924 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -776,6 +776,7 @@ /pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/HTML/Inline_elemente /pt-BR/docs/Web/HTML/Inline_elements /pt-BR/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /pt-BR/docs/Glossary/speculative_parsing +/pt-BR/docs/Web/HTML/Preloading_content /pt-BR/docs/orphaned/Web/HTML/Preloading_content /pt-BR/docs/Web/HTML/ReferenciaHTML /pt-BR/docs/Web/HTML/Reference /pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /pt-BR/docs/Web/HTML/favicon /pt-BR/docs/orphaned/Web/HTML/favicon @@ -859,6 +860,7 @@ /pt-BR/docs/Web/MathML/Exemplos /pt-BR/docs/Web/MathML/Examples /pt-BR/docs/Web/Performance/caminho_de_renderizacao_critico /pt-BR/docs/Web/Performance/Critical_rendering_path /pt-BR/docs/Web/Progressive_web_apps/Introdução /pt-BR/docs/Web/Progressive_web_apps/Introduction +/pt-BR/docs/Web/SVG/Element/color-profile /pt-BR/docs/orphaned/Web/SVG/Element/color-profile /pt-BR/docs/Web/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text /pt-BR/docs/Web/SVG/Intensivo_de_Namespaces /pt-BR/docs/Web/SVG/Namespaces_Crash_Course /pt-BR/docs/Web/Security/Básico_de_Segurança_da_Informação /pt-BR/docs/orphaned/Web/Security/Information_Security_Basics diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index d3a4c03187..c175f3c7b0 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -10397,17 +10397,6 @@ "rennan.martini" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-10-15T22:14:26.980Z", - "contributors": [ - "BeatrizCavallieri", - "w4rlooc", - "duduindo", - "philgruneich", - "tuliocribeiro", - "Expablo" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2019-03-23T23:05:38.681Z", "contributors": [ @@ -16160,13 +16149,6 @@ "caio" ] }, - "Web/SVG/Element/color-profile": { - "modified": "2019-03-23T22:57:13.667Z", - "contributors": [ - "Sebastianz", - "caio" - ] - }, "Web/SVG/Element/defs": { "modified": "2019-03-23T22:58:41.965Z", "contributors": [ @@ -17303,6 +17285,17 @@ "LeonardoPacheco" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-10-15T22:14:26.980Z", + "contributors": [ + "BeatrizCavallieri", + "w4rlooc", + "duduindo", + "philgruneich", + "tuliocribeiro", + "Expablo" + ] + }, "orphaned/Web/HTML/favicon": { "modified": "2019-05-05T00:27:21.844Z", "contributors": [ @@ -17337,6 +17330,13 @@ "LuisAraujo" ] }, + "orphaned/Web/SVG/Element/color-profile": { + "modified": "2019-03-23T22:57:13.667Z", + "contributors": [ + "Sebastianz", + "caio" + ] + }, "orphaned/Web/Security/Information_Security_Basics": { "modified": "2019-03-23T22:21:46.780Z", "contributors": [ diff --git a/files/pt-br/orphaned/web/html/preloading_content/index.html b/files/pt-br/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..f867f03920 --- /dev/null +++ b/files/pt-br/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,240 @@ +--- +title: Preloading content with rel="preload" +slug: orphaned/Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

O valor preload do atributo rel do elemento <link> permite que você escreva solicitações de busca declarativas em seu elemento <head> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como preload funciona.

+ +

O básico

+ +

Você comumente usa o elemento <link> quando carrega um arquivo de estilo CSS para sua pagina com:

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

No entanto, aqui nós usamos rel com valor preload, que transforma o elemento <link> em um preloader para praticamente qualquer recurso que você precisar. Você também precisa especificar

+ +
    +
  • o caminho para o recurso a ser pré-carregado, no atributo {{htmlattrxref("href", "link")}}
    • +
  • o tipo de recurso que vc esta pré-carregando, no atributo {{htmlattrxref("as", "link")}}.
    • +
+ +

Um exemplo simples pode se parecer com o seguinte (veja seus JS and CSS example source, e also live):

+ +
<head>
+  <meta charset="utf-8">
+  <title>JS and CSS preload example</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>bouncing balls</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <link rel="stylesheet">  e <script> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:

+ +
    +
  • Os recursos apontados de dentro de um arquivo CSS, como fontes ou imagens;
    • +
  • Recursos que podem ser solicitados pelo JavaScript, como JSON, scripts importados ou web workers;
    • +
  • Imagens maiores e arquivos de vídeo.
    • +
+ +

preload também possui outras vantagens. Usando o atributo as para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:

+ +
    +
  • Priorize o carregamento de recursos com maior precisão;
    • +
  • Corresponda solicitações futuras, reutilizando o mesmo recurso, se apropriado;
    • +
  • Aplique a content security policy adequada ao recurso;
    • +
  • Defina os cabeçalhos corretos de {{HTTPHeader("Accept")}}.
    • +
+ +

Qual tipo de conteúdo pode ser pré-carregado?

+ +

Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo as são os seguintes:

+ +
    +
  • audio: Arquivo de áudio, como usados geralmente em {{htmlelement("audio")}} .
    • +
  • document: Um documento HTML destinado a ser incorporado dentro de um {{htmlelement("frame")}} ou {{htmlelement("iframe")}}.
    • +
  • embed: Recurso destinado a ser incorporado dentro de um elemento {{htmlelement("embed")}}.
    • +
  • fetch: Recurso a ser acessado por um fetch ou XHR request, como um ArrayBuffer ou arquivo JSON.
    • +
  • font: Arquivo de fonte.
    • +
  • image: Arquivo de imagem.
    • +
  • object: Recurso a ser incorporado dentro de um elemento {{htmlelement("object")}}.
    • +
  • script: Arquivo JavaScript.
    • +
  • style: Estilo CSS.
    • +
  • track: Arquivo webVTT.
    • +
  • worker: Um web worker JavaScript ou shared worker.
    • +
  • video: Arquivo de vídeo, usualmente usado em {{htmlelement("video")}} .
    • +
+ +
+

Nota: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja link element extensions. Observe também que a lista completa de valores que o atributo as  pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja request destinations.

+
+ +

Incluindo um tipo MIME

+ +

<link> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo type para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.

+ +

Você pode ver um exemplo disto no nosso exemplo de video (veja o full source code, e também the live version):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Video preload example</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
+  </video>
+</body>
+ +

Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.

+ +

Buscas de origem cruzada

+ +

Se você tem no seu site as configurações de CORS funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <link>.

+ +

Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja Font fetching requirements se você esta interesado em todos os detalhes).

+ +

Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no source code on GitHub (also see it live):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Web font example</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+
+  <link href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  ...
+</body>
+ +

Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo  crossorigin para lidar com os problemas de CORS..

+ +

Adicionando media

+ +

Um bom recurso de alemento <link> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar media types ou full-blown media queries, permitindo que você faça o pré-carregamento responsivo!

+ +

Vamos ver um exemplo simples (see it on GitHub — source code, live example):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Responsive preload example</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>My site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

Você verá que estamos incluindo atributos de mídia em nossos <link> elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja Testing media queries para mais informaçoes sobre isso).

+ +

Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).

+ +

Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.

+ +

Scripting and preloads

+ +

Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.

+ +

Para usalo, você poderia fazer isso quando desejado:

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.

+ +

Outros mecanismos de pré-carregamento de recursos

+ +

Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito  <link rel="preload">:

+ +
    +
  • <link rel="prefetch">
    + tem sido suportado nos navegadores por um longo tempo, mas destina-se à pré-busca de recursos que serão usados ​​na próxima navegação / carregamento da página (por exemplo, quando você vai para a próxima página). Isso é bom, mas não é útil para a página atual! Além disso, os navegadores darão aos recursos de pré-busca uma prioridade menor que os pré-carregados - a página atual é mais importante que a próxima. veja Link prefetching FAQ para mais detalhes.
    • +
  • <link rel="prerender"> +

    é usado para renderizar a página da Web especificada em segundo plano, acelerando o carregamento da página se o usuário navegar para ela. Devido ao potencial de desperdiçar largura de banda dos usuários, Chrome trataprerender como um NoState prefetch.

    +
    • +
  • <link rel="subresource"> {{non-standard_inline}} +

    foi suportado no Chrome há algum tempo e tinha a intenção de lidar com recursos de pré-carregamento para o carregamento da página / navegação atual, mas tinha um problema - não havia como calcular uma prioridade para buscar os itens (como não existia naquela época ), então todos acabaram sendo buscados com pouca prioridade, o que não ajudou a situação.

    +
    • +
  • +

    Há vários carregadores de recursos baseados em script disponíveis, mas eles não têm nenhum poder sobre a fila de priorização de busca do navegador e estão sujeitos aos mesmos problemas de desempenho.

    +
    • +
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}mais detalhes sobre  preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}definições de rel=preload.
+ +

Compatibilidade de Browser

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

Veja também

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/pt-br/orphaned/web/svg/element/color-profile/index.html b/files/pt-br/orphaned/web/svg/element/color-profile/index.html new file mode 100644 index 0000000000..31261469be --- /dev/null +++ b/files/pt-br/orphaned/web/svg/element/color-profile/index.html @@ -0,0 +1,96 @@ +--- +title: color-profile +slug: orphaned/Web/SVG/Element/color-profile +tags: + - Elemento + - Perfil de Cor + - Referencia + - SVG +translation_of: Web/SVG/Element/color-profile +original_slug: Web/SVG/Element/color-profile +--- +
{{SVGRef}}
+ +

O elemento permite descrever o perfil de cor utilizado para a imagem.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +
    +
  • {{ SVGAttr("local") }}
    • +
  • {{ SVGAttr("name") }}
    • +
  • {{ SVGAttr("rendering-intent") }}
    • +
  • {{ SVGAttr("xlink:href") }}
    • +
+ +

Interface DOM

+ +

Este elemento implementa a interface do SVGColorProfileElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

A tabela é baseada nessas fontes.

diff --git a/files/pt-br/web/html/preloading_content/index.html b/files/pt-br/web/html/preloading_content/index.html deleted file mode 100644 index 6c5165a5c6..0000000000 --- a/files/pt-br/web/html/preloading_content/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content ---- -

O valor preload do atributo rel do elemento <link> permite que você escreva solicitações de busca declarativas em seu elemento <head> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como preload funciona.

- -

O básico

- -

Você comumente usa o elemento <link> quando carrega um arquivo de estilo CSS para sua pagina com:

- -
<link rel="stylesheet" href="styles/main.css">
- -

No entanto, aqui nós usamos rel com valor preload, que transforma o elemento <link> em um preloader para praticamente qualquer recurso que você precisar. Você também precisa especificar

- -
    -
  • o caminho para o recurso a ser pré-carregado, no atributo {{htmlattrxref("href", "link")}}
    • -
  • o tipo de recurso que vc esta pré-carregando, no atributo {{htmlattrxref("as", "link")}}.
    • -
- -

Um exemplo simples pode se parecer com o seguinte (veja seus JS and CSS example source, e also live):

- -
<head>
-  <meta charset="utf-8">
-  <title>JS and CSS preload example</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>bouncing balls</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <link rel="stylesheet">  e <script> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:

- -
    -
  • Os recursos apontados de dentro de um arquivo CSS, como fontes ou imagens;
    • -
  • Recursos que podem ser solicitados pelo JavaScript, como JSON, scripts importados ou web workers;
    • -
  • Imagens maiores e arquivos de vídeo.
    • -
- -

preload também possui outras vantagens. Usando o atributo as para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:

- -
    -
  • Priorize o carregamento de recursos com maior precisão;
    • -
  • Corresponda solicitações futuras, reutilizando o mesmo recurso, se apropriado;
    • -
  • Aplique a content security policy adequada ao recurso;
    • -
  • Defina os cabeçalhos corretos de {{HTTPHeader("Accept")}}.
    • -
- -

Qual tipo de conteúdo pode ser pré-carregado?

- -

Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo as são os seguintes:

- -
    -
  • audio: Arquivo de áudio, como usados geralmente em {{htmlelement("audio")}} .
    • -
  • document: Um documento HTML destinado a ser incorporado dentro de um {{htmlelement("frame")}} ou {{htmlelement("iframe")}}.
    • -
  • embed: Recurso destinado a ser incorporado dentro de um elemento {{htmlelement("embed")}}.
    • -
  • fetch: Recurso a ser acessado por um fetch ou XHR request, como um ArrayBuffer ou arquivo JSON.
    • -
  • font: Arquivo de fonte.
    • -
  • image: Arquivo de imagem.
    • -
  • object: Recurso a ser incorporado dentro de um elemento {{htmlelement("object")}}.
    • -
  • script: Arquivo JavaScript.
    • -
  • style: Estilo CSS.
    • -
  • track: Arquivo webVTT.
    • -
  • worker: Um web worker JavaScript ou shared worker.
    • -
  • video: Arquivo de vídeo, usualmente usado em {{htmlelement("video")}} .
    • -
- -
-

Nota: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja link element extensions. Observe também que a lista completa de valores que o atributo as  pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja request destinations.

-
- -

Incluindo um tipo MIME

- -

<link> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo type para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.

- -

Você pode ver um exemplo disto no nosso exemplo de video (veja o full source code, e também the live version):

- -
<head>
-  <meta charset="utf-8">
-  <title>Video preload example</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
-  </video>
-</body>
- -

Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.

- -

Buscas de origem cruzada

- -

Se você tem no seu site as configurações de CORS funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <link>.

- -

Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja Font fetching requirements se você esta interesado em todos os detalhes).

- -

Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no source code on GitHub (also see it live):

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo  crossorigin para lidar com os problemas de CORS..

- -

Adicionando media

- -

Um bom recurso de alemento <link> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar media types ou full-blown media queries, permitindo que você faça o pré-carregamento responsivo!

- -

Vamos ver um exemplo simples (see it on GitHub — source code, live example):

- -
<head>
-  <meta charset="utf-8">
-  <title>Responsive preload example</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>My site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Você verá que estamos incluindo atributos de mídia em nossos <link> elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja Testing media queries para mais informaçoes sobre isso).

- -

Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).

- -

Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.

- -

Scripting and preloads

- -

Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.

- -

Para usalo, você poderia fazer isso quando desejado:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.

- -

Outros mecanismos de pré-carregamento de recursos

- -

Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito  <link rel="preload">:

- -
    -
  • <link rel="prefetch">
    - tem sido suportado nos navegadores por um longo tempo, mas destina-se à pré-busca de recursos que serão usados ​​na próxima navegação / carregamento da página (por exemplo, quando você vai para a próxima página). Isso é bom, mas não é útil para a página atual! Além disso, os navegadores darão aos recursos de pré-busca uma prioridade menor que os pré-carregados - a página atual é mais importante que a próxima. veja Link prefetching FAQ para mais detalhes.
    • -
  • <link rel="prerender"> -

    é usado para renderizar a página da Web especificada em segundo plano, acelerando o carregamento da página se o usuário navegar para ela. Devido ao potencial de desperdiçar largura de banda dos usuários, Chrome trataprerender como um NoState prefetch.

    -
    • -
  • <link rel="subresource"> {{non-standard_inline}} -

    foi suportado no Chrome há algum tempo e tinha a intenção de lidar com recursos de pré-carregamento para o carregamento da página / navegação atual, mas tinha um problema - não havia como calcular uma prioridade para buscar os itens (como não existia naquela época ), então todos acabaram sendo buscados com pouca prioridade, o que não ajudou a situação.

    -
    • -
  • -

    Há vários carregadores de recursos baseados em script disponíveis, mas eles não têm nenhum poder sobre a fila de priorização de busca do navegador e estão sujeitos aos mesmos problemas de desempenho.

    -
    • -
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}mais detalhes sobre  preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}definições de rel=preload.
- -

Compatibilidade de Browser

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

Veja também

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/pt-br/web/svg/element/color-profile/index.html b/files/pt-br/web/svg/element/color-profile/index.html deleted file mode 100644 index be238bced6..0000000000 --- a/files/pt-br/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: color-profile -slug: Web/SVG/Element/color-profile -tags: - - Elemento - - Perfil de Cor - - Referencia - - SVG -translation_of: Web/SVG/Element/color-profile ---- -
{{SVGRef}}
- -

O elemento permite descrever o perfil de cor utilizado para a imagem.

- -

Contexto de uso

- -

{{svginfo}}

- -

Exemplo

- -

Atributos

- -

Atributos globais

- - - -

Atributos específicos

- -
    -
  • {{ SVGAttr("local") }}
    • -
  • {{ SVGAttr("name") }}
    • -
  • {{ SVGAttr("rendering-intent") }}
    • -
  • {{ SVGAttr("xlink:href") }}
    • -
- -

Interface DOM

- -

Este elemento implementa a interface do SVGColorProfileElement.

- -

Compatibilidade dos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

A tabela é baseada nessas fontes.

diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 3a6f075d2d..41b95be137 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -621,6 +621,7 @@ /ru/docs/Web/HTML/Element/стиль /ru/docs/Web/HTML/Element/style /ru/docs/Web/HTML/Global_attributes/dropzone /ru/docs/orphaned/Web/HTML/Global_attributes/dropzone /ru/docs/Web/HTML/Optimizing_Your_Pages_for_Speculative_Parsing /ru/docs/Glossary/speculative_parsing +/ru/docs/Web/HTML/Preloading_content /ru/docs/orphaned/Web/HTML/Preloading_content /ru/docs/Web/HTML/Использование_HTML5_audio_и_video /ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /ru/docs/Web/HTML/Общие_атрибуты /ru/docs/Web/HTML/Global_attributes /ru/docs/Web/HTML/Общие_атрибуты/accesskey /ru/docs/Web/HTML/Global_attributes/accesskey diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 443e8c8308..e39169b70b 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -16562,17 +16562,6 @@ "BychekRU" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-10-15T22:11:40.984Z", - "contributors": [ - "warsan", - "alexa.poruch", - "Ilya-Zhulin", - "akochemasov", - "Skolpov", - "isatalkin" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2019-03-23T22:44:29.253Z", "contributors": [ @@ -25723,6 +25712,17 @@ "Akh-rman" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-10-15T22:11:40.984Z", + "contributors": [ + "warsan", + "alexa.poruch", + "Ilya-Zhulin", + "akochemasov", + "Skolpov", + "isatalkin" + ] + }, "orphaned/Web/JavaScript/Guide/Об_этом_руководстве": { "modified": "2019-03-24T00:13:23.720Z", "contributors": [ diff --git a/files/ru/orphaned/web/html/preloading_content/index.html b/files/ru/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..001c2bb8ef --- /dev/null +++ b/files/ru/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,244 @@ +--- +title: Предзагрузчик контента - rel="preload" +slug: orphaned/Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

Значение preload атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.

+ +

В этой статье приведено основное руководство про работе с <link rel="preload">.

+ +

Основы

+ +

Чаще всего вы используете простой <link> элемент, когда загружаете CSS файлы со стилем вашей страницы:

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

Однако, здесь мы будем использовать значение preload для атрибута rel, которое превратит тег <link> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:

+ +
    +
  • Адрес пути к ресурсу в атрибуте {{htmlattrxref("href", "link")}};
    • +
  • Тип ресурса в атрибуте {{htmlattrxref("as", "link")}}.
    • +
+ +

Простой пример может выглядеть так: (смотрите наш JS и CSS пример из источника, и живой пример):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Пример пред-загрузки JS и CSS</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>прыгающие шарики</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <link rel="stylesheet"> и <script> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:

+ +
    +
  • Ресурсы, на которые ссылаются стили из CSS (шрифты, изображения);
    • +
  • Ресурсы, затребованные из JavaScript (например JSON, динамически подгружаемые скрипты, воркеры);
    • +
  • Огромных размеров изображения, видео.
    • +
+ +

preload имеет и другие преимущества. Использование атрибута as для указания типа содержимого пред-загрузки позволит браузеру:

+ +
    +
  • Точнее расставить приоритеты при загрузке ресурсов.
    • +
  • Сохранить в кеше затребованный ресурс для его повторного использования в случае необходимости.
    • +
  • Применять корректную политику безопасности содержимого (content security policy) для ресурсов.
    • +
  • Правильно устанавливать заголовки {{HTTPHeader("Accept")}} для выбранного запроса.
    • +
+ +

Какие типы контента могут быть предзагружены?

+ +

Разного типа контент можно предзагрузить. Вот основные атрибуты значения as:

+ +
    +
  • audio: Аудио файлы.
    • +
  • document: HTML документ для {{htmlelement("frame")}} или {{htmlelement("iframe")}}.
    • +
  • embed: Ресурс, встроенный в {{htmlelement("embed")}} элемент.
    • +
  • fetch: Ресурс с доступом к запросу выборки или XHR, подобие файлу ArrayBuffer или JSON.
    • +
  • font: Шрифты.
    • +
  • image: Картинки.
    • +
  • object: Ресурс встроенный в {{htmlelement("object")}} элемент.
    • +
  • script: JavaScript.
    • +
  • style: CSS таблица стилей.
    • +
  • track: WebVTT.
    • +
  • worker: A JavaScript веб-worker и общий worker.
    • +
  • video: Видео.
    • +
+ +
+

Примечание: вы можете прочитать немного больше об этих значениях и веб-функциях, которыми они будут пользоваться, в спецификации Предзагрузка — расширения элементов ссылок. Также обратите внимание, что полный список значений атрибут as может принимать в зависимости от определений в спецификации Fetch — запрос направления.

+
+ +

Включение MIME-типов

+ +

Элементы <link> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута type и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.

+ +

См. полный исходный код, (а также пример живой версии видео).

+ +
<head>
+  <meta charset="utf-8">
+  <title>Пример пред-загрузки видео</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p> Ваш браузер не поддерживает видео в формате HTML5.
+        Взамен - <a href="sintel-short.mp4"> ссылка на видео </a>.</p>
+  </video>
+</body>
+ +

В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавное/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.

+ +

Выборки из разных источников

+ +

Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <link>.

+ +

Один из интересных случаев, когда это применимо, даже если выборка не из разных источников, - это файлы шрифтов. По разным причинам они должны быть получены с использованием анонимного режима CORS (см. Требования к выборке шрифтов, если вас заинтересуют все подробности).

+ +

Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода есть на GitHub (также смотрите его вживую):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Примеры веб-шрифтов</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  ...
+</body>
+ +

Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут crossorigin для решения проблемы CORS.

+ +

Including media

+ +

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

+ +

Давайте посмотрим на очень простой пример (см. его на GitHub - исходный код и живой пример):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Пример адаптивной предзагрузки</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>Мой сайт</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиавыражений).

+ +

Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).

+ +

Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.

+ +

Скрипты и предзагрузки

+ +

Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём  экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

Подразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.

+ +

Чтобы выполнить его, вы можете использовать следующую конструкцию:

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.

+ +

Другие механизмы предзагрузки ресурсов

+ +

Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <link rel="preload">:

+ +
    +
  • <link rel="prefetch"> давно поддерживается в браузерах, но предназначен для предварительной загрузки ресурсов, которые будут использоваться при следующей навигации/загрузке страницы (например, когда вы переходите на следующую страницу). Это нормально, но бесполезно для текущей страницы! Кроме того, браузеры будут отдавать ресурсам предварительной загрузки более низкий приоритет, чем ресурсам предзагрузки - текущая страница важнее следующей. См. Предвыборку ссылок FAQ для подробностей.
    • +
  • <link rel = "subresource"> некоторое время назад поддерживался в Chrome и предназначался для решения проблемы предзагрузки ресурсов для текущей навигации/загрузки страницы, но у него была проблема - не было возможности определить приоритет для получения элементов. (as тогда не существовало), поэтому все они в конечном итоге были извлечены с довольно низким приоритетом, что не помогло ситуации.
    • +
  • Существует ряд загрузчиков ресурсов на основе сценариев, но они не имеют никакой власти над очередью приоритетов выборки браузера и подвержены тем же проблемам с производительностью.
    • +
+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
+ +

Совместимость с браузером

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

Смотрите также

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/ru/web/html/preloading_content/index.html b/files/ru/web/html/preloading_content/index.html deleted file mode 100644 index 1327fbe8f5..0000000000 --- a/files/ru/web/html/preloading_content/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Предзагрузчик контента - rel="preload" -slug: Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content ---- -

Значение preload атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.

- -

В этой статье приведено основное руководство про работе с <link rel="preload">.

- -

Основы

- -

Чаще всего вы используете простой <link> элемент, когда загружаете CSS файлы со стилем вашей страницы:

- -
<link rel="stylesheet" href="styles/main.css">
- -

Однако, здесь мы будем использовать значение preload для атрибута rel, которое превратит тег <link> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:

- -
    -
  • Адрес пути к ресурсу в атрибуте {{htmlattrxref("href", "link")}};
    • -
  • Тип ресурса в атрибуте {{htmlattrxref("as", "link")}}.
    • -
- -

Простой пример может выглядеть так: (смотрите наш JS и CSS пример из источника, и живой пример):

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример пред-загрузки JS и CSS</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>прыгающие шарики</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <link rel="stylesheet"> и <script> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:

- -
    -
  • Ресурсы, на которые ссылаются стили из CSS (шрифты, изображения);
    • -
  • Ресурсы, затребованные из JavaScript (например JSON, динамически подгружаемые скрипты, воркеры);
    • -
  • Огромных размеров изображения, видео.
    • -
- -

preload имеет и другие преимущества. Использование атрибута as для указания типа содержимого пред-загрузки позволит браузеру:

- -
    -
  • Точнее расставить приоритеты при загрузке ресурсов.
    • -
  • Сохранить в кеше затребованный ресурс для его повторного использования в случае необходимости.
    • -
  • Применять корректную политику безопасности содержимого (content security policy) для ресурсов.
    • -
  • Правильно устанавливать заголовки {{HTTPHeader("Accept")}} для выбранного запроса.
    • -
- -

Какие типы контента могут быть предзагружены?

- -

Разного типа контент можно предзагрузить. Вот основные атрибуты значения as:

- -
    -
  • audio: Аудио файлы.
    • -
  • document: HTML документ для {{htmlelement("frame")}} или {{htmlelement("iframe")}}.
    • -
  • embed: Ресурс, встроенный в {{htmlelement("embed")}} элемент.
    • -
  • fetch: Ресурс с доступом к запросу выборки или XHR, подобие файлу ArrayBuffer или JSON.
    • -
  • font: Шрифты.
    • -
  • image: Картинки.
    • -
  • object: Ресурс встроенный в {{htmlelement("object")}} элемент.
    • -
  • script: JavaScript.
    • -
  • style: CSS таблица стилей.
    • -
  • track: WebVTT.
    • -
  • worker: A JavaScript веб-worker и общий worker.
    • -
  • video: Видео.
    • -
- -
-

Примечание: вы можете прочитать немного больше об этих значениях и веб-функциях, которыми они будут пользоваться, в спецификации Предзагрузка — расширения элементов ссылок. Также обратите внимание, что полный список значений атрибут as может принимать в зависимости от определений в спецификации Fetch — запрос направления.

-
- -

Включение MIME-типов

- -

Элементы <link> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута type и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.

- -

См. полный исходный код, (а также пример живой версии видео).

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример пред-загрузки видео</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p> Ваш браузер не поддерживает видео в формате HTML5.
-        Взамен - <a href="sintel-short.mp4"> ссылка на видео </a>.</p>
-  </video>
-</body>
- -

В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавное/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.

- -

Выборки из разных источников

- -

Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <link>.

- -

Один из интересных случаев, когда это применимо, даже если выборка не из разных источников, - это файлы шрифтов. По разным причинам они должны быть получены с использованием анонимного режима CORS (см. Требования к выборке шрифтов, если вас заинтересуют все подробности).

- -

Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода есть на GitHub (также смотрите его вживую):

- -
<head>
-  <meta charset="utf-8">
-  <title>Примеры веб-шрифтов</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут crossorigin для решения проблемы CORS.

- -

Including media

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Давайте посмотрим на очень простой пример (см. его на GitHub - исходный код и живой пример):

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример адаптивной предзагрузки</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>Мой сайт</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиавыражений).

- -

Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).

- -

Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.

- -

Скрипты и предзагрузки

- -

Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём  экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Подразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.

- -

Чтобы выполнить его, вы можете использовать следующую конструкцию:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.

- -

Другие механизмы предзагрузки ресурсов

- -

Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <link rel="preload">:

- -
    -
  • <link rel="prefetch"> давно поддерживается в браузерах, но предназначен для предварительной загрузки ресурсов, которые будут использоваться при следующей навигации/загрузке страницы (например, когда вы переходите на следующую страницу). Это нормально, но бесполезно для текущей страницы! Кроме того, браузеры будут отдавать ресурсам предварительной загрузки более низкий приоритет, чем ресурсам предзагрузки - текущая страница важнее следующей. См. Предвыборку ссылок FAQ для подробностей.
    • -
  • <link rel = "subresource"> некоторое время назад поддерживался в Chrome и предназначался для решения проблемы предзагрузки ресурсов для текущей навигации/загрузки страницы, но у него была проблема - не было возможности определить приоритет для получения элементов. (as тогда не существовало), поэтому все они в конечном итоге были извлечены с довольно низким приоритетом, что не помогло ситуации.
    • -
  • Существует ряд загрузчиков ресурсов на основе сценариев, но они не имеют никакой власти над очередью приоритетов выборки браузера и подвержены тем же проблемам с производительностью.
    • -
- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
- -

Совместимость с браузером

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

Смотрите также

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 85ba082b2b..eed8cfb8af 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -2332,6 +2332,10 @@ /zh-CN/docs/Web/HTML/Element/Video/loadeddata_event /zh-CN/docs/Web/API/HTMLMediaElement/loadeddata_event /zh-CN/docs/Web/HTML/Element/command /zh-CN/docs/orphaned/Web/HTML/Element/command /zh-CN/docs/Web/HTML/Element/element /zh-CN/docs/orphaned/Web/HTML/Element/element +/zh-CN/docs/Web/HTML/Element/isindex /zh-CN/docs/orphaned/Web/HTML/Element/isindex +/zh-CN/docs/Web/HTML/Element/listing /zh-CN/docs/orphaned/Web/HTML/Element/listing +/zh-CN/docs/Web/HTML/Element/multicol /zh-CN/docs/orphaned/Web/HTML/Element/multicol +/zh-CN/docs/Web/HTML/Element/nextid /zh-CN/docs/orphaned/Web/HTML/Element/nextid /zh-CN/docs/Web/HTML/Element/video/play_event /zh-CN/docs/Web/API/HTMLMediaElement/play_event /zh-CN/docs/Web/HTML/Element/video/timeupdate_event /zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event /zh-CN/docs/Web/HTML/Element/视频 /zh-CN/docs/Web/HTML/Element/video @@ -2349,6 +2353,7 @@ /zh-CN/docs/Web/HTML/Inline_elemente /zh-CN/docs/Web/HTML/Inline_elements /zh-CN/docs/Web/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /zh-CN/docs/Glossary/speculative_parsing +/zh-CN/docs/Web/HTML/Preloading_content /zh-CN/docs/orphaned/Web/HTML/Preloading_content /zh-CN/docs/Web/HTML/Supported_media_formats /zh-CN/docs/conflicting/Web/Media/Formats /zh-CN/docs/Web/HTML/全局属性 /zh-CN/docs/Web/HTML/Global_attributes /zh-CN/docs/Web/HTML/内联元素 /zh-CN/docs/Web/HTML/Inline_elements @@ -2632,6 +2637,7 @@ /zh-CN/docs/Web/Progressive_web_apps/添加到主屏幕 /zh-CN/docs/Web/Progressive_web_apps/Add_to_home_screen /zh-CN/docs/Web/SVG/Attribute/文本锚点 /zh-CN/docs/Web/SVG/Attribute/text-anchor /zh-CN/docs/Web/SVG/Attribute/样式 /zh-CN/docs/Web/SVG/Attribute/Styling +/zh-CN/docs/Web/SVG/Element/color-profile /zh-CN/docs/orphaned/Web/SVG/Element/color-profile /zh-CN/docs/Web/SVG/Element/圆 /zh-CN/docs/Web/SVG/Element/circle /zh-CN/docs/Web/SVG/Element/多边形 /zh-CN/docs/Web/SVG/Element/polygon /zh-CN/docs/Web/SVG/Element/线性渐变 /zh-CN/docs/Web/SVG/Element/linearGradient diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 7a655c3adb..c3c80898d8 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -32851,12 +32851,6 @@ "pantao" ] }, - "Web/HTML/Element/isindex": { - "modified": "2019-03-23T22:43:17.045Z", - "contributors": [ - "Martin.Chow" - ] - }, "Web/HTML/Element/kbd": { "modified": "2019-08-13T06:01:57.840Z", "contributors": [ @@ -32931,12 +32925,6 @@ "041008725" ] }, - "Web/HTML/Element/listing": { - "modified": "2019-03-23T22:10:12.488Z", - "contributors": [ - "wizardforcel" - ] - }, "Web/HTML/Element/main": { "modified": "2020-10-15T21:34:53.469Z", "contributors": [ @@ -33054,13 +33042,6 @@ "hoyt" ] }, - "Web/HTML/Element/multicol": { - "modified": "2019-03-23T22:18:36.663Z", - "contributors": [ - "wizardforcel", - "xgqfrms-GitHub" - ] - }, "Web/HTML/Element/nav": { "modified": "2020-10-15T21:26:27.913Z", "contributors": [ @@ -33072,12 +33053,6 @@ "bowen-shi" ] }, - "Web/HTML/Element/nextid": { - "modified": "2020-10-15T22:25:21.460Z", - "contributors": [ - "pans9" - ] - }, "Web/HTML/Element/nobr": { "modified": "2019-03-23T22:10:16.065Z", "contributors": [ @@ -33881,17 +33856,6 @@ "wangfangping" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-06-09T23:26:32.370Z", - "contributors": [ - "huyue", - "chanvin", - "sutaojie", - "haoliangwu", - "Axue", - "ldwformat" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2020-01-30T04:57:28.634Z", "contributors": [ @@ -46495,13 +46459,6 @@ "huyue" ] }, - "Web/SVG/Element/color-profile": { - "modified": "2019-03-23T22:46:33.322Z", - "contributors": [ - "Sebastianz", - "fanxiaojie" - ] - }, "Web/SVG/Element/cursor": { "modified": "2020-10-15T21:39:22.908Z", "contributors": [ @@ -50649,12 +50606,48 @@ "angelllls" ] }, + "orphaned/Web/HTML/Element/isindex": { + "modified": "2019-03-23T22:43:17.045Z", + "contributors": [ + "Martin.Chow" + ] + }, + "orphaned/Web/HTML/Element/listing": { + "modified": "2019-03-23T22:10:12.488Z", + "contributors": [ + "wizardforcel" + ] + }, + "orphaned/Web/HTML/Element/multicol": { + "modified": "2019-03-23T22:18:36.663Z", + "contributors": [ + "wizardforcel", + "xgqfrms-GitHub" + ] + }, + "orphaned/Web/HTML/Element/nextid": { + "modified": "2020-10-15T22:25:21.460Z", + "contributors": [ + "pans9" + ] + }, "orphaned/Web/HTML/Global_attributes/dropzone": { "modified": "2019-03-23T22:10:15.156Z", "contributors": [ "wizardforcel" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-06-09T23:26:32.370Z", + "contributors": [ + "huyue", + "chanvin", + "sutaojie", + "haoliangwu", + "Axue", + "ldwformat" + ] + }, "orphaned/Web/HTTP/跨域资源共享(CORS)_": { "modified": "2020-10-15T22:28:24.198Z", "contributors": [ @@ -50714,6 +50707,13 @@ "faliye" ] }, + "orphaned/Web/SVG/Element/color-profile": { + "modified": "2019-03-23T22:46:33.322Z", + "contributors": [ + "Sebastianz", + "fanxiaojie" + ] + }, "orphaned/Web/Security/Information_Security_Basics": { "modified": "2020-04-29T06:01:25.213Z", "contributors": [ diff --git a/files/zh-cn/orphaned/web/html/element/isindex/index.html b/files/zh-cn/orphaned/web/html/element/isindex/index.html new file mode 100644 index 0000000000..6ab341ec6f --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/isindex/index.html @@ -0,0 +1,41 @@ +--- +title: +slug: orphaned/Web/HTML/Element/isindex +tags: + - HTML + - Web +translation_of: Web/HTML/Element/isindex +original_slug: Web/HTML/Element/isindex +--- +
{{Deprecated_header}}
+ +

概述

+ +

<isindex>元素的作用是使浏览器显示一个对话框，提示用户输入单行文本。在W3C的规范中建议，<isindex>元素最好被放置在 {{HTMLElement("head")}} 标签块内，但是对于浏览器来说，<isindex>标签在页面任何位置都没有关系。

+ +

从HTML4规范开始，就不建议在您编写的HTML文档内使用<isindex>元素，您可以用<input>标签来替代。

+ +

属性

+ +

本元素支持 全局属性.

+ +
+
{{htmlattrdef("prompt")}}
+
该属性用作在输入框前添加一个输入提示文本。
+
{{htmlattrdef("action")}}
+
本属性可以规定文本框中的值发送向一个没有被W3C规范的URL。
+
+ +

示例

+ +
<head>
+  <isindex prompt="Search Document... " />
+</head>
+ +

参阅

+ +
    +
  • {{HTMLElement("input")}}
    • +
+ +

{{HTMLRef}}

diff --git a/files/zh-cn/orphaned/web/html/element/listing/index.html b/files/zh-cn/orphaned/web/html/element/listing/index.html new file mode 100644 index 0000000000..672a23df81 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/listing/index.html @@ -0,0 +1,40 @@ +--- +title: +slug: orphaned/Web/HTML/Element/listing +translation_of: Web/HTML/Element/listing +original_slug: Web/HTML/Element/listing +--- +
{{Obsolete_header}}
+ +

概述

+ +

HTML 列表元素 (<listing>) 渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。HTML2 标准建议，当一行不超过 132 个字符时，不应该将其拆开。

+ +
注：不要使用这个元素。 +
    +
  • 它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。它甚至在 HTML5 中过时，并且可能由某些浏览器渲染为 {{HTMLElement("pre")}} 元素，它会解释其中的 HTML。
    • +
  • 而是要使用 {{HTMLElement("pre")}} 元素，或者如果满足语义的话，使用 {{HTMLElement("code")}} 元素，最终会转义 HTML '<' 和 >' ，以便它们不会被解释。
    • +
  • 等宽字体也可以显示在 {{HTMLElement("div")}} 元素中，通过使用足够的 CSS 样式，在 {{cssxref("font-family")}} 中将 monospace 用作通用字体（generic-font）的值。
    • +
+
+ +

属性

+ +

除了 全局属性 之外，这个元素没有其它属性。

+ +

DOM 接口

+ +

元素实现了 {{domxref('HTMLElement')}} 接口。

+ +
+

实现注解：直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。

+
+ +

另见

+ +
    +
  • {{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。
    • +
  • {{HTMLElement("plaintext")}} 和 {{HTMLElement("xmp")}} 元素，类似于 {{HTMLElement("listing")}} 但是也过时了。
    • +
+ +
{{HTMLRef}}
diff --git a/files/zh-cn/orphaned/web/html/element/multicol/index.html b/files/zh-cn/orphaned/web/html/element/multicol/index.html new file mode 100644 index 0000000000..589528af71 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/multicol/index.html @@ -0,0 +1,19 @@ +--- +title: +slug: orphaned/Web/HTML/Element/multicol +tags: + - CSS Column +translation_of: Web/HTML/Element/multicol +original_slug: Web/HTML/Element/multicol +--- +
{{non-standard_header}}
+ +

概要

+ +

HTML<multicol> 元素是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。

+ +
+

不要使用这个！ 为了实现多列布局，你应该使用常规的 HTML 元素，例如组合 {{HTMLElement("div")}} 和 CSS 列 特性。

+
+ +

要注意， Firefox 22 之前，虽然不受支持， <multicol> 元素和 {{domxref("HTMLSpanElement")}} 相关。按照规定的要求，之后它被修复，并且现在和 {{domxref("HTMLUnknownElement")}} 相关。

diff --git a/files/zh-cn/orphaned/web/html/element/nextid/index.html b/files/zh-cn/orphaned/web/html/element/nextid/index.html new file mode 100644 index 0000000000..bf5ff5d3be --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/nextid/index.html @@ -0,0 +1,141 @@ +--- +title: ': 下一个ID元素（已过时）' +slug: orphaned/Web/HTML/Element/nextid +tags: + - HTML + - 元素 + - 参考 + - 网页 +translation_of: Web/HTML/Element/nextid +original_slug: Web/HTML/Element/nextid +--- +
{{Deprecated_header}}
+ +

<nextid> 是一个过时的HTML元素，用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 它是由该Web编辑工具自动生成的，不需要手动调整或输入。 通过从HTML版本的官方公共DTD中删除，此元素的区别在于它是第一个成为“丢失标签”之一的元素。 它也可能是所有早期HTML元素中最少被了解的之一。

+ +
+
HTML "0.a" - 从开始到1991年1月10日
+
该标签尚未发明，因此在此期间未发现任何示例。
+
HTML "0.c" - 从1991年1月23日至1992年11月23日
+
HTML的此早期版本以非SGML兼容形式引入了<NEXTID>该形式仅将数字值单独用作“属性”。 
+
HTML "0.d" - 从1992年11月26日到1993年5月24日
+
在此跨度内，NeXT和尚存的最早的DTD表示<NEXTID> 仅对其新引入的属性N的值取一个数字。
+
HTML "1.k" - 版本1（第一版）
+
在HTML的第一个初稿中，<NEXTID> 与HTML 2相同，最终允许使用名称代替其属性值仅使用数字。
+
HTML "1.m" - 版本1（第二版）
+
在下一个发布的HTML草案中，可以使用简单的SGML命令分别取消选择<NEXTID> <NEXTID> 进行显示。
+
HTML 第2版第1级
+
这类似于2级默认值，但不包括所有表单元素。 i. e. <FORM>, <INPUT>, <TEXTAREA>, <SELECT>, 和 <OPTION>
+
HTML 版本2严格级别1
+
这类似于常规的1级，但它也排除了这些折旧的元素以及诸如在链接(<A>  内嵌套标头（<H*> 元素）之类的构造。
+
HTML 第2版第2级
+
这是默认设置，包括并允许所有HTML 2级功能以及元素和属性
+
HTML 第2版严格级别2
+
这不包括这些已贬值的元素，也禁止诸如在链接 (<A>元素内嵌套标头(<H*> 元素），或者有一个表单  <INPUT> 元素，它不在一个块级别中的元素如 <P>中。
+
HTML 版本3.2
+
<NEXTID> 完全消失了，再也不会被听到。.
+
+ +

属性

+ +

像所有其他HTML元素一样，此元素接受全局属性。

+ +
+
{{htmlattrdef("n")}}
+
参考锚点。
+
+ +

例子

+ +

用户在目录中输入四个部分标题（并且大概也在这些部分中编写段落材料）。 四个部分中每个部分的标题将被分配名称值“ z0”，“ z1”，“ z2”和“ z3”。 其中第一个将在目录中产生如下条目：<A NAME="z0" HREF="#z4">FIRST SECTION NAME</A> 并且节标题将被标记为： <H2><A NAME="z4">FIRST SECTION NAME</A></H2>.  接下来的三个部分z5，z6和z7（以及名为z1，z2和z3的目录条目）将继续这三个部分，每个部分都会自动使用这些名称来指定锚点。然后，用户保存并关闭文档。 然后，NeXT将在HTML文档的标头中添加一个特殊标记 <NEXTID N="z8">, 以告知在何处继续其命名约定。 想象一下，网络作者打开了文档进行进一步编辑。 他们想在第二部分之后添加几个新的部分，并在末尾追加四个部分。 打开文档时，NeXT编辑器会找到并读取此 <NEXTID N="z8">标记， 并且现在知道将这些新节中的第一个命名为目录中的z8，并将z14命名为内容主体。 可能看起来像这样：

+ +
<HTML>
+    <HEAD>
+        <TITLE> ... whatever ... </TITLE>
+        <LINK, META, BASE, etc. as applicable for the head of this document>
+        <NEXTID N="z20">
+    </HEAD>
+
+    <BODY>
+        <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A>
+        <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A>
+        <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A>
+        <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A>
+        <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A>
+        <A NAME="z3" HREF="#z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A>
+        <A NAME="z10" HREF="#z16">SEVENTH SECTION HEADING</A>
+        <A NAME="z11" HREF="#z17">EIGHTH SECTION HEADING</A>
+        <A NAME="z12" HREF="#z18">NINTH SECTION HEADING</A>
+        <A NAME="z13" HREF="#z19">TENTH SECTION HEADING</A>
+        <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z16">SEVENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z17">EIGHTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z18">NINTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z19">TENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+    </BODY>
+</HTML>
+
+ +

然后，他们使用NeXT编辑器将该文档的副本转发给某人，并删除z7和z19节，从z20到z29添加十个节，然后删除z24和z29段。 因此，返回修改后的NEXTID值是z30：

+ +
<HTML>
+    <HEAD>
+        <TITLE> ... whatever ... </TITLE>
+        <LINK, META, BASE, etc. as applicable for the head of this document>
+        <NEXTID N="z30">
+    </HEAD>
+
+    <BODY>
+        <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A>
+        <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A>
+        <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A>
+        <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A>
+        <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A>
+        <A NAME="z10" HREF="#z16">SEVENTH (NOW SIXTH) SECTION HEADING</A>
+        <A NAME="z11" HREF="#z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A>
+        <A NAME="z12" HREF="#z18">NINTH (NOW EIGHTH) SECTION HEADING</A>
+        <A NAME="z20" HREF="#z25">NEW NINTH SECTION HEADING</A>
+        <A NAME="z21" HREF="#z26">NEW TENTH SECTION HEADING</A>
+        <A NAME="z22" HREF="#z27">NEW ELEVENTH SECTION HEADING</A>
+        <A NAME="e23" HREF="#z28">NEW TWELFTH SECTION HEADING</A>
+        <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z16">SEVENTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z18">NINTH (NOW EIGHTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z25">NEW NINTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z26">NEW TENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z27">NEW ELENENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+        <H2><A NAME="z28">NEW TWELFTH SECTION HEADING</A></H1><P> ... whatever ... </P>
+    </BODY>
+</HTML>
+
+ +

HTML 参考

+ + + +

浏览器兼容性

+ + + +

{{Compat("html.elements.nextid")}}

+ +

另请详见

+ +
    +
  • {{HTMLElement("isindex")}}
    • +
+ +

{{HTMLRef}}

diff --git a/files/zh-cn/orphaned/web/html/preloading_content/index.html b/files/zh-cn/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..454ea6a38b --- /dev/null +++ b/files/zh-cn/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,289 @@ +--- +title: 通过rel="preload"进行内容预加载 +slug: orphaned/Web/HTML/Preloading_content +tags: + - HTML + - JavaScript + - Link + - as + - 媒体 + - 媒体查询 + - 性能 + - 性能优化 + - 指南 + - 预加载 +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

 {{htmlelement("link")}} 元素的 {{htmlattrxref("rel", "link")}} 属性的属性值preload能够让你在你的HTML页面中 {{htmlelement("head")}}元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。

+ +

基础部分

+ +

<link> 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

但是在这里，我们将使用preload作为rel属性的属性值。这种做法将把<link> 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 {{htmlattrxref("href", "link")}}和{{htmlattrxref("as", "link")}} 属性指定需要被预加载资源的资源路径及其类型。

+ +

一个简单的例子可能看起来像下面这样 （在这里可以查看示例的JS和CSS源代码，或是在线实例）

+ +
<head>
+  <meta charset="utf-8">
+  <title>JS and CSS preload example</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>bouncing balls</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

在这里，我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观的得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说，也是如此。 例如那些在CSS文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件。

+ +

preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

+ +
    +
  • 更精确地优化资源加载优先级。
    • +
  • 匹配未来的加载需求，在适当的情况下，重复利用同一资源。
    • +
  • 为资源应用正确的内容安全策略。
    • +
  • 为资源设置正确的 Accept 请求头。
    • +
+ +

哪些类型的内容可以被预加载？

+ +

许多不同类型的内容都可以被预加载，一些主要可用的as 属性值列举如下：

+ +
    +
  • audio: 音频文件。
    • +
  • document: 一个将要被嵌入到{{htmlelement("frame")}}或{{htmlelement("iframe")}}内部的HTML文档。
    • +
  • embed: 一个将要被嵌入到{{htmlelement("embed")}}元素内部的资源。
    • +
  • fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
    • +
  • font: 字体文件。
    • +
  • image: 图片文件。
    • +
  • object: 一个将会被嵌入到{{htmlelement("embed")}}元素内的文件。
    • +
  • script: JavaScript文件。
    • +
  • style: 样式表。
    • +
  • track: WebVTT文件。
    • +
  • worker: 一个JavaScript的web worker或shared worker。
    • +
  • video: 视频文件。
    • +
+ +
+

注意: 你可以通过进一步阅读link element extensions来了解关于这些属性值以及其他在Preload方案中预期将采纳的特性的细节。同样需要注意的是，关于as属性的有效值得完整列表是由Fetch方案来制定的，可以查看request destinations来进行了解。

+
+ +

包含一个MIME类型

+ +

<link> 元素可以接受一个{{htmlattrxref("type", "link")}}属性。这一属性可以包含该元素所指向资源的MIME类型。在浏览器进行预加载的时候，这个属性值将会非常有用——浏览器将使用type属性来判断它是否支持这一资源，如果浏览器支持这一类型资源的预加载，下载将会开始，否则便对其加以忽略。

+ +

你可以在我们的视频示例中看到一个与此有关的示例（查看完整源码，也可以查看在线示例）:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Video preload example</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
+  </video>
+</body>
+ +

在这个实例中，支持MP4格式的浏览器将仅预加载并使用MP4资源，以使得视频播放器的表现尽可能的流畅，或者说，为用户提供更好的响应。而不支持MP4格式的浏览器仍然能够加载视频的WebM版本，但无法体验到预加载带来的良好体验。这个例子展示了预加载机制如何与渐进式增强的哲学进行有机的结合。

+ +

跨域获取

+ +

如果你已经有了一个可以正确工作的CORS设置，那么你也可以同样成功的预加载那些跨域资源，只需要你在<link>元素中设置好{{htmlattrxref("crossorigin","link")}}属性即可。

+ +

一个有趣的情况是，如果你需要获取的是字体文件，那么即使是非跨域的情况下，也需要应用这一属性。因为各种各样的原因，这些获取请求必须使用以匿名模式使用CORS（如果你对其中的细节感兴趣，可以查看Font fetching requirements一文）。

+ +

我们将以这个情况作为一个示例——首先是由于字体文件的加载是预加载方面一个好的用例，其次，这也比真正的配置一个跨域请求的例子要简单许多。你可以查看 在Github上的示例源代码（也可以查看在线示例）：

+ +
<head>
+  <meta charset="utf-8">
+  <title>Web font example</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  ...
+</body>
+ +

你可以看到，在这里，我们不仅通过配置type属性提供了一个MIME类型的暗示，我们也提供了一个crossorigin 属性来处理CORS问题。

+ +

包含媒体

+ +

<link>元素有一个很棒的特性是它们能够接受一个{{htmlattrxref("media", "link")}}属性。它们可以接受媒体类型或有效的媒体查询作为属性值，这将令你能够使用响应式的预加载！

+ +

让我们来看一个简单的示例（可以查看Github上的源代码或在线示例）：

+ +
<head>
+  <meta charset="utf-8">
+  <title>Responsive preload example</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>My site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

你可以看到我们在<link>元素中包含了一个media属性，因此，当用户在使用较窄屏幕的设备时，较窄的图片将会被预加载，而在较宽的设备上，较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过{{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} 来加以实现（可以查看Testing media queries一文来了解更多信息）。

+ +

这一特性将使另一种情况成为可能——字体在随着页面渲染完成的时候即可使用，减少了FOUT (无样式字体闪烁，flash of unstyled text)问题。

+ +

值得注意的是，这一特特性并不仅限于图片，或其他有着同样类型的文件，还有更多想象空间。比如，你可以在用户仅有较窄的屏幕，CPU和带宽资源较为有限的情况下预加载并展示一个简单的SVG图表，而在用户资源较为充裕的时候再去加载一系列复杂的JavaScript文件以显示一个有交互功能的3D模型。

+ +

脚本化与预加载

+ +

另一项很棒的关于预加载的事情是，如果需要，你可以完全以脚本化的方式来执行这些预加载操作。例如，我们在这里创建一个{{domxref("HTMLLinkElement")}}实例，然后将他们附加到DOM上：

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

这意味着浏览器将预加载这个JavaScript文件，但并不实际执行它。

+ +

如果要对其加以执行，在需要的时候，你可以执行：

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

当你需要预加载一个脚本，但需要推迟到需要的时候才令其执行时，这种方式会特别有用。

+ +

其他资源预加载机制

+ +

还存在一些其他预加载机制，但没有哪个会比<link rel="preload">在大多数情况下更符合你的需要和预期：

+ +
    +
  • <link rel="prefetch"> 已经被许多浏览器支持了相当长的时间，但它是意图预获取一些资源，以备下一个导航/页面使用（比如，当你去到下一个页面时）。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。毕竟，当前的页面比下一个页面相对更加重要。查看Link prefetching FAQ可以了解更多细节。
    • +
  • <link rel="subresource">被Chrome支持了有一段时间，并且已经有些搔到预加载当前导航/页面（所含有的资源）的痒处了。但它有一个问题——没有办法处理所获取内容的优先级（as也并不存在），所以最终，这些资源会以一个相当低的优先级被加载，这使得它能提供的帮助相当有限。
    • +
  • 除以上这些以外，还有大量的基于脚本的资源加载器。但这些加载器对于浏览器的加载优先级队列完全束手无策，这也使得他们不得不屈服于同样的性能问题。
    • +
+ +

相关规范／草案

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}preload 的更多详情
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}rel=preload 的定义
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("56")}}[1]{{CompatNo}}4711
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid(56)}}{{CompatChrome(50.0)}}{{CompatGeckoMobile("56")}}[1]{{CompatNo}}{{CompatVersionUnknown}}11{{CompatChrome(50.0)}}
+
+ +

[1] Firefox支持对于如下内容的预加载（{{htmlattrxref("as","link")}}属性的有效值）—— script，style，image，video，audio，track，font， 以及 fetch。关于所支持的字体类型的预加载被定义在fonts media type list 中（注意，font/collection不被支持）。同样需要注意的是，当前的Firefox仅支持可缓存资源的预加载。

+ +

其他参考

+ + diff --git a/files/zh-cn/orphaned/web/svg/element/color-profile/index.html b/files/zh-cn/orphaned/web/svg/element/color-profile/index.html new file mode 100644 index 0000000000..740c997eef --- /dev/null +++ b/files/zh-cn/orphaned/web/svg/element/color-profile/index.html @@ -0,0 +1,96 @@ +--- +title: color-profile +slug: orphaned/Web/SVG/Element/color-profile +tags: + - SVG + - 元素 + - 参考 + - 需要示例 +translation_of: Web/SVG/Element/color-profile +original_slug: Web/SVG/Element/color-profile +--- +
{{SVGRef}}
+ +

该元素允许描述用于图像的颜色配置文件。

+ +

用法

+ +

{{svginfo}}

+ +

示例

+ +

属性

+ +

全局属性

+ + + +

专有属性

+ +
    +
  • {{SVGAttr("local")}}
    • +
  • {{SVGAttr("name")}}
    • +
  • {{SVGAttr("rendering-intent")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

DOM 接口

+ +

该元素实现了SVGColorProfileElement接口。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

该表格基于这些资源。

diff --git a/files/zh-cn/web/html/element/isindex/index.html b/files/zh-cn/web/html/element/isindex/index.html deleted file mode 100644 index 6e1c99833d..0000000000 --- a/files/zh-cn/web/html/element/isindex/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: -slug: Web/HTML/Element/isindex -tags: - - HTML - - Web -translation_of: Web/HTML/Element/isindex ---- -
{{Deprecated_header}}
- -

概述

- -

<isindex>元素的作用是使浏览器显示一个对话框，提示用户输入单行文本。在W3C的规范中建议，<isindex>元素最好被放置在 {{HTMLElement("head")}} 标签块内，但是对于浏览器来说，<isindex>标签在页面任何位置都没有关系。

- -

从HTML4规范开始，就不建议在您编写的HTML文档内使用<isindex>元素，您可以用<input>标签来替代。

- -

属性

- -

本元素支持 全局属性.

- -
-
{{htmlattrdef("prompt")}}
-
该属性用作在输入框前添加一个输入提示文本。
-
{{htmlattrdef("action")}}
-
本属性可以规定文本框中的值发送向一个没有被W3C规范的URL。
-
- -

示例

- -
<head>
-  <isindex prompt="Search Document... " />
-</head>
- -

参阅

- -
    -
  • {{HTMLElement("input")}}
    • -
- -

{{HTMLRef}}

diff --git a/files/zh-cn/web/html/element/listing/index.html b/files/zh-cn/web/html/element/listing/index.html deleted file mode 100644 index 991e4249e4..0000000000 --- a/files/zh-cn/web/html/element/listing/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: -slug: Web/HTML/Element/listing -translation_of: Web/HTML/Element/listing ---- -
{{Obsolete_header}}
- -

概述

- -

HTML 列表元素 (<listing>) 渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。HTML2 标准建议，当一行不超过 132 个字符时，不应该将其拆开。

- -
注：不要使用这个元素。 -
    -
  • 它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。它甚至在 HTML5 中过时，并且可能由某些浏览器渲染为 {{HTMLElement("pre")}} 元素，它会解释其中的 HTML。
    • -
  • 而是要使用 {{HTMLElement("pre")}} 元素，或者如果满足语义的话，使用 {{HTMLElement("code")}} 元素，最终会转义 HTML '<' 和 >' ，以便它们不会被解释。
    • -
  • 等宽字体也可以显示在 {{HTMLElement("div")}} 元素中，通过使用足够的 CSS 样式，在 {{cssxref("font-family")}} 中将 monospace 用作通用字体（generic-font）的值。
    • -
-
- -

属性

- -

除了 全局属性 之外，这个元素没有其它属性。

- -

DOM 接口

- -

元素实现了 {{domxref('HTMLElement')}} 接口。

- -
-

实现注解：直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。

-
- -

另见

- -
    -
  • {{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。
    • -
  • {{HTMLElement("plaintext")}} 和 {{HTMLElement("xmp")}} 元素，类似于 {{HTMLElement("listing")}} 但是也过时了。
    • -
- -
{{HTMLRef}}
diff --git a/files/zh-cn/web/html/element/multicol/index.html b/files/zh-cn/web/html/element/multicol/index.html deleted file mode 100644 index aa1d2fb6e0..0000000000 --- a/files/zh-cn/web/html/element/multicol/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: -slug: Web/HTML/Element/multicol -tags: - - CSS Column -translation_of: Web/HTML/Element/multicol ---- -
{{non-standard_header}}
- -

概要

- -

HTML<multicol> 元素是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。

- -
-

不要使用这个！ 为了实现多列布局，你应该使用常规的 HTML 元素，例如组合 {{HTMLElement("div")}} 和 CSS 列 特性。

-
- -

要注意， Firefox 22 之前，虽然不受支持， <multicol> 元素和 {{domxref("HTMLSpanElement")}} 相关。按照规定的要求，之后它被修复，并且现在和 {{domxref("HTMLUnknownElement")}} 相关。

diff --git a/files/zh-cn/web/html/element/nextid/index.html b/files/zh-cn/web/html/element/nextid/index.html deleted file mode 100644 index bde667b996..0000000000 --- a/files/zh-cn/web/html/element/nextid/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: ': 下一个ID元素（已过时）' -slug: Web/HTML/Element/nextid -tags: - - HTML - - 元素 - - 参考 - - 网页 -translation_of: Web/HTML/Element/nextid ---- -
{{Deprecated_header}}
- -

<nextid> 是一个过时的HTML元素，用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 它是由该Web编辑工具自动生成的，不需要手动调整或输入。 通过从HTML版本的官方公共DTD中删除，此元素的区别在于它是第一个成为“丢失标签”之一的元素。 它也可能是所有早期HTML元素中最少被了解的之一。

- -
-
HTML "0.a" - 从开始到1991年1月10日
-
该标签尚未发明，因此在此期间未发现任何示例。
-
HTML "0.c" - 从1991年1月23日至1992年11月23日
-
HTML的此早期版本以非SGML兼容形式引入了<NEXTID>该形式仅将数字值单独用作“属性”。 
-
HTML "0.d" - 从1992年11月26日到1993年5月24日
-
在此跨度内，NeXT和尚存的最早的DTD表示<NEXTID> 仅对其新引入的属性N的值取一个数字。
-
HTML "1.k" - 版本1（第一版）
-
在HTML的第一个初稿中，<NEXTID> 与HTML 2相同，最终允许使用名称代替其属性值仅使用数字。
-
HTML "1.m" - 版本1（第二版）
-
在下一个发布的HTML草案中，可以使用简单的SGML命令分别取消选择<NEXTID> <NEXTID> 进行显示。
-
HTML 第2版第1级
-
这类似于2级默认值，但不包括所有表单元素。 i. e. <FORM>, <INPUT>, <TEXTAREA>, <SELECT>, 和 <OPTION>
-
HTML 版本2严格级别1
-
这类似于常规的1级，但它也排除了这些折旧的元素以及诸如在链接(<A>  内嵌套标头（<H*> 元素）之类的构造。
-
HTML 第2版第2级
-
这是默认设置，包括并允许所有HTML 2级功能以及元素和属性
-
HTML 第2版严格级别2
-
这不包括这些已贬值的元素，也禁止诸如在链接 (<A>元素内嵌套标头(<H*> 元素），或者有一个表单  <INPUT> 元素，它不在一个块级别中的元素如 <P>中。
-
HTML 版本3.2
-
<NEXTID> 完全消失了，再也不会被听到。.
-
- -

属性

- -

像所有其他HTML元素一样，此元素接受全局属性。

- -
-
{{htmlattrdef("n")}}
-
参考锚点。
-
- -

例子

- -

用户在目录中输入四个部分标题（并且大概也在这些部分中编写段落材料）。 四个部分中每个部分的标题将被分配名称值“ z0”，“ z1”，“ z2”和“ z3”。 其中第一个将在目录中产生如下条目：<A NAME="z0" HREF="#z4">FIRST SECTION NAME</A> 并且节标题将被标记为： <H2><A NAME="z4">FIRST SECTION NAME</A></H2>.  接下来的三个部分z5，z6和z7（以及名为z1，z2和z3的目录条目）将继续这三个部分，每个部分都会自动使用这些名称来指定锚点。然后，用户保存并关闭文档。 然后，NeXT将在HTML文档的标头中添加一个特殊标记 <NEXTID N="z8">, 以告知在何处继续其命名约定。 想象一下，网络作者打开了文档进行进一步编辑。 他们想在第二部分之后添加几个新的部分，并在末尾追加四个部分。 打开文档时，NeXT编辑器会找到并读取此 <NEXTID N="z8">标记， 并且现在知道将这些新节中的第一个命名为目录中的z8，并将z14命名为内容主体。 可能看起来像这样：

- -
<HTML>
-    <HEAD>
-        <TITLE> ... whatever ... </TITLE>
-        <LINK, META, BASE, etc. as applicable for the head of this document>
-        <NEXTID N="z20">
-    </HEAD>
-
-    <BODY>
-        <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A>
-        <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A>
-        <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A>
-        <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A>
-        <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A>
-        <A NAME="z3" HREF="#z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A>
-        <A NAME="z10" HREF="#z16">SEVENTH SECTION HEADING</A>
-        <A NAME="z11" HREF="#z17">EIGHTH SECTION HEADING</A>
-        <A NAME="z12" HREF="#z18">NINTH SECTION HEADING</A>
-        <A NAME="z13" HREF="#z19">TENTH SECTION HEADING</A>
-        <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z16">SEVENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z17">EIGHTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z18">NINTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z19">TENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-    </BODY>
-</HTML>
-
- -

然后，他们使用NeXT编辑器将该文档的副本转发给某人，并删除z7和z19节，从z20到z29添加十个节，然后删除z24和z29段。 因此，返回修改后的NEXTID值是z30：

- -
<HTML>
-    <HEAD>
-        <TITLE> ... whatever ... </TITLE>
-        <LINK, META, BASE, etc. as applicable for the head of this document>
-        <NEXTID N="z30">
-    </HEAD>
-
-    <BODY>
-        <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A>
-        <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A>
-        <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A>
-        <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A>
-        <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A>
-        <A NAME="z10" HREF="#z16">SEVENTH (NOW SIXTH) SECTION HEADING</A>
-        <A NAME="z11" HREF="#z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A>
-        <A NAME="z12" HREF="#z18">NINTH (NOW EIGHTH) SECTION HEADING</A>
-        <A NAME="z20" HREF="#z25">NEW NINTH SECTION HEADING</A>
-        <A NAME="z21" HREF="#z26">NEW TENTH SECTION HEADING</A>
-        <A NAME="z22" HREF="#z27">NEW ELEVENTH SECTION HEADING</A>
-        <A NAME="e23" HREF="#z28">NEW TWELFTH SECTION HEADING</A>
-        <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z16">SEVENTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z18">NINTH (NOW EIGHTH) SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z25">NEW NINTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z26">NEW TENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z27">NEW ELENENTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-        <H2><A NAME="z28">NEW TWELFTH SECTION HEADING</A></H1><P> ... whatever ... </P>
-    </BODY>
-</HTML>
-
- -

HTML 参考

- - - -

浏览器兼容性

- - - -

{{Compat("html.elements.nextid")}}

- -

另请详见

- -
    -
  • {{HTMLElement("isindex")}}
    • -
- -

{{HTMLRef}}

diff --git a/files/zh-cn/web/html/preloading_content/index.html b/files/zh-cn/web/html/preloading_content/index.html deleted file mode 100644 index 280a278e62..0000000000 --- a/files/zh-cn/web/html/preloading_content/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: 通过rel="preload"进行内容预加载 -slug: Web/HTML/Preloading_content -tags: - - HTML - - JavaScript - - Link - - as - - 媒体 - - 媒体查询 - - 性能 - - 性能优化 - - 指南 - - 预加载 -translation_of: Web/HTML/Preloading_content ---- -

 {{htmlelement("link")}} 元素的 {{htmlattrxref("rel", "link")}} 属性的属性值preload能够让你在你的HTML页面中 {{htmlelement("head")}}元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。

- -

基础部分

- -

<link> 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：

- -
<link rel="stylesheet" href="styles/main.css">
- -

但是在这里，我们将使用preload作为rel属性的属性值。这种做法将把<link> 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 {{htmlattrxref("href", "link")}}和{{htmlattrxref("as", "link")}} 属性指定需要被预加载资源的资源路径及其类型。

- -

一个简单的例子可能看起来像下面这样 （在这里可以查看示例的JS和CSS源代码，或是在线实例）

- -
<head>
-  <meta charset="utf-8">
-  <title>JS and CSS preload example</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>bouncing balls</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

在这里，我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观的得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说，也是如此。 例如那些在CSS文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件。

- -

preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

- -
    -
  • 更精确地优化资源加载优先级。
    • -
  • 匹配未来的加载需求，在适当的情况下，重复利用同一资源。
    • -
  • 为资源应用正确的内容安全策略。
    • -
  • 为资源设置正确的 Accept 请求头。
    • -
- -

哪些类型的内容可以被预加载？

- -

许多不同类型的内容都可以被预加载，一些主要可用的as 属性值列举如下：

- -
    -
  • audio: 音频文件。
    • -
  • document: 一个将要被嵌入到{{htmlelement("frame")}}或{{htmlelement("iframe")}}内部的HTML文档。
    • -
  • embed: 一个将要被嵌入到{{htmlelement("embed")}}元素内部的资源。
    • -
  • fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
    • -
  • font: 字体文件。
    • -
  • image: 图片文件。
    • -
  • object: 一个将会被嵌入到{{htmlelement("embed")}}元素内的文件。
    • -
  • script: JavaScript文件。
    • -
  • style: 样式表。
    • -
  • track: WebVTT文件。
    • -
  • worker: 一个JavaScript的web worker或shared worker。
    • -
  • video: 视频文件。
    • -
- -
-

注意: 你可以通过进一步阅读link element extensions来了解关于这些属性值以及其他在Preload方案中预期将采纳的特性的细节。同样需要注意的是，关于as属性的有效值得完整列表是由Fetch方案来制定的，可以查看request destinations来进行了解。

-
- -

包含一个MIME类型

- -

<link> 元素可以接受一个{{htmlattrxref("type", "link")}}属性。这一属性可以包含该元素所指向资源的MIME类型。在浏览器进行预加载的时候，这个属性值将会非常有用——浏览器将使用type属性来判断它是否支持这一资源，如果浏览器支持这一类型资源的预加载，下载将会开始，否则便对其加以忽略。

- -

你可以在我们的视频示例中看到一个与此有关的示例（查看完整源码，也可以查看在线示例）:

- -
<head>
-  <meta charset="utf-8">
-  <title>Video preload example</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
-  </video>
-</body>
- -

在这个实例中，支持MP4格式的浏览器将仅预加载并使用MP4资源，以使得视频播放器的表现尽可能的流畅，或者说，为用户提供更好的响应。而不支持MP4格式的浏览器仍然能够加载视频的WebM版本，但无法体验到预加载带来的良好体验。这个例子展示了预加载机制如何与渐进式增强的哲学进行有机的结合。

- -

跨域获取

- -

如果你已经有了一个可以正确工作的CORS设置，那么你也可以同样成功的预加载那些跨域资源，只需要你在<link>元素中设置好{{htmlattrxref("crossorigin","link")}}属性即可。

- -

一个有趣的情况是，如果你需要获取的是字体文件，那么即使是非跨域的情况下，也需要应用这一属性。因为各种各样的原因，这些获取请求必须使用以匿名模式使用CORS（如果你对其中的细节感兴趣，可以查看Font fetching requirements一文）。

- -

我们将以这个情况作为一个示例——首先是由于字体文件的加载是预加载方面一个好的用例，其次，这也比真正的配置一个跨域请求的例子要简单许多。你可以查看 在Github上的示例源代码（也可以查看在线示例）：

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

你可以看到，在这里，我们不仅通过配置type属性提供了一个MIME类型的暗示，我们也提供了一个crossorigin 属性来处理CORS问题。

- -

包含媒体

- -

<link>元素有一个很棒的特性是它们能够接受一个{{htmlattrxref("media", "link")}}属性。它们可以接受媒体类型或有效的媒体查询作为属性值，这将令你能够使用响应式的预加载！

- -

让我们来看一个简单的示例（可以查看Github上的源代码或在线示例）：

- -
<head>
-  <meta charset="utf-8">
-  <title>Responsive preload example</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>My site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

你可以看到我们在<link>元素中包含了一个media属性，因此，当用户在使用较窄屏幕的设备时，较窄的图片将会被预加载，而在较宽的设备上，较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过{{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} 来加以实现（可以查看Testing media queries一文来了解更多信息）。

- -

这一特性将使另一种情况成为可能——字体在随着页面渲染完成的时候即可使用，减少了FOUT (无样式字体闪烁，flash of unstyled text)问题。

- -

值得注意的是，这一特特性并不仅限于图片，或其他有着同样类型的文件，还有更多想象空间。比如，你可以在用户仅有较窄的屏幕，CPU和带宽资源较为有限的情况下预加载并展示一个简单的SVG图表，而在用户资源较为充裕的时候再去加载一系列复杂的JavaScript文件以显示一个有交互功能的3D模型。

- -

脚本化与预加载

- -

另一项很棒的关于预加载的事情是，如果需要，你可以完全以脚本化的方式来执行这些预加载操作。例如，我们在这里创建一个{{domxref("HTMLLinkElement")}}实例，然后将他们附加到DOM上：

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

这意味着浏览器将预加载这个JavaScript文件，但并不实际执行它。

- -

如果要对其加以执行，在需要的时候，你可以执行：

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

当你需要预加载一个脚本，但需要推迟到需要的时候才令其执行时，这种方式会特别有用。

- -

其他资源预加载机制

- -

还存在一些其他预加载机制，但没有哪个会比<link rel="preload">在大多数情况下更符合你的需要和预期：

- -
    -
  • <link rel="prefetch"> 已经被许多浏览器支持了相当长的时间，但它是意图预获取一些资源，以备下一个导航/页面使用（比如，当你去到下一个页面时）。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。毕竟，当前的页面比下一个页面相对更加重要。查看Link prefetching FAQ可以了解更多细节。
    • -
  • <link rel="subresource">被Chrome支持了有一段时间，并且已经有些搔到预加载当前导航/页面（所含有的资源）的痒处了。但它有一个问题——没有办法处理所获取内容的优先级（as也并不存在），所以最终，这些资源会以一个相当低的优先级被加载，这使得它能提供的帮助相当有限。
    • -
  • 除以上这些以外，还有大量的基于脚本的资源加载器。但这些加载器对于浏览器的加载优先级队列完全束手无策，这也使得他们不得不屈服于同样的性能问题。
    • -
- -

相关规范／草案

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}preload 的更多详情
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}rel=preload 的定义
- -

浏览器兼容性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(50.0)}}{{CompatGeckoDesktop("56")}}[1]{{CompatNo}}4711
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid(56)}}{{CompatChrome(50.0)}}{{CompatGeckoMobile("56")}}[1]{{CompatNo}}{{CompatVersionUnknown}}11{{CompatChrome(50.0)}}
-
- -

[1] Firefox支持对于如下内容的预加载（{{htmlattrxref("as","link")}}属性的有效值）—— script，style，image，video，audio，track，font， 以及 fetch。关于所支持的字体类型的预加载被定义在fonts media type list 中（注意，font/collection不被支持）。同样需要注意的是，当前的Firefox仅支持可缓存资源的预加载。

- -

其他参考

- - diff --git a/files/zh-cn/web/svg/element/color-profile/index.html b/files/zh-cn/web/svg/element/color-profile/index.html deleted file mode 100644 index 9fb38a05bb..0000000000 --- a/files/zh-cn/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: color-profile -slug: Web/SVG/Element/color-profile -tags: - - SVG - - 元素 - - 参考 - - 需要示例 -translation_of: Web/SVG/Element/color-profile ---- -
{{SVGRef}}
- -

该元素允许描述用于图像的颜色配置文件。

- -

用法

- -

{{svginfo}}

- -

示例

- -

属性

- -

全局属性

- - - -

专有属性

- -
    -
  • {{SVGAttr("local")}}
    • -
  • {{SVGAttr("name")}}
    • -
  • {{SVGAttr("rendering-intent")}}
    • -
  • {{SVGAttr("xlink:href")}}
    • -
- -

DOM 接口

- -

该元素实现了SVGColorProfileElement接口。

- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

该表格基于这些资源。

-- cgit v1.2.3-54-g00ecf