From df821208c608de1b7cdc6fe69ae28724ac1f01a0 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 14 Oct 2021 00:47:38 +0000 Subject: [CRON] sync translated content --- files/es/_redirects.txt | 3 +- files/es/_wikihistory.json | 12 +- .../media_queries/using_media_queries/index.html | 395 ++++++++++++++++++++ .../responsive/media_types/index.html | 395 -------------------- files/fr/_redirects.txt | 11 +- files/fr/_wikihistory.json | 56 +-- .../web/api/keyframeeffect/keyframeeffect/index.md | 56 +++ files/fr/web/api/effecttiming/delay/index.md | 73 ---- files/fr/web/api/effecttiming/index.md | 56 --- .../web/api/keyframeeffect/keyframeeffect/index.md | 73 ++++ .../media_queries/using_media_queries/index.html | 397 ++++++++++++++++++++ .../responsive/media_types/index.html | 397 -------------------- files/ja/_redirects.txt | 14 +- files/ja/_wikihistory.json | 80 ++-- .../web/api/credentialscontainer/create/index.html | 105 ++++++ .../index.html | 147 ++++++++ .../media_queries/using_media_queries/index.html | 406 +++++++++++++++++++++ .../web/api/credentialscontainer/create/index.html | 107 ++++++ files/ja/web/api/effecttiming/index.html | 64 ---- .../api/keyframeeffect/keyframeeffect/index.html | 65 ++++ .../authenticatorselection/index.html | 106 ------ .../excludecredentials/index.html | 104 ------ .../publickeycredentialcreationoptions/index.html | 145 -------- files/ja/web/api/rtcconfiguration/index.html | 64 ---- .../rtcpeerconnection/rtcpeerconnection/index.html | 65 ++++ .../responsive/media_types/index.html | 405 -------------------- files/ko/_redirects.txt | 12 +- files/ko/_wikihistory.json | 26 +- .../rtcpeerconnection/rtcpeerconnection/index.html | 98 +++++ .../media_queries/using_media_queries/index.html | 347 ++++++++++++++++++ files/ko/web/api/rtcconfiguration/index.html | 97 ----- .../responsive/media_types/index.html | 347 ------------------ files/pl/_redirects.txt | 7 +- files/pl/_wikihistory.json | 24 +- .../media_queries/using_media_queries/index.html | 319 ++++++++++++++++ .../responsive/media_types/index.html | 319 ---------------- files/ru/_redirects.txt | 1 + files/ru/_wikihistory.json | 12 +- files/ru/web/api/effecttiming/index.html | 73 ---- .../api/keyframeeffect/keyframeeffect/index.html | 74 ++++ files/zh-cn/_redirects.txt | 12 +- files/zh-cn/_wikihistory.json | 60 +-- .../api/keyframeeffect/keyframeeffect/index.html | 79 ++++ .../rtcpeerconnection/rtcpeerconnection/index.html | 67 ++++ .../media_queries/using_media_queries/index.html | 390 ++++++++++++++++++++ files/zh-cn/web/api/effecttiming/easing/index.html | 105 ------ files/zh-cn/web/api/effecttiming/index.html | 78 ---- .../api/keyframeeffect/keyframeeffect/index.html | 106 ++++++ files/zh-cn/web/api/rtcconfiguration/index.html | 66 ---- .../responsive/media_types/index.html | 390 -------------------- 50 files changed, 3460 insertions(+), 3450 deletions(-) create mode 100644 files/es/conflicting/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/es/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md delete mode 100644 files/fr/web/api/effecttiming/delay/index.md delete mode 100644 files/fr/web/api/effecttiming/index.md create mode 100644 files/fr/web/api/keyframeeffect/keyframeeffect/index.md create mode 100644 files/fr/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/fr/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/ja/conflicting/web/api/credentialscontainer/create/index.html create mode 100644 files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html create mode 100644 files/ja/conflicting/web/css/media_queries/using_media_queries/index.html create mode 100644 files/ja/web/api/credentialscontainer/create/index.html delete mode 100644 files/ja/web/api/effecttiming/index.html create mode 100644 files/ja/web/api/keyframeeffect/keyframeeffect/index.html delete mode 100644 files/ja/web/api/publickeycredentialcreationoptions/authenticatorselection/index.html delete mode 100644 files/ja/web/api/publickeycredentialcreationoptions/excludecredentials/index.html delete mode 100644 files/ja/web/api/publickeycredentialcreationoptions/index.html delete mode 100644 files/ja/web/api/rtcconfiguration/index.html create mode 100644 files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.html delete mode 100644 files/ja/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/ko/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html create mode 100644 files/ko/conflicting/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/ko/web/api/rtcconfiguration/index.html delete mode 100644 files/ko/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/pl/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pl/web/progressive_web_apps/responsive/media_types/index.html delete mode 100644 files/ru/web/api/effecttiming/index.html create mode 100644 files/ru/web/api/keyframeeffect/keyframeeffect/index.html create mode 100644 files/zh-cn/conflicting/web/api/keyframeeffect/keyframeeffect/index.html create mode 100644 files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html create mode 100644 files/zh-cn/conflicting/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/zh-cn/web/api/effecttiming/easing/index.html delete mode 100644 files/zh-cn/web/api/effecttiming/index.html create mode 100644 files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html delete mode 100644 files/zh-cn/web/api/rtcconfiguration/index.html delete mode 100644 files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index a224a5b8a0..1f7c5887bb 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1670,7 +1670,7 @@ /es/docs/Web/CSS/Gradiente /es/docs/Web/CSS/gradient /es/docs/Web/CSS/Herramientas /es/docs/conflicting/Web/CSS /es/docs/Web/CSS/Introducción/Content /es/docs/Learn/CSS/Howto/Generated_content -/es/docs/Web/CSS/Introducción/Media /es/docs/Web/Progressive_web_apps/Responsive/Media_types +/es/docs/Web/CSS/Introducción/Media /es/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS /es/docs/Learn/CSS/Howto/CSS_FAQ /es/docs/Web/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudo-elements /es/docs/Web/CSS/Referencia_CSS /es/docs/Web/CSS/Reference @@ -2497,6 +2497,7 @@ /es/docs/Web/Performance/mejorando_rendimienot_inicial /es/docs/Web/Performance/Optimizing_startup_performance /es/docs/Web/Progressive_web_apps/Developer_guide/Instalar /es/docs/Web/Progressive_web_apps/Installing /es/docs/Web/Progressive_web_apps/Developer_guide/Installing /es/docs/Web/Progressive_web_apps/Installing +/es/docs/Web/Progressive_web_apps/Responsive/Media_types /es/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /es/docs/Web/Reference/Events /es/docs/Web/Events /es/docs/Web/Reference/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event /es/docs/Web/Reference/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 1c5f685def..0621825c2c 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -20376,12 +20376,6 @@ "Nachec" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2019-03-18T21:15:11.297Z", - "contributors": [ - "luismj" - ] - }, "Web/SVG": { "modified": "2019-03-23T23:44:20.243Z", "contributors": [ @@ -21529,6 +21523,12 @@ "miguelsp" ] }, + "conflicting/Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-03-18T21:15:11.297Z", + "contributors": [ + "luismj" + ] + }, "conflicting/Web/CSS/cursor": { "modified": "2019-03-23T22:35:57.612Z", "contributors": [ diff --git a/files/es/conflicting/web/css/media_queries/using_media_queries/index.html b/files/es/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..f585d9f669 --- /dev/null +++ b/files/es/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,395 @@ +--- +title: Media +slug: conflicting/Web/CSS/Media_Queries/Using_media_queries +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

+ +

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

+ +

Información: Media

+ +

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

+ +

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

+ +

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

+ +
+
Ejemplo
+ +

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

+ +

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

+ +

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

Algunos de los tipos de medios comunes son:

+ + + + + + + + + + + + + + + + + + + + +
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
+ +
+
Mas detalles
+ +

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

+ +

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

+ +

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

+ +

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

+ +

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

+ +

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

+
+ +

Imprimir

+ +

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

+ +

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

+ +

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

+ +

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

+ +
+
Ejemplo
+ +

Esta regla determina los márgenes a una pulgada en todos los lados:

+ +
@page {margin: 1in;}
+
+ +

Esta regla asegura que cada elemento H1 empiece en una nueva página:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
Más detalles
+ +

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

+ +

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

+
+ +

Interfaces de Usuario

+ +

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

+ +

No existe un tipo especial de medio para aparatos con interfaz de usuario.

+ +

Si existen cinco selectores especiales:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
+ +
+

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

+
+ +

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

+ +

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
+ +

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

+ +

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

+ +
+
Ejemplo
+ +

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+ +

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+ +

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

+
+ +
+
Más detalles
+ +

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

+ +

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

+
+ +

Acción: Imprimir un documento

+ +
    +
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. +
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. +

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

+ +

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

+
+ +

Ver soluciones a estos retos.

+ +

¿Qué sigue?

+ +

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

+ +

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git a/files/es/web/progressive_web_apps/responsive/media_types/index.html b/files/es/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index 122b374df8..0000000000 --- a/files/es/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Media -slug: Web/Progressive_web_apps/Responsive/Media_types -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/CSS/Introducción/Media ---- -

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

- -

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

- -

Información: Media

- -

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

- -

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

- -

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

- -
-
Ejemplo
- -

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

- -

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

- -

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

- -
@media print {
-  #nav-area {display: none;}
-  }
-
-
- -

Algunos de los tipos de medios comunes son:

- - - - - - - - - - - - - - - - - - - - -
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
- -
-
Mas detalles
- -

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

- -

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

- -

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

- -

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

- -

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

- -

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

-
- -

Imprimir

- -

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

- -

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

- -

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

- -

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

- -
-
Ejemplo
- -

Esta regla determina los márgenes a una pulgada en todos los lados:

- -
@page {margin: 1in;}
-
- -

Esta regla asegura que cada elemento H1 empiece en una nueva página:

- -
h1 {page-break-before: always;}
-
-
- -
-
Más detalles
- -

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

- -

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

-
- -

Interfaces de Usuario

- -

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

- -

No existe un tipo especial de medio para aparatos con interfaz de usuario.

- -

Si existen cinco selectores especiales:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
- -
-

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

-
- -

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

- -

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

- - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
- -

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

- -

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

- -
-
Ejemplo
- -

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

- -
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
- -

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

- - - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
disablednormalactive
-
- -

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

-
- -
-
Más detalles
- -

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

- -

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

-
- -

Acción: Imprimir un documento

- -
    -
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h1>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. -
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section A
    - -
    This is the first section...
    - -
    Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section B
    - -
    This is the second section...
    - -
    Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - - -
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. -

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

- -

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

-
- -

Ver soluciones a estos retos.

- -

¿Qué sigue?

- -

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

- -

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 932b674e10..a425e2ef8d 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -433,7 +433,7 @@ /fr/docs/CSS/Premiers_pas/Les_sélecteurs /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors_9bc80fea302c91cd60fb72c4e83c83e9 /fr/docs/CSS/Premiers_pas/Listes /fr/docs/conflicting/Learn/CSS/Styling_text/Styling_lists_06e9538892250c13976a84639f0dadd2 /fr/docs/CSS/Premiers_pas/Mise_en_page /fr/docs/conflicting/Learn/CSS/CSS_layout -/fr/docs/CSS/Premiers_pas/Médias /fr/docs/Web/Progressive_web_apps/Responsive/Media_types +/fr/docs/CSS/Premiers_pas/Médias /fr/docs/Web/CSS/Media_Queries/Using_media_queries /fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_ecbda2160290b96c02dcfa8276c0333a /fr/docs/CSS/Premiers_pas/Présentation_des_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_dba75d8c56ccc773f03d946ce2dbb25c /fr/docs/CSS/Premiers_pas/Styles_de_texte /fr/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_8249b1bf53d09b06ed51f43697880b5b @@ -747,7 +747,7 @@ /fr/docs/CSS:Premiers_pas:Les_sélecteurs /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors_9bc80fea302c91cd60fb72c4e83c83e9 /fr/docs/CSS:Premiers_pas:Listes /fr/docs/conflicting/Learn/CSS/Styling_text/Styling_lists_06e9538892250c13976a84639f0dadd2 /fr/docs/CSS:Premiers_pas:Mise_en_page /fr/docs/conflicting/Learn/CSS/CSS_layout -/fr/docs/CSS:Premiers_pas:Médias /fr/docs/Web/Progressive_web_apps/Responsive/Media_types +/fr/docs/CSS:Premiers_pas:Médias /fr/docs/Web/CSS/Media_Queries/Using_media_queries /fr/docs/CSS:Premiers_pas:Pourquoi_utiliser_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_ecbda2160290b96c02dcfa8276c0333a /fr/docs/CSS:Premiers_pas:Présentation_des_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_dba75d8c56ccc773f03d946ce2dbb25c /fr/docs/CSS:Premiers_pas:Styles_de_texte /fr/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_8249b1bf53d09b06ed51f43697880b5b @@ -3459,8 +3459,8 @@ /fr/docs/Web/API/API_fichier_systeme /fr/docs/Web/API/File_and_Directory_Entries_API /fr/docs/Web/API/AbstractWorker /fr/docs/orphaned/Web/API/AbstractWorker /fr/docs/Web/API/Ambient_Light_Events /fr/docs/orphaned/Web/API/Ambient_Light_Events -/fr/docs/Web/API/AnimationEffectTimingProperties /fr/docs/Web/API/EffectTiming -/fr/docs/Web/API/AnimationEffectTimingProperties/delay /fr/docs/Web/API/EffectTiming/delay +/fr/docs/Web/API/AnimationEffectTimingProperties /fr/docs/conflicting/Web/API/KeyframeEffect/KeyframeEffect +/fr/docs/Web/API/AnimationEffectTimingProperties/delay /fr/docs/Web/API/KeyframeEffect/KeyframeEffect /fr/docs/Web/API/AnimationEvent.animationName /fr/docs/Web/API/AnimationEvent/animationName /fr/docs/Web/API/AnimationEvent.elapsedTime /fr/docs/Web/API/AnimationEvent/elapsedTime /fr/docs/Web/API/AnimationEvent.pseudoElement /fr/docs/Web/API/AnimationEvent/pseudoElement @@ -3546,6 +3546,8 @@ /fr/docs/Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C /fr/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core /fr/docs/Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple /fr/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example /fr/docs/Web/API/DoubleRange /fr/docs/Web/API/MediaTrackConstraints +/fr/docs/Web/API/EffectTiming /fr/docs/conflicting/Web/API/KeyframeEffect/KeyframeEffect +/fr/docs/Web/API/EffectTiming/delay /fr/docs/Web/API/KeyframeEffect/KeyframeEffect /fr/docs/Web/API/Element.activeElement /fr/docs/Web/API/Document/activeElement /fr/docs/Web/API/Element.addEventListener /fr/docs/Web/API/EventTarget/addEventListener /fr/docs/Web/API/Element.appendChild /fr/docs/Web/API/Node/appendChild @@ -5488,6 +5490,7 @@ /fr/docs/Web/Progressive_web_apps/Progressive /fr/docs/conflicting/Web/Progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf /fr/docs/Web/Progressive_web_apps/Re-engageable /fr/docs/conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 /fr/docs/Web/Progressive_web_apps/Relancer_Via_Notifications_Push /fr/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push +/fr/docs/Web/Progressive_web_apps/Responsive/Media_types /fr/docs/Web/CSS/Media_Queries/Using_media_queries /fr/docs/Web/Progressive_web_apps/Securisee /fr/docs/conflicting/Web/Progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b /fr/docs/Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs /fr/docs/Web/Progressive_web_apps/Add_to_home_screen /fr/docs/Web/Reference /fr/docs/orphaned/Web/Reference diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index c76201163e..44ad23bfb9 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -14638,21 +14638,6 @@ "loella16" ] }, - "Web/API/EffectTiming": { - "modified": "2019-03-23T22:28:24.754Z", - "contributors": [ - "SphinxKnight", - "HereComesJuju", - "rachelnabors" - ] - }, - "Web/API/EffectTiming/delay": { - "modified": "2019-03-23T22:28:20.379Z", - "contributors": [ - "SphinxKnight", - "HereComesJuju" - ] - }, "Web/API/Element": { "modified": "2020-11-10T21:11:37.745Z", "contributors": [ @@ -17982,6 +17967,13 @@ "tristantheb" ] }, + "Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2019-03-23T22:28:20.379Z", + "contributors": [ + "SphinxKnight", + "HereComesJuju" + ] + }, "Web/API/LocalFileSystem": { "modified": "2020-11-02T04:24:20.566Z", "contributors": [ @@ -25508,22 +25500,11 @@ ] }, "Web/CSS/Media_Queries/Using_media_queries": { - "modified": "2020-09-12T11:51:58.821Z", + "modified": "2019-03-24T00:11:03.641Z", "contributors": [ - "kgrandemange", - "tzilliox", - "SphinxKnight", - "JNa0", - "JeffD", - "Sebastianz", - "mrstork", - "malayaleecoder", - "adevoufera", "teoli", - "wakka27", - "infogenious", - "tregagnon", - "FredB", + "grandoc", + "Verruckt", "BenoitL" ] }, @@ -40379,15 +40360,6 @@ "poum" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2019-03-24T00:11:03.641Z", - "contributors": [ - "teoli", - "grandoc", - "Verruckt", - "BenoitL" - ] - }, "Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { "modified": "2019-03-18T20:52:18.105Z", "contributors": [ @@ -43173,6 +43145,14 @@ "Kalwyn" ] }, + "conflicting/Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2019-03-23T22:28:24.754Z", + "contributors": [ + "SphinxKnight", + "HereComesJuju", + "rachelnabors" + ] + }, "conflicting/Web/API/MediaTrackConstraints": { "modified": "2020-10-15T22:35:00.304Z", "contributors": [ diff --git a/files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md new file mode 100644 index 0000000000..fe343b77e6 --- /dev/null +++ b/files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md @@ -0,0 +1,56 @@ +--- +title: Animation Effect Timing Properties +slug: conflicting/Web/API/KeyframeEffect/KeyframeEffect +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Dictionnaire + - Experimental + - Interface + - Reference +translation_of: Web/API/EffectTiming +original_slug: Web/API/EffectTiming +--- +{{SeeCompatTable}}{{APIRef("Web Animations")}} + +Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée. + +Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin. + +## Propriétés + +- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}} + - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`. +- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}} + - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0. +- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}} + - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`. +- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}} + - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`. +- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}} + - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0. +- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}} + - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.EffectTiming")}} + +## Voir aussi + +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) +- {{domxref("Element.animate()")}} +- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} +- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} diff --git a/files/fr/web/api/effecttiming/delay/index.md b/files/fr/web/api/effecttiming/delay/index.md deleted file mode 100644 index c8480f04d4..0000000000 --- a/files/fr/web/api/effecttiming/delay/index.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Delay -slug: Web/API/EffectTiming/delay -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Experimental - - Propriété - - Reference -translation_of: Web/API/EffectTiming/delay -original_slug: Web/API/AnimationEffectTimingProperties/delay ---- -{{SeeCompatTable}}{{APIRef("Web Animations")}} - -La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. - -> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. - -## Syntaxe - - var timingProperties = { - delay: delayInMilliseconds - }; - - timingProperties.delay = delayInMilliseconds; - -### Valeur - -Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0. - -## Exemples - -Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage : - -```js -// Générateur de valeurs plus -// ou moins aléatoires -var getRandomMsRange = function(min, max) { - return Math.random() * (max - min) + min; -} - -// On parcourt l'ensemble des larmes -tears.forEach(function(el) { - - // On anime chacune des larmes - el.animate( - tearsFalling, - { - delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme - duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme - iterations: Infinity, - easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" - }); -}); -``` - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. | - -## Compatibilité des navigateurs - -{{Compat("api.EffectTiming.delay")}} - -## Voir aussi - -- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) -- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`) -- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}). -- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}} diff --git a/files/fr/web/api/effecttiming/index.md b/files/fr/web/api/effecttiming/index.md deleted file mode 100644 index a92f204fb7..0000000000 --- a/files/fr/web/api/effecttiming/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Animation Effect Timing Properties -slug: Web/API/EffectTiming -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Dictionnaire - - Experimental - - Interface - - Reference -translation_of: Web/API/EffectTiming -original_slug: Web/API/AnimationEffectTimingProperties ---- -{{SeeCompatTable}}{{APIRef("Web Animations")}} - -Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée. - -Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin. - -## Propriétés - -- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}} - - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0. -- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}} - - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`. -- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}} - - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0. -- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}} - - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`. -- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}} - - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0. -- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}} - - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`. -- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}} - - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0. -- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}} - - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe. - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("api.EffectTiming")}} - -## Voir aussi - -- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) -- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) -- {{domxref("Element.animate()")}} -- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} -- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} diff --git a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md new file mode 100644 index 0000000000..d07b0c664f --- /dev/null +++ b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md @@ -0,0 +1,73 @@ +--- +title: Delay +slug: Web/API/KeyframeEffect/KeyframeEffect +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Experimental + - Propriété + - Reference +translation_of: Web/API/EffectTiming/delay +original_slug: Web/API/EffectTiming/delay +--- +{{SeeCompatTable}}{{APIRef("Web Animations")}} + +La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. + +> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. + +## Syntaxe + + var timingProperties = { + delay: delayInMilliseconds + }; + + timingProperties.delay = delayInMilliseconds; + +### Valeur + +Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0. + +## Exemples + +Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage : + +```js +// Générateur de valeurs plus +// ou moins aléatoires +var getRandomMsRange = function(min, max) { + return Math.random() * (max - min) + min; +} + +// On parcourt l'ensemble des larmes +tears.forEach(function(el) { + + // On anime chacune des larmes + el.animate( + tearsFalling, + { + delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme + duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme + iterations: Infinity, + easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" + }); +}); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. | + +## Compatibilité des navigateurs + +{{Compat("api.EffectTiming.delay")}} + +## Voir aussi + +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`) +- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}). +- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}} diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..7c38602401 --- /dev/null +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,397 @@ +--- +title: Médias +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - CSS + - CSS:Premiers_pas +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +

 

+

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

+

Cette page revient sur le but et la structure des feuilles de style CSS.

+

Information : les médias

+

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

+

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

+

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

+ + + + + + + +
+ Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. +

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

+

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

+
+ 
+@media print {
+  #nav-area {display: none;}
+  }
+
+
+
+

Voici certains des types de média courants :

+ + + + + + + + + + + + + + + + + + + +
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
+

 

+ + + + + + + +
+ Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. +

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

+

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

+

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

+

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

+

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

+
+

 

+

Impression

+

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

+

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

+

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

+

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

+ + + + + + + +
+ Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : +
+ 
+@page {margin: 2cm;}
+
+
+

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

+
+ 
+h1 {page-break-before: always;}
+
+
+
+

 

+ + + + + + + +
+ Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. +

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

+
+

 

+

Interfaces utilisateur

+

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

+

Il n'y a pas de type de média spécial pour ce type de périphériques.

+

Voici les cinq sélecteurs spéciaux :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
+

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + +
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
+


+ Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

+

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

+

 

+ + + + + + + +
+ Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : +
+ 
+.bouton-vert {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.bouton-vert[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.bouton-vert:active {
+  border-style: inset;
+  }
+
+
+

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
+
+

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

+
+ + + + + + + +
+ Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. +

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

+
+

Action : impression d'un document

+

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Exemple à imprimer</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>Section A</H1>
+<P>Ceci est la première section...</P>
+
+<H1>Section B</H1>
+<P>Ceci est la seconde section...</P>
+
+<DIV id="en-tete-impression">
+Titre pour les médias paginés
+</DIV>
+
+<DIV id="pied-de-page-impression">
+Page :
+</DIV>
+
+</BODY>
+</HTML>
+
+
+

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
/*** Exemple d'impression ***/
+
+/* Réglages par défaut pour l'écran */
+#en-tete-impression,
+#pied-de-page-impression {
+  display: none;
+  }
+
+/* Uniquement pour l'impression */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#en-tete-impression {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#pied-de-page-impression {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#pied-de-page-impression:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* fin des paramètres pour l'impression */
+
+
+

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

+

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

+ + + + + + + +
+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section A
+
+ Ceci est la première section...
+
+ Page : 1
+
+
+ 		+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section B
+
+ Ceci est la seconde section...
+
+ Page : 2
+
+
+
+

 

+ + + + + + + +
+ Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. +

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

+

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

diff --git a/files/fr/web/progressive_web_apps/responsive/media_types/index.html b/files/fr/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index 05cafc4715..0000000000 --- a/files/fr/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Médias -slug: Web/Progressive_web_apps/Responsive/Media_types -tags: - - CSS - - CSS:Premiers_pas -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: CSS/Premiers_pas/Médias ---- -

 

-

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

-

Cette page revient sur le but et la structure des feuilles de style CSS.

-

Information : les médias

-

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

-

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

-

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

- - - - - - - -
- Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. -

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

-

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

-
- 
-@media print {
-  #nav-area {display: none;}
-  }
-
-
-
-

Voici certains des types de média courants :

- - - - - - - - - - - - - - - - - - - -
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
-

 

- - - - - - - -
- Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. -

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

-

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

-

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

-

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

-

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

-
-

 

-

Impression

-

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

-

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

-

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

-

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

- - - - - - - -
- Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : -
- 
-@page {margin: 2cm;}
-
-
-

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

-
- 
-h1 {page-break-before: always;}
-
-
-
-

 

- - - - - - - -
- Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. -

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

-
-

 

-

Interfaces utilisateur

-

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

-

Il n'y a pas de type de média spécial pour ce type de périphériques.

-

Voici les cinq sélecteurs spéciaux :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
-

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

- - - - - - - - - - - - - - - - - - - - - - - -
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
-


- Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

-

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

-

 

- - - - - - - -
- Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : -
- 
-.bouton-vert {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.bouton-vert[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.bouton-vert:active {
-  border-style: inset;
-  }
-
-
-

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

- - - - - - -
- - - - - - - - - - - - - - - - -
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
-
-

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

-
- - - - - - - -
- Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. -

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

-
-

Action : impression d'un document

-

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Exemple à imprimer</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Section A</H1>
-<P>Ceci est la première section...</P>
-
-<H1>Section B</H1>
-<P>Ceci est la seconde section...</P>
-
-<DIV id="en-tete-impression">
-Titre pour les médias paginés
-</DIV>
-
-<DIV id="pied-de-page-impression">
-Page :
-</DIV>
-
-</BODY>
-</HTML>
-
-
-

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
/*** Exemple d'impression ***/
-
-/* Réglages par défaut pour l'écran */
-#en-tete-impression,
-#pied-de-page-impression {
-  display: none;
-  }
-
-/* Uniquement pour l'impression */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#en-tete-impression {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#pied-de-page-impression {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#pied-de-page-impression:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* fin des paramètres pour l'impression */
-
-
-

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

-

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

- - - - - - - -
- - - - - - -
- - - - - - -
-
- Titre
-
- Section A
-
- Ceci est la première section...
-
- Page : 1
-
-
- 		- - - - - - -
- - - - - - -
-
- Titre
-
- Section B
-
- Ceci est la seconde section...
-
- Page : 2
-
-
-
-

 

- - - - - - - -
- Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. -

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

-

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 009dac7169..3eb6d9ea47 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -264,7 +264,7 @@ /ja/docs/CSS/Getting_Started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/CSS/Getting_Started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/CSS/Getting_Started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/CSS/Getting_Started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/CSS/Getting_Started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/CSS/Getting_Started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/CSS/Getting_Started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/CSS/Getting_Started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -2995,7 +2995,7 @@ /ja/docs/Web-d/Guide/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web-d/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web-d/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web-d/Guide/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web-d/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web-d/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -3069,6 +3069,7 @@ /ja/docs/Web/API/DocumentOrShadowRoot/styleSheets /ja/docs/Web/API/Document/styleSheets /ja/docs/Web/API/Document_Object_Model/Events /ja/docs/orphaned/Web/API/Document_Object_Model/Events /ja/docs/Web/API/Document_Object_Model/Preface /ja/docs/Web/API/Document_Object_Model +/ja/docs/Web/API/EffectTiming /ja/docs/Web/API/KeyframeEffect/KeyframeEffect /ja/docs/Web/API/Element.contentEditable /ja/docs/Web/API/HTMLElement/contentEditable /ja/docs/Web/API/Element.isContentEditable /ja/docs/Web/API/HTMLElement/isContentEditable /ja/docs/Web/API/Element.querySelector /ja/docs/Web/API/Element/querySelector @@ -3220,7 +3221,11 @@ /ja/docs/Web/API/Position /ja/docs/Web/API/GeolocationPosition /ja/docs/Web/API/PositionError /ja/docs/Web/API/GeolocationPositionError /ja/docs/Web/API/PositionOptions /ja/docs/conflicting/Web/API/Geolocation/getCurrentPosition +/ja/docs/Web/API/PublicKeyCredentialCreationOptions /ja/docs/conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270 +/ja/docs/Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection /ja/docs/Web/API/CredentialsContainer/create +/ja/docs/Web/API/PublicKeyCredentialCreationOptions/excludeCredentials /ja/docs/conflicting/Web/API/CredentialsContainer/create /ja/docs/Web/API/Push_API/Using_the_Push_API /ja/docs/Web/API/Push_API +/ja/docs/Web/API/RTCConfiguration /ja/docs/Web/API/RTCPeerConnection/RTCPeerConnection /ja/docs/Web/API/RTCIdentityErrorEvent /ja/docs/orphaned/Web/API/RTCIdentityErrorEvent /ja/docs/Web/API/RTCIdentityEvent /ja/docs/orphaned/Web/API/RTCIdentityEvent /ja/docs/Web/API/RTCSessionDescriptionCallback /ja/docs/orphaned/Web/API/RTCSessionDescriptionCallback @@ -3667,7 +3672,7 @@ /ja/docs/Web/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/Web/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/Web/CSS/Getting_started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -3865,7 +3870,7 @@ /ja/docs/Web/Guide/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/Guide/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -4327,6 +4332,7 @@ /ja/docs/Web/Manifest/serviceworker /ja/docs/orphaned/Web/Manifest/serviceworker /ja/docs/Web/Progressive_web_apps/Advantages /ja/docs/Web/Progressive_web_apps/Introduction /ja/docs/Web/Progressive_web_apps/Responsive /ja/docs/Web/Progressive_web_apps +/ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/Reference /ja/docs/Web /ja/docs/Web/Reference/API /ja/docs/Web/API /ja/docs/Web/Reference/Events /ja/docs/Web/Events diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 32bd46d27f..b9188fb05d 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -11782,6 +11782,12 @@ "mfuji09" ] }, + "Web/API/CredentialsContainer/create": { + "modified": "2020-10-15T22:26:48.406Z", + "contributors": [ + "mfuji09" + ] + }, "Web/API/Crypto": { "modified": "2020-10-15T21:59:23.127Z", "contributors": [ @@ -13545,12 +13551,6 @@ "silverskyvicto" ] }, - "Web/API/EffectTiming": { - "modified": "2020-10-15T22:09:51.091Z", - "contributors": [ - "kay8" - ] - }, "Web/API/Element": { "modified": "2020-10-15T21:14:54.312Z", "contributors": [ @@ -17952,6 +17952,12 @@ "silverskyvicto" ] }, + "Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2020-10-15T22:09:51.091Z", + "contributors": [ + "kay8" + ] + }, "Web/API/LocalFileSystem": { "modified": "2020-10-15T22:11:54.611Z", "contributors": [ @@ -20465,24 +20471,6 @@ "mfuji09" ] }, - "Web/API/PublicKeyCredentialCreationOptions": { - "modified": "2020-10-15T22:26:51.081Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection": { - "modified": "2020-10-15T22:26:48.406Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/API/PublicKeyCredentialCreationOptions/excludeCredentials": { - "modified": "2020-10-15T22:26:49.264Z", - "contributors": [ - "mfuji09" - ] - }, "Web/API/PublicKeyCredentialRequestOptions": { "modified": "2020-10-15T22:26:52.032Z", "contributors": [ @@ -20629,12 +20617,6 @@ "chrisdavidmills" ] }, - "Web/API/RTCConfiguration": { - "modified": "2019-03-23T22:51:27.389Z", - "contributors": [ - "dreissig.jahrhundert" - ] - }, "Web/API/RTCDataChannel": { "modified": "2020-10-15T21:37:37.878Z", "contributors": [ @@ -20658,6 +20640,12 @@ "dreissig.jahrhundert" ] }, + "Web/API/RTCPeerConnection/RTCPeerConnection": { + "modified": "2019-03-23T22:51:27.389Z", + "contributors": [ + "dreissig.jahrhundert" + ] + }, "Web/API/RTCPeerConnection/canTrickleIceCandidates": { "modified": "2020-10-15T22:29:03.079Z", "contributors": [ @@ -46583,16 +46571,6 @@ "chrisdavidmills" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2020-05-24T03:45:53.652Z", - "contributors": [ - "mfuji09", - "teoli", - "siokoshou", - "ethertank", - "sosleepy" - ] - }, "Web/SVG": { "modified": "2020-04-07T10:06:05.125Z", "contributors": [ @@ -48575,6 +48553,18 @@ "ethertank" ] }, + "conflicting/Web/API/CredentialsContainer/create": { + "modified": "2020-10-15T22:26:49.264Z", + "contributors": [ + "mfuji09" + ] + }, + "conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270": { + "modified": "2020-10-15T22:26:51.081Z", + "contributors": [ + "mfuji09" + ] + }, "conflicting/Web/API/File/name": { "modified": "2020-09-25T16:45:23.436Z", "contributors": [ @@ -48630,6 +48620,16 @@ "Wind1808" ] }, + "conflicting/Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2020-05-24T03:45:53.652Z", + "contributors": [ + "mfuji09", + "teoli", + "siokoshou", + "ethertank", + "sosleepy" + ] + }, "conflicting/Web/Web_Components": { "modified": "2020-10-15T22:23:11.378Z", "contributors": [ diff --git a/files/ja/conflicting/web/api/credentialscontainer/create/index.html b/files/ja/conflicting/web/api/credentialscontainer/create/index.html new file mode 100644 index 0000000000..7203131ea6 --- /dev/null +++ b/files/ja/conflicting/web/api/credentialscontainer/create/index.html @@ -0,0 +1,105 @@ +--- +title: PublicKeyCredentialCreationOptions.excludeCredentials +slug: conflicting/Web/API/CredentialsContainer/create +tags: + - API + - Property + - PublicKeyCredentialCreationOptions + - Reference + - Web Authentication API + - WebAuthn + - プロパティ +translation_of: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials +original_slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials +--- +
{{APIRef("Web Authentication API")}}{{securecontext_header}}
+ +

excludeCredentials は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、指定されたユーザーに既に存在する公開鍵の記述子を要素に持つ {{jsxref("Array")}} オブジェクトです。これは既存のユーザーに新しい認証情報を生成することを避けたい場合、パーティのサーバーから提供されます。

+ +

構文

+ +
excludeCredentials = publicKeyCredentialCreationOptions.excludeCredentials
+ +

値

+ +

{{jsxref("Array")}} で、以下のプロパティを持つオブジェクトを要素に持ちます。

+ +
+
type
+
文字列で、生成された公開鍵の認証情報の種類を表します。この文書の執筆時点 (2019年3月) では、 "public-key" のみが使用可能です。
+
id
+
{{domxref("BufferSource")}} で、既存の公開鍵の認証情報の識別子 ({{domxref("PublicKeyCredential.rawId")}}) に一致します。子の識別子は PublicKeyCredential インスタンスの生成時に生成されます。
+
transports {{optional_inline}}
+
文字列の {{jsxref("Array")}} で、クライアントと認証機器の通信方法を記述します。使用可能な文字列は次の通りです。 +
    +
  • "usb": 認証機器は取り外し可能な USB 接続で接続することができます
    • +
  • "nfc": 認証機器は NFC (Near Field Communication) を通して使用することができます
    • +
  • "ble": 認証機器は BLE (Bluetooth Low Energy) を通して使用することができます
    • +
  • "internal": 認証機器はクライアント端末の中に埋め込まれています (取り外せません)。
    • +
+
+
+ +

認証機器がすでにそのような公開鍵認証情報の一つを含んでいる場合、クライアントは {{domxref("DOMException")}} を発生さえるか、ユーザーに新しい認証情報を生成したいかを確認するかします。

+ +

例

+ +
var publicKey = {
+  excludeCredentials: [
+    {
+      type: "public-key",
+      // the id for john.doe@example.com
+      id  : new Uint8Array(26) /* this actually is given by the server */
+    },
+    {
+      type: "public-key",
+      // the id for john-doe@example.com
+      id : new Uint8Array(26) /* another id */
+    }
+  ],
+  challenge: new Uint8Array(26) /* this actually is given from the server */,
+  rp: {
+    name: "Example CORP",
+    id  : "login.example.com"
+  },
+  user: {
+    id: new Uint8Array(26), /* To be changed for each user */
+    name: "jdoe@example.com",
+    displayName: "John Doe",
+  },
+  pubKeyCredParams: [ {
+    type: "public-key",
+    alg: -7 } ]
+};
+
+navigator.credentials.create({ publicKey })
+  .then(function (newCredentialInfo) {
+    // send attestation response and client extensions
+    // to the server to proceed with the registration
+    // of the credential
+  }).catch(function (err) {
+     console.error(err);
+  });
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-excludecredentials','excludeCredentials')}}{{Spec2('WebAuthn')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}}

diff --git a/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html new file mode 100644 index 0000000000..42f3cdcdfa --- /dev/null +++ b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html @@ -0,0 +1,147 @@ +--- +title: PublicKeyCredentialCreationOptions +slug: >- + conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270 +tags: + - API + - Dictionary + - PublicKeyCredentialCreationOptions + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/PublicKeyCredentialCreationOptions +original_slug: Web/API/PublicKeyCredentialCreationOptions +--- +
{{APIRef("Web Authentication API")}}{{securecontext_header}}
+ +

PublicKeyCredentialCreationOptions は Web Authentication API の辞書で、 {{domxref("CredentialsContainer.create()","navigators.credentials.create()")}} で {{domxref("PublicKeyCredential")}} を生成するために渡されるオプションを保持します。

+ +

プロパティ

+ +
+
{{domxref("PublicKeyCredentialCreationOptions.rp")}}
+
資格情報の生成のリクエスト元を示すオブジェクトです。
+
{{domxref("PublicKeyCredentialCreationOptions.user")}}
+
資格情報が生成されるユーザーアカウントを示すオブジェクトです。
+
{{domxref("PublicKeyCredentialCreationOptions.challenge")}}
+
{{domxref("BufferSource")}} 型で、証明書利用者のサーバーによって生成され、暗号チャレンジとして使用されるものです。この値は認証プロバイダーによって署名され、署名は {{domxref("AuthenticatorAssertionResponse.signature")}} の一部として送り返されます。
+
{{domxref("PublicKeyCredentialCreationOptions.pubKeyCredParams")}}
+
{{jsxref("Array")}} 型で、資格情報に要求される機能を指定する要素の配列です。暗号化署名の操作で使用される種類とアルゴリズムを含みます。この配列は設定の降順で並べ替えられます。
+
{{domxref("PublicKeyCredentialCreationOptions.timeout")}} {{optional_inline}}
+
数値のヒントで、取得操作が完了するまで呼び出し元が待機する時間をミリ秒単位で表します。このヒントは、ブラウザーによって上書きされる場合があります。
+
{{domxref("PublicKeyCredentialCreationOptions.excludeCredentials")}} {{optional_inline}}
+
{{jsxref("Array")}} で、既存の資格情報の記述子の配列です。これは、すでに資格情報を持つ既存のユーザーが新しい公開鍵資格情報を生成することを防ぐために、認証者によって提供されます。
+
{{domxref("PublicKeyCredentialCreationOptions.authenticatorSelection")}} {{optional_inline}}
+
生成操作で使用可能な認証機器を絞り込む条件をプロパティに持つオブジェクトです。
+
{{domxref("PublicKeyCredentialCreationOptions.attestation")}} {{optional_inline}}
+
{{jsxref("String")}} で、認証結果を (認証機器の元が) 送信する方法を示します。
+
{{domxref("PublicKeyCredentialCreationOptions.extensions")}} {{optional_inline}}
+
複数のクライアント拡張機能の入力を持つオブジェクトです。これらの拡張機能は、追加の処理を要求するために使用されます (例えば、従来の FIDO API 資格情報を処理、認証端末上でのテキストの要求など)。
+
+ +

メソッド

+ +

なし。

+ +

例

+ +
// some examples of COSE algorithms
+const cose_alg_ECDSA_w_SHA256 = -7;
+const cose_alg_ECDSA_w_SHA512 = -36;
+
+var createCredentialOptions = {
+    // Format of new credentials is publicKey
+    publicKey: {
+        // Relying Party
+        rp: {
+            name: "Example CORP",
+            id: "login.example.com",
+            icon: "https://login.example.com/login.ico"
+        },
+        // Cryptographic challenge from the server
+        challenge: new Uint8Array(26),
+        // User
+        user: {
+            id: new Uint8Array(16),
+            name: "john.p.smith@example.com",
+            displayName: "John P. Smith",
+        },
+        // Requested format of new keypair
+        pubKeyCredParams: [{
+            type: "public-key",
+            alg: cose_alg_ECDSA_w_SHA256,
+        }],
+        // Timeout after 1 minute
+        timeout: 60000,
+        // Do not send the authenticator's origin attestation
+        attestation: "none",
+        extensions: {
+          uvm: true,
+          exts: true
+        },
+        // Filter out authenticators which are bound to the device
+        authenticatorSelection:{
+          authenticatorAttachment: "cross-platform",
+          requireResidentKey: true,
+          userVerification: "preferred"
+        },
+        // Exclude already existing credentials for the user
+        excludeCredentials: [
+          {
+            type: "public-key",
+            // the id for john.doe@example.com
+            id  : new Uint8Array(26) /* this actually is given by the server */
+          },
+          {
+            type: "public-key",
+            // the id for john-doe@example.com
+            id : new Uint8Array(26) /* another id */
+          }
+        ]
+    }
+};
+
+// Create the new credential with the options above
+navigator.credentials.create(createCredentialOptions)
+  .then(function (newCredentialInfo) {
+    var attestationResponse = newCredentialInfo.response;
+    var clientExtensionsOutputs = newCredentialInfo.getClientExtensionsResults();
+
+    // Send the response to the relying party server
+    // it will verify the content and integrity before
+    // creating a new credential
+
+  }).catch(function (err) {
+    // Deal with any error properly
+    console.error(err);
+  });;
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('WebAuthn','#dictdef-publickeycredentialcreationoptions', 'PublicKeyCredentialCreationOptions dictionary')}}{{Spec2('WebAuthn')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..fa90c0bda0 --- /dev/null +++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,406 @@ +--- +title: メディア +slug: conflicting/Web/CSS/Media_Queries/Using_media_queries +tags: + - CSS + - Example + - Guide + - Intermediate + - NeedsMarkupWork + - NeedsUpdate + - Web + - ガイド + - 中級者 +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +
{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Responsive/")}}
+ +

これは CSS の第一歩チュートリアル第14章で、第1部の最終章です。このチュートリアルの多くのページでは、 CSS プロパティや値と、そのコンテンツを表示する方法を指定するための使い方に焦点を当てていました。

+ +

メディアについて

+ +

CSS の目的は、コンテンツがどのようにユーザーに表示されるのかを指定することです。この表示には複数の表現形式をとることができます。

+ +

例えば、おそらくあなたはこれをディスプレイ付きの端末で読んでいるでしょう。しかし、大画面に映して多くの人に読んでもらいたいと思うこともありますし、印刷したいと思ってう場合もあるでしょう。これらの様々なメディアには、それぞれ異なる特性があります。 CSS はメディアの種類に応じてコンテンツを提示する機能を持っています。

+ +

あるメディア種別に特有の規則を定義するには、 {{CSSxRef("@media")}} に続けてメディア種別を記述し、さらに続けて波括弧の中に規則を記述します。

+ +
+

例

+ +

あるウェブサイトの文書に、主要なサイトメニューを含むナビゲーション領域が設けられているとします。

+ +

マークアップ言語では、ナビゲーション領域の親要素は id nav-area を持っています ({{HTMLVersionInline(5)}} では、これは id 属性を持つ {{HTMLElement("div")}} 要素での代わりに、{{HTMLElement("nav")}} 要素でマークアップできます)。

+ +

文書を印刷するときにはナビゲーション領域は無意味ですから、この CSS (下記) では、文書を印刷する際にはナビゲーション領域を削除します。

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

よく知られたメディア種別には次のようなものがあります。

+ + + + + + + + + + + + + + + + + + + + +
screen端末のカラーディスプレイ
printページ単位に印刷されるメディア
projectionプロジェクター
allすべてのメディア (既定値)
+ +
+

より詳しく

+ +

ある規則の集合にメディア種別を定義する方法は、他にもあります。

+ +

文書のマークアップ言語によっては、スタイルシートが文書にリンクされたときに、メディア種別を定義できるものがあります。例えば、 HTML では LINK 要素の media 属性を使ってメディア種別を指定することができます。

+ +

CSS ではスタイルシートの初めに {{CSSxRef("@import")}} を使って、 URL から他のスタイルシートを読み込むことができ、オプションとしてメディア種別を指定することができます。

+ +

これらは、様々なメディア種別のスタイル付け規則を異なるファイルに分離する方法です。

+ +

メディア種別の完全な説明は、 CSS 仕様書の Media をご覧ください。

+ +

{{CSSxRef("display")}} プロパティのその他の利用例は、このチュートリアルの後で登場する XML データ のページにあります。

+
+ +

印刷

+ +

CSS には、印刷や、一般のページ付けされたメディアに特有の対応があります。

+ +

{{CSSxRef("@page")}} 規則で、ページマージンを設定できます。両面印刷には、マージンを @page:left と @page:right で別々に指定できます。

+ +

印刷メディアでは通常、インチ (in) や ポイント (pt = 1/72 inch)、センチメートル (cm) や ミリメートル (mm) など、適切な単位を使います。フォントの大きさにあわせるために em (em) を使ったり、パーセント値 (%) を使ったりするのも同様に適切です。

+ +

ページ境界における文書の内容の分割方法を、 {{CSSxRef("page-break-before")}}, {{CSSxRef("page-break-after")}}, {{CSSxRef("page-break-inside")}} プロパティを使って制御することができます。

+ +
+

例

+ +

次の規則はページの四辺の余白を1インチに設定します。

+ +
@page {margin: 1in;}
+
+ +

次の規則は、すべての H1 要素が確実に新しいページで始まるようにします。

+ +
h1 {page-break-before: always;}
+
+
+ +
+

さらに詳しく

+ +

ページ付メディアへの CSS の対応の詳細は、 CSS 仕様書の Paged media をご覧ください。

+ +

CSS の他の機能と同様に、印刷はブラウザーの選択とその設定に依存します。例えば、 Mozilla ブラウザーでは、印刷用に既定の余白、ヘッダー、フッターが用意されています。印刷される書式を完全に制御することはできないことを覚えておいてください。印刷時にすべてのユーザーのブラウザーの選択や設定を予測することは不可能です。

+
+ +

ユーザーインターフェイス

+ +

CSS は、コンピューターのディスプレイのようなユーザーインターフェイスを持つ端末のために、特別なプロパティを持っています。これらのプロパティは、ユーザーが作業するインターフェイスの近哲の表示方法を動的に変更することができます。

+ +

5つの特別なセレクターがあります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
セレクター選択対象
E{{CSSxRef(":hover")}}ポインターが上にあるすべての E 要素
E{{CSSxRef(":focus")}}キーボードフォーカスを持つすべての E 要素
E{{CSSxRef(":active")}}現在のユーザーの行動に関係する E 要素
E{{CSSxRef(":link")}}ユーザーが未訪問の URL へのハイパーリンクのある E 要素
E{{CSSxRef(":visited")}}ユーザーが訪問済みの URL へのハイパーリンクのある E 要素
+ +
+

注: :visited セレクターで獲得できる情報は {{gecko("2.0")}} で制限されました。詳細についてはプライバシーと :visited セレクターをご覧ください。

+
+ +

{{CSSxRef("cursor")}} プロパティは、ポインターの形を定義します。よく使われる形は以下のとおりです。マウスを以下のリストの項目上に置いて、あなたのブラウザーで実際に使われるポインターの形を見てみてください。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
セレクター選択対象
pointerリンクを示します
waitプログラムが入力を受け付けられないことを示します
progressプログラムが動作しているが、入力が受付可能であることを示します
default既定値 (通常は矢印)
+ +

{{CSSxRef("outline")}} プロパティは、キーボードフォーカスを表すためによく使われる輪郭を作ります。その値は {{CSSxRef("border")}} プロパティに似ていますが、特定の辺だけには定義できない点が異なります。

+ +

ユーザーインターフェイスの他のいくつかの機能は、通常の方法で、属性を使って提供されます。例えば、利用不能、もしくは読み取り専用の要素は disabled 属性または readonly 属性を持ちます。セレクターは、他の属性と同じく、 [disabled] や [readonly] のように角括弧を使ってこれらの属性を定義することができます。

+ +
+

例

+ +

次の規則は、ユーザー操作に対し、動的に変化するようなボタンのスタイルを定義します。

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  padding: 5px 10px;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active, .green-button.active {
+  border-style: inset;
+  }
+
+ +
<table>
+ <tbody>
+  <tr>
+   <td><button class="green-button" disabled>Click me</button></td>
+   <td><button class="green-button">Click me</button></td>
+   <td><button class="green-button active">Click me</button></td>
+  </tr>
+  <tr style="line-height:25%;">
+   <td>&nbsp;</td>
+  </tr>
+  <tr style="font-style:italic;">
+   <td>disabled</td>
+   <td>normal</td>
+   <td>active</td>
+  </tr>
+ </tbody>
+</table>
+
+ +

ライブ例

+ +

{{ EmbedLiveSample('User_interfaces', '', '', '', 'Web/Apps/Progressive/Responsive/Media_types') }}

+ +

フル機能を持つボタンでは、デフォルトならボタンの周囲に濃い輪郭線を描き、キーボードフォーカスを受けるとボタン表面に点線の輪郭線を描きます。ポインターを上に置いたときのホバー効果も持っているかもしれません。

+
+ +
+

さらに詳しく

+ +

CSS におけるユーザーインターフェイスについての詳細は、 CSS 仕様書の User interface をご覧ください。

+このチュートリアルのパートIIでは、 Mozilla のユーザーインターフェイスのためのマークアップ言語の例があります。 + + +
+ +

実習: 文書を印刷する

+ +
+

注: CSS カウンターを使ったページ番号の印刷は Firefox でのみ動作します。仕様書では動作が定義されているか、他のブラウザーで対応するかどうかは不明確です。 issue filed with Chromium を参照してください。

+
+ +
    +
  1. 新しい HTML 文書 doc4.html を作成してください。次の内容をコピー＆ペーストしてください。 + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. 新しいスタイルシート style4.css を作成してください。次の内容をコピー＆ペーストしてください。 + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. ブラウザーで文書を見てみましょう。お使いのブラウザーの既定のスタイルが使われています。
    4. +
  4. 文書を印刷 (または印刷プレビュー) してください。スタイルシートは各セクションをページにわけ、各ページにヘッダーとフッターを追加します。お使いのブラウザーがカウンターをサポートしていれば、フッターにページ番号を追加します。 + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
+

チャレンジ

+
印刷に特化したスタイルの規則を、別の CSS ファイルに移してください。 +

リファレンスの {{CSSxRef("@import")}} のページを読み、あなたの style4.css スタイルシートに、新しい印刷用のCSS ファイルをインポートする詳しい方法を見つけてください。

+ +

ポインターが上にあるときに、見出しを青く変えるようにしてください。

+
+ +

チャレンジの解答を見る。

+ +

さて次は？

+ +

このページに、理解しづらい点や、意見がありましたら Discussion ページに投稿してください。

+ +

これまでに、このチュートリアルのすべてのスタイル規則はファイル内に定義されてきました。規則とその値は固定されています。次のページでは、プログラミング言語 JavaScript を使った、規則の動的な変更方法について述べます。

diff --git a/files/ja/web/api/credentialscontainer/create/index.html b/files/ja/web/api/credentialscontainer/create/index.html new file mode 100644 index 0000000000..3f786e8a8f --- /dev/null +++ b/files/ja/web/api/credentialscontainer/create/index.html @@ -0,0 +1,107 @@ +--- +title: PublicKeyCredentialCreationOptions.authenticatorSelection +slug: Web/API/CredentialsContainer/create +tags: + - API + - Property + - PublicKeyCredentialCreationOptions + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection +original_slug: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection +--- +
{{APIRef("Web Authentication API")}}{{securecontext_header}}
+ +

authenticatorSelection は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、生成操作に使用される認証機器をフィルタリングする条件を指定するオブジェクトです。

+ +

構文

+ +
authenticatorSelection = publicKeyCredentialCreationOptions.authenticatorSelection
+ +

値

+ +

以下のプロパティを持つオブジェクトです。

+ +
+
authenticatorAttachment{{optional_inline}}
+
文字列で、 "platform" または "cross-platform" のどちらかです。前者は認証機器がクライアントに接続されており、通常は取り外し不可能であることを示します。後者は機器が異なるプラットフォームをまたがって使用される可能性があることを示します (USB や NFC 端末など)。
+
requireResidentKey{{optional_inline}}
+
論理値で、認証情報の秘密鍵を認証機器、クライアント、クライアント端末の中に格納する必要があるのか、どうかを示します。既定値は false です。
+
userVerification{{optional_inline}}
+
A string qualifying how the user verification should be part of the authentication process. The values may be: +
    +
  • "required": user verification is required, the operation will fail if the {{domxref("AuthenticatorAttestationResponse","response","",1)}} does not have the UV flag (as part of the authenticatorData property of {{domxref("AuthenticatorAttestationResponse.attestationObject")}})
    • +
  • "preferred": user verification is prefered, the operation will not fail if the {{domxref("AuthenticatorAttestationResponse","response","",1)}} does not have the UV flag (as part of the authenticatorData property of {{domxref("AuthenticatorAttestationResponse.attestationObject")}})
    • +
  • "discouraged": user verification should not be employed as to minimize the user interaction during the process.
    • +
+ The default value is "preferred".
+
+ +

The authenticator used for the creation of the public key credential must comply with the requirements.

+ +
+

Note: See {{domxref("PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()")}} which resolves to true when a user-verifiying platform authenticator is available.

+
+ +

例

+ +
var publicKey = {
+  authenticatorSelection:{
+    authenticatorAttachment: "cross-platform",
+    requireResidentKey: true,
+    userVerification: "required"
+  },
+  challenge: new Uint8Array(26) /* this actually is given from the server */,
+  rp: {
+    name: "Example CORP",
+    id  : "login.example.com"
+  },
+  user: {
+    id: new Uint8Array(26), /* To be changed for each user */
+    name: "jdoe@example.com",
+    displayName: "John Doe",
+  },
+  pubKeyCredParams: [ {
+    type: "public-key",
+    alg: -7 } ]
+};
+
+navigator.credentials.create({ publicKey })
+  .then(function (newCredentialInfo) {
+    // send attestation response and client extensions
+    // to the server to proceed with the registration
+    // of the credential
+  }).catch(function (err) {
+     console.error(err);
+  });
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-authenticatorselection','authenticatorSelection')}}{{Spec2('WebAuthn')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}}

+ +

See also

+ + diff --git a/files/ja/web/api/effecttiming/index.html b/files/ja/web/api/effecttiming/index.html deleted file mode 100644 index ba4e93cb98..0000000000 --- a/files/ja/web/api/effecttiming/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: EffectTiming -slug: Web/API/EffectTiming -translation_of: Web/API/EffectTiming ---- -
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
- -

The EffectTiming dictionary, part of the Web Animations API, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a duration the animation will not play.

- -

Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from from keyframe to keyframe, and how to behave when the animation begins and ends.

- -

Properties

- -
-
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
-
ミリ秒の数値であり、アニメーションの開始を遅らせます。デフォルトでは 0 です。
-
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
-
Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
-
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
-
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
-
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
-
The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".
-
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
-
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 
-
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
-
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
-
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
-
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
-
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
-
The number of times the animation should repeat. Defaults to 1, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#the-effecttiming-dictionary', 'EffectTiming' )}}{{Spec2('Web Animations')}}Initial definition
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/ja/web/api/keyframeeffect/keyframeeffect/index.html b/files/ja/web/api/keyframeeffect/keyframeeffect/index.html new file mode 100644 index 0000000000..60ce39d1af --- /dev/null +++ b/files/ja/web/api/keyframeeffect/keyframeeffect/index.html @@ -0,0 +1,65 @@ +--- +title: EffectTiming +slug: Web/API/KeyframeEffect/KeyframeEffect +translation_of: Web/API/EffectTiming +original_slug: Web/API/EffectTiming +--- +
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+ +

The EffectTiming dictionary, part of the Web Animations API, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a duration the animation will not play.

+ +

Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from from keyframe to keyframe, and how to behave when the animation begins and ends.

+ +

Properties

+ +
+
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
+
ミリ秒の数値であり、アニメーションの開始を遅らせます。デフォルトでは 0 です。
+
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
+
Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
+
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
+
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
+
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
+
The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".
+
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
+
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 
+
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
+
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
+
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
+
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
+
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
+
The number of times the animation should repeat. Defaults to 1, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#the-effecttiming-dictionary', 'EffectTiming' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/ja/web/api/publickeycredentialcreationoptions/authenticatorselection/index.html b/files/ja/web/api/publickeycredentialcreationoptions/authenticatorselection/index.html deleted file mode 100644 index 263bd66b0a..0000000000 --- a/files/ja/web/api/publickeycredentialcreationoptions/authenticatorselection/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: PublicKeyCredentialCreationOptions.authenticatorSelection -slug: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection -tags: - - API - - Property - - PublicKeyCredentialCreationOptions - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection ---- -
{{APIRef("Web Authentication API")}}{{securecontext_header}}
- -

authenticatorSelection は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、生成操作に使用される認証機器をフィルタリングする条件を指定するオブジェクトです。

- -

構文

- -
authenticatorSelection = publicKeyCredentialCreationOptions.authenticatorSelection
- -

値

- -

以下のプロパティを持つオブジェクトです。

- -
-
authenticatorAttachment{{optional_inline}}
-
文字列で、 "platform" または "cross-platform" のどちらかです。前者は認証機器がクライアントに接続されており、通常は取り外し不可能であることを示します。後者は機器が異なるプラットフォームをまたがって使用される可能性があることを示します (USB や NFC 端末など)。
-
requireResidentKey{{optional_inline}}
-
論理値で、認証情報の秘密鍵を認証機器、クライアント、クライアント端末の中に格納する必要があるのか、どうかを示します。既定値は false です。
-
userVerification{{optional_inline}}
-
A string qualifying how the user verification should be part of the authentication process. The values may be: -
    -
  • "required": user verification is required, the operation will fail if the {{domxref("AuthenticatorAttestationResponse","response","",1)}} does not have the UV flag (as part of the authenticatorData property of {{domxref("AuthenticatorAttestationResponse.attestationObject")}})
    • -
  • "preferred": user verification is prefered, the operation will not fail if the {{domxref("AuthenticatorAttestationResponse","response","",1)}} does not have the UV flag (as part of the authenticatorData property of {{domxref("AuthenticatorAttestationResponse.attestationObject")}})
    • -
  • "discouraged": user verification should not be employed as to minimize the user interaction during the process.
    • -
- The default value is "preferred".
-
- -

The authenticator used for the creation of the public key credential must comply with the requirements.

- -
-

Note: See {{domxref("PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()")}} which resolves to true when a user-verifiying platform authenticator is available.

-
- -

例

- -
var publicKey = {
-  authenticatorSelection:{
-    authenticatorAttachment: "cross-platform",
-    requireResidentKey: true,
-    userVerification: "required"
-  },
-  challenge: new Uint8Array(26) /* this actually is given from the server */,
-  rp: {
-    name: "Example CORP",
-    id  : "login.example.com"
-  },
-  user: {
-    id: new Uint8Array(26), /* To be changed for each user */
-    name: "jdoe@example.com",
-    displayName: "John Doe",
-  },
-  pubKeyCredParams: [ {
-    type: "public-key",
-    alg: -7 } ]
-};
-
-navigator.credentials.create({ publicKey })
-  .then(function (newCredentialInfo) {
-    // send attestation response and client extensions
-    // to the server to proceed with the registration
-    // of the credential
-  }).catch(function (err) {
-     console.error(err);
-  });
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-authenticatorselection','authenticatorSelection')}}{{Spec2('WebAuthn')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}}

- -

See also

- - diff --git a/files/ja/web/api/publickeycredentialcreationoptions/excludecredentials/index.html b/files/ja/web/api/publickeycredentialcreationoptions/excludecredentials/index.html deleted file mode 100644 index 644b69d6c2..0000000000 --- a/files/ja/web/api/publickeycredentialcreationoptions/excludecredentials/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: PublicKeyCredentialCreationOptions.excludeCredentials -slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials -tags: - - API - - Property - - PublicKeyCredentialCreationOptions - - Reference - - Web Authentication API - - WebAuthn - - プロパティ -translation_of: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials ---- -
{{APIRef("Web Authentication API")}}{{securecontext_header}}
- -

excludeCredentials は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、指定されたユーザーに既に存在する公開鍵の記述子を要素に持つ {{jsxref("Array")}} オブジェクトです。これは既存のユーザーに新しい認証情報を生成することを避けたい場合、パーティのサーバーから提供されます。

- -

構文

- -
excludeCredentials = publicKeyCredentialCreationOptions.excludeCredentials
- -

値

- -

{{jsxref("Array")}} で、以下のプロパティを持つオブジェクトを要素に持ちます。

- -
-
type
-
文字列で、生成された公開鍵の認証情報の種類を表します。この文書の執筆時点 (2019年3月) では、 "public-key" のみが使用可能です。
-
id
-
{{domxref("BufferSource")}} で、既存の公開鍵の認証情報の識別子 ({{domxref("PublicKeyCredential.rawId")}}) に一致します。子の識別子は PublicKeyCredential インスタンスの生成時に生成されます。
-
transports {{optional_inline}}
-
文字列の {{jsxref("Array")}} で、クライアントと認証機器の通信方法を記述します。使用可能な文字列は次の通りです。 -
    -
  • "usb": 認証機器は取り外し可能な USB 接続で接続することができます
    • -
  • "nfc": 認証機器は NFC (Near Field Communication) を通して使用することができます
    • -
  • "ble": 認証機器は BLE (Bluetooth Low Energy) を通して使用することができます
    • -
  • "internal": 認証機器はクライアント端末の中に埋め込まれています (取り外せません)。
    • -
-
-
- -

認証機器がすでにそのような公開鍵認証情報の一つを含んでいる場合、クライアントは {{domxref("DOMException")}} を発生さえるか、ユーザーに新しい認証情報を生成したいかを確認するかします。

- -

例

- -
var publicKey = {
-  excludeCredentials: [
-    {
-      type: "public-key",
-      // the id for john.doe@example.com
-      id  : new Uint8Array(26) /* this actually is given by the server */
-    },
-    {
-      type: "public-key",
-      // the id for john-doe@example.com
-      id : new Uint8Array(26) /* another id */
-    }
-  ],
-  challenge: new Uint8Array(26) /* this actually is given from the server */,
-  rp: {
-    name: "Example CORP",
-    id  : "login.example.com"
-  },
-  user: {
-    id: new Uint8Array(26), /* To be changed for each user */
-    name: "jdoe@example.com",
-    displayName: "John Doe",
-  },
-  pubKeyCredParams: [ {
-    type: "public-key",
-    alg: -7 } ]
-};
-
-navigator.credentials.create({ publicKey })
-  .then(function (newCredentialInfo) {
-    // send attestation response and client extensions
-    // to the server to proceed with the registration
-    // of the credential
-  }).catch(function (err) {
-     console.error(err);
-  });
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-excludecredentials','excludeCredentials')}}{{Spec2('WebAuthn')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}}

diff --git a/files/ja/web/api/publickeycredentialcreationoptions/index.html b/files/ja/web/api/publickeycredentialcreationoptions/index.html deleted file mode 100644 index a42762c18b..0000000000 --- a/files/ja/web/api/publickeycredentialcreationoptions/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: PublicKeyCredentialCreationOptions -slug: Web/API/PublicKeyCredentialCreationOptions -tags: - - API - - Dictionary - - PublicKeyCredentialCreationOptions - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/PublicKeyCredentialCreationOptions ---- -
{{APIRef("Web Authentication API")}}{{securecontext_header}}
- -

PublicKeyCredentialCreationOptions は Web Authentication API の辞書で、 {{domxref("CredentialsContainer.create()","navigators.credentials.create()")}} で {{domxref("PublicKeyCredential")}} を生成するために渡されるオプションを保持します。

- -

プロパティ

- -
-
{{domxref("PublicKeyCredentialCreationOptions.rp")}}
-
資格情報の生成のリクエスト元を示すオブジェクトです。
-
{{domxref("PublicKeyCredentialCreationOptions.user")}}
-
資格情報が生成されるユーザーアカウントを示すオブジェクトです。
-
{{domxref("PublicKeyCredentialCreationOptions.challenge")}}
-
{{domxref("BufferSource")}} 型で、証明書利用者のサーバーによって生成され、暗号チャレンジとして使用されるものです。この値は認証プロバイダーによって署名され、署名は {{domxref("AuthenticatorAssertionResponse.signature")}} の一部として送り返されます。
-
{{domxref("PublicKeyCredentialCreationOptions.pubKeyCredParams")}}
-
{{jsxref("Array")}} 型で、資格情報に要求される機能を指定する要素の配列です。暗号化署名の操作で使用される種類とアルゴリズムを含みます。この配列は設定の降順で並べ替えられます。
-
{{domxref("PublicKeyCredentialCreationOptions.timeout")}} {{optional_inline}}
-
数値のヒントで、取得操作が完了するまで呼び出し元が待機する時間をミリ秒単位で表します。このヒントは、ブラウザーによって上書きされる場合があります。
-
{{domxref("PublicKeyCredentialCreationOptions.excludeCredentials")}} {{optional_inline}}
-
{{jsxref("Array")}} で、既存の資格情報の記述子の配列です。これは、すでに資格情報を持つ既存のユーザーが新しい公開鍵資格情報を生成することを防ぐために、認証者によって提供されます。
-
{{domxref("PublicKeyCredentialCreationOptions.authenticatorSelection")}} {{optional_inline}}
-
生成操作で使用可能な認証機器を絞り込む条件をプロパティに持つオブジェクトです。
-
{{domxref("PublicKeyCredentialCreationOptions.attestation")}} {{optional_inline}}
-
{{jsxref("String")}} で、認証結果を (認証機器の元が) 送信する方法を示します。
-
{{domxref("PublicKeyCredentialCreationOptions.extensions")}} {{optional_inline}}
-
複数のクライアント拡張機能の入力を持つオブジェクトです。これらの拡張機能は、追加の処理を要求するために使用されます (例えば、従来の FIDO API 資格情報を処理、認証端末上でのテキストの要求など)。
-
- -

メソッド

- -

なし。

- -

例

- -
// some examples of COSE algorithms
-const cose_alg_ECDSA_w_SHA256 = -7;
-const cose_alg_ECDSA_w_SHA512 = -36;
-
-var createCredentialOptions = {
-    // Format of new credentials is publicKey
-    publicKey: {
-        // Relying Party
-        rp: {
-            name: "Example CORP",
-            id: "login.example.com",
-            icon: "https://login.example.com/login.ico"
-        },
-        // Cryptographic challenge from the server
-        challenge: new Uint8Array(26),
-        // User
-        user: {
-            id: new Uint8Array(16),
-            name: "john.p.smith@example.com",
-            displayName: "John P. Smith",
-        },
-        // Requested format of new keypair
-        pubKeyCredParams: [{
-            type: "public-key",
-            alg: cose_alg_ECDSA_w_SHA256,
-        }],
-        // Timeout after 1 minute
-        timeout: 60000,
-        // Do not send the authenticator's origin attestation
-        attestation: "none",
-        extensions: {
-          uvm: true,
-          exts: true
-        },
-        // Filter out authenticators which are bound to the device
-        authenticatorSelection:{
-          authenticatorAttachment: "cross-platform",
-          requireResidentKey: true,
-          userVerification: "preferred"
-        },
-        // Exclude already existing credentials for the user
-        excludeCredentials: [
-          {
-            type: "public-key",
-            // the id for john.doe@example.com
-            id  : new Uint8Array(26) /* this actually is given by the server */
-          },
-          {
-            type: "public-key",
-            // the id for john-doe@example.com
-            id : new Uint8Array(26) /* another id */
-          }
-        ]
-    }
-};
-
-// Create the new credential with the options above
-navigator.credentials.create(createCredentialOptions)
-  .then(function (newCredentialInfo) {
-    var attestationResponse = newCredentialInfo.response;
-    var clientExtensionsOutputs = newCredentialInfo.getClientExtensionsResults();
-
-    // Send the response to the relying party server
-    // it will verify the content and integrity before
-    // creating a new credential
-
-  }).catch(function (err) {
-    // Deal with any error properly
-    console.error(err);
-  });;
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WebAuthn','#dictdef-publickeycredentialcreationoptions', 'PublicKeyCredentialCreationOptions dictionary')}}{{Spec2('WebAuthn')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/rtcconfiguration/index.html b/files/ja/web/api/rtcconfiguration/index.html deleted file mode 100644 index 2e26eaceef..0000000000 --- a/files/ja/web/api/rtcconfiguration/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: RTCConfiguration -slug: Web/API/RTCConfiguration -translation_of: Web/API/RTCConfiguration ---- -

{{APIRef("WebRTC")}}RTCConfigurationは、{{domxref("RTCPeerConnection")}} オブジェクトを介して ice server設定を初期化するためのものです 。 

- -

例

- -
var configuration = { iceServers: [{ url: "stun:stun.services.mozilla.com",
-                                     username: "louis@mozilla.com",
-                                     credential: "webrtcdemo" }]
-}
-var pc = new RTCPeerConnection(configuration);
- -

プロパティ

- - - - - - - - - - - - - - - - -
名前型説明
iceServersRTCIceServer[]ice server オブジェクトの配列
- -

RTCIceServer プロパティ

- - - - - - - - - - - - - - - - - - - - - - - - - - -
名前型説明
url{{domxref("DOMString")}}使用するTURNまたはSTUNサーバーのURL
username{{domxref("DOMString")}}アカウントのユーザ名 (任意)
credential{{domxref("DOMString")}}ユーザ名に関連付けられたパスワード (任意)
- -

 

diff --git a/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.html new file mode 100644 index 0000000000..1527f34ea2 --- /dev/null +++ b/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -0,0 +1,65 @@ +--- +title: RTCConfiguration +slug: Web/API/RTCPeerConnection/RTCPeerConnection +translation_of: Web/API/RTCConfiguration +original_slug: Web/API/RTCConfiguration +--- +

{{APIRef("WebRTC")}}RTCConfigurationは、{{domxref("RTCPeerConnection")}} オブジェクトを介して ice server設定を初期化するためのものです 。 

+ +

例

+ +
var configuration = { iceServers: [{ url: "stun:stun.services.mozilla.com",
+                                     username: "louis@mozilla.com",
+                                     credential: "webrtcdemo" }]
+}
+var pc = new RTCPeerConnection(configuration);
+ +

プロパティ

+ + + + + + + + + + + + + + + + +
名前型説明
iceServersRTCIceServer[]ice server オブジェクトの配列
+ +

RTCIceServer プロパティ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
url{{domxref("DOMString")}}使用するTURNまたはSTUNサーバーのURL
username{{domxref("DOMString")}}アカウントのユーザ名 (任意)
credential{{domxref("DOMString")}}ユーザ名に関連付けられたパスワード (任意)
+ +

 

diff --git a/files/ja/web/progressive_web_apps/responsive/media_types/index.html b/files/ja/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index 9f1d90396e..0000000000 --- a/files/ja/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: メディア -slug: Web/Progressive_web_apps/Responsive/Media_types -tags: - - CSS - - Example - - Guide - - Intermediate - - NeedsMarkupWork - - NeedsUpdate - - Web - - ガイド - - 中級者 -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -
{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Responsive/")}}
- -

これは CSS の第一歩チュートリアル第14章で、第1部の最終章です。このチュートリアルの多くのページでは、 CSS プロパティや値と、そのコンテンツを表示する方法を指定するための使い方に焦点を当てていました。

- -

メディアについて

- -

CSS の目的は、コンテンツがどのようにユーザーに表示されるのかを指定することです。この表示には複数の表現形式をとることができます。

- -

例えば、おそらくあなたはこれをディスプレイ付きの端末で読んでいるでしょう。しかし、大画面に映して多くの人に読んでもらいたいと思うこともありますし、印刷したいと思ってう場合もあるでしょう。これらの様々なメディアには、それぞれ異なる特性があります。 CSS はメディアの種類に応じてコンテンツを提示する機能を持っています。

- -

あるメディア種別に特有の規則を定義するには、 {{CSSxRef("@media")}} に続けてメディア種別を記述し、さらに続けて波括弧の中に規則を記述します。

- -
-

例

- -

あるウェブサイトの文書に、主要なサイトメニューを含むナビゲーション領域が設けられているとします。

- -

マークアップ言語では、ナビゲーション領域の親要素は id nav-area を持っています ({{HTMLVersionInline(5)}} では、これは id 属性を持つ {{HTMLElement("div")}} 要素での代わりに、{{HTMLElement("nav")}} 要素でマークアップできます)。

- -

文書を印刷するときにはナビゲーション領域は無意味ですから、この CSS (下記) では、文書を印刷する際にはナビゲーション領域を削除します。

- -
@media print {
-  #nav-area {display: none;}
-  }
-
-
- -

よく知られたメディア種別には次のようなものがあります。

- - - - - - - - - - - - - - - - - - - - -
screen端末のカラーディスプレイ
printページ単位に印刷されるメディア
projectionプロジェクター
allすべてのメディア (既定値)
- -
-

より詳しく

- -

ある規則の集合にメディア種別を定義する方法は、他にもあります。

- -

文書のマークアップ言語によっては、スタイルシートが文書にリンクされたときに、メディア種別を定義できるものがあります。例えば、 HTML では LINK 要素の media 属性を使ってメディア種別を指定することができます。

- -

CSS ではスタイルシートの初めに {{CSSxRef("@import")}} を使って、 URL から他のスタイルシートを読み込むことができ、オプションとしてメディア種別を指定することができます。

- -

これらは、様々なメディア種別のスタイル付け規則を異なるファイルに分離する方法です。

- -

メディア種別の完全な説明は、 CSS 仕様書の Media をご覧ください。

- -

{{CSSxRef("display")}} プロパティのその他の利用例は、このチュートリアルの後で登場する XML データ のページにあります。

-
- -

印刷

- -

CSS には、印刷や、一般のページ付けされたメディアに特有の対応があります。

- -

{{CSSxRef("@page")}} 規則で、ページマージンを設定できます。両面印刷には、マージンを @page:left と @page:right で別々に指定できます。

- -

印刷メディアでは通常、インチ (in) や ポイント (pt = 1/72 inch)、センチメートル (cm) や ミリメートル (mm) など、適切な単位を使います。フォントの大きさにあわせるために em (em) を使ったり、パーセント値 (%) を使ったりするのも同様に適切です。

- -

ページ境界における文書の内容の分割方法を、 {{CSSxRef("page-break-before")}}, {{CSSxRef("page-break-after")}}, {{CSSxRef("page-break-inside")}} プロパティを使って制御することができます。

- -
-

例

- -

次の規則はページの四辺の余白を1インチに設定します。

- -
@page {margin: 1in;}
-
- -

次の規則は、すべての H1 要素が確実に新しいページで始まるようにします。

- -
h1 {page-break-before: always;}
-
-
- -
-

さらに詳しく

- -

ページ付メディアへの CSS の対応の詳細は、 CSS 仕様書の Paged media をご覧ください。

- -

CSS の他の機能と同様に、印刷はブラウザーの選択とその設定に依存します。例えば、 Mozilla ブラウザーでは、印刷用に既定の余白、ヘッダー、フッターが用意されています。印刷される書式を完全に制御することはできないことを覚えておいてください。印刷時にすべてのユーザーのブラウザーの選択や設定を予測することは不可能です。

-
- -

ユーザーインターフェイス

- -

CSS は、コンピューターのディスプレイのようなユーザーインターフェイスを持つ端末のために、特別なプロパティを持っています。これらのプロパティは、ユーザーが作業するインターフェイスの近哲の表示方法を動的に変更することができます。

- -

5つの特別なセレクターがあります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
セレクター選択対象
E{{CSSxRef(":hover")}}ポインターが上にあるすべての E 要素
E{{CSSxRef(":focus")}}キーボードフォーカスを持つすべての E 要素
E{{CSSxRef(":active")}}現在のユーザーの行動に関係する E 要素
E{{CSSxRef(":link")}}ユーザーが未訪問の URL へのハイパーリンクのある E 要素
E{{CSSxRef(":visited")}}ユーザーが訪問済みの URL へのハイパーリンクのある E 要素
- -
-

注: :visited セレクターで獲得できる情報は {{gecko("2.0")}} で制限されました。詳細についてはプライバシーと :visited セレクターをご覧ください。

-
- -

{{CSSxRef("cursor")}} プロパティは、ポインターの形を定義します。よく使われる形は以下のとおりです。マウスを以下のリストの項目上に置いて、あなたのブラウザーで実際に使われるポインターの形を見てみてください。

- - - - - - - - - - - - - - - - - - - - - - - - - - -
セレクター選択対象
pointerリンクを示します
waitプログラムが入力を受け付けられないことを示します
progressプログラムが動作しているが、入力が受付可能であることを示します
default既定値 (通常は矢印)
- -

{{CSSxRef("outline")}} プロパティは、キーボードフォーカスを表すためによく使われる輪郭を作ります。その値は {{CSSxRef("border")}} プロパティに似ていますが、特定の辺だけには定義できない点が異なります。

- -

ユーザーインターフェイスの他のいくつかの機能は、通常の方法で、属性を使って提供されます。例えば、利用不能、もしくは読み取り専用の要素は disabled 属性または readonly 属性を持ちます。セレクターは、他の属性と同じく、 [disabled] や [readonly] のように角括弧を使ってこれらの属性を定義することができます。

- -
-

例

- -

次の規則は、ユーザー操作に対し、動的に変化するようなボタンのスタイルを定義します。

- -
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  padding: 5px 10px;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active, .green-button.active {
-  border-style: inset;
-  }
-
- -
<table>
- <tbody>
-  <tr>
-   <td><button class="green-button" disabled>Click me</button></td>
-   <td><button class="green-button">Click me</button></td>
-   <td><button class="green-button active">Click me</button></td>
-  </tr>
-  <tr style="line-height:25%;">
-   <td>&nbsp;</td>
-  </tr>
-  <tr style="font-style:italic;">
-   <td>disabled</td>
-   <td>normal</td>
-   <td>active</td>
-  </tr>
- </tbody>
-</table>
-
- -

ライブ例

- -

{{ EmbedLiveSample('User_interfaces', '', '', '', 'Web/Apps/Progressive/Responsive/Media_types') }}

- -

フル機能を持つボタンでは、デフォルトならボタンの周囲に濃い輪郭線を描き、キーボードフォーカスを受けるとボタン表面に点線の輪郭線を描きます。ポインターを上に置いたときのホバー効果も持っているかもしれません。

-
- -
-

さらに詳しく

- -

CSS におけるユーザーインターフェイスについての詳細は、 CSS 仕様書の User interface をご覧ください。

-このチュートリアルのパートIIでは、 Mozilla のユーザーインターフェイスのためのマークアップ言語の例があります。 - - -
- -

実習: 文書を印刷する

- -
-

注: CSS カウンターを使ったページ番号の印刷は Firefox でのみ動作します。仕様書では動作が定義されているか、他のブラウザーで対応するかどうかは不明確です。 issue filed with Chromium を参照してください。

-
- -
    -
  1. 新しい HTML 文書 doc4.html を作成してください。次の内容をコピー＆ペーストしてください。 - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h1>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. 新しいスタイルシート style4.css を作成してください。次の内容をコピー＆ペーストしてください。 - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. ブラウザーで文書を見てみましょう。お使いのブラウザーの既定のスタイルが使われています。
    4. -
  4. 文書を印刷 (または印刷プレビュー) してください。スタイルシートは各セクションをページにわけ、各ページにヘッダーとフッターを追加します。お使いのブラウザーがカウンターをサポートしていれば、フッターにページ番号を追加します。 - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section A
    - -
    This is the first section...
    - -
    Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section B
    - -
    This is the second section...
    - -
    Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - - -
-

チャレンジ

-
印刷に特化したスタイルの規則を、別の CSS ファイルに移してください。 -

リファレンスの {{CSSxRef("@import")}} のページを読み、あなたの style4.css スタイルシートに、新しい印刷用のCSS ファイルをインポートする詳しい方法を見つけてください。

- -

ポインターが上にあるときに、見出しを青く変えるようにしてください。

-
- -

チャレンジの解答を見る。

- -

さて次は？

- -

このページに、理解しづらい点や、意見がありましたら Discussion ページに投稿してください。

- -

これまでに、このチュートリアルのすべてのスタイル規則はファイル内に定義されてきました。規則とその値は固定されています。次のページでは、プログラミング言語 JavaScript を使った、規則の動的な変更方法について述べます。

diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index d6a4be6090..aed0b20724 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -30,7 +30,7 @@ /ko/docs/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ko/docs/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS/Getting_Started/Media /ko/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ko/docs/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -66,7 +66,7 @@ /ko/docs/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content -/ko/docs/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS/시작하기/미디어 /ko/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ko/docs/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -76,7 +76,7 @@ /ko/docs/CSS:Getting_Started:Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/CSS:Getting_Started:How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/CSS:Getting_Started:JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ko/docs/CSS:Getting_Started:Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/CSS:Getting_Started:Media /ko/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ko/docs/CSS:Getting_Started:SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/CSS:Getting_Started:Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/CSS:Getting_Started:What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -474,6 +474,7 @@ /ko/docs/Web/API/ParentNode/childElementCount /ko/docs/Web/API/Element/childElementCount /ko/docs/Web/API/Position /ko/docs/Web/API/GeolocationPosition /ko/docs/Web/API/PositionOptions /ko/docs/conflicting/Web/API/Geolocation/getCurrentPosition +/ko/docs/Web/API/RTCConfiguration /ko/docs/conflicting/Web/API/RTCPeerConnection/RTCPeerConnection /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/Screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation @@ -532,7 +533,7 @@ /ko/docs/Web/CSS/Getting_Started/Content /ko/docs/Learn/CSS/Howto/Generated_content /ko/docs/Web/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/Getting_Started/JavaScript /ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ko/docs/Web/CSS/Getting_Started/Media /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/Web/CSS/Getting_Started/Media /ko/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ko/docs/Web/CSS/Getting_Started/SVG_graphics /ko/docs/Web/SVG/Tutorial/SVG_and_CSS /ko/docs/Web/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Web/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -563,7 +564,7 @@ /ko/docs/Web/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/내용물 /ko/docs/Learn/CSS/Howto/Generated_content -/ko/docs/Web/CSS/시작하기/미디어 /ko/docs/Web/Progressive_web_apps/Responsive/Media_types +/ko/docs/Web/CSS/시작하기/미디어 /ko/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ko/docs/Web/CSS/시작하기/색상 /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /ko/docs/Web/CSS/시작하기/설렉터 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Web/CSS/시작하기/왜_CSS를_사용하나 /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -684,6 +685,7 @@ /ko/docs/Web/Media/Formats/코덱파라미터 /ko/docs/Web/Media/Formats/codecs_parameter /ko/docs/Web/Performance/브라우저는_어떻게_동작하는가 /ko/docs/Web/Performance/How_browsers_work /ko/docs/Web/Performance/중요_렌더링_경로 /ko/docs/Web/Performance/Critical_rendering_path +/ko/docs/Web/Progressive_web_apps/Responsive/Media_types /ko/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ko/docs/Web/Progressive_web_apps/소개 /ko/docs/Web/Progressive_web_apps/Introduction /ko/docs/Web/Reference/Events /ko/docs/Web/Events /ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/API/Window/DOMContentLoaded_event diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index c5aa83f753..81711a9810 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -6112,12 +6112,6 @@ "younheeJang" ] }, - "Web/API/RTCConfiguration": { - "modified": "2020-10-15T22:21:34.262Z", - "contributors": [ - "chansbro" - ] - }, "Web/API/RTCDataChannelEvent": { "modified": "2020-10-15T22:21:45.154Z", "contributors": [ @@ -16248,13 +16242,6 @@ "cs09g" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2019-03-23T23:33:02.082Z", - "contributors": [ - "teoli", - "SpikeYou" - ] - }, "Web/SVG": { "modified": "2019-11-05T05:19:15.768Z", "contributors": [ @@ -17544,6 +17531,12 @@ "Saem" ] }, + "conflicting/Web/API/RTCPeerConnection/RTCPeerConnection": { + "modified": "2020-10-15T22:21:34.262Z", + "contributors": [ + "chansbro" + ] + }, "conflicting/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": { "modified": "2019-03-23T22:54:05.275Z", "contributors": [ @@ -17580,6 +17573,13 @@ "jaemin_jo" ] }, + "conflicting/Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-03-23T23:33:02.082Z", + "contributors": [ + "teoli", + "SpikeYou" + ] + }, "conflicting/Web/Guide": { "modified": "2019-03-23T23:41:47.329Z", "contributors": [ diff --git a/files/ko/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ko/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html new file mode 100644 index 0000000000..e96f592c1e --- /dev/null +++ b/files/ko/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -0,0 +1,98 @@ +--- +title: RTCConfiguration +slug: conflicting/Web/API/RTCPeerConnection/RTCPeerConnection +tags: + - API + - Dictionary + - Interface + - RTCConfiguration + - WebRTC +translation_of: Web/API/RTCConfiguration +original_slug: Web/API/RTCConfiguration +--- +

{{APIRef("WebRTC")}}{{draft}}

+ +

RTCConfiguration는 {{domxref("RTCPeerConnection")}}의 설정에 대한 옵션들을 제공합니다. 연결이 처음으로 이루어질 때 {{domxref("RTCPeerConnection")}} 생성자에 전달되거나, 연결이 확립된 동안 설정을 확인하고 변경이 가능한{{domxref("RTCPeerConnection.getConfiguration()")}} 및 {{domxref("RTCPeerConnection.setConfiguration()")}} 메소드와 같이 사용됩니다.

+ +

옵션은 ICE 서버, 전달 셋팅, 그리고 identity 정보를 포함합니다.

+ +

속성

+ +
+
{{domxref("RTCConfiguration.bundlePolicy", "bundlePolicy")}} {{optional_inline}}
+
원격 피어가 SDP BUNDLE standard에 호환이 불가능할 때, 어떻게 candidate의 네고시에이션을 처리 할 것인지를 정의합니다. 이 옵션은 무조건 enum RTCBundlePolicy의 값들 중 하나여야만 합니다. 만약 이 값이 딕셔너리에 없으면, "balanced" 으로 지정됩니다.
+
{{domxref("RTCConfiguration.certificates", "certificates")}} {{optional_inline}}
+
인증을 위해 연결에서 사용되는 {{domxref("RTCCertificate")}} 타입의 객체의 {{jsxref("Array")}} 입니다. 이 속성이 정의되어있지 않으면, 각 {{domxref("RTCPeerConnection")}} 인스턴스별로 자동으로 인증서 모음이 생성됩니다. 하나의 연결에는 오직 한개의 인증서만 사용이 되지만, 여러 알고리즘들에 대해 다수의 인증서를 제공하는 방법으로 어떤 상황에서 우연치 않게 연결이 성공되는 경우를 줄일 수 있습니다. 아래는 {{anch("Using certificates")}}에 대한 추가 정보입니다. +
이 설정 옵션은 한 번 정의되면 변경이 불가능합니다. 한 번 인증서가 지정되면, 그 후 발생하는 {{domxref("RTCPeerConnection.setConfiguration()")}} 호출에서 이 속성이 무시됩니다.
+
+
{{domxref("RTCConfiguration.iceCandidatePoolSize", "iceCandidatePoolSize")}} {{optional_inline}}
+
미리 가져와진 ICE candidate pool의 크기를 정의하는 서명되지 않은 16-bit 정수 값. 기본 값은 0으로 candidate를 미리 가져오는 것이 발생하지 않음을 뜻함. 연결 시도를 시작하기전에 ICE 에이전트가 ICE candidates를 미리 가져오게 허용하면, candidate들은  {{domxref("RTCPeerConnection.setLocalDescription()")}} 호출로 이미 확인이 가능하게 되고, 이로 인해 몇몇 상황에서 연결이 더 빠르게 성립됩니다. +
ICE candidate pool의 크기 변경은 ICE 수집을 시작하게 만들 수 있습니다.
+
+
{{domxref("RTCConfiguration.iceServers", "iceServers")}} {{optional_inline}}
+
ICE 에이전트에 의해 이용될 수 있는 하나의 서버를 설명하는 {{domxref("RTCIceServer")}} 객체의 배열. 일반적으로 STUN 혹은 TURN 서버들입니다. 이 옵션이 정의가 안되어있으면, ICE 에이전트는 자체 ICE 서버를 선택하여 사용 할 수 있습니다. 자체 서버가 없다면, 연결은 사용 가능한 STUN 혹은 TURN 서버 없이 진행되고, 이는 로컬 피어와의 연결을 제한합니다. 
+
{{domxref("RTCConfiguration.iceTransportPolicy", "iceTransportPolicy")}} {{optional_inline}}
+
현재 ICE 전송 정책; 이는 RTCIceTransportPolicy enum에 존재하는 값입니다. 이 옵션이 정의가 안되어있으면, "all"로 설정됩니다.
+
{{domxref("RTCConfiguration.peerIdentity", "peerIdentity")}} {{optional_inline}}
+
{{domxref("RTCPeerConnection")}}에 대한 타겟 피어 identity를 명시하는 {{domxref("DOMString")}}. 이 값이 지정되어있으면, RTCPeerConnection은 주어진 이름으로 인증이 성공하지 않는 이상 원격 피어와 연결하지 않습니다. (기본 값은 null 입니다.) 
+
{{domxref("RTCConfiguration.rtcpMuxPolicy", "rtcpMuxPolicy")}} {{optional_inline}}
+
non-multiplexed RTCP를 지원하기 위해, ICE candidate를 수집 할 때 사용되는 RTCP mux 정책. 이 값은 RTCRtcpMuxPolicy enum.에 존재하는 값입니다. 기본 값은 "require"입니다.
+
+ +

상수

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCBundlePolicy enum", 0, 1)}}

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCIceTransportPolicy enum", 0, 1)}}

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCRtcpMuxPolicy enum", 0, 1)}}

+ +

인증서 사용하기

+ +

RTCPeerConnection가 자동으로 생성하는 인증서 대신에, 사용자가 직접 {{domxref("RTCPeerConnection")}}을 위한 자체 인증서를 만들기를 원한다면 {{domxref("RTCPeerConnection.generateCertificate()")}} 호출 합니다. 

+ +

이 속성은 다중 인증서 제공을 지원합니다. 이는 주어진 DTLS 연결이 오직 하나의 인증서를 사용한다해도, 다중 인증서는 여러개의 암호화 알고리즘 지원을 허용하기 때문입니다. RTCPeerConnection의 구현은 DTLS 합의 중 결정된 알고리즘 및 원격 피어에 근거해서 어떤 인증서를 사용 할지 선택합니다.

+ +

인증서를 제공하지 않으면, 신규 인증서가 자동으로 생성이 됩니다. 사용자 자체의 identity 키를 제공하는 것의 한 가지 명백한 장점은 연속성입니다. 동일한 인증서를 이후 호출에도 사용하게되면, 원격 피어는 사용자가 같은 caller인지 알 수 있습니다. 또한, 새로운 인증키를 발급하지 않아도 됩니다. 

+ +

<<<link to added info on identity>>>

+ +

예시

+ +

아래 설정은 두개의 ICE 서버를 구축합니다. 첫 번째 서버, stun:stun.services.mozilla.com는 인증을 요구하기 때문에 유저 이름과 비밀번호를 제공합니다. 두 번째 서버는 두 개의 URL 주소가 있습니다: stun:stun.example.com와 stun:stun-1.example.com입니다.

+ +
var configuration = { iceServers: [{
+                          urls: "stun:stun.services.mozilla.com",
+                          username: "louis@mozilla.com",
+                          credential: "webrtcdemo"
+                      }, {
+                          urls: ["stun:stun.example.com", "stun:stun-1.example.com"]
+                      }]
+};
+
+var pc = new RTCPeerConnection(configuration);
+ +

사양서

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0','#dom-rtcconfiguration','RTCConfiguration')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

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

+
diff --git a/files/ko/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ko/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..d6e1f769a0 --- /dev/null +++ b/files/ko/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,347 @@ +--- +title: 미디어 +slug: conflicting/Web/CSS/Media_Queries/Using_media_queries +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{ CSSTutorialTOC() }}

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}CSS 시작하기 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.

+

정보 : 미디어

+

CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.

+

예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.

+

미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.

+
+
+ 예제
+

웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.

+

마크업 언어에서는, 조정영역의 부모 element의 id가 nav-area이다. ({{ HTMLVersionInline(5) }}에서는 id 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)

+

Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.

+ 
@media print {
+  #nav-area {display: none;}
+  }
+
+
+

일반적인 미디어 타입은 아래와 같다.

+ + + + + + + + + + + + + + + + + + + +
screen컬러 컴퓨터 표시 장치
print출력 장치
projection프로젝트 출력 장치
all그외 모든 미디어 장치(기본 설정)
+
+
+ 좀더 자세히
+

한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.

+

Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 LINK 태그에서 media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.

+

CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.

+

이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.

+

좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 Media를 참고하라.

+

{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 XML data를 참고하라.

+
+

출력

+

CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다

+

{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 @page:left와 @page:right로 각각의 여백을 개별로 설정 할 수 있다.

+

출력 매체를 위해 사용되는 단위는 인치 (in), 포인트(pt = 1/72 inch), 센티미터(cm)와 밀리미터(mm)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.

+

Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.

+
+
+ 예제
+

아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.

+ 
@page {margin: 1in;}
+
+

 

+

아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.

+ 
h1 {page-break-before: always;}
+
+
+
+
+ 좀더 자세히
+

CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 Paged media를 확인 하라.

+

CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.

+
+

사용자 인터페이스

+

CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.

+

사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.

+

단지 5가지 설렉터가 있을 뿐이다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
설렉터선택
E{{ cssxref(":hover") }}포인터가 E로 명시된 element위에 놓일 경우
E{{ cssxref(":focus") }}키보드 포커스를 가진 E element
E{{ cssxref(":active") }}사용자 현재 동작에 개임된 E element
E{{ cssxref(":link") }}최근에 방문하지 않은 URL을 가진 Hyperlink인 E element
E{{ cssxref(":visited") }}최근에 방문한 URL을 가진 Hyperlink인 E element
+
+

주의: :visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 Privacy and the :visited selector을 보라.

+
+

{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.

+ + + + + + + + + + + + + + + + + + + + + + + +
설렉터선택
pointer링크임을 나타낼때
wait프로그램이 실행중이라 입력을 받지 못하는 상태일때
progress프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태
default기본 상태(보통 화살표 모양)
+

{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.

+

Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. Selectors can specify these attributes like any other attributes, by using square brackets: {{ mediawiki.external('disabled') }} or {{ mediawiki.external('readonly') }}.

+
+
+ Example
+

These rules specify styles for a button that changes dynamically as the user interacts with it:

+ 
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+

 

+

This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+

 

+

A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.

+
+
+
+ More details
+

For more information about user interfaces in CSS, see User interface in the CSS Specification.

+

There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.

+
+

Action: Printing a document

+
    +
  1. Make a new HTML document, doc4.html. Copy and paste the content from here: + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h11>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Make a new stylesheet, style4.css. Copy and paste the content from here: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. View this document in your browser; it uses your browser's default style.
    4. +
  4. Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    + Heading for paged media
    +
    + Section A
    +
    + This is the first section...
    +
    + Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    + Heading for paged media
    +
    + Section B
    +
    + This is the second section...
    +
    + Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + +
+ Challenges
Move the print-specific style rules to a separate CSS file. +

Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your style4.css stylesheet.

+

Make the headings turn blue when the mouse pointer is over them.

+
+

 See solutions to these challenges.

+

What next?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: JavaScript

diff --git a/files/ko/web/api/rtcconfiguration/index.html b/files/ko/web/api/rtcconfiguration/index.html deleted file mode 100644 index bc578aaf53..0000000000 --- a/files/ko/web/api/rtcconfiguration/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: RTCConfiguration -slug: Web/API/RTCConfiguration -tags: - - API - - Dictionary - - Interface - - RTCConfiguration - - WebRTC -translation_of: Web/API/RTCConfiguration ---- -

{{APIRef("WebRTC")}}{{draft}}

- -

RTCConfiguration는 {{domxref("RTCPeerConnection")}}의 설정에 대한 옵션들을 제공합니다. 연결이 처음으로 이루어질 때 {{domxref("RTCPeerConnection")}} 생성자에 전달되거나, 연결이 확립된 동안 설정을 확인하고 변경이 가능한{{domxref("RTCPeerConnection.getConfiguration()")}} 및 {{domxref("RTCPeerConnection.setConfiguration()")}} 메소드와 같이 사용됩니다.

- -

옵션은 ICE 서버, 전달 셋팅, 그리고 identity 정보를 포함합니다.

- -

속성

- -
-
{{domxref("RTCConfiguration.bundlePolicy", "bundlePolicy")}} {{optional_inline}}
-
원격 피어가 SDP BUNDLE standard에 호환이 불가능할 때, 어떻게 candidate의 네고시에이션을 처리 할 것인지를 정의합니다. 이 옵션은 무조건 enum RTCBundlePolicy의 값들 중 하나여야만 합니다. 만약 이 값이 딕셔너리에 없으면, "balanced" 으로 지정됩니다.
-
{{domxref("RTCConfiguration.certificates", "certificates")}} {{optional_inline}}
-
인증을 위해 연결에서 사용되는 {{domxref("RTCCertificate")}} 타입의 객체의 {{jsxref("Array")}} 입니다. 이 속성이 정의되어있지 않으면, 각 {{domxref("RTCPeerConnection")}} 인스턴스별로 자동으로 인증서 모음이 생성됩니다. 하나의 연결에는 오직 한개의 인증서만 사용이 되지만, 여러 알고리즘들에 대해 다수의 인증서를 제공하는 방법으로 어떤 상황에서 우연치 않게 연결이 성공되는 경우를 줄일 수 있습니다. 아래는 {{anch("Using certificates")}}에 대한 추가 정보입니다. -
이 설정 옵션은 한 번 정의되면 변경이 불가능합니다. 한 번 인증서가 지정되면, 그 후 발생하는 {{domxref("RTCPeerConnection.setConfiguration()")}} 호출에서 이 속성이 무시됩니다.
-
-
{{domxref("RTCConfiguration.iceCandidatePoolSize", "iceCandidatePoolSize")}} {{optional_inline}}
-
미리 가져와진 ICE candidate pool의 크기를 정의하는 서명되지 않은 16-bit 정수 값. 기본 값은 0으로 candidate를 미리 가져오는 것이 발생하지 않음을 뜻함. 연결 시도를 시작하기전에 ICE 에이전트가 ICE candidates를 미리 가져오게 허용하면, candidate들은  {{domxref("RTCPeerConnection.setLocalDescription()")}} 호출로 이미 확인이 가능하게 되고, 이로 인해 몇몇 상황에서 연결이 더 빠르게 성립됩니다. -
ICE candidate pool의 크기 변경은 ICE 수집을 시작하게 만들 수 있습니다.
-
-
{{domxref("RTCConfiguration.iceServers", "iceServers")}} {{optional_inline}}
-
ICE 에이전트에 의해 이용될 수 있는 하나의 서버를 설명하는 {{domxref("RTCIceServer")}} 객체의 배열. 일반적으로 STUN 혹은 TURN 서버들입니다. 이 옵션이 정의가 안되어있으면, ICE 에이전트는 자체 ICE 서버를 선택하여 사용 할 수 있습니다. 자체 서버가 없다면, 연결은 사용 가능한 STUN 혹은 TURN 서버 없이 진행되고, 이는 로컬 피어와의 연결을 제한합니다. 
-
{{domxref("RTCConfiguration.iceTransportPolicy", "iceTransportPolicy")}} {{optional_inline}}
-
현재 ICE 전송 정책; 이는 RTCIceTransportPolicy enum에 존재하는 값입니다. 이 옵션이 정의가 안되어있으면, "all"로 설정됩니다.
-
{{domxref("RTCConfiguration.peerIdentity", "peerIdentity")}} {{optional_inline}}
-
{{domxref("RTCPeerConnection")}}에 대한 타겟 피어 identity를 명시하는 {{domxref("DOMString")}}. 이 값이 지정되어있으면, RTCPeerConnection은 주어진 이름으로 인증이 성공하지 않는 이상 원격 피어와 연결하지 않습니다. (기본 값은 null 입니다.) 
-
{{domxref("RTCConfiguration.rtcpMuxPolicy", "rtcpMuxPolicy")}} {{optional_inline}}
-
non-multiplexed RTCP를 지원하기 위해, ICE candidate를 수집 할 때 사용되는 RTCP mux 정책. 이 값은 RTCRtcpMuxPolicy enum.에 존재하는 값입니다. 기본 값은 "require"입니다.
-
- -

상수

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCBundlePolicy enum", 0, 1)}}

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCIceTransportPolicy enum", 0, 1)}}

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCRtcpMuxPolicy enum", 0, 1)}}

- -

인증서 사용하기

- -

RTCPeerConnection가 자동으로 생성하는 인증서 대신에, 사용자가 직접 {{domxref("RTCPeerConnection")}}을 위한 자체 인증서를 만들기를 원한다면 {{domxref("RTCPeerConnection.generateCertificate()")}} 호출 합니다. 

- -

이 속성은 다중 인증서 제공을 지원합니다. 이는 주어진 DTLS 연결이 오직 하나의 인증서를 사용한다해도, 다중 인증서는 여러개의 암호화 알고리즘 지원을 허용하기 때문입니다. RTCPeerConnection의 구현은 DTLS 합의 중 결정된 알고리즘 및 원격 피어에 근거해서 어떤 인증서를 사용 할지 선택합니다.

- -

인증서를 제공하지 않으면, 신규 인증서가 자동으로 생성이 됩니다. 사용자 자체의 identity 키를 제공하는 것의 한 가지 명백한 장점은 연속성입니다. 동일한 인증서를 이후 호출에도 사용하게되면, 원격 피어는 사용자가 같은 caller인지 알 수 있습니다. 또한, 새로운 인증키를 발급하지 않아도 됩니다. 

- -

<<<link to added info on identity>>>

- -

예시

- -

아래 설정은 두개의 ICE 서버를 구축합니다. 첫 번째 서버, stun:stun.services.mozilla.com는 인증을 요구하기 때문에 유저 이름과 비밀번호를 제공합니다. 두 번째 서버는 두 개의 URL 주소가 있습니다: stun:stun.example.com와 stun:stun-1.example.com입니다.

- -
var configuration = { iceServers: [{
-                          urls: "stun:stun.services.mozilla.com",
-                          username: "louis@mozilla.com",
-                          credential: "webrtcdemo"
-                      }, {
-                          urls: ["stun:stun.example.com", "stun:stun-1.example.com"]
-                      }]
-};
-
-var pc = new RTCPeerConnection(configuration);
- -

사양서

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebRTC 1.0','#dom-rtcconfiguration','RTCConfiguration')}}{{Spec2('WebRTC 1.0')}}Initial definition.
- -

브라우저 호환성

- -
- - -

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

-
diff --git a/files/ko/web/progressive_web_apps/responsive/media_types/index.html b/files/ko/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index 3c907f9c9b..0000000000 --- a/files/ko/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: 미디어 -slug: Web/Progressive_web_apps/Responsive/Media_types -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/CSS/시작하기/미디어 ---- -

{{ CSSTutorialTOC() }}

-
- 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
-

{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}CSS 시작하기 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.

-

정보 : 미디어

-

CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.

-

예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.

-

미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.

-
-
- 예제
-

웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.

-

마크업 언어에서는, 조정영역의 부모 element의 id가 nav-area이다. ({{ HTMLVersionInline(5) }}에서는 id 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)

-

Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.

- 
@media print {
-  #nav-area {display: none;}
-  }
-
-
-

일반적인 미디어 타입은 아래와 같다.

- - - - - - - - - - - - - - - - - - - -
screen컬러 컴퓨터 표시 장치
print출력 장치
projection프로젝트 출력 장치
all그외 모든 미디어 장치(기본 설정)
-
-
- 좀더 자세히
-

한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.

-

Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 LINK 태그에서 media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.

-

CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.

-

이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.

-

좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 Media를 참고하라.

-

{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 XML data를 참고하라.

-
-

출력

-

CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다

-

{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 @page:left와 @page:right로 각각의 여백을 개별로 설정 할 수 있다.

-

출력 매체를 위해 사용되는 단위는 인치 (in), 포인트(pt = 1/72 inch), 센티미터(cm)와 밀리미터(mm)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.

-

Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.

-
-
- 예제
-

아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.

- 
@page {margin: 1in;}
-
-

 

-

아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.

- 
h1 {page-break-before: always;}
-
-
-
-
- 좀더 자세히
-

CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 Paged media를 확인 하라.

-

CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.

-
-

사용자 인터페이스

-

CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.

-

사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.

-

단지 5가지 설렉터가 있을 뿐이다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
설렉터선택
E{{ cssxref(":hover") }}포인터가 E로 명시된 element위에 놓일 경우
E{{ cssxref(":focus") }}키보드 포커스를 가진 E element
E{{ cssxref(":active") }}사용자 현재 동작에 개임된 E element
E{{ cssxref(":link") }}최근에 방문하지 않은 URL을 가진 Hyperlink인 E element
E{{ cssxref(":visited") }}최근에 방문한 URL을 가진 Hyperlink인 E element
-
-

주의: :visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 Privacy and the :visited selector을 보라.

-
-

{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.

- - - - - - - - - - - - - - - - - - - - - - - -
설렉터선택
pointer링크임을 나타낼때
wait프로그램이 실행중이라 입력을 받지 못하는 상태일때
progress프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태
default기본 상태(보통 화살표 모양)
-

{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.

-

Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. Selectors can specify these attributes like any other attributes, by using square brackets: {{ mediawiki.external('disabled') }} or {{ mediawiki.external('readonly') }}.

-
-
- Example
-

These rules specify styles for a button that changes dynamically as the user interacts with it:

- 
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
-

 

-

This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:

- - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
disablednormalactive
-
-

 

-

A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.

-
-
-
- More details
-

For more information about user interfaces in CSS, see User interface in the CSS Specification.

-

There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.

-
-

Action: Printing a document

-
    -
  1. Make a new HTML document, doc4.html. Copy and paste the content from here: - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h11>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. Make a new stylesheet, style4.css. Copy and paste the content from here: - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. View this document in your browser; it uses your browser's default style.
    4. -
  4. Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer. - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    - Heading for paged media
    -
    - Section A
    -
    - This is the first section...
    -
    - Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    - Heading for paged media
    -
    - Section B
    -
    - This is the second section...
    -
    - Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - -
- Challenges
Move the print-specific style rules to a separate CSS file. -

Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your style4.css stylesheet.

-

Make the headings turn blue when the mouse pointer is over them.

-
-

 See solutions to these challenges.

-

What next?

-

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

-

So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: JavaScript

diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt index d9d3d97538..69f793ad43 100644 --- a/files/pl/_redirects.txt +++ b/files/pl/_redirects.txt @@ -63,7 +63,7 @@ /pl/docs/CSS/Na_początek/Kaskadowość_i_dziedziczenie /pl/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /pl/docs/CSS/Na_początek/Kolor /pl/docs/Learn/CSS/Building_blocks/Values_and_units /pl/docs/CSS/Na_początek/Listy /pl/docs/Learn/CSS/Styling_text/Styling_lists -/pl/docs/CSS/Na_początek/Media /pl/docs/Web/Progressive_web_apps/Responsive/Media_types +/pl/docs/CSS/Na_początek/Media /pl/docs/Web/CSS/Media_Queries/Using_media_queries /pl/docs/CSS/Na_początek/Selektory /pl/docs/Learn/CSS/Building_blocks/Selectors /pl/docs/CSS/Na_początek/Style_tekstowe /pl/docs/Learn/CSS/Styling_text/Fundamentals /pl/docs/CSS/Na_początek/Tabele /pl/docs/Learn/CSS/Building_blocks/Styling_tables @@ -178,7 +178,7 @@ /pl/docs/CSS:Na_początek:Kaskadowość_i_dziedziczenie /pl/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /pl/docs/CSS:Na_początek:Kolor /pl/docs/Learn/CSS/Building_blocks/Values_and_units /pl/docs/CSS:Na_początek:Listy /pl/docs/Learn/CSS/Styling_text/Styling_lists -/pl/docs/CSS:Na_początek:Media /pl/docs/Web/Progressive_web_apps/Responsive/Media_types +/pl/docs/CSS:Na_początek:Media /pl/docs/Web/CSS/Media_Queries/Using_media_queries /pl/docs/CSS:Na_początek:Selektory /pl/docs/Learn/CSS/Building_blocks/Selectors /pl/docs/CSS:Na_początek:Style_tekstowe /pl/docs/Learn/CSS/Styling_text/Fundamentals /pl/docs/CSS:Na_początek:Tabele /pl/docs/Learn/CSS/Building_blocks/Styling_tables @@ -1564,7 +1564,7 @@ /pl/docs/Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie /pl/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /pl/docs/Web/CSS/Na_początek/Kolor /pl/docs/Learn/CSS/Building_blocks/Values_and_units /pl/docs/Web/CSS/Na_początek/Listy /pl/docs/Learn/CSS/Styling_text/Styling_lists -/pl/docs/Web/CSS/Na_początek/Media /pl/docs/Web/Progressive_web_apps/Responsive/Media_types +/pl/docs/Web/CSS/Na_początek/Media /pl/docs/Web/CSS/Media_Queries/Using_media_queries /pl/docs/Web/CSS/Na_początek/Selektory /pl/docs/Learn/CSS/Building_blocks/Selectors /pl/docs/Web/CSS/Na_początek/Style_tekstowe /pl/docs/Learn/CSS/Styling_text/Fundamentals /pl/docs/Web/CSS/Na_początek/Tables /pl/docs/Learn/CSS/Building_blocks/Styling_tables @@ -2156,6 +2156,7 @@ /pl/docs/Web/JavaScript/Referencje/Własnościundefined /pl/docs/Web/JavaScript/Reference/Global_Objects/undefined /pl/docs/Web/JavaScript/Zasoby_języka_JavaScript /pl/docs/Web/JavaScript/Language_Resources /pl/docs/Web/JavaScript/dziedziczenie_lancuch_prototypow /pl/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/pl/docs/Web/Progressive_web_apps/Responsive/Media_types /pl/docs/Web/CSS/Media_Queries/Using_media_queries /pl/docs/Web/SVG/Element/okrąg /pl/docs/Web/SVG/Element/circle /pl/docs/Web/SVG/Inne_zasoby /pl/docs/Web/SVG/Other_Resources /pl/docs/Web/SVG/Przewodnik /pl/docs/Web/SVG/Tutorial diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json index 09762278b7..5acd092626 100644 --- a/files/pl/_wikihistory.json +++ b/files/pl/_wikihistory.json @@ -4299,6 +4299,18 @@ "P0lip" ] }, + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-03-23T23:43:37.766Z", + "contributors": [ + "teoli", + "Verruckt", + "gandalf", + "Takenbot", + "Ptak82", + "Anonymous", + "Witia" + ] + }, "Web/CSS/Mozilla_Extensions": { "modified": "2019-03-24T00:14:13.075Z", "contributors": [ @@ -8731,18 +8743,6 @@ "abes21111984" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2019-03-23T23:43:37.766Z", - "contributors": [ - "teoli", - "Verruckt", - "gandalf", - "Takenbot", - "Ptak82", - "Anonymous", - "Witia" - ] - }, "Web/SVG": { "modified": "2019-03-23T23:48:48.350Z", "contributors": [ diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..cf0f055224 --- /dev/null +++ b/files/pl/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,319 @@ +--- +title: Media +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - CSS:Na_początek +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +

+

Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu. +

Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. +

+

Informacja: Media

+

Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. +Prezentacja może przyjąć wiele różnych form. +

Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. +To są różne media o różnych charakterystykach. +CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów. +

Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj @media z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. +

+ + +
Przykład +
Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. +

W języku znaczników element rodzica pola nawigacyjnego ma id nav-area. +

Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: +

+
+

@media print { +

+
 #nav-area {display: none;}
+ }
+
+
+
+

Niektóre z popularnych typów mediów: +

+ + + + + + + + +
screenKolorowy wyświetlacz komputera +
printWyświetlanie na stronach +
projectionWyświetlane podczas projekcji +
allWszystkie media (domyślne) +
+


+

+ + +
Więcej szczegółów +
Istnieją też inne sposoby określenia docelowych mediów. +

Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie media w znaczniku LINK. +

W CSS możesz użyć @import na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. +

Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. +

Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę Media w specyfikacji CSS. +

Istnieje więcej przykładów wykorzystania własności display na dalszej stronie kursu: Dane XML. +

+
+

Drukowanie

+

CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. +

Reguła @page może ustawiać marginesy strony. +Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla @page:left oraz @page:right. +

Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (in), punkty (pt) = 1/72 cala), centymetry (cm) lub milimetry (mm). Równie dobrze możesz używać ems (em), aby dopasować się do rozmiaru czcionki, oraz procentów (%). +

Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności page-break-before, page-break-after i page-break-inside. +

+ + +
Przykład +
Ta reguła ustawia margines strony na jeden cal dla każdej strony: +
+

@page {margin: 1in;} +

+
+

Ta reguła zapewnia, że każdy element H! zaczyna się na nowej stronie: +

+
+

h1 {page-break-before: always;} +

+
+
+


+

+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę Media stronicowe w specyfikacji CSS. +

Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. +Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. +Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. +

+
+

Interfejsy użytkownika

+

CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem. +

Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. +

Istnieje pięć specjalnych selektorów: +

+ + + + + + + + + + + + +
SelektorWybiera +
E:hoverDowolny element E, nad którym znajduje się wskaźnik +
E:focusDowolny element E, który jest w danym momencie aktywny dla interfejsu +
E:activeElement E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika +
E:linkDowolny element E, który jest odnośnikiem do strony której użytkownik nie odwiedzał ostatnio +
E:visitedDowolny element E, który jest odnośnikiem do adresu URL, który użytkownik odwiedził niedawno +
+

Własność cursor określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor: +

+ + + + + + + + + + +
SelektorWybiera +
pointerWskazuje odnośnik +
waitWskazuje, że program nie może przyjmować danych +
progressWskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika +
defaultDomyślny (zazwyczaj strzałka) +
+

Własność outline tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury. +Jej wartości są podobne do własności border, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. +

Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut disabled lub readonly. +Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: {{ mediawiki.external('disabled') }} lub {{ mediawiki.external('readonly') }}. +


+

+ + +
Przykład +
Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: +
+.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+

To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę: +

+ + +
+ + + + + + +
Click Me +Click Me +Click Me +
+
disablednormalactive +
+
+

W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. +

+
+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę User interface w specyfikacji CSS. +

Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. +

+
+

Zadanie: Drukowanie dokumentu

+

Stwórz nowy dokument HTML, doc4.html. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Print sample</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>Section A</H1>
+<P>This is the first section...</P>
+
+<H1>Section B</H1>
+<P>This is the second section...</P>
+
+<DIV id="print-head">
+Heading for paged media
+</DIV>
+
+<DIV id="print-foot">
+Page:
+</DIV>
+
+</BODY>
+</HTML>
+
+

Stwórz nowy arkusz stylów, style4.css. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
+

Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. +

Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce. +

+ + +
+ + +
+ + +
Heading
+
Section A
+
This is the first section...
+
Page: 1
+
+
+		 + + +
+ + +
Heading
+
Section B
+
This is the second section...
+
Page: 2
+
+
+
+


+

+ + +
Wyzwanie +
Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. +

Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. +

Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. +

+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: JavaScript +

{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} diff --git a/files/pl/web/progressive_web_apps/responsive/media_types/index.html b/files/pl/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index 2314709ef4..0000000000 --- a/files/pl/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: Media -slug: Web/Progressive_web_apps/Responsive/Media_types -tags: - - CSS:Na_początek -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/CSS/Na_początek/Media ---- -

-

Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu. -

Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. -

-

Informacja: Media

-

Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. -Prezentacja może przyjąć wiele różnych form. -

Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. -To są różne media o różnych charakterystykach. -CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów. -

Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj @media z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. -

- - -
Przykład -
Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. -

W języku znaczników element rodzica pola nawigacyjnego ma id nav-area. -

Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: -

-
-

@media print { -

-
 #nav-area {display: none;}
- }
-
-
-
-

Niektóre z popularnych typów mediów: -

- - - - - - - - -
screenKolorowy wyświetlacz komputera -
printWyświetlanie na stronach -
projectionWyświetlane podczas projekcji -
allWszystkie media (domyślne) -
-


-

- - -
Więcej szczegółów -
Istnieją też inne sposoby określenia docelowych mediów. -

Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie media w znaczniku LINK. -

W CSS możesz użyć @import na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. -

Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. -

Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę Media w specyfikacji CSS. -

Istnieje więcej przykładów wykorzystania własności display na dalszej stronie kursu: Dane XML. -

-
-

Drukowanie

-

CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. -

Reguła @page może ustawiać marginesy strony. -Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla @page:left oraz @page:right. -

Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (in), punkty (pt) = 1/72 cala), centymetry (cm) lub milimetry (mm). Równie dobrze możesz używać ems (em), aby dopasować się do rozmiaru czcionki, oraz procentów (%). -

Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności page-break-before, page-break-after i page-break-inside. -

- - -
Przykład -
Ta reguła ustawia margines strony na jeden cal dla każdej strony: -
-

@page {margin: 1in;} -

-
-

Ta reguła zapewnia, że każdy element H! zaczyna się na nowej stronie: -

-
-

h1 {page-break-before: always;} -

-
-
-


-

- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę Media stronicowe w specyfikacji CSS. -

Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. -Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. -Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. -

-
-

Interfejsy użytkownika

-

CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem. -

Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. -

Istnieje pięć specjalnych selektorów: -

- - - - - - - - - - - - -
SelektorWybiera -
E:hoverDowolny element E, nad którym znajduje się wskaźnik -
E:focusDowolny element E, który jest w danym momencie aktywny dla interfejsu -
E:activeElement E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika -
E:linkDowolny element E, który jest odnośnikiem do strony której użytkownik nie odwiedzał ostatnio -
E:visitedDowolny element E, który jest odnośnikiem do adresu URL, który użytkownik odwiedził niedawno -
-

Własność cursor określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor: -

- - - - - - - - - - -
SelektorWybiera -
pointerWskazuje odnośnik -
waitWskazuje, że program nie może przyjmować danych -
progressWskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika -
defaultDomyślny (zazwyczaj strzałka) -
-

Własność outline tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury. -Jej wartości są podobne do własności border, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. -

Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut disabled lub readonly. -Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: {{ mediawiki.external('disabled') }} lub {{ mediawiki.external('readonly') }}. -


-

- - -
Przykład -
Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: -
-.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
-

To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę: -

- - -
- - - - - - -
Click Me -Click Me -Click Me -
-
disablednormalactive -
-
-

W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. -

-
- - -
Więcej szczegółów -
Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę User interface w specyfikacji CSS. -

Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. -

-
-

Zadanie: Drukowanie dokumentu

-

Stwórz nowy dokument HTML, doc4.html. -Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Print sample</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Section A</H1>
-<P>This is the first section...</P>
-
-<H1>Section B</H1>
-<P>This is the second section...</P>
-
-<DIV id="print-head">
-Heading for paged media
-</DIV>
-
-<DIV id="print-foot">
-Page:
-</DIV>
-
-</BODY>
-</HTML>
-
-

Stwórz nowy arkusz stylów, style4.css. -Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: -

-
/*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
-

Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. -

Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce. -

- - -
- - -
- - -
Heading
-
Section A
-
This is the first section...
-
Page: 1
-
-
-		 - - -
- - -
Heading
-
Section B
-
This is the second section...
-
Page: 2
-
-
-
-


-

- - -
Wyzwanie -
Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. -

Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. -

Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. -

-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: JavaScript -

{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 4ad88d5364..9674c73864 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -319,6 +319,7 @@ /ru/docs/Web/API/Document/domConfig /ru/docs/Web/API/Document /ru/docs/Web/API/DocumentOrShadowRoot/activeElement /ru/docs/Web/API/Document/activeElement /ru/docs/Web/API/DocumentOrShadowRoot/getSelection /ru/docs/Web/API/Document/getSelection +/ru/docs/Web/API/EffectTiming /ru/docs/Web/API/KeyframeEffect/KeyframeEffect /ru/docs/Web/API/Element.getBoundingClientRect /ru/docs/Web/API/Element/getBoundingClientRect /ru/docs/Web/API/Element.insertAdjacentHTML /ru/docs/Web/API/Element/insertAdjacentHTML /ru/docs/Web/API/Element/accessKey /ru/docs/Web/API/HTMLElement/accessKey diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index b5f01c9af2..b587e6f583 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -7222,12 +7222,6 @@ "tavira" ] }, - "Web/API/EffectTiming": { - "modified": "2020-10-15T22:29:01.473Z", - "contributors": [ - "Kami-san" - ] - }, "Web/API/Element": { "modified": "2020-10-15T21:21:45.874Z", "contributors": [ @@ -9234,6 +9228,12 @@ "Tvortsa" ] }, + "Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2020-10-15T22:29:01.473Z", + "contributors": [ + "Kami-san" + ] + }, "Web/API/Location": { "modified": "2019-08-09T02:31:05.855Z", "contributors": [ diff --git a/files/ru/web/api/effecttiming/index.html b/files/ru/web/api/effecttiming/index.html deleted file mode 100644 index 4270a9983d..0000000000 --- a/files/ru/web/api/effecttiming/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: EffectTiming -slug: Web/API/EffectTiming -tags: - - API - - Animation - - Dictionary - - EffectTiming - - Experimental - - animate - - web animation - - web animation api -translation_of: Web/API/EffectTiming ---- -
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
- -

Словарь EffectTiming, входящий в состав Web Animations API, используется в {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, и {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} для описания временных свойств анимационных эффектов. Все эти свойства необязательные, хотя без установки duration анимация не будет воспроизводиться.

- -

Проще говоря, эти свойства описывают как {{Glossary("user agent")}} должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.

- -

Свойства

- -
-
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
-
Число миллисекунд для задержки начала анимации. По умолчанию 0.
-
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
-
Указывает направление анимации. Она может выполняться вперёд (normal), назад (reverse), переключать направление после каждой итерации (alternate), или работать назад и переключать после каждой итерации (alternate-reverse). По умолчанию "normal".
-
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
-
Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно 0.
-
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
-
Скорость изменения анимации с течением времени. Принимает заранее определённые значения "linear", "ease", "ease-in", "ease-out", и "ease-in-out", или кастомное "cubic-bezier" со значением типа "cubic-bezier(0.42, 0, 0.58, 1)". По умолчанию "linear".
-
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
-
Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию 0.
-
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
-
Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением ("backwards"), сохраняться после того, как анимация завершилась ("forwards"), или и то и другое ("both"). По умолчанию "none".
-
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
-
Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию 0.0.
-
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
-
Число раз, которое анимация должна повторяться. По умолчанию 1, может принимать значение до {{jsxref("Infinity")}}, чтобы повторять анимацию до тех пор, пока элемент существует.
-
- -

Спецификации

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}{{Spec2('Web Animations')}}Первоначальное определение
- -

Browser compatibility

- - - -

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

- -

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

- - diff --git a/files/ru/web/api/keyframeeffect/keyframeeffect/index.html b/files/ru/web/api/keyframeeffect/keyframeeffect/index.html new file mode 100644 index 0000000000..1106061704 --- /dev/null +++ b/files/ru/web/api/keyframeeffect/keyframeeffect/index.html @@ -0,0 +1,74 @@ +--- +title: EffectTiming +slug: Web/API/KeyframeEffect/KeyframeEffect +tags: + - API + - Animation + - Dictionary + - EffectTiming + - Experimental + - animate + - web animation + - web animation api +translation_of: Web/API/EffectTiming +original_slug: Web/API/EffectTiming +--- +
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+ +

Словарь EffectTiming, входящий в состав Web Animations API, используется в {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, и {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} для описания временных свойств анимационных эффектов. Все эти свойства необязательные, хотя без установки duration анимация не будет воспроизводиться.

+ +

Проще говоря, эти свойства описывают как {{Glossary("user agent")}} должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.

+ +

Свойства

+ +
+
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
+
Число миллисекунд для задержки начала анимации. По умолчанию 0.
+
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
+
Указывает направление анимации. Она может выполняться вперёд (normal), назад (reverse), переключать направление после каждой итерации (alternate), или работать назад и переключать после каждой итерации (alternate-reverse). По умолчанию "normal".
+
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
+
Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно 0.
+
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
+
Скорость изменения анимации с течением времени. Принимает заранее определённые значения "linear", "ease", "ease-in", "ease-out", и "ease-in-out", или кастомное "cubic-bezier" со значением типа "cubic-bezier(0.42, 0, 0.58, 1)". По умолчанию "linear".
+
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
+
Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию 0.
+
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
+
Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением ("backwards"), сохраняться после того, как анимация завершилась ("forwards"), или и то и другое ("both"). По умолчанию "none".
+
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
+
Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию 0.0.
+
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
+
Число раз, которое анимация должна повторяться. По умолчанию 1, может принимать значение до {{jsxref("Infinity")}}, чтобы повторять анимацию до тех пор, пока элемент существует.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}{{Spec2('Web Animations')}}Первоначальное определение
+ +

Browser compatibility

+ + + +

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

+ +

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

+ + diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index ce34e4236f..6a81ba4b59 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -121,7 +121,7 @@ /zh-CN/docs/CSS/动画 /zh-CN/docs/Web/CSS/animation /zh-CN/docs/CSS/开始/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content /zh-CN/docs/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS -/zh-CN/docs/CSS/开始/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/CSS/开始/媒体 /zh-CN/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/CSS:Getting_Started:Content /zh-CN/docs/Learn/CSS/Howto/Generated_content /zh-CN/docs/CSS:Media:Visual /zh-CN/docs/Web/CSS/@media /zh-CN/docs/CSS:background /zh-CN/docs/Web/CSS/background @@ -1270,6 +1270,8 @@ /zh-CN/docs/Web/API/DocumentOrShadowRoot/getSelection /zh-CN/docs/Web/API/Document/getSelection /zh-CN/docs/Web/API/DocumentOrShadowRoot/pointerLockElement /zh-CN/docs/Web/API/Document/pointerLockElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/styleSheets /zh-CN/docs/Web/API/Document/styleSheets +/zh-CN/docs/Web/API/EffectTiming /zh-CN/docs/conflicting/Web/API/KeyframeEffect/KeyframeEffect +/zh-CN/docs/Web/API/EffectTiming/easing /zh-CN/docs/Web/API/KeyframeEffect/KeyframeEffect /zh-CN/docs/Web/API/Element.classList /zh-CN/docs/Web/API/Element/classList /zh-CN/docs/Web/API/Element.className /zh-CN/docs/Web/API/Element/className /zh-CN/docs/Web/API/Element.clientLeft /zh-CN/docs/Web/API/Element/clientLeft @@ -1452,6 +1454,7 @@ /zh-CN/docs/Web/API/PositionError /zh-CN/docs/Web/API/GeolocationPositionError /zh-CN/docs/Web/API/PositionOptions /zh-CN/docs/conflicting/Web/API/Geolocation/getCurrentPosition /zh-CN/docs/Web/API/PositionOptions/timeout /zh-CN/docs/conflicting/Web/API/Geolocation/getCurrentPosition_058087067b28ad25fff974fd59827fb6 +/zh-CN/docs/Web/API/RTCConfiguration /zh-CN/docs/conflicting/Web/API/RTCPeerConnection/RTCPeerConnection /zh-CN/docs/Web/API/RandomSource/getRandomValues /zh-CN/docs/Web/API/Crypto/getRandomValues /zh-CN/docs/Web/API/Response/克隆 /zh-CN/docs/Web/API/Response/clone /zh-CN/docs/Web/API/SVGPathElement/getTotalLength /zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength @@ -1789,7 +1792,7 @@ /zh-CN/docs/Web/CSS/实际值 /zh-CN/docs/Web/CSS/actual_value /zh-CN/docs/Web/CSS/开始/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content /zh-CN/docs/Web/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS -/zh-CN/docs/Web/CSS/开始/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/Web/CSS/开始/媒体 /zh-CN/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/CSS/整型 /zh-CN/docs/Web/CSS/integer /zh-CN/docs/Web/CSS/文本修饰 /zh-CN/docs/Web/CSS/text-decoration /zh-CN/docs/Web/CSS/文本装饰线厚度(粗细) /zh-CN/docs/Web/CSS/text-decoration-thickness @@ -1890,9 +1893,9 @@ /zh-CN/docs/Web/Guide/CSS/Consistent_list_indentation /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /zh-CN/docs/Web/Guide/CSS/Counters /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /zh-CN/docs/Web/Guide/CSS/Getting_started/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content -/zh-CN/docs/Web/Guide/CSS/Getting_started/Media /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/Web/Guide/CSS/Getting_started/Media /zh-CN/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS -/zh-CN/docs/Web/Guide/CSS/Getting_started/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/Web/Guide/CSS/Getting_started/媒体 /zh-CN/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/Guide/CSS/Media_queries /zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/Guide/CSS/Testing_media_queries /zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries /zh-CN/docs/Web/Guide/CSS/Understanding_z_index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index @@ -2183,6 +2186,7 @@ /zh-CN/docs/Web/JavaScript/重新认识js /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/Web/Media/Formats/视频编解码器 /zh-CN/docs/Web/Media/Formats/Video_codecs /zh-CN/docs/Web/Performance/浏览器渲染页面的工作原理 /zh-CN/docs/Web/Performance/How_browsers_work +/zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types /zh-CN/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/Progressive_web_apps/加载 /zh-CN/docs/Web/Progressive_web_apps/Loading /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 diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index e686e78005..621cc7ce23 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -11855,18 +11855,6 @@ "rainliang65536" ] }, - "Web/API/EffectTiming": { - "modified": "2020-10-15T22:30:45.773Z", - "contributors": [ - "sideshowbarker" - ] - }, - "Web/API/EffectTiming/easing": { - "modified": "2020-10-15T22:30:45.316Z", - "contributors": [ - "qiufeihong2018" - ] - }, "Web/API/Element": { "modified": "2020-10-15T21:04:09.528Z", "contributors": [ @@ -16576,6 +16564,12 @@ "cuixiping" ] }, + "Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2020-10-15T22:30:45.316Z", + "contributors": [ + "qiufeihong2018" + ] + }, "Web/API/LocalFileSystemSync": { "modified": "2019-03-23T22:09:04.520Z", "contributors": [ @@ -18809,12 +18803,6 @@ "BettyCHEN" ] }, - "Web/API/RTCConfiguration": { - "modified": "2019-03-23T22:18:59.231Z", - "contributors": [ - "moshoujingli" - ] - }, "Web/API/RTCDataChannel": { "modified": "2019-03-23T23:04:49.663Z", "contributors": [ @@ -44646,18 +44634,6 @@ "githubxiaominge" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2019-03-23T23:12:04.497Z", - "contributors": [ - "Robinx", - "Harvesty", - "jasonzhyan", - "ziyunfei", - "yeol", - "teoli", - "Chajn" - ] - }, "Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { "modified": "2020-11-17T04:04:41.165Z", "contributors": [ @@ -47155,6 +47131,12 @@ "Taoja" ] }, + "conflicting/Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2020-10-15T22:30:45.773Z", + "contributors": [ + "sideshowbarker" + ] + }, "conflicting/Web/API/MouseEvent/altKey": { "modified": "2019-03-24T00:16:10.184Z", "contributors": [ @@ -47253,6 +47235,12 @@ "hibernake" ] }, + "conflicting/Web/API/RTCPeerConnection/RTCPeerConnection": { + "modified": "2019-03-23T22:18:59.231Z", + "contributors": [ + "moshoujingli" + ] + }, "conflicting/Web/API/StorageManager/estimate": { "modified": "2019-03-18T21:31:04.064Z", "contributors": [ @@ -47516,6 +47504,18 @@ "lazurey" ] }, + "conflicting/Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-03-23T23:12:04.497Z", + "contributors": [ + "Robinx", + "Harvesty", + "jasonzhyan", + "ziyunfei", + "yeol", + "teoli", + "Chajn" + ] + }, "conflicting/Web/CSS/easing-function": { "modified": "2020-10-15T21:21:10.131Z", "contributors": [ diff --git a/files/zh-cn/conflicting/web/api/keyframeeffect/keyframeeffect/index.html b/files/zh-cn/conflicting/web/api/keyframeeffect/keyframeeffect/index.html new file mode 100644 index 0000000000..54afe3285e --- /dev/null +++ b/files/zh-cn/conflicting/web/api/keyframeeffect/keyframeeffect/index.html @@ -0,0 +1,79 @@ +--- +title: EffectTiming +slug: conflicting/Web/API/KeyframeEffect/KeyframeEffect +tags: + - API + - Animation + - Dictionary + - EffectTiming + - Experimental + - Interface + - KeyframeEffect + - NeedsTranslation + - Reference + - TopicStub + - Web Animations + - animate + - web animations api +translation_of: Web/API/EffectTiming +original_slug: Web/API/EffectTiming +--- +
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+ +

The EffectTiming dictionary, part of the Web Animations API, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a duration the animation will not play.

+ +

Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.

+ +

Properties

+ +
+
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
+
The number of milliseconds to delay the start of the animation. Defaults to 0.
+
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
+
Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
+
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
+
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
+
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
+
The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".
+
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
+
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 
+
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
+
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
+
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
+
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
+
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
+
The number of times the animation should repeat. Defaults to 1, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html new file mode 100644 index 0000000000..0d48c5aaa4 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -0,0 +1,67 @@ +--- +title: RTCConfiguration +slug: conflicting/Web/API/RTCPeerConnection/RTCPeerConnection +translation_of: Web/API/RTCConfiguration +original_slug: Web/API/RTCConfiguration +--- +

{{APIRef("WebRTC")}}{{draft}}

+ +

The RTCConfiguration dictionary is used to provide configuration options for an {{domxref("RTCPeerConnection")}}. It may be passed into the constructor when instantiating a connection, or used with the {{domxref("RTCPeerConnection.getConfiguration()")}} and {{domxref("RTCPeerConnection.setConfiguration()")}} methods, which allow inspecting and changing the configuration while a connection is established.

+ +

The options include ICE server and transport settings and identity information.

+ +

Properties

+ +
+
bundlePolicy {{optional_inline}}
+
Specifies how to handle negotiation of candidates when the remote peer is not compatible with the SDP BUNDLE standard. This must be one of the values from the enum RTCBundlePolicy. If this value isn't included in the dictionary, "balanced" is assumed.
+
certificates {{optional_inline}}
+
An {{jsxref("Array")}} of objects of type {{domxref("RTCCertificate")}} which are used by the connection for authentication. If this property isn't specified, a set of certificates is generated automatically for each {{domxref("RTCPeerConnection")}} instance. Although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. See {{anch("Using certificates")}} below for additional information. +
This configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to {{domxref("RTCPeerConnection.setConfiguration()")}}.
+
+
iceCandidatePoolSize {{optional_inline}}
+
一个16bit无符号整型值，代表预获取的ICE candidate pool的大小。 默认为 0 (意味着不会发生candidate的预获取)。在某些情况下，由于预获取了ICE candidate，在 {{domxref("RTCPeerConnection.setLocalDescription()")}} 被调用时，被预获取的candidate可被立刻检查，从而导致可以更快的建立连接。 +
改变 ICE candidate pool的大小将触发启动 ICE gathering。
+
+
iceServers {{optional_inline}}
+
An array of {{domxref("RTCIceServer")}} objects, each describing one server which may be used by the ICE agent; these are typically STUN and/or TURN servers. If this isn't specified, the ICE agent may choose to use its own ICE servers; otherwise, the connection attempt will be made with no STUN or TURN server available, which limits the connection to local peers.
+
iceTransportPolicy {{optional_inline}}
+
The current ICE transport policy; this must be one of the values from the RTCIceTransportPolicy enum. If this isn't specified, "all" is assumed.
+
peerIdentity {{optional_inline}}
+
A {{domxref("DOMString")}} which specifies the target peer identity for the {{domxref("RTCPeerConnection")}}. If this value is set (it defaults to null), the RTCPeerConnection will not connect to a remote peer unless it can successfully authenticate with the given name.
+
rtcpMuxPolicy {{optional_inline}}
+
The RTCP mux policy to use when gathering ICE candidates, in order to support non-multiplexed RTCP. The value must be one of those from the RTCRtcpMuxPolicy enum. The default is "require".
+
+ +

Constants

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCBundlePolicy enum", 0, 1)}}

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCIceTransportPolicy enum", 0, 1)}}

+ +

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCRtcpMuxPolicy enum", 0, 1)}}

+ +

Using certificates

+ +

When you wish to provide your own certificates for use by an {{domxref("RTCPeerConnection")}} instead of having the RTCPeerConnection generate them automatically, you do so through calls to {{domxref("RTCPeerConnection.generateCertificate()")}}.

+ +

This attribute supports providing multiple certificates because even though a given DTLS connection uses only one certificate, providing multiple certificates allows support for multiple encryption algorithms. The implementation of RTCPeerConnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during DTLS handshake.

+ +

If you don't provide certificates, new ones are generated automatically. One obvious benefit to providing your own is identity key continuity—if you use the same certificate for subsequent calls, the remote peer can tell you're the same caller. This also avoids the cost of generating new keys.

+ +

<<<link to added info on identity>>>

+ +

Example

+ +

The configuration below establishes two ICE servers. The first one, stun:stun.services.mozilla.com, requires authentication, so the username and password are provided. The second server has two URLs: stun:stun.example.com and stun:stun-1.example.com.

+ +
var configuration = { iceServers: [{
+                          urls: "stun:stun.services.mozilla.com",
+                          username: "louis@mozilla.com",
+                          credential: "webrtcdemo"
+                      }, {
+                          urls: ["stun:stun.example.com", "stun:stun-1.example.com"]
+                      }]
+};
+
+var pc = new RTCPeerConnection(configuration);
diff --git a/files/zh-cn/conflicting/web/css/media_queries/using_media_queries/index.html b/files/zh-cn/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..cd416c970a --- /dev/null +++ b/files/zh-cn/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,390 @@ +--- +title: 媒体 +slug: conflicting/Web/CSS/Media_Queries/Using_media_queries +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}

+ +

本章节是 CSS 入门教程指南的第 14 章也是最后一部分。本指南主要描述了用来展示文档的 CSS 的属性及其值，本章节依旧着眼于这个目标，同时也会介绍 CSS 样式表的结构。

+ +

为不同媒介提供的样式信息

+ +

CSS 的作用是将网页文档以更友好的展现方式呈现给用户。

+ +

例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS 就能根据媒介种类控制展示文档的方法。

+ +

CSS通过使用 {{CSSXref("@media")}} 来对特定的媒介指定适配规则。

+ +
+
示例
+ +

我们的站点上有一个导航区域允许用户浏览。

+ +

在标签语言中，导航区域父元素的 id 是 nav-area。（在 {{HTMLVersionInline(5)}}, 可以使用 {{HTMLElement("nav")}} 元素代替带有 id 属性的 {{HTMLElement("div")}}。）

+ +

为了在打印网页的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的：

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

一些常见的媒介类型:

+ + + + + + + + + + + + + + + + + + + + +
screen彩色计算机显示
print打印（分页式媒体）
projection投影
all所有媒体 (默认)
+ +
+
更多
+ +

还有其它一些对 CSS 规则指定适用媒介类型的方式。

+ +

有些标签语言可能允许在链接引用样式表时指定媒介类型。例如，在 HTML 中，你可以通过在 link 标签上添加 media 属性来指定媒介类型。

+ +

在 CSS 中，你可以在样式表开头 {{CSSXref("@import")}} 一个 url 来引入另外的样式表，同时指定其媒介类型。

+ +

根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

+ +

想获取媒介类型更多细节，请参考 CSS 规范中的 Media 部分。

+ +

接下来将介绍更多 {{cssxref("display")}} 属性的例子: XML data.

+
+ +

打印

+ +

CSS 有一些支持打印和分页媒体的特性。

+ +

 {{cssxref("@page")}} 规则能够设置页间距。对于双面打印，还可以分开设置 @page:left 和 @page:right。

+ +

对于打印媒介，可以使用适当的长度单位，像是英寸（in）、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用 em 来配合字体大小和百分比。

+ +

可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。

+ +
+
示例
+ +

这个规则把四个方向的页边距都设置为 1 inch：

+ +
@page {margin: 1in;} 
+ +

这个规则确保每个 H1 元素都从新的一页开始：

+ +
h1 {page-break-before: always;}
+
+
+ +
+
更多细节
+ +

想获取更多细节，请参考 CSS 规范中的 Paged media 部分。

+ +

像 CSS 的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候 Mozilla 浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

+
+ +

用户界面

+ +

CSS 有一些特殊的属性能够支持设备的用户界面，例如电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

+ +

下面有五种特殊的选择器：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}当鼠标悬浮在此元素上
E{{cssxref(":focus")}}当元素获得键盘焦点
E{{cssxref(":active")}}当元素是当前的活动元素
E{{cssxref(":link")}}当元素超链接到一个 url 但是用户还没有访问过
E{{cssxref(":visited")}}当元素超链接到一个 url 但是用户已经访问过
+ +
+

注意: 在 {{gecko("2.0")}} 中可获得的 :visited 选择器信息是有限的。更过细节请参照 Privacy and the :visited selector 。

+
+ +

 {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointer指示超链接
wait表明程序无法接受输入
progress表明程序正在运行，但是仍可以接受输入
default默认（通常是箭头）
+ +

 {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
+ 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。

+ +

一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 disabled 属性和 readonly 属性。选择器可以通过方括: {{mediawiki.external('disabled')}} 或者 {{mediawiki.external('readonly')}}来指定这些属性。

+ +
+
示例
+ +

这些规则规定了按钮在用户使用时动态变化的样式:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  } 
+ +

这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+ +

当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。

+
+ +
+
更多
+ +

获取更多关于CSS用户界面的信息，请参考CSS规范中的 User interface 部分。

+ +

本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。

+
+ +

实践: 打印文档

+ +
    +
  1. 创建一个新的HTML文档, doc4.html. 把下面的HTML代码粘贴过去: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. 创建一个新的样式表, style4.css. 把下面的HTML代码粘贴过去: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. 在浏览器中查看文档，你会看到它使用的是默认样式。
    4. +
  4. 打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。 + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
挑战
把指定打印样式的规则转移到单独的CSS文件。 +

学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 style4.css 样式表里去。

+ +

当鼠标放在标题时，改变颜色为蓝色。

+
+ +

查看这些挑战的解决方案。

+ +

接下来?

+ +

如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 讨论区 中不吝赐教。

+ +

目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 JavaScript 来动态地改变规则。

diff --git a/files/zh-cn/web/api/effecttiming/easing/index.html b/files/zh-cn/web/api/effecttiming/easing/index.html deleted file mode 100644 index 0ee0bfea9f..0000000000 --- a/files/zh-cn/web/api/effecttiming/easing/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: EffectTiming.easing -slug: Web/API/EffectTiming/easing -translation_of: Web/API/EffectTiming/easing ---- -
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
- -

这个{{domxref("EffectTiming")}} 词的 easing 属性在 Web Animations API 指定用于缩放时间以产生缓和效果的计时函数，easing 是动画随时间变化的速率。

- -
-

{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including easing. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.

-
- -

Syntax

- -
var timingProperties = {
-  easing: {{cssxref("single-transition-timing-function")}}
-}
-
-timingProperties.easing = {{cssxref("single-transition-timing-function")}}
-
- -

Value

- -

A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

- -
-
linear
-
A constant rate of change, neither accelerating nor deccelerating. 
-
cubic-bezier(<number>, <number>, <number>, <number>)
-
A diagram showing the points of a cubic bezier timing function.
- Specifies a cubic Bézier timing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
-
ease
-
A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
-
ease-in
-
An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
-
ease-out
-
变化速率变慢了，从快到慢， 等价于cubic-bezier(0, 0, 0.58, 1).
-
ease-in-out
-
This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
- - -
steps(<integer>[, [ start | end ] ]?)
-
A diagram of the various steps timing functions.
- Specifies a step timing function, which breaks the animation down into a number of equal time intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end.
-
step-start
-
Equivalent to steps(1, start)
-
step-end
-
Equivalent to steps(1, end).
-
- -

Examples

- -

In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

- -
// Define the key frames
-var spriteFrames = [
-  { transform: 'translateY(0)' },
-  { transform: 'translateY(-100%)' }
-];
-
-// Get the element that represents Alice and the Red Queen
-var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');
-
-// Animate Alice and the Red Queen using steps()
-var redQueen_alice = redQueen_alice_sprite.animate(
-spriteFrames, {
-  easing: 'steps(7, end)',
-  direction: "reverse",
-  duration: 600,
-  playbackRate: 1,
-  iterations: Infinity
-});
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#time-transformations', 'easing' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

Browser compatibility

- - - -

{{Compat("api.EffectTiming.easing", 2)}}

- -

See also

- - diff --git a/files/zh-cn/web/api/effecttiming/index.html b/files/zh-cn/web/api/effecttiming/index.html deleted file mode 100644 index f0b2b7c289..0000000000 --- a/files/zh-cn/web/api/effecttiming/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: EffectTiming -slug: Web/API/EffectTiming -tags: - - API - - Animation - - Dictionary - - EffectTiming - - Experimental - - Interface - - KeyframeEffect - - NeedsTranslation - - Reference - - TopicStub - - Web Animations - - animate - - web animations api -translation_of: Web/API/EffectTiming ---- -
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
- -

The EffectTiming dictionary, part of the Web Animations API, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a duration the animation will not play.

- -

Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.

- -

Properties

- -
-
{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}
-
The number of milliseconds to delay the start of the animation. Defaults to 0.
-
{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}
-
Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
-
{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}
-
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
-
{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}
-
The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".
-
{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}
-
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 
-
{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}
-
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".
-
{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}
-
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
-
{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}
-
The number of times the animation should repeat. Defaults to 1, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}{{Spec2('Web Animations')}}Initial definition
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html b/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html new file mode 100644 index 0000000000..08c21a6791 --- /dev/null +++ b/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html @@ -0,0 +1,106 @@ +--- +title: EffectTiming.easing +slug: Web/API/KeyframeEffect/KeyframeEffect +translation_of: Web/API/EffectTiming/easing +original_slug: Web/API/EffectTiming/easing +--- +
{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+ +

这个{{domxref("EffectTiming")}} 词的 easing 属性在 Web Animations API 指定用于缩放时间以产生缓和效果的计时函数，easing 是动画随时间变化的速率。

+ +
+

{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including easing. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.

+
+ +

Syntax

+ +
var timingProperties = {
+  easing: {{cssxref("single-transition-timing-function")}}
+}
+
+timingProperties.easing = {{cssxref("single-transition-timing-function")}}
+
+ +

Value

+ +

A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

+ +
+
linear
+
A constant rate of change, neither accelerating nor deccelerating. 
+
cubic-bezier(<number>, <number>, <number>, <number>)
+
A diagram showing the points of a cubic bezier timing function.
+ Specifies a cubic Bézier timing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
+
ease
+
A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
+
ease-in
+
An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
+
ease-out
+
变化速率变慢了，从快到慢， 等价于cubic-bezier(0, 0, 0.58, 1).
+
ease-in-out
+
This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
+ + +
steps(<integer>[, [ start | end ] ]?)
+
A diagram of the various steps timing functions.
+ Specifies a step timing function, which breaks the animation down into a number of equal time intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end.
+
step-start
+
Equivalent to steps(1, start)
+
step-end
+
Equivalent to steps(1, end).
+
+ +

Examples

+ +

In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

+ +
// Define the key frames
+var spriteFrames = [
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-100%)' }
+];
+
+// Get the element that represents Alice and the Red Queen
+var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');
+
+// Animate Alice and the Red Queen using steps()
+var redQueen_alice = redQueen_alice_sprite.animate(
+spriteFrames, {
+  easing: 'steps(7, end)',
+  direction: "reverse",
+  duration: 600,
+  playbackRate: 1,
+  iterations: Infinity
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#time-transformations', 'easing' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Browser compatibility

+ + + +

{{Compat("api.EffectTiming.easing", 2)}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/rtcconfiguration/index.html b/files/zh-cn/web/api/rtcconfiguration/index.html deleted file mode 100644 index ace1a5c5b6..0000000000 --- a/files/zh-cn/web/api/rtcconfiguration/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: RTCConfiguration -slug: Web/API/RTCConfiguration -translation_of: Web/API/RTCConfiguration ---- -

{{APIRef("WebRTC")}}{{draft}}

- -

The RTCConfiguration dictionary is used to provide configuration options for an {{domxref("RTCPeerConnection")}}. It may be passed into the constructor when instantiating a connection, or used with the {{domxref("RTCPeerConnection.getConfiguration()")}} and {{domxref("RTCPeerConnection.setConfiguration()")}} methods, which allow inspecting and changing the configuration while a connection is established.

- -

The options include ICE server and transport settings and identity information.

- -

Properties

- -
-
bundlePolicy {{optional_inline}}
-
Specifies how to handle negotiation of candidates when the remote peer is not compatible with the SDP BUNDLE standard. This must be one of the values from the enum RTCBundlePolicy. If this value isn't included in the dictionary, "balanced" is assumed.
-
certificates {{optional_inline}}
-
An {{jsxref("Array")}} of objects of type {{domxref("RTCCertificate")}} which are used by the connection for authentication. If this property isn't specified, a set of certificates is generated automatically for each {{domxref("RTCPeerConnection")}} instance. Although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. See {{anch("Using certificates")}} below for additional information. -
This configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to {{domxref("RTCPeerConnection.setConfiguration()")}}.
-
-
iceCandidatePoolSize {{optional_inline}}
-
一个16bit无符号整型值，代表预获取的ICE candidate pool的大小。 默认为 0 (意味着不会发生candidate的预获取)。在某些情况下，由于预获取了ICE candidate，在 {{domxref("RTCPeerConnection.setLocalDescription()")}} 被调用时，被预获取的candidate可被立刻检查，从而导致可以更快的建立连接。 -
改变 ICE candidate pool的大小将触发启动 ICE gathering。
-
-
iceServers {{optional_inline}}
-
An array of {{domxref("RTCIceServer")}} objects, each describing one server which may be used by the ICE agent; these are typically STUN and/or TURN servers. If this isn't specified, the ICE agent may choose to use its own ICE servers; otherwise, the connection attempt will be made with no STUN or TURN server available, which limits the connection to local peers.
-
iceTransportPolicy {{optional_inline}}
-
The current ICE transport policy; this must be one of the values from the RTCIceTransportPolicy enum. If this isn't specified, "all" is assumed.
-
peerIdentity {{optional_inline}}
-
A {{domxref("DOMString")}} which specifies the target peer identity for the {{domxref("RTCPeerConnection")}}. If this value is set (it defaults to null), the RTCPeerConnection will not connect to a remote peer unless it can successfully authenticate with the given name.
-
rtcpMuxPolicy {{optional_inline}}
-
The RTCP mux policy to use when gathering ICE candidates, in order to support non-multiplexed RTCP. The value must be one of those from the RTCRtcpMuxPolicy enum. The default is "require".
-
- -

Constants

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCBundlePolicy enum", 0, 1)}}

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCIceTransportPolicy enum", 0, 1)}}

- -

{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCRtcpMuxPolicy enum", 0, 1)}}

- -

Using certificates

- -

When you wish to provide your own certificates for use by an {{domxref("RTCPeerConnection")}} instead of having the RTCPeerConnection generate them automatically, you do so through calls to {{domxref("RTCPeerConnection.generateCertificate()")}}.

- -

This attribute supports providing multiple certificates because even though a given DTLS connection uses only one certificate, providing multiple certificates allows support for multiple encryption algorithms. The implementation of RTCPeerConnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during DTLS handshake.

- -

If you don't provide certificates, new ones are generated automatically. One obvious benefit to providing your own is identity key continuity—if you use the same certificate for subsequent calls, the remote peer can tell you're the same caller. This also avoids the cost of generating new keys.

- -

<<<link to added info on identity>>>

- -

Example

- -

The configuration below establishes two ICE servers. The first one, stun:stun.services.mozilla.com, requires authentication, so the username and password are provided. The second server has two URLs: stun:stun.example.com and stun:stun-1.example.com.

- -
var configuration = { iceServers: [{
-                          urls: "stun:stun.services.mozilla.com",
-                          username: "louis@mozilla.com",
-                          credential: "webrtcdemo"
-                      }, {
-                          urls: ["stun:stun.example.com", "stun:stun-1.example.com"]
-                      }]
-};
-
-var pc = new RTCPeerConnection(configuration);
diff --git a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index aed512780b..0000000000 --- a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,390 +0,0 @@ ---- -title: 媒体 -slug: Web/Progressive_web_apps/Responsive/Media_types -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/Guide/CSS/Getting_started/Media ---- -

{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}

- -

本章节是 CSS 入门教程指南的第 14 章也是最后一部分。本指南主要描述了用来展示文档的 CSS 的属性及其值，本章节依旧着眼于这个目标，同时也会介绍 CSS 样式表的结构。

- -

为不同媒介提供的样式信息

- -

CSS 的作用是将网页文档以更友好的展现方式呈现给用户。

- -

例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS 就能根据媒介种类控制展示文档的方法。

- -

CSS通过使用 {{CSSXref("@media")}} 来对特定的媒介指定适配规则。

- -
-
示例
- -

我们的站点上有一个导航区域允许用户浏览。

- -

在标签语言中，导航区域父元素的 id 是 nav-area。（在 {{HTMLVersionInline(5)}}, 可以使用 {{HTMLElement("nav")}} 元素代替带有 id 属性的 {{HTMLElement("div")}}。）

- -

为了在打印网页的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的：

- -
@media print {
-  #nav-area {display: none;}
-  }
-
-
- -

一些常见的媒介类型:

- - - - - - - - - - - - - - - - - - - - -
screen彩色计算机显示
print打印（分页式媒体）
projection投影
all所有媒体 (默认)
- -
-
更多
- -

还有其它一些对 CSS 规则指定适用媒介类型的方式。

- -

有些标签语言可能允许在链接引用样式表时指定媒介类型。例如，在 HTML 中，你可以通过在 link 标签上添加 media 属性来指定媒介类型。

- -

在 CSS 中，你可以在样式表开头 {{CSSXref("@import")}} 一个 url 来引入另外的样式表，同时指定其媒介类型。

- -

根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

- -

想获取媒介类型更多细节，请参考 CSS 规范中的 Media 部分。

- -

接下来将介绍更多 {{cssxref("display")}} 属性的例子: XML data.

-
- -

打印

- -

CSS 有一些支持打印和分页媒体的特性。

- -

 {{cssxref("@page")}} 规则能够设置页间距。对于双面打印，还可以分开设置 @page:left 和 @page:right。

- -

对于打印媒介，可以使用适当的长度单位，像是英寸（in）、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用 em 来配合字体大小和百分比。

- -

可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。

- -
-
示例
- -

这个规则把四个方向的页边距都设置为 1 inch：

- -
@page {margin: 1in;} 
- -

这个规则确保每个 H1 元素都从新的一页开始：

- -
h1 {page-break-before: always;}
-
-
- -
-
更多细节
- -

想获取更多细节，请参考 CSS 规范中的 Paged media 部分。

- -

像 CSS 的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候 Mozilla 浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

-
- -

用户界面

- -

CSS 有一些特殊的属性能够支持设备的用户界面，例如电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

- -

下面有五种特殊的选择器：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
E{{cssxref(":hover")}}当鼠标悬浮在此元素上
E{{cssxref(":focus")}}当元素获得键盘焦点
E{{cssxref(":active")}}当元素是当前的活动元素
E{{cssxref(":link")}}当元素超链接到一个 url 但是用户还没有访问过
E{{cssxref(":visited")}}当元素超链接到一个 url 但是用户已经访问过
- -
-

注意: 在 {{gecko("2.0")}} 中可获得的 :visited 选择器信息是有限的。更过细节请参照 Privacy and the :visited selector 。

-
- -

 {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:

- - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
pointer指示超链接
wait表明程序无法接受输入
progress表明程序正在运行，但是仍可以接受输入
default默认（通常是箭头）
- -

 {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
- 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。

- -

一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 disabled 属性和 readonly 属性。选择器可以通过方括: {{mediawiki.external('disabled')}} 或者 {{mediawiki.external('readonly')}}来指定这些属性。

- -
-
示例
- -

这些规则规定了按钮在用户使用时动态变化的样式:

- -
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  } 
- -

这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明:

- - - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
disablednormalactive
-
- -

当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。

-
- -
-
更多
- -

获取更多关于CSS用户界面的信息，请参考CSS规范中的 User interface 部分。

- -

本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。

-
- -

实践: 打印文档

- -
    -
  1. 创建一个新的HTML文档, doc4.html. 把下面的HTML代码粘贴过去: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h1>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. 创建一个新的样式表, style4.css. 把下面的HTML代码粘贴过去: - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. 在浏览器中查看文档，你会看到它使用的是默认样式。
    4. -
  4. 打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。 - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section A
    - -
    This is the first section...
    - -
    Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section B
    - -
    This is the second section...
    - -
    Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - - -
挑战
把指定打印样式的规则转移到单独的CSS文件。 -

学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 style4.css 样式表里去。

- -

当鼠标放在标题时，改变颜色为蓝色。

-
- -

查看这些挑战的解决方案。

- -

接下来?

- -

如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 讨论区 中不吝赐教。

- -

目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 JavaScript 来动态地改变规则。

-- cgit v1.2.3-54-g00ecf