From c30d0b51819d7548c17573e1e1ecf13a51ba564d Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 2 Feb 2022 00:53:44 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 1 + files/de/_wikihistory.json | 12 +-- .../web/css/-webkit-print-color-adjust/index.html | 97 ----------------- files/de/web/css/print-color-adjust/index.html | 98 +++++++++++++++++ files/es/_redirects.txt | 1 + files/es/_wikihistory.json | 14 +-- .../web/css/-webkit-print-color-adjust/index.html | 102 ------------------ files/es/web/css/print-color-adjust/index.html | 103 ++++++++++++++++++ files/fr/_redirects.txt | 2 + files/fr/_wikihistory.json | 28 ++--- .../web/css/print-color-adjust/index.md | 99 ++++++++++++++++++ .../fr/web/css/-webkit-print-color-adjust/index.md | 60 ----------- files/fr/web/css/color-adjust/index.md | 98 ----------------- files/fr/web/css/print-color-adjust/index.md | 61 +++++++++++ files/ja/_redirects.txt | 2 + files/ja/_wikihistory.json | 24 ++--- .../web/css/print-color-adjust/index.md | 116 +++++++++++++++++++++ .../ja/web/css/-webkit-print-color-adjust/index.md | 72 ------------- files/ja/web/css/color-adjust/index.md | 115 -------------------- files/ja/web/css/print-color-adjust/index.md | 73 +++++++++++++ 20 files changed, 595 insertions(+), 583 deletions(-) delete mode 100644 files/de/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/de/web/css/print-color-adjust/index.html delete mode 100644 files/es/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/es/web/css/print-color-adjust/index.html create mode 100644 files/fr/conflicting/web/css/print-color-adjust/index.md delete mode 100644 files/fr/web/css/-webkit-print-color-adjust/index.md delete mode 100644 files/fr/web/css/color-adjust/index.md create mode 100644 files/fr/web/css/print-color-adjust/index.md create mode 100644 files/ja/conflicting/web/css/print-color-adjust/index.md delete mode 100644 files/ja/web/css/-webkit-print-color-adjust/index.md delete mode 100644 files/ja/web/css/color-adjust/index.md create mode 100644 files/ja/web/css/print-color-adjust/index.md (limited to 'files') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 1909a749bb..c214e762da 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -483,6 +483,7 @@ /de/docs/Web/CSS/-moz-user-select /de/docs/Web/CSS/user-select /de/docs/Web/CSS/-webkit-mask-origin /de/docs/Web/CSS/mask-origin /de/docs/Web/CSS/-webkit-mask-repeat /de/docs/Web/CSS/mask-repeat +/de/docs/Web/CSS/-webkit-print-color-adjust /de/docs/Web/CSS/print-color-adjust /de/docs/Web/CSS/:-moz-placeholder /de/docs/Web/CSS/:placeholder-shown /de/docs/Web/CSS/:-moz-ui-invalid /de/docs/Web/CSS/:user-invalid /de/docs/Web/CSS/:-webkit-autofill /de/docs/Web/CSS/:autofill diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 85a1b47a83..368a5e8b43 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -4430,12 +4430,6 @@ "Sebastianz" ] }, - "Web/CSS/-webkit-print-color-adjust": { - "modified": "2019-03-23T22:42:45.125Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-03-18T21:41:41.637Z", "contributors": [ @@ -7173,6 +7167,12 @@ "Sebastianz" ] }, + "Web/CSS/print-color-adjust": { + "modified": "2019-03-23T22:42:45.125Z", + "contributors": [ + "Sebastianz" + ] + }, "Web/CSS/quotes": { "modified": "2020-10-15T21:28:32.529Z", "contributors": [ diff --git a/files/de/web/css/-webkit-print-color-adjust/index.html b/files/de/web/css/-webkit-print-color-adjust/index.html deleted file mode 100644 index 37712aa627..0000000000 --- a/files/de/web/css/-webkit-print-color-adjust/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: '-webkit-print-color-adjust' -slug: Web/CSS/-webkit-print-color-adjust -tags: - - CSS - - CSS Eigenschaft - - Layout - - NeedsExample - - Non-standard - - Web -translation_of: Web/CSS/-webkit-print-color-adjust ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Die -webkit-print-color-adjust Eigenschaft ist eine nicht standardisierte CSS Erweiterung, die dazu verwendet werden kann, um das Drucken von Hintergrundfarben und -bildern in Browsern zu erzwingen, die auf der WebKit Engine basieren.

- -

Syntax

- -
-webkit-print-color-adjust: economy | exact
-
- -

Werte

- -
-
economy
-
Normales Verhalten. Hintergrundfarben und -bilder werden nur gedruckt, falls der Benutzer dies explizit in den Druckeinstellungen seines Browsers erlaubt.
-
exact
-
Hintergrundfarben und -bilder des Elements, auf den die Regel zutrifft, werden immer gedruckt. Die Druckeinstellungen des Benutzers werden überschrieben.
-
- -

Vererbung

- -

Diese Eigenschaft wird vererbt.

- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -

[1] Chrome druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

- -

Wenn Hintergrundbilder zugeschnitten sind (zum Beispiel wenn Sprites als Hintergrundbilder verwendet werden), werden sie wegen Chromium Bug 131054 verzerrt dargestellt, wenn sie im Chrome Browser mit -webkit-print-color-adjust: exact gedruckt werden. Einfarbige Hintergründe und Hintergrundbilder, die nicht zugeschnitten sind (d. h. sie haben eine kleinere Breite und Höhe als das Element, auf das sie angewendet werden), werden korrekt gedruckt.

- -

[2] Safari druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

- -

Siehe auch

- - diff --git a/files/de/web/css/print-color-adjust/index.html b/files/de/web/css/print-color-adjust/index.html new file mode 100644 index 0000000000..863ac1ec98 --- /dev/null +++ b/files/de/web/css/print-color-adjust/index.html @@ -0,0 +1,98 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/print-color-adjust +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsExample + - Non-standard + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +original_slug: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -webkit-print-color-adjust Eigenschaft ist eine nicht standardisierte CSS Erweiterung, die dazu verwendet werden kann, um das Drucken von Hintergrundfarben und -bildern in Browsern zu erzwingen, die auf der WebKit Engine basieren.

+ +

Syntax

+ +
-webkit-print-color-adjust: economy | exact
+
+ +

Werte

+ +
+
economy
+
Normales Verhalten. Hintergrundfarben und -bilder werden nur gedruckt, falls der Benutzer dies explizit in den Druckeinstellungen seines Browsers erlaubt.
+
exact
+
Hintergrundfarben und -bilder des Elements, auf den die Regel zutrifft, werden immer gedruckt. Die Druckeinstellungen des Benutzers werden überschrieben.
+
+ +

Vererbung

+ +

Diese Eigenschaft wird vererbt.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

+ +

Wenn Hintergrundbilder zugeschnitten sind (zum Beispiel wenn Sprites als Hintergrundbilder verwendet werden), werden sie wegen Chromium Bug 131054 verzerrt dargestellt, wenn sie im Chrome Browser mit -webkit-print-color-adjust: exact gedruckt werden. Einfarbige Hintergründe und Hintergrundbilder, die nicht zugeschnitten sind (d. h. sie haben eine kleinere Breite und Höhe als das Element, auf das sie angewendet werden), werden korrekt gedruckt.

+ +

[2] Safari druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

+ +

Siehe auch

+ + diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index bc65d530bf..6f58b5654c 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1632,6 +1632,7 @@ /es/docs/Web/CSS/-webkit-mask-origin /es/docs/Web/CSS/mask-origin /es/docs/Web/CSS/-webkit-mask-position /es/docs/Web/CSS/mask-position /es/docs/Web/CSS/-webkit-mask-repeat /es/docs/Web/CSS/mask-repeat +/es/docs/Web/CSS/-webkit-print-color-adjust /es/docs/Web/CSS/print-color-adjust /es/docs/Web/CSS/:-moz-ui-invalid /es/docs/Web/CSS/:user-invalid /es/docs/Web/CSS/:-webkit-autofill /es/docs/Web/CSS/:autofill /es/docs/Web/CSS/::-webkit-file-upload-button /es/docs/Web/CSS/::file-selector-button diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 889610fe22..221a50c96e 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -9633,13 +9633,6 @@ "pekechis" ] }, - "Web/CSS/-webkit-print-color-adjust": { - "modified": "2019-03-23T22:35:50.908Z", - "contributors": [ - "teoli", - "pekechis" - ] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-03-23T22:35:33.059Z", "contributors": [ @@ -12878,6 +12871,13 @@ "HenryGR" ] }, + "Web/CSS/print-color-adjust": { + "modified": "2019-03-23T22:35:50.908Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, "Web/CSS/quotes": { "modified": "2020-10-15T21:46:00.335Z", "contributors": [ diff --git a/files/es/web/css/-webkit-print-color-adjust/index.html b/files/es/web/css/-webkit-print-color-adjust/index.html deleted file mode 100644 index 67e3456e5a..0000000000 --- a/files/es/web/css/-webkit-print-color-adjust/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: '-webkit-print-color-adjust' -slug: Web/CSS/-webkit-print-color-adjust -tags: - - CSS - - Diseño - - No estándar(2) - - Propiedad CSS - - Web -translation_of: Web/CSS/-webkit-print-color-adjust ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad CSS -webkit-print-color-adjust es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.

- -

Síntaxis

- -
-webkit-print-color-adjust: economy | exact
-
- -

Valores

- -
-
economy
-
Comportamiento normal.  Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.
-
exact
-
Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.
-
- -

Herencia

- -

Esta propiedad es heredada.

- -

Especificaciones

- -

Aún no es parte de ninguna especificación aunque hay una propuesta en la wiki de CSSWG para que sea estandarizada.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -

[1] Chrome no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

- -

Cuando se recortan las imágenes de fondo (por ejemplo cuando usamos sprites e imágenes de fondo), causado por el Chromium bug 131054,  las imágenes aparecerán distorsionadas al ser impresas desde el navegador Chrome con  -webkit-print-color-adjust: exact. Fondos de colores sólidos e imágenes de fondo que no sean recortadas (es decir que tengan menor anchura y altura que el elemento al que se aplican) serán impresas de manera correcta.

- -

[2] Safari no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

- -

Ver además

- - diff --git a/files/es/web/css/print-color-adjust/index.html b/files/es/web/css/print-color-adjust/index.html new file mode 100644 index 0000000000..70834a540e --- /dev/null +++ b/files/es/web/css/print-color-adjust/index.html @@ -0,0 +1,103 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/print-color-adjust +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +original_slug: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-print-color-adjust es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.

+ +

Síntaxis

+ +
-webkit-print-color-adjust: economy | exact
+
+ +

Valores

+ +
+
economy
+
Comportamiento normal.  Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.
+
exact
+
Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.
+
+ +

Herencia

+ +

Esta propiedad es heredada.

+ +

Especificaciones

+ +

Aún no es parte de ninguna especificación aunque hay una propuesta en la wiki de CSSWG para que sea estandarizada.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

+ +

Cuando se recortan las imágenes de fondo (por ejemplo cuando usamos sprites e imágenes de fondo), causado por el Chromium bug 131054,  las imágenes aparecerán distorsionadas al ser impresas desde el navegador Chrome con  -webkit-print-color-adjust: exact. Fondos de colores sólidos e imágenes de fondo que no sean recortadas (es decir que tengan menor anchura y altura que el elemento al que se aplican) serán impresas de manera correcta.

+ +

[2] Safari no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

+ +

Ver además

+ + diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index fd52f541c3..790e5e1098 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3906,6 +3906,7 @@ /fr/docs/Web/CSS/-ms-scroll-snap-type /fr/docs/conflicting/Web/CSS/scroll-snap-type /fr/docs/Web/CSS/-ms-user-select /fr/docs/conflicting/Web/CSS/user-select /fr/docs/Web/CSS/-webkit-mask-image /fr/docs/conflicting/Web/CSS/mask-image +/fr/docs/Web/CSS/-webkit-print-color-adjust /fr/docs/Web/CSS/print-color-adjust /fr/docs/Web/CSS/:-moz-placeholder /fr/docs/Web/CSS/:placeholder-shown /fr/docs/Web/CSS/:-moz-ui-invalid /fr/docs/Web/CSS/:user-invalid /fr/docs/Web/CSS/:-moz-ui-valid /fr/docs/orphaned/Web/CSS/:-moz-ui-valid @@ -4186,6 +4187,7 @@ /fr/docs/Web/CSS/auto /fr/docs/conflicting/Web/CSS/width /fr/docs/Web/CSS/calc /fr/docs/Web/CSS/calc() /fr/docs/Web/CSS/clamp /fr/docs/Web/CSS/clamp() +/fr/docs/Web/CSS/color-adjust /fr/docs/conflicting/Web/CSS/print-color-adjust /fr/docs/Web/CSS/conic-gradient /fr/docs/orphaned/Web/CSS/conic-gradient() /fr/docs/Web/CSS/conic-gradient() /fr/docs/orphaned/Web/CSS/conic-gradient() /fr/docs/Web/CSS/counter /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 31db3f6c96..a65b7be9f1 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -22711,14 +22711,6 @@ "alhuno1" ] }, - "Web/CSS/-webkit-print-color-adjust": { - "modified": "2020-10-15T21:28:10.335Z", - "contributors": [ - "SphinxKnight", - "CuteRabbit", - "louuis" - ] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-04-26T02:53:32.938Z", "contributors": [ @@ -26792,12 +26784,6 @@ "VincentN" ] }, - "Web/CSS/color-adjust": { - "modified": "2020-10-15T22:07:37.043Z", - "contributors": [ - "SphinxKnight" - ] - }, "Web/CSS/color_value": { "modified": "2020-10-15T21:15:21.928Z", "contributors": [ @@ -28814,6 +28800,14 @@ "SphinxKnight" ] }, + "Web/CSS/print-color-adjust": { + "modified": "2020-10-15T21:28:10.335Z", + "contributors": [ + "SphinxKnight", + "CuteRabbit", + "louuis" + ] + }, "Web/CSS/quotes": { "modified": "2020-10-15T21:08:51.774Z", "contributors": [ @@ -43404,6 +43398,12 @@ "ZorGleH" ] }, + "conflicting/Web/CSS/print-color-adjust": { + "modified": "2020-10-15T22:07:37.043Z", + "contributors": [ + "SphinxKnight" + ] + }, "conflicting/Web/CSS/scroll-snap-type": { "modified": "2019-03-18T21:33:34.445Z", "contributors": [ diff --git a/files/fr/conflicting/web/css/print-color-adjust/index.md b/files/fr/conflicting/web/css/print-color-adjust/index.md new file mode 100644 index 0000000000..f5c858f98c --- /dev/null +++ b/files/fr/conflicting/web/css/print-color-adjust/index.md @@ -0,0 +1,99 @@ +--- +title: color-adjust +slug: conflicting/Web/CSS/print-color-adjust +tags: + - CSS + - Propriété + - Reference + - Web + - color-adjust +translation_of: Web/CSS/color-adjust +original_slug: Web/CSS/color-adjust +--- +{{CSSRef}} + +La propriété CSS **`color-adjust`** contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé. + +{{EmbedInteractiveExample("pages/css/color-adjust.html")}} + +Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), `#411` qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (`black` pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité. + +## Syntaxe + + color-adjust: economy; + color-adjust: exact; + +La valeur de la propriété `color-adjust` peut être un de ces deux mots-clés. + +### Valeurs + +- `economy` + - : L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut. +- **`exact`** + - : Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité. + +### Syntaxe formelle + +{{csssyntax}} + +## Notes d'utilisation + +Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS : + +- Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple).. +- Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses. +- Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc. + +Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur `color-adjust`. Autrement dit, il n'est pas absolument certain que `color-adjust` ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer `color-adjust` dans chaque situation. + +## Exemples + +Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc `color-adjust: exact` qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit. + +### CSS + +```css +.ma-boite { +  background-color: black; +  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); +  color: #900; +  width: 15rem; +  height: 6rem; +  text-align: center; +  font: 24px "Helvetica", sans-serif; +  display: flex; +  align-items: center; +  justify-content: center; + color-adjust: exact; +} +``` + +### HTML + +```html +
+ 

Il nous faut plus de contraste !

+
+``` + +### Résultat + +{{EmbedLiveSample("Exemples", 640, 120)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}} | {{Spec2('CSS Color Adjust')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.color-adjust")}} + +## Voir aussi + +- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Appliquer_des_couleurs) +- Les autres propriétés CSS relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- {{cssxref("background-image")}} diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.md b/files/fr/web/css/-webkit-print-color-adjust/index.md deleted file mode 100644 index e90b61b925..0000000000 --- a/files/fr/web/css/-webkit-print-color-adjust/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: '-webkit-print-color-adjust' -slug: Web/CSS/-webkit-print-color-adjust -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-print-color-adjust ---- -{{CSSRef}}{{Non-standard_header}} - -La propriété **`-webkit-print-color-adjust`** est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit. - -```css -/* Valeurs avec un mot-clé */ --webkit-print-color-adjust: economy; --webkit-print-color-adjust: exact; - -/* Valeurs globales */ --webkit-print-color-adjust: inherit; --webkit-print-color-adjust: initial; --webkit-print-color-adjust: unset; -``` - -## Syntaxe - -La propriété `-webkit-print-color-adjust` peut être définie avec l'un des mots-clés suivants. - -### Valeurs - -- `economy` - - : Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression. -- `exact` - - : Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés. - -## Exemples - -```css -/* Force l'article à être imprimé en noir et blanc */ -article { - -webkit-print-color-adjust: exact; - background: #222; - color: #eee; -} -``` - -## Spécifications - -Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe [une proposition sur le wiki du groupe de travail CSS](https://wiki.csswg.org/ideas/print-backgrounds) pour standardiser cette propriété. - -## Compatibilité des navigateurs - -{{Compat("css.properties.-webkit-print-color-adjust")}} - -## Voir aussi - -- [Bug WebKit 64583](https://bugs.webkit.org/show_bug.cgi?id=64583) : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments. -- Wiki du groupe de travail CSS : [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - une proposition de standardisation pour cette propriété. -- La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) pour standardiser cette propriété. diff --git a/files/fr/web/css/color-adjust/index.md b/files/fr/web/css/color-adjust/index.md deleted file mode 100644 index 919a592fad..0000000000 --- a/files/fr/web/css/color-adjust/index.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: color-adjust -slug: Web/CSS/color-adjust -tags: - - CSS - - Propriété - - Reference - - Web - - color-adjust -translation_of: Web/CSS/color-adjust ---- -{{CSSRef}} - -La propriété CSS **`color-adjust`** contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé. - -{{EmbedInteractiveExample("pages/css/color-adjust.html")}} - -Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), `#411` qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (`black` pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité. - -## Syntaxe - - color-adjust: economy; - color-adjust: exact; - -La valeur de la propriété `color-adjust` peut être un de ces deux mots-clés. - -### Valeurs - -- `economy` - - : L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut. -- **`exact`** - - : Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité. - -### Syntaxe formelle - -{{csssyntax}} - -## Notes d'utilisation - -Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS : - -- Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple).. -- Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses. -- Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc. - -Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur `color-adjust`. Autrement dit, il n'est pas absolument certain que `color-adjust` ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer `color-adjust` dans chaque situation. - -## Exemples - -Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc `color-adjust: exact` qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit. - -### CSS - -```css -.ma-boite { -  background-color: black; -  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); -  color: #900; -  width: 15rem; -  height: 6rem; -  text-align: center; -  font: 24px "Helvetica", sans-serif; -  display: flex; -  align-items: center; -  justify-content: center; - color-adjust: exact; -} -``` - -### HTML - -```html -
- 

Il nous faut plus de contraste !

-
-``` - -### Résultat - -{{EmbedLiveSample("Exemples", 640, 120)}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}} | {{Spec2('CSS Color Adjust')}} | Définition initiale. | - -{{cssinfo}} - -## Compatibilité des navigateurs - -{{Compat("css.properties.color-adjust")}} - -## Voir aussi - -- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Appliquer_des_couleurs) -- Les autres propriétés CSS relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} -- {{cssxref("background-image")}} diff --git a/files/fr/web/css/print-color-adjust/index.md b/files/fr/web/css/print-color-adjust/index.md new file mode 100644 index 0000000000..74e5753262 --- /dev/null +++ b/files/fr/web/css/print-color-adjust/index.md @@ -0,0 +1,61 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/print-color-adjust +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-print-color-adjust +original_slug: Web/CSS/-webkit-print-color-adjust +--- +{{CSSRef}}{{Non-standard_header}} + +La propriété **`-webkit-print-color-adjust`** est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit. + +```css +/* Valeurs avec un mot-clé */ +-webkit-print-color-adjust: economy; +-webkit-print-color-adjust: exact; + +/* Valeurs globales */ +-webkit-print-color-adjust: inherit; +-webkit-print-color-adjust: initial; +-webkit-print-color-adjust: unset; +``` + +## Syntaxe + +La propriété `-webkit-print-color-adjust` peut être définie avec l'un des mots-clés suivants. + +### Valeurs + +- `economy` + - : Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression. +- `exact` + - : Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés. + +## Exemples + +```css +/* Force l'article à être imprimé en noir et blanc */ +article { + -webkit-print-color-adjust: exact; + background: #222; + color: #eee; +} +``` + +## Spécifications + +Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe [une proposition sur le wiki du groupe de travail CSS](https://wiki.csswg.org/ideas/print-backgrounds) pour standardiser cette propriété. + +## Compatibilité des navigateurs + +{{Compat("css.properties.-webkit-print-color-adjust")}} + +## Voir aussi + +- [Bug WebKit 64583](https://bugs.webkit.org/show_bug.cgi?id=64583) : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments. +- Wiki du groupe de travail CSS : [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - une proposition de standardisation pour cette propriété. +- La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) pour standardiser cette propriété. diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index e511d50334..ffb19699e1 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3626,6 +3626,7 @@ /ja/docs/Web/CSS/-moz-zoom-out /ja/docs/Web/CSS/cursor /ja/docs/Web/CSS/-ms-high-contrast /ja/docs/Web/CSS/@media/-ms-high-contrast /ja/docs/Web/CSS/-ms-scroll-snap-type /ja/docs/Web/CSS/scroll-snap-type +/ja/docs/Web/CSS/-webkit-print-color-adjust /ja/docs/Web/CSS/print-color-adjust /ja/docs/Web/CSS/:-moz-placeholder /ja/docs/Web/CSS/:placeholder-shown /ja/docs/Web/CSS/:-ms-input-placeholder /ja/docs/Web/CSS/:placeholder-shown /ja/docs/Web/CSS/:-webkit-autofill /ja/docs/Web/CSS/:autofill @@ -3730,6 +3731,7 @@ /ja/docs/Web/CSS/box_model /ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model /ja/docs/Web/CSS/calc /ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/clamp /ja/docs/Web/CSS/clamp() +/ja/docs/Web/CSS/color-adjust /ja/docs/conflicting/Web/CSS/print-color-adjust /ja/docs/Web/CSS/conic-gradient /ja/docs/Web/CSS/gradient/conic-gradient() /ja/docs/Web/CSS/conic-gradient() /ja/docs/Web/CSS/gradient/conic-gradient() /ja/docs/Web/CSS/counter /ja/docs/Web/CSS/counter() diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 673d001d2e..b3c7660de8 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -26833,12 +26833,6 @@ "mfuji09" ] }, - "Web/CSS/-webkit-print-color-adjust": { - "modified": "2020-10-15T22:16:00.721Z", - "contributors": [ - "isudzumi" - ] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-04-25T10:41:36.517Z", "contributors": [ @@ -30273,12 +30267,6 @@ "Marsf" ] }, - "Web/CSS/color-adjust": { - "modified": "2020-10-15T22:13:00.476Z", - "contributors": [ - "mfuji09" - ] - }, "Web/CSS/color_value": { "modified": "2020-10-15T21:14:39.477Z", "contributors": [ @@ -32233,6 +32221,12 @@ "sosleepy" ] }, + "Web/CSS/print-color-adjust": { + "modified": "2020-10-15T22:16:00.721Z", + "contributors": [ + "isudzumi" + ] + }, "Web/CSS/quotes": { "modified": "2020-10-15T21:20:00.470Z", "contributors": [ @@ -48617,6 +48611,12 @@ "hommaam" ] }, + "conflicting/Web/CSS/print-color-adjust": { + "modified": "2020-10-15T22:13:00.476Z", + "contributors": [ + "mfuji09" + ] + }, "conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking": { "modified": "2020-08-12T12:42:41.854Z", "contributors": [ diff --git a/files/ja/conflicting/web/css/print-color-adjust/index.md b/files/ja/conflicting/web/css/print-color-adjust/index.md new file mode 100644 index 0000000000..4c585c7108 --- /dev/null +++ b/files/ja/conflicting/web/css/print-color-adjust/index.md @@ -0,0 +1,116 @@ +--- +title: color-adjust +slug: conflicting/Web/CSS/print-color-adjust +tags: + - Adjusting Colors + - CSS + - CSS 色 + - CSS プロパティ + - HTML 色 + - HTML スタイル + - レイアウト + - 標準外 + - リファレンス + - Styling HTML + - Styling text + - ウェブ + - color-adjust + - recipe:css-property +translation_of: Web/CSS/color-adjust +original_slug: Web/CSS/color-adjust +browser-compat: css.properties.color-adjust +--- +{{CSSRef}} + +**`color-adjust`** は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。 + +## 構文 + +```css +color-adjust: economy; +color-adjust: exact; + +/* グローバル値 */ +color-adjust: inherit; +color-adjust: initial; +color-adjust: revert; +color-adjust: unset; +``` + +`color-adjust` プロパティの値は、以下のキーワードのうちの一つでなければなりません。 + +### 値 + +- `economy` + - : ユーザーエージェントは、描画する機器に合わせて出力を最適化するために、適切かつ賢明と思われるように要素に調整を行うことができます。例えば印刷時に、ブラウザーは背景画像をすべて削除し、白い紙で読むのに最適なコントラストになるようにテキストの色を調整することができます。これが既定値です。 +- **`exact`** + - : その要素の内容物は、色、画像、スタイルを思慮深く、または重要な方法で使用するために、特別に注意深く作られたものであり、ブラウザーによって変更されると、事態が改善されるどころか、むしろ悪化する可能性があります。内容物の外観は、ユーザーの要求以外で変更してはいけません。例えば、ページに背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストがあるとします。背景色を削除すると、内容物の読みやすさが損なわれます。 + +## 使用上の注意 + +ブラウザーが指定された外観から外したいと思う理由はいくつかあります。 + +- 内容物が、その出力機器上ではテキストと背景の色が似たような色になってしまう場合に、読みやすくするため。 +- 出力機器がプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。 +- ページを印刷するとき、ブラウザーは、暗い背景と明るい色のテキストを、白い背景と濃い色のテキストに置き換えようとするかもしれません。 + +色や画像の使用を制御するために、ユーザーエージェントがユーザーに提供しているオプションは、`color-adjust` の値よりも優先されます。言い換えれば、`color-adjust` が何かをするという保証はありません。ユーザーが動作を上書きできるだけでなく、各ユーザーエージェントは、与えられた状況で `color-adjust` をどのように扱うかを自分で決定することができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +

低コントラストの維持

+ +この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、`color-adjust: exact` を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。 + +#### CSS + +```css +.my-box { + background-color: black; + background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); + color: #900; + width: 15rem; + height: 6rem; + text-align: center; + font: 24px "Helvetica", sans-serif; + display: flex; + align-items: center; + justify-content: center; + color-adjust: exact; +} +``` + +#### HTML + +```html +
+

Need more contrast!

+
+``` + +#### 結果 + +{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}} +- {{cssxref("background-image")}} +- {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/ja/web/css/-webkit-print-color-adjust/index.md b/files/ja/web/css/-webkit-print-color-adjust/index.md deleted file mode 100644 index 0683ceb290..0000000000 --- a/files/ja/web/css/-webkit-print-color-adjust/index.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: '-webkit-print-color-adjust' -slug: Web/CSS/-webkit-print-color-adjust -tags: - - CSS - - CSS プロパティ - - レイアウト - - 標準外 - - ウェブ - - recipe:css-property -browser-compat: css.properties.-webkit-print-color-adjust -translation_of: Web/CSS/-webkit-print-color-adjust ---- -{{CSSRef}}{{Non-standard_header}} - -**`-webkit-print-color-adjust`** プロパティは標準外の CSS 拡張で、 WebKit ブラウザー上で印刷時に背景色や背景画像の表示を強制することができます。 - -```css -/* キーワード値 */ --webkit-print-color-adjust: economy; --webkit-print-color-adjust: exact; - -/* グローバル値 */ --webkit-print-color-adjust: inherit; --webkit-print-color-adjust: initial; --webkit-print-color-adjust: unset; -``` - -## 構文 - -`-webkit-print-color-adjust` プロパティは以下のキーワード値のうちの一つで指定します。 - -### 値 - -- `economy` - - : 通常の動作です。背景色や背景画像は、ブラウザーの印刷設定ダイアログで、ユーザーが明示的に許可した場合のみ印刷されます。 -- `exact` - - : このルールが適用された要素の背景色や背景画像は常に印刷されます。ユーザーの印刷設定は上書きされます。 - -## 公式定義 - -{{CSSInfo}} - -## 形式文法 - -{{CSSSyntax}} - -## 例 - -### 強制的に白黒で印刷する - -```css -article { - -webkit-print-color-adjust: exact; - background: #222; - color: #eee; -} -``` - -## 仕様書 - -まだ標準には含まれていませんが、標準化を行う[CSSWG wiki の提案](https://wiki.csswg.org/ideas/print-backgrounds)があります。 - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- WebKit [bug 64583](https://bugs.webkit.org/show_bug.cgi?id=64583): "WIP: Add CSS property to control printing of backgrounds for individual elements" -- CSSWG wiki: [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - このプロパティを標準化する提案 -- CSS Color Module Level 4: [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) プロパティ - このプロパティの標準化のより新しい提案 diff --git a/files/ja/web/css/color-adjust/index.md b/files/ja/web/css/color-adjust/index.md deleted file mode 100644 index 5dd07edb2a..0000000000 --- a/files/ja/web/css/color-adjust/index.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: color-adjust -slug: Web/CSS/color-adjust -tags: - - Adjusting Colors - - CSS - - CSS 色 - - CSS プロパティ - - HTML 色 - - HTML スタイル - - レイアウト - - 標準外 - - リファレンス - - Styling HTML - - Styling text - - ウェブ - - color-adjust - - recipe:css-property -browser-compat: css.properties.color-adjust -translation_of: Web/CSS/color-adjust ---- -{{CSSRef}} - -**`color-adjust`** は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。 - -## 構文 - -```css -color-adjust: economy; -color-adjust: exact; - -/* グローバル値 */ -color-adjust: inherit; -color-adjust: initial; -color-adjust: revert; -color-adjust: unset; -``` - -`color-adjust` プロパティの値は、以下のキーワードのうちの一つでなければなりません。 - -### 値 - -- `economy` - - : ユーザーエージェントは、描画する機器に合わせて出力を最適化するために、適切かつ賢明と思われるように要素に調整を行うことができます。例えば印刷時に、ブラウザーは背景画像をすべて削除し、白い紙で読むのに最適なコントラストになるようにテキストの色を調整することができます。これが既定値です。 -- **`exact`** - - : その要素の内容物は、色、画像、スタイルを思慮深く、または重要な方法で使用するために、特別に注意深く作られたものであり、ブラウザーによって変更されると、事態が改善されるどころか、むしろ悪化する可能性があります。内容物の外観は、ユーザーの要求以外で変更してはいけません。例えば、ページに背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストがあるとします。背景色を削除すると、内容物の読みやすさが損なわれます。 - -## 使用上の注意 - -ブラウザーが指定された外観から外したいと思う理由はいくつかあります。 - -- 内容物が、その出力機器上ではテキストと背景の色が似たような色になってしまう場合に、読みやすくするため。 -- 出力機器がプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。 -- ページを印刷するとき、ブラウザーは、暗い背景と明るい色のテキストを、白い背景と濃い色のテキストに置き換えようとするかもしれません。 - -色や画像の使用を制御するために、ユーザーエージェントがユーザーに提供しているオプションは、`color-adjust` の値よりも優先されます。言い換えれば、`color-adjust` が何かをするという保証はありません。ユーザーが動作を上書きできるだけでなく、各ユーザーエージェントは、与えられた状況で `color-adjust` をどのように扱うかを自分で決定することができます。 - -## 公式定義 - -{{cssinfo}} - -## 形式文法 - -{{csssyntax}} - -## 例 - -

低コントラストの維持

- -この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、`color-adjust: exact` を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。 - -#### CSS - -```css -.my-box { - background-color: black; - background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); - color: #900; - width: 15rem; - height: 6rem; - text-align: center; - font: 24px "Helvetica", sans-serif; - display: flex; - align-items: center; - justify-content: center; - color-adjust: exact; -} -``` - -#### HTML - -```html -
-

Need more contrast!

-
-``` - -#### 結果 - -{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) -- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}} -- {{cssxref("background-image")}} -- {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/ja/web/css/print-color-adjust/index.md b/files/ja/web/css/print-color-adjust/index.md new file mode 100644 index 0000000000..a7932c3e4e --- /dev/null +++ b/files/ja/web/css/print-color-adjust/index.md @@ -0,0 +1,73 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/print-color-adjust +tags: + - CSS + - CSS プロパティ + - レイアウト + - 標準外 + - ウェブ + - recipe:css-property +translation_of: Web/CSS/-webkit-print-color-adjust +original_slug: Web/CSS/-webkit-print-color-adjust +browser-compat: css.properties.-webkit-print-color-adjust +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-print-color-adjust`** プロパティは標準外の CSS 拡張で、 WebKit ブラウザー上で印刷時に背景色や背景画像の表示を強制することができます。 + +```css +/* キーワード値 */ +-webkit-print-color-adjust: economy; +-webkit-print-color-adjust: exact; + +/* グローバル値 */ +-webkit-print-color-adjust: inherit; +-webkit-print-color-adjust: initial; +-webkit-print-color-adjust: unset; +``` + +## 構文 + +`-webkit-print-color-adjust` プロパティは以下のキーワード値のうちの一つで指定します。 + +### 値 + +- `economy` + - : 通常の動作です。背景色や背景画像は、ブラウザーの印刷設定ダイアログで、ユーザーが明示的に許可した場合のみ印刷されます。 +- `exact` + - : このルールが適用された要素の背景色や背景画像は常に印刷されます。ユーザーの印刷設定は上書きされます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### 強制的に白黒で印刷する + +```css +article { + -webkit-print-color-adjust: exact; + background: #222; + color: #eee; +} +``` + +## 仕様書 + +まだ標準には含まれていませんが、標準化を行う[CSSWG wiki の提案](https://wiki.csswg.org/ideas/print-backgrounds)があります。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- WebKit [bug 64583](https://bugs.webkit.org/show_bug.cgi?id=64583): "WIP: Add CSS property to control printing of backgrounds for individual elements" +- CSSWG wiki: [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - このプロパティを標準化する提案 +- CSS Color Module Level 4: [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) プロパティ - このプロパティの標準化のより新しい提案 -- cgit v1.2.3-54-g00ecf