En este artículo se describe lo que es Internet y cómo funciona.
+En este artículo se describe qué es Internet y cómo funciona.
| Objetivo: | -Aprenderás lo básico de infraestructura técnica de la web y la diferencia entre Internet y Web. | +Aprenderás lo básico a cerca de la infraestructura técnica de la web y la diferencia entre Internet y la Web. |
|---|
Internet es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En lo más básico, Internet es una gran red de computadoras que se comunican simultáneamente.
+Internet es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En su esencia, Internet es una gran red de computadoras que se comunican simultáneamente.
La historia de internet es algo oscura. Comenzó en la década de 1960 como un proyecto de investigación financiado por el ejercito de los EE.UU, y luego se convirtió en una infraestructura pública en la década de 1980 con el apoyo de muchas universidades públicas y empresas privadas. Las distintas tecnologías que soporta internet han evolucionado con el tiempo, pero la forma en que funciona no ha cambiado mucho: Internet es una forma de conectar las computadoras entre sí y asegurar que, pase lo que pase, encuentren una manera de mantenerse conectadas.
@@ -50,11 +50,11 @@
La red no se limita a dos ordenadores, se pueden conectar tantos como se deseen aunque siendo más complicado cada vez. Por ejemplo, para conectar diez ordenadores, se necesitarían 45 cables y unos nueve conectores por ordenador!
+Una red no se limita a dos ordenadores, se pueden conectar tantos como se desee; sin embargo, rápidamente se volverá más compleja. Por ejemplo, para conectar diez ordenadores, se necesitarían ¡45 cables y unos nueve conectores por ordenador!
Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este debe enviarlo primero al router, quien a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.
+Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una única función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este último debe enviarlo primero al router, que a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.
Una vez que agregamos un enrutador al sistema, nuestra red de 10 ordenadores solo requiere 10 cables: un enchufe para cada ordenador y un enrutador con 10 enchufes.
@@ -80,9 +80,9 @@Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” o Protocolo de Internet(IP de sus siglas en inglés Internet Protocol). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: 192.168.2.10.
Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” (siendo "IP" las siglas en inglés de Internet Protocol, o Protocolo de Internet). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: 192.168.2.10.
Para los ordenadores es un identificador simple, pero los humanos tienen mayor dificultad a la hora de recordar y memorizar este tipo de dirección. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como nombre de dominio. Por ejemplo, google.com es el nombre de dominio utilizado para sustituir la dirección IP 173.194.121.32. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.
Para los ordenadores es un identificador simple, pero los humanos tenemos mayor dificultad para recordar este tipo de direcciones. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como nombre de dominio. Por ejemplo, google.com es el nombre de dominio utilizado para la dirección IP 173.194.121.32. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.
Así como en cualquier área de conocimiento, la web viene con un montón de jerga. No te preocupes, no te abrumaremos con todo esto (tenemos un glosario por si tienes curiosidad). Sin embargo, hay un unos términos básicos que necesitas entender al principio, Ya que escuchará estas expresiones todo el tiempo mientras lee. A veces es fácil de confundir estos términos, puesto que hacen referencia a funcionalidades relacionadas pero diferentes. De hecho, a veces veras estos términos mal utilizados en las noticias y en otros lugares, por lo que llegar mezclarlos es entendible!
+Así como en cualquier área de conocimiento, la web viene con un montón de jerga. No te preocupes, no te abrumaremos con todo esto (tenemos un glosario por si tienes curiosidad). Sin embargo, hay algunos términos básicos que necesitas entender desde el principio, ya que encontrarás estas expresiones todo el tiempo mientras lees. A veces es fácil de confundir estos términos, puesto que hacen referencia a funcionalidades relacionadas pero diferentes. De hecho, a veces veras estos términos mal utilizados en las noticias y en otros lugares, por lo que llegar mezclarlos es entendible!
Cubriremos estos términos y tecnologías con más detalle mientras exploramos más, pero estas definiciones rápidas serán un gran comienzo para ti:
Vamos a comparar la biblioteca con un servidor web:
@@ -71,7 +71,7 @@Al comenzar con un proyecto web, muchas personas se enfocan en el aspecto técnico. Por supuesto, debes estar más familiarizado con la técnica de su oficio, pero lo que realmente importa es lo que quieres lograr. Sí, parece obvio, pero demasiados proyectos fallan, no por falta de conocimiento técnico sino por falta de objetivos y visión.
+Al comenzar con un proyecto web, muchas personas se enfocan en el aspecto técnico. Por supuesto, debes estar más familiarizado con ese aspecto técnico, pero lo que realmente importa es lo que quieres lograr. Sí, parece obvio, pero demasiados proyectos fallan, no por falta de conocimiento técnico sino por falta de objetivos y visión.
Entonces cuando tienes una idea y quieres convertirla en un sitio web, hay un par de cuestiones que debes responder antes que alguna otra cosa:
@@ -36,19 +36,19 @@Todo esto es llamado idealización del proyecto y es un primer paso necesario para alcanzar tus metas, si eres un desarrollador principiante o experimentado.
+Todo esto es llamado idealización del proyecto y es un primer paso necesario para alcanzar tus metas, sin importar si eres un desarrollador principiante o experimentado.
No hay aprendizaje activo todavía. Por favor, considere la posibilidad de contribuir.
+No hay aprendizaje activo todavía. Por favor, considere la posibilidad de contribuir.
Un proyecto nunca comienza por el lado técnico. Los músicos jamás compondrán ninguna música a menos que primero tengan la idea de lo quieren tocar, y eso también vale para los pintores, escritores y desarrolladores web. La técnica viene en segundo lugar.
+Un proyecto nunca comienza por el lado técnico. Un músico jamás compondrá ninguna música, a menos que primero tenga una idea de lo quiere tocar, y eso mismo vale también para los pintores, escritores y desarrolladores web. La técnica viene en segundo lugar.
-La técnica es crítica. Los músicos deben dominar su instrumento, pero los buenos músicos nunca producen buena música sin una idea. Por lo tanto, antes de saltar al lado técnico, por ejemplo código y herramientas, primero debes dar un paso atrás y decidir en detalle lo que deseas hacer.
+La técnica es esencial. Los músicos necesitan dominar su instrumento. Pero los buenos músicos nunca producen buena música sin una idea. Por lo tanto, antes de saltar al aspecto técnico, por ejemplo código y herramientas, primero debes dar un paso atrás y decidir en detalle lo que deseas hacer.
-Una discusión de horas con los amigos es un buen comienzo, pero inapropiado. Debes sentarte y estructurar tus ideas, para tener una visión clara sobre el camino que debes tomar para materializar tus ideas. Para hacer esto, sólo necesitas lápiz y papel y un tiempo para resolver al menos las siguientes preguntas.
+Una discusión de horas con los amigos es un buen comienzo, pero inadecuado. Debes sentarte y estructurar tus ideas, para tener una visión clara sobre el camino que debes tomar para materializar tus ideas. Para hacer esto, sólo necesitas lápiz y papel y algo de tiempo para responder al menos las siguientes preguntas.
Nota: Hay innumerables maneras de llevar a cabo la ideación del proyecto. No podemos presentarlas a todas aquí (un libro entero no sería suficiente). Lo que presentamos aquí es un método sencillo para manejar lo que los profesionales llaman Ideación de Proyectos, Planificación de Proyectos y Gestión de Proyectos.
@@ -58,12 +58,12 @@Esta es la más importante pregunta a responder, ya que impulsa todo lo demás. Enumera todas la metas que deseas alcanzar. Puede ser cualquier cosa: vender bienes para ganar dinero, expresar opiniones políticas, conocer nuevos amigos, actuar con músicos, coleccionar imágenes de gatos o lo que quieras.
-Supongamos que eres músico. Y puedes desear que:
+Supongamos que eres músico. Y puedes desear:
Haciendo este sencillo ejercicio, escribir metas y clasificarlas, te ayudará cuando tengas que tomar decisiones. (¿Debería implementar estas características, usar estos servicios, crear este diseño?)
+Hacer este sencillo ejercicio, escribir metas y clasificarlas, te ayudará cuando tengas que tomar decisiones. (¿Debería implementar estas características, usar estos servicios, crear este diseño?)
-Entonces, ahora que tienes tu lista de objetivos priorizada, pasemos a la siguiente pregunta.
+Entonces, ahora que tienes tu lista de objetivos priorizados, pasemos a la siguiente pregunta.
Echemos un vistazo a nuestro ejemplo. Tenemos cinco metas relacionadas con la música, una relacionada a la vida personal (Encontrar pareja), y las fotos del gato completamente ajenas. ¿Es razonable construir un único sitio para cubrir todos esos objetivos? ¿Es necesario? Después de todo, una gran cantidad de servicios web existentes podría llevarte a tus objetivos sin necesidad de crear uno nuevo.
-Encontrar pareja es un caso prioritario en el que tiene más sentido utilizar los recursos existentes en lugar de construir todo un nuevo sitio. ¿Por qué? Porque invertiríamos más tiempo construyendo y manteniendo el sitio web en lugar de realmente buscar una pareja. Dado que nuestro objetivo es lo que más importa, debemos gastar nuestra energía en aprovechar las herramientas ya existentes en lugar de empezar desde cero. Una vez más, hay tantos servicios web ya disponibles para mostrar fotos que no vale la pena el esfuerzo para construir un nuevo sitio sólo para anunciar acerca de lo lindo que son nuestros gatos.
+Encontrar pareja es un caso prioritario en el que tiene más sentido utilizar los recursos existentes, en vez de construir todo un nuevo sitio. ¿Por qué? Porque invertiríamos más tiempo construyendo y manteniendo el sitio web en lugar de realmente buscar una pareja. Dado que nuestro objetivo es lo que más importa, debemos gastar nuestra energía en aprovechar las herramientas ya existentes en lugar de empezar desde cero. Una vez más, hay tantos servicios web ya disponibles para mostrar fotos que no vale la pena el esfuerzo para construir un nuevo sitio sólo para anunciar acerca de lo tiernos que son nuestros gatos.
-Los otros cinco objetivos están todos conectados con la música. Hay, por supuesto, muchos servicios web que podrían manejar estas metas, pero tiene sentido, en este caso, construir un sitio web propio. Tal sitio web es la manera de agregar todo lo que queremos publicar en un solo lugar (bueno para las metas 3, 5 y 6). En resumen, ya que estos objetivos giran en torno al mismo tema, tener todo en un solo lugar nos ayudará a alcanzar nuestras metas y facilitará a nuestros seguidores el conectarse con nosotros.
+Los otros cinco objetivos están todos conectados con la música. Hay, por supuesto, muchos servicios web que podrían manejar estas metas, pero en este caso tiene sentido construir un sitio web propio. Tal sitio web es la manera de incorporar todo lo que queremos publicar en un solo lugar (bueno para las metas 3, 5 y 6). En resumen, ya que estos objetivos giran en torno al mismo tema, tener todo en un solo lugar nos ayudará a alcanzar nuestras metas y facilitará a nuestros seguidores el conectarse con nosotros.
¿Cómo puede un sitio web ayudarme a alcanzar mis metas? Al responder a eso, encontrarás la mejor manera de alcanzar dichas metas y te ahorrarás desperdiciar esfuerzo.
Ahora que sabes qué es lo que quieres lograr, es momento de volver los objetivos en pasos prácticos. Como una nota lateral, tus metas no están necesariamente petrificadas, ellas evolucionan con el tiempo incluso en el transcurso del proyecto, si te encuentras con obstáculos inesperados o simplemente cambias de opinión.
+Ahora que sabes qué es lo que quieres lograr, es momento de convertir los objetivos en pasos prácticos. Como una nota adicional, tus metas no están necesariamente escritas en piedra. Ellas evolucionarán con el tiempo aún durante el desarrollo del proyecto, especialmente si te encuentras con obstáculos inesperados o simplemente cambias de opinión.
-En lugar de una extensa explicación, volvamos a nuestro ejemplo con esta tabla.
+En lugar de desarrollar una extensa explicación, volvamos a nuestro ejemplo con esta tabla.
| Permitir que las gente escuche tu música | +Permitir que la gente escuche tu música |
|
||||||||||||||||||||||
| Conocer otros músicos | +Conocer a otros músicos |
|
@@ -145,11 +145,11 @@ Venta de golosinas |
|
|
@@ -172,6 +172,6 @@ |||||||||||||||||||
| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}} | -{{Spec2('CSS3 Basic UI')}} | -Sin cambios | -
| {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}} | -{{Spec2('CSS3 Transitions')}} | -Define outline-color como propiedad que se puede animar. |
-
| {{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}} | -{{Spec2('CSS2.1')}} | -Definición inicial | -
Como puedes ver, mi contorno es azul.
+``` + +#### CSS + +```css +p { + outline: 2px solid; /* Establecer el ancho y el estilo del contorno */ + outline-color: #0000FF; /* Hacer el contorno azul */ + margin: 5px; +} +``` + +#### Resultado + +{{ EmbedLiveSample('Establecer_un_contorno_azul_solido') }} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} +- El tipo de dato {{cssxref("<color>")}} +- Otras propiedades relacionadas con el color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}} +- [Aplicar color a elementos HTML usando CSS](/es/docs/Web/CSS/CSS_Colors/Applying_color) + diff --git a/files/es/web/javascript/reference/global_objects/symbol/species/index.md b/files/es/web/javascript/reference/global_objects/symbol/species/index.md new file mode 100644 index 00000000000000..10236c3d841e54 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/species/index.md @@ -0,0 +1,48 @@ +--- +title: Symbol.species +slug: Web/JavaScript/Reference/Global_Objects/Symbol/species +browser-compat: javascript.builtins.Symbol.species +--- +{{JSRef}} + +El símbolo conocido como **`Symbol.species`** especifica una propiedad con valor de función que la función constructora utiliza para crear objetos derivados. + +{{EmbedInteractiveExample("pages/js/symbol-species.html")}} + +## Descripción + +La propiedad de acceso `species` permite a las subclases anular el constructor por defecto de los objetos. + +{{js_property_attributes(0,0,0)}} + +## Ejemplos + +### Usando species + +Es posible que quieras devolver objetos {{jsxref("Array")}} en tu clase array derivada `MyArray`. Por ejemplo, al utilizar métodos como {{jsxref("Array.map", "map()")}} que devuelven el constructor por defecto, quieres que estos métodos devuelvan un objeto `Array` padre, en lugar del objeto `MyArray`. El símbolo `species` te permite hacer esto: + +```js +class MyArray extends Array { + // Sobrescribir especies al constructor de la matriz Array + static get [Symbol.species]() { return Array; } +} +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{jsxref("Map.@@species", "Map[@@species]")}} +- {{jsxref("Set.@@species", "Set[@@species]")}} + diff --git a/files/es/web/javascript/reference/global_objects/symbol/split/index.md b/files/es/web/javascript/reference/global_objects/symbol/split/index.md new file mode 100644 index 00000000000000..fa940a4a1975f0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/split/index.md @@ -0,0 +1,47 @@ +--- +title: Symbol.split +slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split +original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +browser-compat: javascript.builtins.Symbol.split +--- +{{JSRef}} + +El símbolo conocido como **`Symbol.split`** especifica el método que divide una cadena en los índices que coinciden con una expresión regular. Esta función es llamada por el método {{jsxref("String.prototype.split()")}}. + +Para más información, véase {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} y {{jsxref("String.prototype.split()")}}. + +{{EmbedInteractiveExample("pages/js/symbol-split.html")}}{{js_property_attributes(0,0,0)}} + +## Ejemplos + +### División inversa personalizada + +```js +class ReverseSplit { + [Symbol.split](string) { + const array = string.split(' '); + return array.reverse(); + } +} + +console.log('Another one bites the dust'.split(new ReverseSplit())); +// resultado esperado: [ "dust", "the", "bites", "one", "Another" ] +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- [Polyfill de `Symbol.split` en `core-js`](https://github.com/zloirock/core-js#ecmascript-symbol) +- {{jsxref("Symbol.match")}} +- {{jsxref("Symbol.replace")}} +- {{jsxref("Symbol.search")}} +- {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} + diff --git a/files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md b/files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md new file mode 100644 index 00000000000000..555ff28ee11c59 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md @@ -0,0 +1,64 @@ +--- +title: Symbol.toPrimitive +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +browser-compat: javascript.builtins.Symbol.toPrimitive +--- +{{JSRef}} + +El **`Symbol.toPrimitive`** es un símbolo que especifica una propiedad con valor de función que se llama para convertir un objeto en un valor primitivo correspondiente. + +{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}} + +## Descripción + +Con la ayuda de la propiedad `Symbol.toPrimitive` (utilizada como valor de la función), se puede convertir un objeto en un valor primitivo. La función se llama con un argumento de cadena `hint`, que especifica el tipo preferido del valor primitivo resultante. El argumento `hint` puede ser uno de los siguientes: "`number`", "`string`" y "`default`". + +{{js_property_attributes(0,0,0)}} + +## Ejemplos + +### Modificar los valores primitivos convertidos desde un objeto + +El siguiente ejemplo describe cómo la propiedad `Symbol.toPrimitive` puede modificar el valor primitivo convertido desde un objeto. + +```js +// Un objeto sin la propiedad Symbol.toPrimitive. +const obj1 = {}; +console.log(+obj1); // NaN +console.log(`${obj1}`); // "[object Object]" +console.log(obj1 + ''); // "[object Object]" + +// Un objeto con la propiedad Symbol.toPrimitive. +const obj2 = { + [Symbol.toPrimitive](hint) { + if (hint == 'number') { + return 10; + } + if (hint == 'string') { + return 'hello'; + } + return true; + } +}; +console.log(+obj2); // 10 — hint es "number" +console.log(`${obj2}`); // "hello" — hint es "string" +console.log(obj2 + ''); // "true" — hint es "default" +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}} +- {{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}} +- {{jsxref("Object.prototype.toString()")}} +- {{jsxref("Object.prototype.valueOf()")}} + diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 5bd28524a2b297..a640e935c54697 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3768,7 +3768,7 @@ /fr/docs/Web/API/Element/accessKey /fr/docs/Web/API/HTMLElement/accessKey /fr/docs/Web/API/Element/innertHTML /fr/docs/Web/API/Element/innerHTML /fr/docs/Web/API/Element/name /fr/docs/Web/API -/fr/docs/Web/API/Element/ongotpointercapture /fr/docs/Web/API/GlobalEventHandlers/ongotpointercapture +/fr/docs/Web/API/Element/ongotpointercapture /fr/docs/Web/API/Element/gotpointercapture_event /fr/docs/Web/API/Element/onwheel /fr/docs/Web/API/Element/wheel_event /fr/docs/Web/API/Element/removeChild /fr/docs/Web/API/Node/removeChild /fr/docs/Web/API/Element/select_event /fr/docs/Web/API/HTMLInputElement/select_event @@ -3799,6 +3799,7 @@ /fr/docs/Web/API/GlobalEventHandlers/onclose /fr/docs/Web/API/HTMLDialogElement/close_event /fr/docs/Web/API/GlobalEventHandlers/ondblclick /fr/docs/Web/API/Element/dblclick_event /fr/docs/Web/API/GlobalEventHandlers/onfocus /fr/docs/Web/API/Window/focus_event +/fr/docs/Web/API/GlobalEventHandlers/ongotpointercapture /fr/docs/Web/API/Element/gotpointercapture_event /fr/docs/Web/API/GlobalEventHandlers/onkeydown /fr/docs/Web/API/Element/keydown_event /fr/docs/Web/API/GlobalEventHandlers/onkeypress /fr/docs/Web/API/Element/keypress_event /fr/docs/Web/API/GlobalEventHandlers/onkeyup /fr/docs/Web/API/Element/keyup_event @@ -3817,7 +3818,7 @@ /fr/docs/Web/API/HTMLElement/animationend_event /fr/docs/Web/API/Element/animationend_event /fr/docs/Web/API/HTMLElement/animationiteration_event /fr/docs/Web/API/Element/animationiteration_event /fr/docs/Web/API/HTMLElement/animationstart_event /fr/docs/Web/API/Element/animationstart_event -/fr/docs/Web/API/HTMLElement/transitionend_event /fr/docs/conflicting/Web/API/Element/transitionend_event +/fr/docs/Web/API/HTMLElement/transitionend_event /fr/docs/Web/API/Element/transitionend_event /fr/docs/Web/API/HTMLFormElement/submit_event_ /fr/docs/Web/API/HTMLFormElement/submit_event /fr/docs/Web/API/HTMLOrForeignElement/blur /fr/docs/Web/API/HTMLElement/blur /fr/docs/Web/API/HTMLOrForeignElement/dataset /fr/docs/Web/API/HTMLElement/dataset @@ -4549,7 +4550,7 @@ /fr/docs/Web/Events/storage /fr/docs/Web/API/Window/storage_event /fr/docs/Web/Events/submit /fr/docs/Web/API/HTMLFormElement/submit_event /fr/docs/Web/Events/touchend /fr/docs/Web/API/Document/touchend_event -/fr/docs/Web/Events/transitionend /fr/docs/conflicting/Web/API/Element/transitionend_event +/fr/docs/Web/Events/transitionend /fr/docs/Web/API/Element/transitionend_event /fr/docs/Web/Events/unload /fr/docs/Web/API/Window/unload_event /fr/docs/Web/Guide/AJAX/Communauté /fr/docs/Web/Guide/AJAX/Community /fr/docs/Web/Guide/AJAX/Premiers_pas /fr/docs/Web/Guide/AJAX/Getting_Started @@ -4799,7 +4800,7 @@ /fr/docs/Web/JavaScript/Reference/Erreurs/Bad_return_or_yield /fr/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield /fr/docs/Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type /fr/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init /fr/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init -/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_access_property /fr/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type +/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_access_property /fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_assign_to_property /fr/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible /fr/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete /fr/docs/Web/JavaScript/Reference/Errors/Cant_delete @@ -4867,7 +4868,7 @@ /fr/docs/Web/JavaScript/Reference/Erreurs/in_operator_no_object /fr/docs/Web/JavaScript/Reference/Errors/in_operator_no_object /fr/docs/Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand /fr/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand /fr/docs/Web/JavaScript/Reference/Erreurs/is_not_iterable /fr/docs/Web/JavaScript/Reference/Errors/is_not_iterable -/fr/docs/Web/JavaScript/Reference/Errors/Cant_access_property /fr/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type +/fr/docs/Web/JavaScript/Reference/Errors/Cant_access_property /fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/Web/JavaScript/Reference/Fonctions /fr/docs/Web/JavaScript/Reference/Functions /fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode /fr/docs/Web/JavaScript/Reference/Functions/Method_definitions /fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées /fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions @@ -6166,6 +6167,7 @@ /fr/docs/conflicting/Web/API/Element/mouseout_event /fr/docs/Web/API/Element/mouseout_event /fr/docs/conflicting/Web/API/Element/mouseover_event /fr/docs/Web/API/Element/mouseover_event /fr/docs/conflicting/Web/API/Element/mouseup_event /fr/docs/Web/API/Element/mouseup_event +/fr/docs/conflicting/Web/API/Element/transitionend_event /fr/docs/Web/API/Element/transitionend_event /fr/docs/conflicting/Web/API/EventTarget/addEventListener /fr/docs/Web/API/EventTarget/addEventListener /fr/docs/conflicting/Web/API/File_and_Directory_Entries_API /fr/docs/Web/API/File_and_Directory_Entries_API /fr/docs/conflicting/Web/API/FormData/Using_FormData_Objects /fr/docs/Web/API/FormData/Using_FormData_Objects @@ -6282,6 +6284,7 @@ /fr/docs/conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b /fr/docs/Web/JavaScript/Guide/Introduction /fr/docs/conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions /fr/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions /fr/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/fr/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects /fr/docs/Web/JavaScript/Reference/Global_Objects /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString /fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 1f21f66cc005d0..0f4bc5533b00d6 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -13796,6 +13796,12 @@ "Fredchat" ] }, + "Web/API/Element/gotpointercapture_event": { + "modified": "2020-10-15T22:16:22.004Z", + "contributors": [ + "fmartin5" + ] + }, "Web/API/Element/hasAttribute": { "modified": "2019-03-23T23:53:10.754Z", "contributors": [ @@ -15038,12 +15044,6 @@ "ylerjen" ] }, - "Web/API/GlobalEventHandlers/ongotpointercapture": { - "modified": "2020-10-15T22:16:22.004Z", - "contributors": [ - "fmartin5" - ] - }, "Web/API/GlobalEventHandlers/onload": { "modified": "2019-03-23T23:45:30.027Z", "contributors": [ diff --git a/files/fr/conflicting/web/api/element/transitionend_event/index.md b/files/fr/conflicting/web/api/element/transitionend_event/index.md deleted file mode 100644 index 18893089aca2ee..00000000000000 --- a/files/fr/conflicting/web/api/element/transitionend_event/index.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: transitionend -slug: conflicting/Web/API/Element/transitionend_event -tags: - - DOM - - Event - - TransitionEvent - - Transitions CSS - - Transitions CSS3 - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event -original_slug: Web/API/HTMLElement/transitionend_event ---- -{{APIRef}} - -L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/en-US/docs/CSS/Using_CSS_transitions) est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur `none`, alors l'événement ne pourra pas être généré. - -| Bulles | -Oui | -
|---|---|
| Annulable | -Oui | -
| Interface | -{{domxref("TransitionEvent")}} | -
| Propriété de gestionnaire d'événements | -- {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} - | -
{{APIRef("DOM Events")}}{{deprecated_header()}}
- -非推奨の KeyboardEvent.keyCode 読み取り専用プロパティは、押されたキーの変更されていない値を識別するシステムおよび実装に依存する数値コードを表します。 これは通常、キーに対応する 10進 ASCII ({{RFC(20)}}) またはWindows 1252 コードです。キーを識別できない場合は、この値は 0 になります。
これはしばらくの間、非推奨とされています。その代わりに、{{domxref("KeyboardEvent.code")}} が実装されている場合は、{{domxref("KeyboardEvent.code")}} を使うべきです。残念ながら、いくつかのブラウザはまだこれを持っていないので、すべてのターゲットブラウザでサポートされているものを使うように注意しなければなりません。
- -Web 開発者は、keydown 及び keyup イベントを扱う際に、印刷可能な文字に対して keyCode 属性を使用すべきではありません。上述したように、keyCode 属性は、印刷可能な文字、特に Shift キーや Alt キーが押された状態で入力された文字には有用ではありません。ショートカットキーハンドラを実装する場合、{{event("keypress")}} イベントの方が通常は良いでしょう (少なくとも Gecko が使用中のランタイムの場合)。詳細は Gecko Keypress Event を参照してください。
window.addEventListener("keydown", function (event) {
- if (event.defaultPrevented) {
- return; // デフォルトのアクションがキャンセルされている場合は何もしないようにします。
- }
-
- var handled = false;
- if (event.key !== undefined) {
- // KeyboardEvent.key でイベントを処理し、handled を true に設定します。
- } else if (event.keyCode !== undefined) {
- // KeyboardEvent.keyCode でイベントを処理し、handled を true に設定します。
- }
-
- if (handled) {
- // イベントが処理された場合、"ダブルアクション" を抑制する
- event.preventDefault();
- }
-}, true);
-
-
-| 仕様書 | -ステータス | -コメント | -
|---|---|---|
| {{SpecName('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}} | -{{Spec2('DOM3 Events')}} | -初期定義; 非推奨として指定されています。 | -
{{Compat("api.KeyboardEvent.keyCode")}}
- -標準位置で印刷可能なキーを押したり離したりすることで発生するキーイベントの値は、ブラウザ間で互換性がありません。
- -IE just exposes the native virtual keycode value as KeyboardEvent.keyCode.
Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the keyCode value on the US keyboard layout.
Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets keyCode values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:
Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets keyCode values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:
The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped keyCode values may be conflict with other keys. For example, if the active keyboard layout is Russian, the keyCode value of both the "Period" key and "Slash" key are 190 (KeyEvent.DOM_VK_PERIOD). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.
keyCode for the character.keyCode for the shifted character.keyCode for an ASCII character produced by the key when the US keyboard layout is active.keyCode for an ASCII character produced by the key when the US keyboard layout is active.keyCode value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|||||||||||||||||
| US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -|
| {{domxref("KeyboardEvent.code")}} | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|||||||||||||||||
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -||||||||||||||||||||
"Digit1" |
- 0x31 (49) |
- 0x31 (49) |
- 0x31 (49) |
- 0x31 (49) |
- 0x31 (49) |
- 0x31 (49) |
- 0x31 (49) |
- 0x31 (49) |
- ||||||||||||||||
"Digit2" |
- 0x32 (50) |
- 0x32 (50) |
- 0x32 (50) |
- 0x32 (50) |
- 0x32 (50) |
- 0x32 (50) |
- 0x32 (50) |
- 0x32 (50) |
- ||||||||||||||||
"Digit3" |
- 0x33 (51) |
- 0x33 (51) |
- 0x33 (51) |
- 0x33 (51) |
- 0x33 (51) |
- 0x33 (51) |
- 0x33 (51) |
- 0x33 (51) |
- ||||||||||||||||
"Digit4" |
- 0x34 (52) |
- 0x34 (52) |
- 0x34 (52) |
- 0x34 (52) |
- 0x34 (52) |
- 0x34 (52) |
- 0x34 (52) |
- 0x34 (52) |
- ||||||||||||||||
"Digit5" |
- 0x35 (53) |
- 0x35 (53) |
- 0x35 (53) |
- 0x35 (53) |
- 0x35 (53) |
- 0x35 (53) |
- 0x35 (53) |
- 0x35 (53) |
- ||||||||||||||||
"Digit6" |
- 0x36 (54) |
- 0x36 (54) |
- 0x36 (54) |
- 0x36 (54) |
- 0x36 (54) |
- 0x36 (54) |
- 0x36 (54) |
- 0x36 (54) |
- ||||||||||||||||
"Digit7" |
- 0x37 (55) |
- 0x37 (55) |
- 0x37 (55) |
- 0x37 (55) |
- 0x37 (55) |
- 0x37 (55) |
- 0x37 (55) |
- 0x37 (55) |
- ||||||||||||||||
"Digit8" |
- 0x38 (56) |
- 0x38 (56) |
- 0x38 (56) |
- 0x38 (56) |
- 0x38 (56) |
- 0x38 (56) |
- 0x38 (56) |
- 0x38 (56) |
- ||||||||||||||||
"Digit9" |
- 0x39 (57) |
- 0x39 (57) |
- 0x39 (57) |
- 0x39 (57) |
- 0x39 (57) |
- 0x39 (57) |
- 0x39 (57) |
- 0x39 (57) |
- ||||||||||||||||
"Digit0" |
- 0x30 (48) |
- 0x30 (48) |
- 0x30 (48) |
- 0x30 (48) |
- 0x30 (48) |
- 0x30 (48) |
- 0x30 (48) |
- 0x30 (48) |
- ||||||||||||||||
"KeyA" |
- 0x41 (65) |
- 0x41 (65) |
- 0x41 (65) |
- 0x41 (65) |
- 0x41 (65) |
- 0x41 (65) |
- 0x41 (65) |
- 0x41 (65) |
- ||||||||||||||||
"KeyB" |
- 0x42 (66) |
- 0x42 (66) |
- 0x42 (66) |
- 0x42 (66) |
- 0x42 (66) |
- 0x42 (66) |
- 0x42 (66) |
- 0x42 (66) |
- ||||||||||||||||
"KeyC" |
- 0x43 (67) |
- 0x43 (67) |
- 0x43 (67) |
- 0x43 (67) |
- 0x43 (67) |
- 0x43 (67) |
- 0x43 (67) |
- 0x43 (67) |
- ||||||||||||||||
"KeyD" |
- 0x44 (68) |
- 0x44 (68) |
- 0x44 (68) |
- 0x44 (68) |
- 0x44 (68) |
- 0x44 (68) |
- 0x44 (68) |
- 0x44 (68) |
- ||||||||||||||||
"KeyE" |
- 0x45 (69) |
- 0x45 (69) |
- 0x45 (69) |
- 0x45 (69) |
- 0x45 (69) |
- 0x45 (69) |
- 0x45 (69) |
- 0x45 (69) |
- ||||||||||||||||
"KeyF" |
- 0x46 (70) |
- 0x46 (70) |
- 0x46 (70) |
- 0x46 (70) |
- 0x46 (70) |
- 0x46 (70) |
- 0x46 (70) |
- 0x46 (70) |
- ||||||||||||||||
"KeyG" |
- 0x47 (71) |
- 0x47 (71) |
- 0x47 (71) |
- 0x47 (71) |
- 0x47 (71) |
- 0x47 (71) |
- 0x47 (71) |
- 0x47 (71) |
- ||||||||||||||||
"KeyH" |
- 0x48 (72) |
- 0x48 (72) |
- 0x48 (72) |
- 0x48 (72) |
- 0x48 (72) |
- 0x48 (72) |
- 0x48 (72) |
- 0x48 (72) |
- ||||||||||||||||
"KeyI" |
- 0x49 (73) |
- 0x49 (73) |
- 0x49 (73) |
- 0x49 (73) |
- 0x49 (73) |
- 0x49 (73) |
- 0x49 (73) |
- 0x49 (73) |
- ||||||||||||||||
"KeyJ" |
- 0x4A (74) |
- 0x4A (74) |
- 0x4A (74) |
- 0x4A (74) |
- 0x4A (74) |
- 0x4A (74) |
- 0x4A (74) |
- 0x4A (74) |
- ||||||||||||||||
"KeyK" |
- 0x4B (75) |
- 0x4B (75) |
- 0x4B (75) |
- 0x4B (75) |
- 0x4B (75) |
- 0x4B (75) |
- 0x4B (75) |
- 0x4B (75) |
- ||||||||||||||||
"KeyL" |
- 0x4C (76) |
- 0x4C (76) |
- 0x4C (76) |
- 0x4C (76) |
- 0x4C (76) |
- 0x4C (76) |
- 0x4C (76) |
- 0x4C (76) |
- ||||||||||||||||
"KeyM" |
- 0x4D (77) |
- 0x4D (77) |
- 0x4D (77) |
- 0x4D (77) |
- 0x4D (77) |
- 0x4D (77) |
- 0x4D (77) |
- 0x4D (77) |
- ||||||||||||||||
"KeyN" |
- 0x4E (78) |
- 0x4E (78) |
- 0x4E (78) |
- 0x4E (78) |
- 0x4E (78) |
- 0x4E (78) |
- 0x4E (78) |
- 0x4E (78) |
- ||||||||||||||||
"KeyO" |
- 0x4F (79) |
- 0x4F (79) |
- 0x4F (79) |
- 0x4F (79) |
- 0x4F (79) |
- 0x4F (79) |
- 0x4F (79) |
- 0x4F (79) |
- ||||||||||||||||
"KeyP" |
- 0x50 (80) |
- 0x50 (80) |
- 0x50 (80) |
- 0x50 (80) |
- 0x50 (80) |
- 0x50 (80) |
- 0x50 (80) |
- 0x50 (80) |
- ||||||||||||||||
"KeyQ" |
- 0x51 (81) |
- 0x51 (81) |
- 0x51 (81) |
- 0x51 (81) |
- 0xBA (186) |
- 0x51 (81) |
- 0x51 (81) |
- 0xBA (186) |
- 0x51 (81) |
- 0x51 (81) |
- 0xBA (186) |
- 0x51 (81) |
- 0x51 (81) |
- 0x51 (81) |
- 0xBA (186) |
- 0x51 (81) |
- ||||||||
"KeyR" |
- 0x52 (82) |
- 0x52 (82) |
- 0x52 (82) |
- 0x52 (82) |
- 0x52 (82) |
- 0x52 (82) |
- 0x52 (82) |
- 0x52 (82) |
- ||||||||||||||||
"KeyS" |
- 0x53 (83) |
- 0x53 (83) |
- 0x53 (83) |
- 0x53 (83) |
- 0x53 (83) |
- 0x53 (83) |
- 0x53 (83) |
- 0x53 (83) |
- ||||||||||||||||
"KeyT" |
- 0x54 (84) |
- 0x54 (84) |
- 0x54 (84) |
- 0x54 (84) |
- 0x54 (84) |
- 0x54 (84) |
- 0x54 (84) |
- 0x54 (84) |
- ||||||||||||||||
"KeyU" |
- 0x55 (85) |
- 0x55 (85) |
- 0x55 (85) |
- 0x55 (85) |
- 0x55 (85) |
- 0x55 (85) |
- 0x55 (85) |
- 0x55 (85) |
- ||||||||||||||||
"KeyV" |
- 0x56 (86) |
- 0x56 (86) |
- 0x56 (86) |
- 0x56 (86) |
- 0x56 (86) |
- 0x56 (86) |
- 0x56 (86) |
- 0x56 (86) |
- ||||||||||||||||
"KeyW" |
- 0x57 (87) |
- 0x57 (87) |
- 0x57 (87) |
- 0x57 (87) |
- 0x57 (87) |
- 0x57 (87) |
- 0x57 (87) |
- 0x57 (87) |
- ||||||||||||||||
"KeyX" |
- 0x58 (88) |
- 0x58 (88) |
- 0x58 (88) |
- 0x58 (88) |
- 0x58 (88) |
- 0x58 (88) |
- 0x58 (88) |
- 0x58 (88) |
- ||||||||||||||||
"KeyY" |
- 0x59 (89) |
- 0x59 (89) |
- 0x59 (89) |
- 0x59 (89) |
- 0x59 (89) |
- 0x59 (89) |
- 0x59 (89) |
- 0x59 (89) |
- ||||||||||||||||
"KeyZ" |
- 0x5A (90) |
- 0x5A (90) |
- 0x5A (90) |
- 0x5A (90) |
- 0x5A (90) |
- 0x5A (90) |
- 0x5A (90) |
- 0x5A (90) |
- ||||||||||||||||
| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows (10.9) | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|||||||||||||||||
| US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -|
| {{domxref("KeyboardEvent.code")}} | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -US | -Japanese | -Greek | -
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|||||||||||||||||
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -||||||||||||||||||||
"Comma" |
- 0xBC (188) |
- 0xBC (188) |
- 0xBC (188) |
- 0xBC (188) |
- 0xBC (188) |
- 0xBC (188) |
- 0xBC (188) |
- 0xBC (188) |
- ||||||||||||||||
"Comma" with Shift |
- ||||||||||||||||||||||||
"Period" |
- 0xBE (190) |
- 0xBE (190) |
- 0xBE (190) |
- 0xBE (190) |
- 0xBE (190) |
- 0xBE (190) |
- 0xBE (190) |
- 0xBE (190) |
- ||||||||||||||||
"Period" with Shift |
- ||||||||||||||||||||||||
"Semicolon" |
- 0xBA (186) |
- 0xBB (187) |
- 0xBA (186) |
- 0xBA (186) |
- 0xBB (187) |
- 0xBA (186) |
- 0xBA (186) |
- 0xBA (186) *1 |
- 0xE5 (229) *2 |
- 0xBA (186) |
- 0xBA (186) |
- 0xE5 (229) *3 |
- 0xBA (186) |
- 0xBA (186) *1 |
- 0xE5 (229) *2 |
- 0x3B (59) |
- 0x3B (59) |
- 0x00 (0) |
- 0x3B (59) |
- 0x3B (59) *1 |
- 0x00 (0) |
- 0x3B (59) |
- 0x3B (59) |
- 0x00 (0) |
-
"Semicolon" with Shift |
- 0xBB (187) *1 |
- 0xBB (187) |
- 0xBB (187) *1 |
- |||||||||||||||||||||
"Quote" |
- 0xDE (222) |
- 0xBA (186) |
- 0xDE (222) |
- 0xDE (222) |
- 0xBA (186) |
- 0xDE (222) |
- 0xDE (222) |
- 0xBA (186) *1 |
- 0xDE (222) |
- 0xDE (222) |
- 0xBA (186) |
- 0xDE (222) |
- 0xDE (222) |
- 0xBA (186) *1 |
- 0xDE (222) |
- 0xDE (222) |
- 0x3A (58) |
- 0xDE (222) |
- 0xDE (222) |
- 0x3A (58) *1 |
- 0xDE (222) |
- 0xDE (222) |
- 0x3A (58) |
- 0xDE (222) |
-
"Quote" with Shift |
- 0xDE (222) *1 |
- 0x38 (56) |
- 0xDE (222) *1 |
- |||||||||||||||||||||
"BracketLeft" |
- 0xDB (219) |
- 0xC0(192) |
- 0xDB (219) |
- 0xDB (219) |
- 0xC0(192) |
- 0xDB (219) |
- 0xDB (219) |
- 0xDB (219) *1 |
- 0xDB (219) |
- 0xDB (219) |
- 0x32 (50) |
- 0xDB (219) |
- 0xDB (219) |
- 0xDB (219) *1 |
- 0xDB (219) |
- 0xDB (219) |
- 0x40 (64) |
- 0xDB (219) |
- 0xDB (219) |
- 0x40 (64) *1 |
- 0xDB (219) |
- 0xDB (219) |
- 0x40 (64) |
- 0xDB (219) |
-
"BracketLeft" with Shift |
- 0xC0 (192) *1 |
- 0xC0 (192) |
- 0xC0 (192) *1 |
- |||||||||||||||||||||
"BracketRight" |
- 0xDD (221) |
- 0xDB (219) |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) *1 |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) *1 |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) *1 |
- 0xDD (221) |
- 0xDD (221) |
- 0xDB (219) |
- 0xDD (221) |
-
"BracketRight" with Shift |
- ||||||||||||||||||||||||
"Backquote" |
- 0xC0 (192) |
- N/A |
- 0xC0 (192) |
- 0xC0 (192) |
- N/A |
- 0xC0 (192) |
- 0xC0 (192) |
- 0xC0 (192) |
- 0xF4 (244) |
- 0xC0 (192) |
- 0xC0 (192) |
- 0xC0 (192) |
- N/A |
- 0xC0 (192) |
- 0xC0 (192) |
- 0xC0 (192) |
- 0x00 (0) |
- 0xC0 (192) |
- ||||||
"Backquote" with Shift |
- ||||||||||||||||||||||||
"Backslash" |
- 0xDC (220) |
- 0xDD (221) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDD (221) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDD (221) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDD (221) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDC (220) |
- 0xDD (221) |
- 0xDC (220) |
- ||||||
"Backslash" with Shift |
- ||||||||||||||||||||||||
"Minus" |
- 0xBD (189) |
- 0xBD (189) |
- 0xBD (189) |
- 0xBD (189) *1 |
- 0xBD (189) |
- 0xBD (189) |
- 0xBD (189) |
- 0xBD (189) |
- 0xBD (189) |
- 0xBD (189) *1 |
- 0xBD (189) |
- 0xAD (173) |
- 0xAD (173) |
- 0xAD (173) *1 |
- 0xAD (173) |
- 0xAD (173) |
- ||||||||
"Minus" with Shift |
- 0xBB (187) *1 |
- 0xBB (187) |
- 0xBD (189) |
- 0xBB (187) *1 |
- 0xBD (189) |
- |||||||||||||||||||
"Equal" |
- 0xBB (187) |
- 0xDE (222) |
- 0xBB (187) |
- 0xBB (187) |
- 0xDE (222) |
- 0xBB (187) |
- 0xBB (187) |
- 0xBB (187) *1 |
- 0xBB (187) |
- 0xBB (187) |
- 0x36 (54) |
- 0xBB (187) |
- 0xBB (187) |
- 0xBB (187) *1 |
- 0xBB (187) |
- 0x3D (61) |
- 0xA0 (160) |
- 0x3D (61) |
- 0x3D (61) |
- 0xA0 (160) *1 |
- 0x3D (61) |
- 0x3D (61) |
- 0xA0 (160) |
- 0x3D (61) |
-
"Equal" with Shift |
- 0xC0 (192) *1 |
- 0xC0 (192) |
- 0xBB (187) |
- 0xC0 (192) *1 |
- 0xBB (187) |
- |||||||||||||||||||
"IntlRo" |
- 0xC1 (193) |
- 0xE2 (226) |
- 0xC1 (193) |
- 0xC1 (193) |
- 0xE2 (226) |
- 0xC1 (193) |
- 0xBD (189) |
- 0xBD (189) |
- 0x00 (0) |
- *4 | -0xDC (220)- |
- *4 | -0xBD (189) |
- 0xBD (189) |
- 0xE5 (229) *5 |
- 0x00 (0) |
- 0xDC (220) |
- 0x00 (0) |
- 0xA7 (167) |
- 0xA7 (167) |
- 0x00 (0) |
- 0x00 (0) |
- 0xDC (220) |
- 0x00 (0) |
-
"IntlRo" with Shift |
- ||||||||||||||||||||||||
"IntlYen" |
- 0xFF (255) |
- 0xDC (220) |
- 0xFF (255) |
- 0xFF (255) |
- 0xDC (220) |
- 0xFF (255) |
- 0x00 (0) |
- 0x00 (0) |
- 0x00 (0) |
- *4 | -0xDC (220) |
- *4 | -0x00 (0) |
- 0x00 (0) |
- 0xE5 (229) *5 |
- 0x00 (0) |
- 0xDC (220) |
- 0x00 (0) |
- 0xDC (220) |
- 0xDC (220) |
- 0x00 (0) |
- 0x00 (0) |
- 0xDC (220) |
- 0x00 (0) |
-
"IntlYen" with Shift |
- 0xDC (220) |
- 0xDC (220) |
- 0xBD (189) |
- 0xDC (220) |
- 0xDC (220) |
- |||||||||||||||||||
*1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.
- -*2 The key is a dead key. The value of keyup event is 0xBA (186).
*3 The key is a dead key. The value of keyup event is 0x10 (16).
*4 No key events are fired.
- -*5 The key isn't available with Greek keyboard layout (does not input any character). The value of keyup event is 0x00 (0).
| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -|||
|---|---|---|---|---|---|---|---|---|
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|
| {{domxref("KeyboardEvent.code")}} | -Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -||||
"AltLeft" |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
-
"AltRight" |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
- 0x12 (18) |
-
"AltRight" when it's "AltGraph" key |
- *1 | -*1 | -N/A | -0xE1 (225) |
- N/A | -*1 | -N/A | -0xE1 (225) |
-
"CapsLock" |
- 0x14 (20) *2 |
- 0x14 (20) *2 |
- 0x14 (20) |
- 0x14 (20) |
- 0x14 (20) |
- 0x14 (20) *2 |
- 0x14 (20) |
- 0x14 (20) *3 |
-
"ControlLeft" |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
-
"ControlRight" |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
- 0x11 (17) |
-
"OSLeft" |
- 0x5B (91) |
- 0x5B (91) |
- 0x5B (91) |
- 0x5B (91) |
- 0x5B (91) |
- 0x5B (91) |
- 0xE0 (224) |
- 0x5B (91) |
-
"OSRight" |
- 0x5C (92) |
- 0x5C (92) |
- 0x5D (93) |
- 0x5C (92) |
- 0x5D (93) |
- 0x5B (91) |
- 0xE0 (224) |
- 0x5B (91) |
-
"ShiftLeft" |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
-
"ShiftRight" |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
- 0x10 (16) |
-
*1 On Windows, "AltGraph" key causes "ControlLeft" key event and "AltRight" key event.
*2 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0xF0 (240). The key works as "Alphanumeric" key whose label is "英数".
*3 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0x00 (0). The key works as "Alphanumeric" key whose label is "英数".
| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -|||
|---|---|---|---|---|---|---|---|---|
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|
| {{domxref("KeyboardEvent.code")}} | -Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -||||
"ContextMenu" |
- 0x5D (93) |
- 0x5D (93) |
- 0x00 (0) *1 |
- 0x5D (93) |
- 0x00 (0) *1 |
- 0x5D (93) |
- 0x5D (93) |
- 0x5D (93) |
-
"Enter" |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
-
"Space" |
- 0x20 (32) |
- 0x20 (32) |
- 0x20 (32) |
- 0x20 (32) |
- 0x20 (32) |
- 0x20 (32) |
- 0x20 (32) |
- 0x20 (32) |
-
"Tab" |
- 0x09 (9) |
- 0x09 (9) |
- 0x09 (9) |
- 0x09 (9) |
- 0x09 (9) |
- 0x09 (9) |
- 0x09 (9) |
- 0x09 (9) |
-
"Delete" |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
-
"End" |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
-
"Help" |
- N/A | -N/A | -0x2D (45) *2 |
- 0x2F (47) *3 |
- 0x2D (45) *2 |
- N/A | -0x2D (45) *2 |
- 0x06 (6) *3 |
-
"Home" |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
-
"Insert" |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
-
"PageDown" |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
-
"PageUp" |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
-
"ArrowDown" |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
-
"ArrowLeft" |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
-
"ArrowRight" |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
-
"ArrowUp" |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
-
"Escape" |
- 0x1B (27) |
- 0x1B (27) |
- 0x1B (27) |
- 0x1B (27) |
- 0x1B (27) |
- 0x1B (27) |
- 0x1B (27) |
- 0x1B (27) |
-
"PrintScreen" |
- 0x2C (44) *4 |
- 0x2C (44) *4 |
- 0x7C (124)*5 |
- 0x2A (42) |
- 0x7C (124)*5 |
- 0x2C (44) *4 |
- 0x2C (44) |
- 0x2A (42) |
-
"ScrollLock" |
- 0x91 (145) |
- 0x91 (145) |
- 0x7D (125)*5 |
- 0x91 (145) |
- 0x7D (125)*5 |
- 0x91 (145) |
- 0x91 (145) |
- 0x91 (145) |
-
"Pause" |
- 0x13 (19) *6 |
- 0x13 (19) *6 |
- 0x7E (126)*5 |
- 0x13 (19) |
- 0x7E (126)*5 |
- 0x13 (19) *6 |
- 0x13 (19) |
- 0x13 (19) |
-
*1 keypress event is fired whose keyCode and charCode are 0x10 (16) but text isn't inputted into editor.
*2 On Mac, "Help" key is mapped to "Insert" key of PC keyboard. These keyCode values are the same as the "Insert" key's keyCode value.
*3 Tested on Fedora 20.
- -*4 Only keyup event is fired.
*5 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Chrome and Safari map same keyCode values with Mac's keys.
*6 "Pause" key with Control causes 0x03 (3).
| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -|||
|---|---|---|---|---|---|---|---|---|
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|
| {{domxref("KeyboardEvent.code")}} | -Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -||||
"F1" |
- 0x70 (112) |
- 0x70 (112) |
- 0x70 (112) |
- 0x70 (112) |
- 0x70 (112) |
- 0x70 (112) |
- 0x70 (112) |
- 0x70 (112) |
-
"F2" |
- 0x71 (113) |
- 0x71 (113) |
- 0x71 (113) |
- 0x71 (113) |
- 0x71 (113) |
- 0x71 (113) |
- 0x71 (113) |
- 0x71 (113) |
-
"F3" |
- 0x72 (114) |
- 0x72 (114) |
- 0x72 (114) |
- 0x72 (114) |
- 0x72 (114) |
- 0x72 (114) |
- 0x72 (114) |
- 0x72 (114) |
-
"F4" |
- 0x73 (115) |
- 0x73 (115) |
- 0x73 (115) |
- 0x73 (115) |
- 0x73 (115) |
- 0x73 (115) |
- 0x73 (115) |
- 0x73 (115) |
-
"F5" |
- 0x74 (116) |
- 0x74 (116) |
- 0x74 (116) |
- 0x74 (116) |
- 0x74 (116) |
- 0x74 (116) |
- 0x74 (116) |
- 0x74 (116) |
-
"F6" |
- 0x75 (117) |
- 0x75 (117) |
- 0x75 (117) |
- 0x75 (117) |
- 0x75 (117) |
- 0x75 (117) |
- 0x75 (117) |
- 0x75 (117) |
-
"F7" |
- 0x76 (118) |
- 0x76 (118) |
- 0x76 (118) |
- 0x76 (118) |
- 0x76 (118) |
- 0x76 (118) |
- 0x76 (118) |
- 0x76 (118) |
-
"F8" |
- 0x77 (119) |
- 0x77 (119) |
- 0x77 (119) |
- 0x77 (119) |
- 0x77 (119) |
- 0x77 (119) |
- 0x77 (119) |
- 0x77 (119) |
-
"F9" |
- 0x78 (120) |
- 0x78 (120) |
- 0x78 (120) |
- 0x78 (120) |
- 0x78 (120) |
- 0x78 (120) |
- 0x78 (120) |
- 0x78 (120) |
-
"F10" |
- 0x79 (121) |
- 0x79 (121) |
- 0x79 (121) |
- 0x79 (121) |
- 0x79 (121) |
- 0x79 (121) |
- 0x79 (121) |
- 0x79 (121) |
-
"F11" |
- 0x7A (122) |
- 0x7A (122) |
- 0x7A (122) |
- 0x7A (122) |
- 0x7A (122) |
- 0x7A (122) |
- 0x7A (122) |
- 0x7A (122) |
-
"F12" |
- 0x7B (123) |
- 0x7B (123) |
- 0x7B (123) |
- 0x7B (123) |
- 0x7B (123) |
- 0x7B (123) |
- 0x7B (123) |
- 0x7B (123) |
-
"F13" |
- 0x7C (124) |
- 0x7C (124) |
- 0x7C (124) |
- 0x7C (124) *1 |
- 0x7C (124) |
- 0x7C (124) |
- 0x2C (44) *2 |
- 0x00 (0) *3 |
-
"F14" |
- 0x7D (125) |
- 0x7D (125) |
- 0x7D (125) |
- 0x7D (125) *1 |
- 0x7D (125) |
- 0x7D (125) |
- 0x91 (145) *2 |
- 0x00 (0) *3 |
-
"F15" |
- 0x7E (126) |
- 0x7E (126) |
- 0x7E (126) |
- 0x7E (126) *1 |
- 0x7E (126) |
- 0x7E (126) |
- 0x13 (19) *2 |
- 0x00 (0) *3 |
-
"F16" |
- 0x7F (127) |
- 0x7F (127) |
- 0x7F (127) |
- 0x7F (127) *1 |
- 0x7F (127) |
- 0x7F (127) |
- 0x7F (127) |
- 0x00 (0) *3 |
-
"F17" |
- 0x80 (128) |
- 0x80 (128) |
- 0x80 (128) |
- 0x80 (128) *1 |
- 0x80 (128) |
- 0x80 (128) |
- 0x80 (128) |
- 0x00 (0) *3 |
-
"F18" |
- 0x81 (129) |
- 0x81 (129) |
- 0x81 (129) |
- 0x81 (129) *1 |
- 0x81 (129) |
- 0x81 (129) |
- 0x81 (129) |
- 0x00 (0) *3 |
-
"F19" |
- 0x82 (130) |
- 0x82 (130) |
- 0x82 (130) |
- N/A *4 |
- 0x82 (130) |
- 0x82 (130) |
- 0x82 (130) |
- 0x00 (0) *3 |
-
"F20" |
- 0x83 (131) |
- 0x83 (131) |
- 0x83 (131) |
- N/A *4 |
- 0xE5 (229) *5 |
- 0x83 (131) |
- 0x00 (0) |
- N/A *6 |
-
"F21" |
- 0x84 (132) |
- 0x84 (132) |
- 0x00 (0) *7 |
- N/A *4 |
- 0x00 (0) *7 |
- 0x84 (132) |
- N/A *8 |
- N/A *6 |
-
"F22" |
- 0x85 (133) |
- 0x85 (133) |
- 0x00 (0) *7 |
- N/A *4 |
- 0x00 (0) *7 |
- 0x85 (133) |
- N/A *8 |
- N/A *6 |
-
"F23" |
- 0x86 (134) |
- 0x86 (134) |
- 0x00 (0) *7 |
- N/A *4 |
- 0x00 (0) *7 |
- 0x86 (134) |
- N/A *8 |
- N/A *6 |
-
"F24" |
- 0x87 (135) |
- 0x87 (135) |
- 0x00 (0) *7 |
- N/A *4 |
- 0x00 (0) *7 |
- 0x87 (135) |
- N/A *8 |
- 0x00 (0) *3 |
-
*1 Tested on Fedora 20.
- -*2 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Firefox maps same keyCode values with PC's keys.
*3 Tested on Fedora 20. The keys don't cause GDK_Fxx keysyms. If the keys cause proper keysyms, these values must be same as IE.
*4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.
- -*5 keyUp event's keyCode value is 0x83 (131).
*6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.
- -*7 Only keydown event is fired.
*8 No DOM key events are fired on Firefox.
- -| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -|||
|---|---|---|---|---|---|---|---|---|
| Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -|
| {{domxref("KeyboardEvent.code")}} | -Windows | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -Mac (10.9) | -Windows | -Mac (10.9) | -Linux (Ubuntu 14.04) | -
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Safari 7 | -Gecko 29 | -||||
"NumLock" |
- 0x90 (144) |
- 0x90 (144) |
- 0x0C (12) *1 |
- 0x90 (144) |
- 0x0C (12) *1 |
- 0x90 (144) |
- 0x0C (12) *1 |
- 0x90 (144) |
-
"Numpad0" |
- 0x60 (96) |
- 0x60 (96) |
- 0x60 (96) |
- 0x60 (96) |
- 0x60 (96) |
- 0x60 (96) |
- 0x60 (96) |
- 0x60 (96) |
-
"Numpad1" |
- 0x61 (97) |
- 0x61 (97) |
- 0x61 (97) |
- 0x61 (97) |
- 0x61 (97) |
- 0x61 (97) |
- 0x61 (97) |
- 0x61 (97) |
-
"Numpad2" |
- 0x62 (98) |
- 0x62 (98) |
- 0x62 (98) |
- 0x62 (98) |
- 0x62 (98) |
- 0x62 (98) |
- 0x62 (98) |
- 0x62 (98) |
-
"Numpad3" |
- 0x63 (99) |
- 0x63 (99) |
- 0x63 (99) |
- 0x63 (99) |
- 0x63 (99) |
- 0x63 (99) |
- 0x63 (99) |
- 0x63 (99) |
-
"Numpad4" |
- 0x64 (100) |
- 0x64 (100) |
- 0x64 (100) |
- 0x64 (100) |
- 0x64 (100) |
- 0x64 (100) |
- 0x64 (100) |
- 0x64 (100) |
-
"Numpad5" |
- 0x65 (101) |
- 0x65 (101) |
- 0x65 (101) |
- 0x65 (101) |
- 0x65 (101) |
- 0x65 (101) |
- 0x65 (101) |
- 0x65 (101) |
-
"Numpad6" |
- 0x66 (102) |
- 0x66 (102) |
- 0x66 (102) |
- 0x66 (102) |
- 0x66 (102) |
- 0x66 (102) |
- 0x66 (102) |
- 0x66 (102) |
-
"Numpad7" |
- 0x67 (103) |
- 0x67 (103) |
- 0x67 (103) |
- 0x67 (103) |
- 0x67 (103) |
- 0x67 (103) |
- 0x67 (103) |
- 0x67 (103) |
-
"Numpad8" |
- 0x68 (104) |
- 0x68 (104) |
- 0x68 (104) |
- 0x68 (104) |
- 0x68 (104) |
- 0x68 (104) |
- 0x68 (104) |
- 0x68 (104) |
-
"Numpad9" |
- 0x69 (105) |
- 0x69 (105) |
- 0x69 (105) |
- 0x69 (105) |
- 0x69 (105) |
- 0x69 (105) |
- 0x69 (105) |
- 0x69 (105) |
-
"NumpadAdd" |
- 0x6B (107) |
- 0x6B (107) |
- 0x6B (107) |
- 0x6B (107) |
- 0x6B (107) |
- 0x6B (107) |
- 0x6B (107) |
- 0x6B (107) |
-
"NumpadComma" inputting "," |
- 0xC2 (194) |
- 0xC2 (194) |
- 0xBC (188) |
- Always inputs "." |
- 0xBC (188) |
- 0xC2 (194) |
- 0x6C (108) |
- Always inputs "." |
-
"NumpadComma" inputting "." or empty string |
- 0xC2 (194) |
- 0xC2 (194) |
- 0xBE (190) |
- 0x6E (110) |
- 0xBE (190) |
- 0xC2 (194) |
- 0x6C (108) |
- 0x6E (110) |
-
"NumpadDecimal" inputting "." |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
-
"NumpadDecimal" inputting "," |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6C (108) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6E (110) |
- 0x6C (108) |
-
"NumpadDivide" |
- 0x6F (111) |
- 0x6F (111) |
- 0x6F (111) |
- 0x6F (111) |
- 0x6F (111) |
- 0x6F (111) |
- 0x6F (111) |
- 0x6F (111) |
-
"NumpadEnter" |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
- 0x0D (13) |
-
"NumpadEqual" |
- 0x0C (12) |
- 0x0C (12) |
- 0xBB (187) |
- 0xBB (187) |
- 0xBB (187) |
- 0x0C (12) |
- 0x3D (61) |
- 0x3D (61) |
-
"NumpadMultiply" |
- 0x6A (106) |
- 0x6A (106) |
- 0x6A (106) |
- 0x6A (106) |
- 0x6A (106) |
- 0x6A (106) |
- 0x6A (106) |
- 0x6A (106) |
-
"NumpadSubtract" |
- 0x6D (109) |
- 0x6D (109) |
- 0x6D (109) |
- 0x6D (109) |
- 0x6D (109) |
- 0x6D (109) |
- 0x6D (109) |
- 0x6D (109) |
-
*1 "NumLock" key works as "Clear" key on Mac.
| {{domxref("KeyboardEvent.code")}} | -Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Gecko 29 | -|
|---|---|---|---|---|---|
| Windows | -Windows | -Linux (Ubuntu 14.04) | -Windows | -Linux (Ubuntu 14.04) | -|
| {{domxref("KeyboardEvent.code")}} | -Windows | -Windows | -Linux (Ubuntu 14.04) | -Windows | -Linux (Ubuntu 14.04) | -
| Internet Explorer 11 | -Google Chrome 34 | -Chromium 34 | -Gecko 29 | -||
"Numpad0" ("Insert") |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
- 0x2D (45) |
-
"Numpad1" ("End") |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
- 0x23 (35) |
-
"Numpad2" ("ArrowDown") |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
- 0x28 (40) |
-
"Numpad3" ("PageDown") |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
- 0x22 (34) |
-
"Numpad4" ("ArrowLeft") |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
- 0x25 (37) |
-
"Numpad5" |
- 0x0C (12) |
- 0x0C (12) |
- 0x0C (12) |
- 0x0C (12) |
- 0x0C (12) |
-
"Numpad6" ("ArrowRight") |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
- 0x27 (39) |
-
"Numpad7" ("Home") |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
- 0x24 (36) |
-
"Numpad8" ("ArrowUp") |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
- 0x26 (38) |
-
"Numpad9" ("PageUp") |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
- 0x21 (33) |
-
"NumpadDecimal" ("Delete") |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
- 0x2E (46) |
-
* Recent Mac doesn't have "NumLock" key and state. Therefore, unlocked state isn't available.
Gecko defines a lot of keyCode values in KeyboardEvent for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.
| Constant | -Value | -Description | -
DOM_VK_CANCEL |
- 0x03 (3) | -Cancel key. | -
DOM_VK_HELP |
- 0x06 (6) | -Help key. | -
DOM_VK_BACK_SPACE |
- 0x08 (8) | -Backspace key. | -
DOM_VK_TAB |
- 0x09 (9) | -Tab key. | -
DOM_VK_CLEAR |
- 0x0C (12) | -"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key. | -
DOM_VK_RETURN |
- 0x0D (13) | -Return/enter key on the main keyboard. | -
DOM_VK_ENTER |
- 0x0E (14) | -Reserved, but not used. {{obsolete_inline(30)}} (Dropped, see {{bug(969247)}}.) |
-
DOM_VK_SHIFT |
- 0x10 (16) | -Shift key. | -
DOM_VK_CONTROL |
- 0x11 (17) | -Control key. | -
DOM_VK_ALT |
- 0x12 (18) | -Alt (Option on Mac) key. | -
DOM_VK_PAUSE |
- 0x13 (19) | -Pause key. | -
DOM_VK_CAPS_LOCK |
- 0x14 (20) | -Caps lock. | -
DOM_VK_KANA |
- 0x15 (21) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_HANGUL |
- 0x15 (21) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_EISU |
- 0x 16 (22) | -"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_JUNJA |
- 0x17 (23) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_FINAL |
- 0x18 (24) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_HANJA |
- 0x19 (25) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_KANJI |
- 0x19 (25) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_ESCAPE |
- 0x1B (27) | -Escape key. | -
DOM_VK_CONVERT |
- 0x1C (28) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_NONCONVERT |
- 0x1D (29) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_ACCEPT |
- 0x1E (30) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_MODECHANGE |
- 0x1F (31) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_SPACE |
- 0x20 (32) | -Space bar. | -
DOM_VK_PAGE_UP |
- 0x21 (33) | -Page Up key. | -
DOM_VK_PAGE_DOWN |
- 0x22 (34) | -Page Down key. | -
DOM_VK_END |
- 0x23 (35) | -End key. | -
DOM_VK_HOME |
- 0x24 (36) | -Home key. | -
DOM_VK_LEFT |
- 0x25 (37) | -Left arrow. | -
DOM_VK_UP |
- 0x26 (38) | -Up arrow. | -
DOM_VK_RIGHT |
- 0x27 (39) | -Right arrow. | -
DOM_VK_DOWN |
- 0x28 (40) | -Down arrow. | -
DOM_VK_SELECT |
- 0x29 (41) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_PRINT |
- 0x2A (42) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_EXECUTE |
- 0x2B (43) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_PRINTSCREEN |
- 0x2C (44) | -Print Screen key. | -
DOM_VK_INSERT |
- 0x2D (45) | -Ins(ert) key. | -
DOM_VK_DELETE |
- 0x2E (46) | -Del(ete) key. | -
DOM_VK_0 |
- 0x30 (48) | -"0" key in standard key location. | -
DOM_VK_1 |
- 0x31 (49) | -"1" key in standard key location. | -
DOM_VK_2 |
- 0x32 (50) | -"2" key in standard key location. | -
DOM_VK_3 |
- 0x33 (51) | -"3" key in standard key location. | -
DOM_VK_4 |
- 0x34 (52) | -"4" key in standard key location. | -
DOM_VK_5 |
- 0x35 (53) | -"5" key in standard key location. | -
DOM_VK_6 |
- 0x36 (54) | -"6" key in standard key location. | -
DOM_VK_7 |
- 0x37 (55) | -"7" key in standard key location. | -
DOM_VK_8 |
- 0x38 (56) | -"8" key in standard key location. | -
DOM_VK_9 |
- 0x39 (57) | -"9" key in standard key location. | -
DOM_VK_COLON |
- 0x3A (58) | -Colon (":") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_SEMICOLON |
- 0x3B (59) | -Semicolon (";") key. | -
DOM_VK_LESS_THAN |
- 0x3C (60) | -Less-than ("<") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_EQUALS |
- 0x3D (61) | -Equals ("=") key. | -
DOM_VK_GREATER_THAN |
- 0x3E (62) | -Greater-than (">") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_QUESTION_MARK |
- 0x3F (63) | -Question mark ("?") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_AT |
- 0x40 (64) | -Atmark ("@") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_A |
- 0x41 (65) | -"A" key. | -
DOM_VK_B |
- 0x42 (66) | -"B" key. | -
DOM_VK_C |
- 0x43 (67) | -"C" key. | -
DOM_VK_D |
- 0x44 (68) | -"D" key. | -
DOM_VK_E |
- 0x45 (69) | -"E" key. | -
DOM_VK_F |
- 0x46 (70) | -"F" key. | -
DOM_VK_G |
- 0x47 (71) | -"G" key. | -
DOM_VK_H |
- 0x48 (72) | -"H" key. | -
DOM_VK_I |
- 0x49 (73) | -"I" key. | -
DOM_VK_J |
- 0x4A (74) | -"J" key. | -
DOM_VK_K |
- 0x4B (75) | -"K" key. | -
DOM_VK_L |
- 0x4C (76) | -"L" key. | -
DOM_VK_M |
- 0x4D (77) | -"M" key. | -
DOM_VK_N |
- 0x4E (78) | -"N" key. | -
DOM_VK_O |
- 0x4F (79) | -"O" key. | -
DOM_VK_P |
- 0x50 (80) | -"P" key. | -
DOM_VK_Q |
- 0x51 (81) | -"Q" key. | -
DOM_VK_R |
- 0x52 (82) | -"R" key. | -
DOM_VK_S |
- 0x53 (83) | -"S" key. | -
DOM_VK_T |
- 0x54 (84) | -"T" key. | -
DOM_VK_U |
- 0x55 (85) | -"U" key. | -
DOM_VK_V |
- 0x56 (86) | -"V" key. | -
DOM_VK_W |
- 0x57 (87) | -"W" key. | -
DOM_VK_X |
- 0x58 (88) | -"X" key. | -
DOM_VK_Y |
- 0x59 (89) | -"Y" key. | -
DOM_VK_Z |
- 0x5A (90) | -"Z" key. | -
DOM_VK_WIN |
- 0x5B (91) | -Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_CONTEXT_MENU |
- 0x5D (93) | -Opening context menu key. | -
DOM_VK_SLEEP |
- 0x5F (95) | -Linux support for this keycode was added in Gecko 4.0. | -
DOM_VK_NUMPAD0 |
- 0x60 (96) | -"0" on the numeric keypad. | -
DOM_VK_NUMPAD1 |
- 0x61 (97) | -"1" on the numeric keypad. | -
DOM_VK_NUMPAD2 |
- 0x62 (98) | -"2" on the numeric keypad. | -
DOM_VK_NUMPAD3 |
- 0x63 (99) | -"3" on the numeric keypad. | -
DOM_VK_NUMPAD4 |
- 0x64 (100) | -"4" on the numeric keypad. | -
DOM_VK_NUMPAD5 |
- 0x65 (101) | -"5" on the numeric keypad. | -
DOM_VK_NUMPAD6 |
- 0x66 (102) | -"6" on the numeric keypad. | -
DOM_VK_NUMPAD7 |
- 0x67 (103) | -"7" on the numeric keypad. | -
DOM_VK_NUMPAD8 |
- 0x68 (104) | -"8" on the numeric keypad. | -
DOM_VK_NUMPAD9 |
- 0x69 (105) | -"9" on the numeric keypad. | -
DOM_VK_MULTIPLY |
- 0x6A (106) | -"*" on the numeric keypad. | -
DOM_VK_ADD |
- 0x6B (107) | -"+" on the numeric keypad. | -
DOM_VK_SEPARATOR |
- 0x6C (108) | -- |
DOM_VK_SUBTRACT |
- 0x6D (109) | -"-" on the numeric keypad. | -
DOM_VK_DECIMAL |
- 0x6E (110) | -Decimal point on the numeric keypad. | -
DOM_VK_DIVIDE |
- 0x6F (111) | -"/" on the numeric keypad. | -
DOM_VK_F1 |
- 0x70 (112) | -F1 key. | -
DOM_VK_F2 |
- 0x71 (113) | -F2 key. | -
DOM_VK_F3 |
- 0x72 (114) | -F3 key. | -
DOM_VK_F4 |
- 0x73 (115) | -F4 key. | -
DOM_VK_F5 |
- 0x74 (116) | -F5 key. | -
DOM_VK_F6 |
- 0x75 (117) | -F6 key. | -
DOM_VK_F7 |
- 0x76 (118) | -F7 key. | -
DOM_VK_F8 |
- 0x77 (119) | -F8 key. | -
DOM_VK_F9 |
- 0x78 (120) | -F9 key. | -
DOM_VK_F10 |
- 0x79 (121) | -F10 key. | -
DOM_VK_F11 |
- 0x7A (122) | -F11 key. | -
DOM_VK_F12 |
- 0x7B (123) | -F12 key. | -
DOM_VK_F13 |
- 0x7C (124) | -F13 key. | -
DOM_VK_F14 |
- 0x7D (125) | -F14 key. | -
DOM_VK_F15 |
- 0x7E (126) | -F15 key. | -
DOM_VK_F16 |
- 0x7F (127) | -F16 key. | -
DOM_VK_F17 |
- 0x80 (128) | -F17 key. | -
DOM_VK_F18 |
- 0x81 (129) | -F18 key. | -
DOM_VK_F19 |
- 0x82 (130) | -F19 key. | -
DOM_VK_F20 |
- 0x83 (131) | -F20 key. | -
DOM_VK_F21 |
- 0x84 (132) | -F21 key. | -
DOM_VK_F22 |
- 0x85 (133) | -F22 key. | -
DOM_VK_F23 |
- 0x86 (134) | -F23 key. | -
DOM_VK_F24 |
- 0x87 (135) | -F24 key. | -
DOM_VK_NUM_LOCK |
- 0x90 (144) | -Num Lock key. | -
DOM_VK_SCROLL_LOCK |
- 0x91 (145) | -Scroll Lock key. | -
DOM_VK_WIN_OEM_FJ_JISHO |
- 0x92 (146) | -An OEM specific key on Windows. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_FJ_MASSHOU |
- 0x93 (147) | -An OEM specific key on Windows. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_FJ_TOUROKU |
- 0x94 (148) | -An OEM specific key on Windows. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_FJ_LOYA |
- 0x95 (149) | -An OEM specific key on Windows. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_FJ_ROYA |
- 0x96 (150) | -An OEM specific key on Windows. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_CIRCUMFLEX |
- 0xA0 (160) | -Circumflex ("^") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_EXCLAMATION |
- 0xA1 (161) | -Exclamation ("!") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_DOUBLE_QUOTE |
- 0xA3 (162) | -Double quote (""") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_HASH |
- 0xA3 (163) | -Hash ("#") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_DOLLAR |
- 0xA4 (164) | -Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_PERCENT |
- 0xA5 (165) | -Percent ("%") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_AMPERSAND |
- 0xA6 (166) | -Ampersand ("&") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_UNDERSCORE |
- 0xA7 (167) | -Underscore ("_") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_OPEN_PAREN |
- 0xA8 (168) | -Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_CLOSE_PAREN |
- 0xA9 (169) | -Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_ASTERISK |
- 0xAA (170) | -Asterisk ("*") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_PLUS |
- 0xAB (171) | -Plus ("+") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_PIPE |
- 0xAC (172) | -Pipe ("|") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_HYPHEN_MINUS |
- 0xAD (173) | -Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_OPEN_CURLY_BRACKET |
- 0xAE (174) | -Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_CLOSE_CURLY_BRACKET |
- 0xAF (175) | -Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_TILDE |
- 0xB0 (176) | -Tilde ("~") key. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_VOLUME_MUTE |
- 0xB5 (181) | -Audio mute key. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_VOLUME_DOWN |
- 0xB6 (182) | -Audio volume down key {{gecko_minversion_inline("21.0")}} | -
DOM_VK_VOLUME_UP |
- 0xB7 (183) | -Audio volume up key {{gecko_minversion_inline("21.0")}} | -
DOM_VK_COMMA |
- 0xBC (188) | -Comma (",") key. | -
DOM_VK_PERIOD |
- 0xBE (190) | -Period (".") key. | -
DOM_VK_SLASH |
- 0xBF (191) | -Slash ("/") key. | -
DOM_VK_BACK_QUOTE |
- 0xC0 (192) | -Back tick ("`") key. | -
DOM_VK_OPEN_BRACKET |
- 0xDB (219) | -Open square bracket ("[") key. | -
DOM_VK_BACK_SLASH |
- 0xDC (220) | -Back slash ("\") key. | -
DOM_VK_CLOSE_BRACKET |
- 0xDD (221) | -Close square bracket ("]") key. | -
DOM_VK_QUOTE |
- 0xDE (222) | -Quote (''') key. | -
DOM_VK_META |
- 0xE0 (224) | -Meta key on Linux, Command key on Mac. | -
DOM_VK_ALTGR |
- 0xE1 (225) | -AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}} | -
DOM_VK_WIN_ICO_HELP |
- 0xE3 (227) | -An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_ICO_00 |
- 0xE4 (228) | -An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_ICO_CLEAR |
- 0xE6 (230) | -An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_RESET |
- 0xE9 (233) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_JUMP |
- 0xEA (234) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_PA1 |
- 0xEB (235) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_PA2 |
- 0xEC (236) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_PA3 |
- 0xED (237) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_WSCTRL |
- 0xEE (238) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_CUSEL |
- 0xEF (239) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_ATTN |
- 0xF0 (240) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_FINISH |
- 0xF1 (241) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_COPY |
- 0xF2 (242) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_AUTO |
- 0xF3 (243) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_ENLW |
- 0xF4 (244) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_BACKTAB |
- 0xF5 (245) | -An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}} | -
DOM_VK_ATTN |
- 0xF6 (246) | -Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_CRSEL |
- 0xF7 (247) | -CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_EXSEL |
- 0xF8 (248) | -ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_EREOF |
- 0xF9 (249) | -Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_PLAY |
- 0xFA (250) | -Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_ZOOM |
- 0xFB (251) | -Zoom key. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_PA1 |
- 0xFD (253) | -PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}} | -
DOM_VK_WIN_OEM_CLEAR |
- 0xFE (254) | -Clear key, but we're not sure the meaning difference from DOM_VK_CLEAR. {{gecko_minversion_inline("21.0")}} |
-
On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).
- -Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.
- -See "Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)" in MSDN for the detail.
diff --git a/files/ja/web/api/keyboardevent/keycode/index.md b/files/ja/web/api/keyboardevent/keycode/index.md new file mode 100644 index 00000000000000..c6693e001cfca8 --- /dev/null +++ b/files/ja/web/api/keyboardevent/keycode/index.md @@ -0,0 +1,3285 @@ +--- +title: KeyboardEvent.keyCode +slug: Web/API/KeyboardEvent/keyCode +page-type: web-api-instance-property +tags: + - API + - DOM + - DOM Events + - Deprecated + - KeyboardEvent + - Property + - Read-only + - Reference + - keyCode +browser-compat: api.KeyboardEvent.keyCode +translation_of: Web/API/KeyboardEvent/keyCode +--- +{{APIRef("UI Events")}}{{Deprecated_Header}} + +非推奨の **`KeyboardEvent.keyCode`** 読み取り専用プロパティは、押されたキーの変更されていない値を識別するシステムおよび実装に依存する数値コードを表します。 + +これは通常、キーに対応する 10 進数の ASCII ({{RFC(20)}}) または Windows 1252 コードです。キーを識別できない場合は、この値は `0` になります。 + +これはしばらく非推奨となっていますので、できれば使用しないようにしてください。代わりに、もし実装されていれば {{domxref("KeyboardEvent.code")}} を使用してください。残念ながら、まだ実装されていないブラウザーもありますので、対象となるすべてのブラウザーで対応するものを使用するように注意する必要があります。 + +> **Note:** ウェブ開発者は `keydown` と `keyup` イベントを処理する際に、表示可能な文字に対して `keyCode` 属性を使用するべきではありません。前述のように、`keyCode` 属性は表示可能な文字、特に Shift や Alt キーが押された状態での文字に対しては有用ではありません。ショートカットキーハンドラーを実装する場合、通常は {{domxref("Element/keypress_event", "keypress")}} イベントの方がよいでしょう（少なくとも Gecko を使用するランタイムではそうでしょう）。 + +## 例 + +```js +window.addEventListener("keydown", function (event) { + if (event.defaultPrevented) { + return; // 既定のアクションがキャンセルされている場合は何もしないようにします。 + } + + let handled = false; + if (event.key !== undefined) { + // KeyboardEvent.key でイベントを処理し、handled を true に設定します。 + handled = true; + } else if (event.keyCode !== undefined) { + // KeyboardEvent.keyCode でイベントを処理し、handled を true に設定します。 + handled = true; + } + + if (handled) { + // イベントが処理された場合、"ダブルアクション" を抑制する + event.preventDefault(); + } +}, true); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## keyCode の値 + +### 標準位置で表示可能なキー + +標準位置で表示可能なキーを押したり離したりすることで発生するキーイベントの値は、ブラウザー間で互換性がありません。 + +IE はネイティブの仮想キーコードの値を `KeyboardEvent.keyCode` として公開するだけです。 + +Google Chrome、Chromium、Safari は入力された文字から値を決定する必要があります。入力文字が US キーボードレイアウトで入力できる場合、 US キーボードレイアウトの `keyCode` 値を使用します。 + +Firefox 15 {{geckoRelease("15.0")}} からは、 Gecko はキーによって入力可能な ASCII 文字から `keyCode` 値を取得します。 shift 修飾子や ASCII 対応キーボードレイアウトであった場合も含みます。詳しくは以下のルールを参照してください。 + +1. システムが Windows で、押されたキーのネイティブキーコードが a-z または 0-9 であることを示す場合、そのキーコードを使用します。 +2. システムが Mac で、押されたキーのネイティブキーコードが 0-9 である場合、そのキーコードを使用します。 +3. 押されたキーが ASCII のアルファベットまたは数字を修飾キーなしで入力する場合、それに対応するキーコードを使用します。 +4. 押されたキーが、 ASCII アルファベットまたは数字を Shift キーで修飾して入力する場合、そのキーコードを使用します。 +5. 押されたキーが、別の ASCII 文字を修飾キーなしで入力する場合、それに対応するキーコードを使用します。 +6. 押されたキーが、別の ASCII文字を Shift キー修飾で入力する場合、それに対応するキーコードを使用します。 +7. それ以外の場合、すなわち、押されたキーが Unicode 文字を入力する場合は以下の通り。 + + 1. キーボードレイアウトが ASCII 対応の（ASCII アルファベットを入力できる）場合、 0 を使用するか、[下記の追加ルール](#keycode_of_punctuation_keys_on_some_keyboard_layout)で計算します。 + 2. それ以外の場合、つまりキーボードレイアウトが ASCII に対応していない場合は、最も優先度の高い環境にインストールされている ASCII に対応したキーボードレイアウトを使用します。 + + 1. 代替キーボードレイアウトで押されたキーが ASCII のアルファベットまたは数字を入力する場合、そのキーコードを使用します。 + 2. それ以外の場合、 0 を使用するか、[下記の追加ルール](#keycode_of_punctuation_keys_on_some_keyboard_layout)で計算します。 + +Firefox 60 {{geckoRelease("60.0")}} からは、 Gecko は区切り記号キーの `keyCode` 値を、できる限り以下の規則で設定します（上記のリストのポイント 7.1 または 7.2 に到達したとき）。 + +> **Warning:** これらの新しい追加ルールの目的は、米国式キーボードレイアウトの区切り記号キーに unicode 文字をマッピングしているユーザーが、 Firefox に対応したウェブアプリケーションを ASCII に対応したキーボードレイアウトのみ、または米国式キーボードレイアウトのみで使用できるようにするためです。そうでなければ、新しく割り当てられた `keyCode` 値が他のキーと衝突する可能性があります。例えば、アクティブなキーボードレイアウトがロシア語の場合、 `"Period"` キーと `"Slash"` キーの `keyCode` 値は**どちらも** `190` (`KeyEvent.DOM_VK_PERIOD`) になります。もし、これらのキーを区別する必要があるが、世界中の全てのキーボードレイアウトに自分で対応したくない場合は、おそらく {{domxref("KeyboardEvent.code")}} を使用した方が良いでしょう。 + +1. macOS または Linux を使用している場合 + + 1. アクティブなキーボードレイアウトが ASCII に対応したものではなく、代替の ASCII 対応のキーボードレイアウトが利用可能な場合。 + + 1. もし、 ASCII に対応したキーボードレイアウトが、修飾されていないキーだけで ASCII 文字を生成する場合、その文字の `keyCode` を使用します。 + 2. もし、代替の ASCII に対応したキーボードレイアウトで、 Shift キーで修飾した ASCII 文字が生成された場合、シフトされた文字の `keyCode`を使用します。 + 3. それ以外の場合は、 US キーボードレイアウトがアクティブなときにキーが生成する ASCII 文字を `keyCode` に使用します。 + + 2. それ以外の場合は、 US キーボードレイアウトがアクティブなときにキーが生成する ASCII 文字を `keyCode` に使用します。 + +2. Windows を使用している場合 + + 1. US キーボードレイアウトがアクティブなときに Windows の同じ仮想キーコードに割り当てられたキーによって生成される ASCII 文字を `keyCode` 値に使用します。 + +| {{domxref("KeyboardEvent.code")}} | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| + | Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +||||||||||||||||
| + | 米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +
"Digit1" |
+ 0x31 (49) |
+ 0x31 (49) |
+ 0x31 (49) |
+ 0x31 (49) |
+ 0x31 (49) |
+ 0x31 (49) |
+ 0x31 (49) |
+ 0x31 (49) |
+ ||||||||||||||||
"Digit2" |
+ 0x32 (50) |
+ 0x32 (50) |
+ 0x32 (50) |
+ 0x32 (50) |
+ 0x32 (50) |
+ 0x32 (50) |
+ 0x32 (50) |
+ 0x32 (50) |
+ ||||||||||||||||
"Digit3" |
+ 0x33 (51) |
+ 0x33 (51) |
+ 0x33 (51) |
+ 0x33 (51) |
+ 0x33 (51) |
+ 0x33 (51) |
+ 0x33 (51) |
+ 0x33 (51) |
+ ||||||||||||||||
"Digit4" |
+ 0x34 (52) |
+ 0x34 (52) |
+ 0x34 (52) |
+ 0x34 (52) |
+ 0x34 (52) |
+ 0x34 (52) |
+ 0x34 (52) |
+ 0x34 (52) |
+ ||||||||||||||||
"Digit5" |
+ 0x35 (53) |
+ 0x35 (53) |
+ 0x35 (53) |
+ 0x35 (53) |
+ 0x35 (53) |
+ 0x35 (53) |
+ 0x35 (53) |
+ 0x35 (53) |
+ ||||||||||||||||
"Digit6" |
+ 0x36 (54) |
+ 0x36 (54) |
+ 0x36 (54) |
+ 0x36 (54) |
+ 0x36 (54) |
+ 0x36 (54) |
+ 0x36 (54) |
+ 0x36 (54) |
+ ||||||||||||||||
"Digit7" |
+ 0x37 (55) |
+ 0x37 (55) |
+ 0x37 (55) |
+ 0x37 (55) |
+ 0x37 (55) |
+ 0x37 (55) |
+ 0x37 (55) |
+ 0x37 (55) |
+ ||||||||||||||||
"Digit8" |
+ 0x38 (56) |
+ 0x38 (56) |
+ 0x38 (56) |
+ 0x38 (56) |
+ 0x38 (56) |
+ 0x38 (56) |
+ 0x38 (56) |
+ 0x38 (56) |
+ ||||||||||||||||
"Digit9" |
+ 0x39 (57) |
+ 0x39 (57) |
+ 0x39 (57) |
+ 0x39 (57) |
+ 0x39 (57) |
+ 0x39 (57) |
+ 0x39 (57) |
+ 0x39 (57) |
+ ||||||||||||||||
"Digit0" |
+ 0x30 (48) |
+ 0x30 (48) |
+ 0x30 (48) |
+ 0x30 (48) |
+ 0x30 (48) |
+ 0x30 (48) |
+ 0x30 (48) |
+ 0x30 (48) |
+ ||||||||||||||||
"KeyA" |
+ 0x41 (65) |
+ 0x41 (65) |
+ 0x41 (65) |
+ 0x41 (65) |
+ 0x41 (65) |
+ 0x41 (65) |
+ 0x41 (65) |
+ 0x41 (65) |
+ ||||||||||||||||
"KeyB" |
+ 0x42 (66) |
+ 0x42 (66) |
+ 0x42 (66) |
+ 0x42 (66) |
+ 0x42 (66) |
+ 0x42 (66) |
+ 0x42 (66) |
+ 0x42 (66) |
+ ||||||||||||||||
"KeyC" |
+ 0x43 (67) |
+ 0x43 (67) |
+ 0x43 (67) |
+ 0x43 (67) |
+ 0x43 (67) |
+ 0x43 (67) |
+ 0x43 (67) |
+ 0x43 (67) |
+ ||||||||||||||||
"KeyD" |
+ 0x44 (68) |
+ 0x44 (68) |
+ 0x44 (68) |
+ 0x44 (68) |
+ 0x44 (68) |
+ 0x44 (68) |
+ 0x44 (68) |
+ 0x44 (68) |
+ ||||||||||||||||
"KeyE" |
+ 0x45 (69) |
+ 0x45 (69) |
+ 0x45 (69) |
+ 0x45 (69) |
+ 0x45 (69) |
+ 0x45 (69) |
+ 0x45 (69) |
+ 0x45 (69) |
+ ||||||||||||||||
"KeyF" |
+ 0x46 (70) |
+ 0x46 (70) |
+ 0x46 (70) |
+ 0x46 (70) |
+ 0x46 (70) |
+ 0x46 (70) |
+ 0x46 (70) |
+ 0x46 (70) |
+ ||||||||||||||||
"KeyG" |
+ 0x47 (71) |
+ 0x47 (71) |
+ 0x47 (71) |
+ 0x47 (71) |
+ 0x47 (71) |
+ 0x47 (71) |
+ 0x47 (71) |
+ 0x47 (71) |
+ ||||||||||||||||
"KeyH" |
+ 0x48 (72) |
+ 0x48 (72) |
+ 0x48 (72) |
+ 0x48 (72) |
+ 0x48 (72) |
+ 0x48 (72) |
+ 0x48 (72) |
+ 0x48 (72) |
+ ||||||||||||||||
"KeyI" |
+ 0x49 (73) |
+ 0x49 (73) |
+ 0x49 (73) |
+ 0x49 (73) |
+ 0x49 (73) |
+ 0x49 (73) |
+ 0x49 (73) |
+ 0x49 (73) |
+ ||||||||||||||||
"KeyJ" |
+ 0x4A (74) |
+ 0x4A (74) |
+ 0x4A (74) |
+ 0x4A (74) |
+ 0x4A (74) |
+ 0x4A (74) |
+ 0x4A (74) |
+ 0x4A (74) |
+ ||||||||||||||||
"KeyK" |
+ 0x4B (75) |
+ 0x4B (75) |
+ 0x4B (75) |
+ 0x4B (75) |
+ 0x4B (75) |
+ 0x4B (75) |
+ 0x4B (75) |
+ 0x4B (75) |
+ ||||||||||||||||
"KeyL" |
+ 0x4C (76) |
+ 0x4C (76) |
+ 0x4C (76) |
+ 0x4C (76) |
+ 0x4C (76) |
+ 0x4C (76) |
+ 0x4C (76) |
+ 0x4C (76) |
+ ||||||||||||||||
"KeyM" |
+ 0x4D (77) |
+ 0x4D (77) |
+ 0x4D (77) |
+ 0x4D (77) |
+ 0x4D (77) |
+ 0x4D (77) |
+ 0x4D (77) |
+ 0x4D (77) |
+ ||||||||||||||||
"KeyN" |
+ 0x4E (78) |
+ 0x4E (78) |
+ 0x4E (78) |
+ 0x4E (78) |
+ 0x4E (78) |
+ 0x4E (78) |
+ 0x4E (78) |
+ 0x4E (78) |
+ ||||||||||||||||
"KeyO" |
+ 0x4F (79) |
+ 0x4F (79) |
+ 0x4F (79) |
+ 0x4F (79) |
+ 0x4F (79) |
+ 0x4F (79) |
+ 0x4F (79) |
+ 0x4F (79) |
+ ||||||||||||||||
"KeyP" |
+ 0x50 (80) |
+ 0x50 (80) |
+ 0x50 (80) |
+ 0x50 (80) |
+ 0x50 (80) |
+ 0x50 (80) |
+ 0x50 (80) |
+ 0x50 (80) |
+ ||||||||||||||||
"KeyQ" |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0xBA (186)⚠️ |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0xBA (186)⚠️ |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0xBA (186)⚠️ |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0x51 (81) |
+ 0xBA (186)⚠️ |
+ 0x51 (81) |
+ ||||||||
"KeyR" |
+ 0x52 (82) |
+ 0x52 (82) |
+ 0x52 (82) |
+ 0x52 (82) |
+ 0x52 (82) |
+ 0x52 (82) |
+ 0x52 (82) |
+ 0x52 (82) |
+ ||||||||||||||||
"KeyS" |
+ 0x53 (83) |
+ 0x53 (83) |
+ 0x53 (83) |
+ 0x53 (83) |
+ 0x53 (83) |
+ 0x53 (83) |
+ 0x53 (83) |
+ 0x53 (83) |
+ ||||||||||||||||
"KeyT" |
+ 0x54 (84) |
+ 0x54 (84) |
+ 0x54 (84) |
+ 0x54 (84) |
+ 0x54 (84) |
+ 0x54 (84) |
+ 0x54 (84) |
+ 0x54 (84) |
+ ||||||||||||||||
"KeyU" |
+ 0x55 (85) |
+ 0x55 (85) |
+ 0x55 (85) |
+ 0x55 (85) |
+ 0x55 (85) |
+ 0x55 (85) |
+ 0x55 (85) |
+ 0x55 (85) |
+ ||||||||||||||||
"KeyV" |
+ 0x56 (86) |
+ 0x56 (86) |
+ 0x56 (86) |
+ 0x56 (86) |
+ 0x56 (86) |
+ 0x56 (86) |
+ 0x56 (86) |
+ 0x56 (86) |
+ ||||||||||||||||
"KeyW" |
+ 0x57 (87) |
+ 0x57 (87) |
+ 0x57 (87) |
+ 0x57 (87) |
+ 0x57 (87) |
+ 0x57 (87) |
+ 0x57 (87) |
+ 0x57 (87) |
+ ||||||||||||||||
"KeyX" |
+ 0x58 (88) |
+ 0x58 (88) |
+ 0x58 (88) |
+ 0x58 (88) |
+ 0x58 (88) |
+ 0x58 (88) |
+ 0x58 (88) |
+ 0x58 (88) |
+ ||||||||||||||||
"KeyY" |
+ 0x59 (89) |
+ 0x59 (89) |
+ 0x59 (89) |
+ 0x59 (89) |
+ 0x59 (89) |
+ 0x59 (89) |
+ 0x59 (89) |
+ 0x59 (89) |
+ ||||||||||||||||
"KeyZ" |
+ 0x5A (90) |
+ 0x5A (90) |
+ 0x5A (90) |
+ 0x5A (90) |
+ 0x5A (90) |
+ 0x5A (90) |
+ 0x5A (90) |
+ 0x5A (90) |
+ ||||||||||||||||
| + {{domxref("KeyboardEvent.code")}} + | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +
| Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +|||||||||||||||||
| Internet Explorer 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +||||||||||||||||||||
| {{domxref("KeyboardEvent.code")}} | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| + | Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows (10.9) | +Mac (10.9) | +Linux (Ubuntu 14.04) | +||||||||||||||||
| + | 米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +
"Comma" |
+ 0xBC (188) |
+ 0xBC (188) |
+ 0xBC (188) |
+ 0xBC (188) |
+ 0xBC (188) |
+ 0xBC (188) |
+ 0xBC (188) |
+ 0xBC (188) |
+ ||||||||||||||||
Shift + "Comma" |
+ ||||||||||||||||||||||||
"Period" |
+ 0xBE (190) |
+ 0xBE (190) |
+ 0xBE (190) |
+ 0xBE (190) |
+ 0xBE (190) |
+ 0xBE (190) |
+ 0xBE (190) |
+ 0xBE (190) |
+ ||||||||||||||||
Shift + "Period" |
+ ||||||||||||||||||||||||
"Semicolon" |
+ 0xBA (186) |
+ 0xBB (187)⚠️ |
+ 0xBA (186) |
+ 0xBA (186) |
+ 0xBB (187)⚠️ |
+ 0xBA (186) |
+ 0xBA (186) |
+ 0xBA (186) [1] |
+ 0xE5 (229)⚠️ [2] |
+ 0xBA (186) |
+ 0xBA (186) |
+ 0xE5 (229)⚠️ [3] |
+ 0xBA (186) |
+ 0xBA (186) [1] |
+ 0xE5 (229)⚠️ [2] |
+ 0x3B (59) |
+ 0x3B (59) |
+ 0x00 (0)⚠️ |
+ 0x3B (59) |
+ 0x3B (59) [1] |
+ 0x00 (0)⚠️ |
+ 0x3B (59) |
+ 0x3B (59) |
+ 0x00 (0)⚠️ |
+
Shift + "Semicolon" |
+ 0xBB (187)⚠️ [1] |
+ 0xBB (187)⚠️ |
+ 0xBB (187)⚠️ [1] |
+ |||||||||||||||||||||
"Quote" |
+ 0xDE (222) |
+ 0xBA (186)⚠️ |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0xBA (186)⚠️ |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0xBA (186)⚠️ [1] |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0xBA (186)⚠️ |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0xBA (186)⚠️ [1] |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0x3A (58)⚠️ |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0x3A (58)⚠️ [1] |
+ 0xDE (222) |
+ 0xDE (222) |
+ 0x3A (58)⚠️ |
+ 0xDE (222) |
+
Shift + "Quote" |
+ 0xDE (222)⚠️ [1] |
+ 0x38 (56)⚠️ |
+ 0xDE (222)⚠️ [1] |
+ |||||||||||||||||||||
"BracketLeft" |
+ 0xDB (219) |
+ 0xC0(192)⚠️ |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0xC0(192)⚠️ |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0xDB (219) [1] |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0x32 (50)⚠️ |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0xDB (219) [1] |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0x40 (64)⚠️ |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0x40 (64)⚠️ [1] |
+ 0xDB (219) |
+ 0xDB (219) |
+ 0x40 (64)⚠️ |
+ 0xDB (219) |
+
Shift + "BracketLeft" |
+ 0xC0 (192)⚠️ [1] |
+ 0xC0 (192)⚠️ |
+ 0xC0 (192)⚠️ [1] |
+ |||||||||||||||||||||
"BracketRight" |
+ 0xDD (221) |
+ 0xDB (219)⚠️ |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ [1] |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ [1] |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ [1] |
+ 0xDD (221) |
+ 0xDD (221) |
+ 0xDB (219)⚠️ |
+ 0xDD (221) |
+
Shift + "BracketRight" |
+ ||||||||||||||||||||||||
"Backquote" |
+ 0xC0 (192) |
+ ❌ N/A |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ ❌ N/A |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ 0xF4 (244)⚠️ |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ ❌ N/A |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ 0xC0 (192) |
+ 0x00 (0) |
+ 0xC0 (192) |
+ ||||||
Shift + "Backquote" |
+ ||||||||||||||||||||||||
"Backslash" |
+ 0xDC (220) |
+ 0xDD (221)⚠️ |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDD (221)⚠️ |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDD (221)⚠️ |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDD (221)⚠️ |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xDD (221)⚠️ |
+ 0xDC (220) |
+ ||||||
Shift + "Backslash" |
+ ||||||||||||||||||||||||
"Minus" |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0xBD (189) [1] |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0xBD (189) [1] |
+ 0xBD (189) |
+ 0xAD (173) |
+ 0xAD (173) |
+ 0xAD (173)[1] |
+ 0xAD (173) |
+ 0xAD (173) |
+ ||||||||
Shift + "Minus" |
+ 0xBB (187)⚠️ [1] |
+ 0xBB (187)⚠️ |
+ 0xBD (189) |
+ 0xBB (187)⚠️ [1] |
+ 0xBD (189) |
+ |||||||||||||||||||
"Equal" |
+ 0xBB (187) |
+ 0xDE (222)⚠️ |
+ 0xBB (187) |
+ 0xBB (187) |
+ 0xDE (222)⚠️ |
+ 0xBB (187) |
+ 0xBB (187) |
+ 0xBB (187) [1] |
+ 0xBB (187) |
+ 0xBB (187) |
+ 0x36 (54)⚠️ |
+ 0xBB (187) |
+ 0xBB (187) |
+ 0xBB (187)[1] |
+ 0xBB (187) |
+ 0x3D (61) |
+ 0xA0 (160)⚠️ |
+ 0x3D (61) |
+ 0x3D (61) |
+ 0xA0 (160)⚠️ [1] |
+ 0x3D (61) |
+ 0x3D (61) |
+ 0xA0 (160)⚠️ |
+ 0x3D (61) |
+
Shift + "Equal" |
+ 0xC0 (192)⚠️ [1] |
+ 0xC0 (192)⚠️ |
+ 0xBB (187) |
+ 0xC0 (192)⚠️ [1] |
+ 0xBB (187) |
+ |||||||||||||||||||
"IntlRo" |
+ 0xC1 (193) |
+ 0xE2 (226)⚠️ |
+ 0xC1 (193) |
+ 0xC1 (193) |
+ 0xE2 (226)⚠️ |
+ 0xC1 (193) |
+ 0xBD (189) |
+ 0xBD (189) |
+ 0x00 (0)⚠️ |
+ [4] | +0xDC (220)⚠️ |
+ [4] | +0xBD (189) |
+ 0xBD (189) |
+ 0xE5 (229)⚠️ [5] |
+ 0x00 (0) |
+ 0xDC (220)⚠️ |
+ 0x00 (0) |
+ 0xA7 (167) |
+ 0xA7 (167) |
+ 0x00 (0) |
+ 0x00 (0) |
+ 0xDC (220)⚠️ |
+ 0x00 (0) |
+
Shift + "IntlRo" |
+ ||||||||||||||||||||||||
"IntlYen" |
+ 0xFF (255) |
+ 0xDC (220)⚠️ |
+ 0xFF (255) |
+ 0xFF (255) |
+ 0xDC (220)⚠️ |
+ 0xFF (255) |
+ 0x00 (0)⚠️ |
+ 0x00 (0)⚠️ |
+ 0x00 (0)⚠️ |
+ [4] | +0xDC (220)⚠️ |
+ [4] | +0x00 (0)⚠️ |
+ 0x00 (0)⚠️ |
+ 0xE5 (229)⚠️ [5] |
+ 0x00 (0)⚠️ |
+ 0xDC (220)⚠️ |
+ 0x00 (0)⚠️ |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0x00 (0)⚠️ |
+ 0x00 (0)⚠️ |
+ 0xDC (220)⚠️ |
+ 0x00 (0)⚠️ |
+
Shift + "IntlYen" |
+ 0xDC (220) |
+ 0xDC (220) |
+ 0xBD (189)⚠️ |
+ 0xDC (220) |
+ 0xDC (220) |
+ |||||||||||||||||||
| + {{domxref("KeyboardEvent.code")}} + | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +米国 | +日本語 | +ギリシャ語 | +
| Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +|||||||||||||||||
| Internet Explorer 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +||||||||||||||||||||
| + {{domxref("KeyboardEvent.code")}} + | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +|||
|---|---|---|---|---|---|---|---|---|
| Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +|
"AltLeft" |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+
"AltRight" |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+ 0x12 (18) |
+
+ "AltRight" （"AltGraph" キーであった場合）
+ |
+ [1] | +[1] | +❌N/A | +0xE1 (225)⚠️ |
+ ❌ N/A | +[1] | +❌ N/A | +0xE1 (225)⚠️ |
+
"CapsLock" |
+ 0x14 (20) [2] |
+ 0x14 (20) [2] |
+ 0x14 (20) |
+ 0x14 (20) |
+ 0x14 (20) |
+ 0x14 (20) [2] |
+ 0x14 (20) |
+ 0x14 (20) [3] |
+
"ControlLeft" |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+
"ControlRight" |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+ 0x11 (17) |
+
"OSLeft" |
+ 0x5B (91) |
+ 0x5B (91) |
+ 0x5B (91) |
+ 0x5B (91) |
+ 0x5B (91) |
+ 0x5B (91) |
+ 0xE0 (224)⚠️ |
+ 0x5B (91) |
+
"OSRight" |
+ 0x5C (92) |
+ 0x5C (92) |
+ 0x5D (93)⚠️ |
+ 0x5C (92) |
+ 0x5D (93)⚠️ |
+ 0x5B (91)⚠️ |
+ 0xE0 (224)⚠️ |
+ 0x5B (91)⚠️ |
+
"ShiftLeft" |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+
"ShiftRight" |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+ 0x10 (16) |
+
| + {{domxref("KeyboardEvent.code")}} + | +Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +
| IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +||||
| + {{domxref("KeyboardEvent.code")}} + | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +|||
|---|---|---|---|---|---|---|---|---|
| Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +|
"ContextMenu" |
+ 0x5D (93) |
+ 0x5D (93) |
+ 0x00 (0)⚠️ [1] |
+ 0x5D (93) |
+ 0x00 (0)⚠️ [1] |
+ 0x5D (93) |
+ 0x5D (93) |
+ 0x5D (93) |
+
"Enter" |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+
"Space" |
+ 0x20 (32) |
+ 0x20 (32) |
+ 0x20 (32) |
+ 0x20 (32) |
+ 0x20 (32) |
+ 0x20 (32) |
+ 0x20 (32) |
+ 0x20 (32) |
+
"Tab" |
+ 0x09 (9) |
+ 0x09 (9) |
+ 0x09 (9) |
+ 0x09 (9) |
+ 0x09 (9) |
+ 0x09 (9) |
+ 0x09 (9) |
+ 0x09 (9) |
+
"Delete" |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+
"End" |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+
"Help" |
+ ❌ N/A | +❌ N/A | +0x2D (45)⚠️ [2] |
+ 0x2F (47)⚠️ [3] |
+ 0x2D (45)⚠️ [2] |
+ ❌ N/A | +0x2D (45)⚠️ [2] |
+ 0x06 (6)⚠️ [3] |
+
"Home" |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+
"Insert" |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+
"PageDown" |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+
"PageUp" |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+
"ArrowDown" |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+
"ArrowLeft" |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+
"ArrowRight" |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+
"ArrowUp" |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+
"Escape" |
+ 0x1B (27) |
+ 0x1B (27) |
+ 0x1B (27) |
+ 0x1B (27) |
+ 0x1B (27) |
+ 0x1B (27) |
+ 0x1B (27) |
+ 0x1B (27) |
+
"PrintScreen" |
+ 0x2C (44) [4] |
+ 0x2C (44) [4] |
+ 0x7C (124)⚠️ [5] |
+ 0x2A (42)⚠️ |
+ 0x7C (124)⚠️ [5] |
+ 0x2C (44) [4] |
+ 0x2C (44) |
+ 0x2A (42)⚠️ |
+
"ScrollLock" |
+ 0x91 (145) |
+ 0x91 (145) |
+ 0x7D (125)⚠️ [5] |
+ 0x91 (145) |
+ 0x7D (125)⚠️ [5] |
+ 0x91 (145) |
+ 0x91 (145) |
+ 0x91 (145) |
+
"Pause" |
+ 0x13 (19) [6] |
+ 0x13 (19) [6] |
+ 0x7E (126)⚠️ [5] |
+ 0x13 (19) |
+ 0x7E (126)⚠️ [5] |
+ 0x13 (19) [6] |
+ 0x13 (19) |
+ 0x13 (19) |
+
| + {{domxref("KeyboardEvent.code")}} + | +Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +
| IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +||||
| + {{domxref("KeyboardEvent.code")}} + | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +|||
|---|---|---|---|---|---|---|---|---|
| Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +|
"F1" |
+ 0x70 (112) |
+ 0x70 (112) |
+ 0x70 (112) |
+ 0x70 (112) |
+ 0x70 (112) |
+ 0x70 (112) |
+ 0x70 (112) |
+ 0x70 (112) |
+
"F2" |
+ 0x71 (113) |
+ 0x71 (113) |
+ 0x71 (113) |
+ 0x71 (113) |
+ 0x71 (113) |
+ 0x71 (113) |
+ 0x71 (113) |
+ 0x71 (113) |
+
"F3" |
+ 0x72 (114) |
+ 0x72 (114) |
+ 0x72 (114) |
+ 0x72 (114) |
+ 0x72 (114) |
+ 0x72 (114) |
+ 0x72 (114) |
+ 0x72 (114) |
+
"F4" |
+ 0x73 (115) |
+ 0x73 (115) |
+ 0x73 (115) |
+ 0x73 (115) |
+ 0x73 (115) |
+ 0x73 (115) |
+ 0x73 (115) |
+ 0x73 (115) |
+
"F5" |
+ 0x74 (116) |
+ 0x74 (116) |
+ 0x74 (116) |
+ 0x74 (116) |
+ 0x74 (116) |
+ 0x74 (116) |
+ 0x74 (116) |
+ 0x74 (116) |
+
"F6" |
+ 0x75 (117) |
+ 0x75 (117) |
+ 0x75 (117) |
+ 0x75 (117) |
+ 0x75 (117) |
+ 0x75 (117) |
+ 0x75 (117) |
+ 0x75 (117) |
+
"F7" |
+ 0x76 (118) |
+ 0x76 (118) |
+ 0x76 (118) |
+ 0x76 (118) |
+ 0x76 (118) |
+ 0x76 (118) |
+ 0x76 (118) |
+ 0x76 (118) |
+
"F8" |
+ 0x77 (119) |
+ 0x77 (119) |
+ 0x77 (119) |
+ 0x77 (119) |
+ 0x77 (119) |
+ 0x77 (119) |
+ 0x77 (119) |
+ 0x77 (119) |
+
"F9" |
+ 0x78 (120) |
+ 0x78 (120) |
+ 0x78 (120) |
+ 0x78 (120) |
+ 0x78 (120) |
+ 0x78 (120) |
+ 0x78 (120) |
+ 0x78 (120) |
+
"F10" |
+ 0x79 (121) |
+ 0x79 (121) |
+ 0x79 (121) |
+ 0x79 (121) |
+ 0x79 (121) |
+ 0x79 (121) |
+ 0x79 (121) |
+ 0x79 (121) |
+
"F11" |
+ 0x7A (122) |
+ 0x7A (122) |
+ 0x7A (122) |
+ 0x7A (122) |
+ 0x7A (122) |
+ 0x7A (122) |
+ 0x7A (122) |
+ 0x7A (122) |
+
"F12" |
+ 0x7B (123) |
+ 0x7B (123) |
+ 0x7B (123) |
+ 0x7B (123) |
+ 0x7B (123) |
+ 0x7B (123) |
+ 0x7B (123) |
+ 0x7B (123) |
+
"F13" |
+ 0x7C (124) |
+ 0x7C (124) |
+ 0x7C (124) |
+ 0x7C (124) [1] |
+ 0x7C (124) |
+ 0x7C (124) |
+ 0x2C (44) ⚠️ [2] |
+ 0x00 (0)⚠️ [3] |
+
"F14" |
+ 0x7D (125) |
+ 0x7D (125) |
+ 0x7D (125) |
+ 0x7D (125) [1] |
+ 0x7D (125) |
+ 0x7D (125) |
+ 0x91 (145) ⚠️ [2] |
+ 0x00 (0)⚠️ [3] |
+
"F15" |
+ 0x7E (126) |
+ 0x7E (126) |
+ 0x7E (126) |
+ 0x7E (126) [1] |
+ 0x7E (126) |
+ 0x7E (126) |
+ 0x13 (19) ⚠️ [2] |
+ 0x00 (0)⚠️ [3] |
+
"F16" |
+ 0x7F (127) |
+ 0x7F (127) |
+ 0x7F (127) |
+ 0x7F (127) [1] |
+ 0x7F (127) |
+ 0x7F (127) |
+ 0x7F (127) |
+ 0x00 (0)⚠️ [3] |
+
"F17" |
+ 0x80 (128) |
+ 0x80 (128) |
+ 0x80 (128) |
+ 0x80 (128) [1] |
+ 0x80 (128) |
+ 0x80 (128) |
+ 0x80 (128) |
+ 0x00 (0)⚠️ [3] |
+
"F18" |
+ 0x81 (129) |
+ 0x81 (129) |
+ 0x81 (129) |
+ 0x81 (129) [1] |
+ 0x81 (129) |
+ 0x81 (129) |
+ 0x81 (129) |
+ 0x00 (0)⚠️ [3] |
+
"F19" |
+ 0x82 (130) |
+ 0x82 (130) |
+ 0x82 (130) |
+ ❌ N/A [4] |
+ 0x82 (130) |
+ 0x82 (130) |
+ 0x82 (130) |
+ 0x00 (0)⚠️ [3] |
+
"F20" |
+ 0x83 (131) |
+ 0x83 (131) |
+ 0x83 (131) |
+ ❌ N/A [4] |
+ 0xE5 (229)⚠️ [5] |
+ 0x83 (131) |
+ 0x00 (0)⚠️ |
+ ❌ N/A [6] |
+
"F21" |
+ 0x84 (132) |
+ 0x84 (132) |
+ 0x00 (0)⚠️ [7] |
+ ❌ N/A [4] |
+ 0x00 (0)⚠️ [7] |
+ 0x84 (132) |
+ ❌ N/A [8] |
+ ❌ N/A [6] |
+
"F22" |
+ 0x85 (133) |
+ 0x85 (133) |
+ 0x00 (0)⚠️ [7] |
+ ❌ N/A [4] |
+ 0x00 (0)⚠️ [7] |
+ 0x85 (133) |
+ ❌ N/A [8] |
+ ❌ N/A [6] |
+
"F23" |
+ 0x86 (134) |
+ 0x86 (134) |
+ 0x00 (0)⚠️ [7] |
+ ❌ N/A [4] |
+ 0x00 (0)⚠️ [7] |
+ 0x86 (134) |
+ ❌ N/A [8] |
+ ❌ N/A [6] |
+
"F24" |
+ 0x87 (135) |
+ 0x87 (135) |
+ 0x00 (0)⚠️ [7] |
+ ❌ N/A [4] |
+ 0x00 (0)⚠️ [7] |
+ 0x87 (135) |
+ ❌ N/A [8] |
+ 0x00 (0)⚠️ [3] |
+
| + {{domxref("KeyboardEvent.code")}} + | +Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +
| IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +||||
| + {{domxref("KeyboardEvent.code")}} + | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +|||
|---|---|---|---|---|---|---|---|---|
| Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +|
"NumLock" |
+ 0x90 (144) |
+ 0x90 (144) |
+ 0x0C (12)⚠️ [1] |
+ 0x90 (144) |
+ 0x0C (12)⚠️ [1] |
+ 0x90 (144) |
+ 0x0C (12)⚠️ [1] |
+ 0x90 (144) |
+
"Numpad0" |
+ 0x60 (96) |
+ 0x60 (96) |
+ 0x60 (96) |
+ 0x60 (96) |
+ 0x60 (96) |
+ 0x60 (96) |
+ 0x60 (96) |
+ 0x60 (96) |
+
"Numpad1" |
+ 0x61 (97) |
+ 0x61 (97) |
+ 0x61 (97) |
+ 0x61 (97) |
+ 0x61 (97) |
+ 0x61 (97) |
+ 0x61 (97) |
+ 0x61 (97) |
+
"Numpad2" |
+ 0x62 (98) |
+ 0x62 (98) |
+ 0x62 (98) |
+ 0x62 (98) |
+ 0x62 (98) |
+ 0x62 (98) |
+ 0x62 (98) |
+ 0x62 (98) |
+
"Numpad3" |
+ 0x63 (99) |
+ 0x63 (99) |
+ 0x63 (99) |
+ 0x63 (99) |
+ 0x63 (99) |
+ 0x63 (99) |
+ 0x63 (99) |
+ 0x63 (99) |
+
"Numpad4" |
+ 0x64 (100) |
+ 0x64 (100) |
+ 0x64 (100) |
+ 0x64 (100) |
+ 0x64 (100) |
+ 0x64 (100) |
+ 0x64 (100) |
+ 0x64 (100) |
+
"Numpad5" |
+ 0x65 (101) |
+ 0x65 (101) |
+ 0x65 (101) |
+ 0x65 (101) |
+ 0x65 (101) |
+ 0x65 (101) |
+ 0x65 (101) |
+ 0x65 (101) |
+
"Numpad6" |
+ 0x66 (102) |
+ 0x66 (102) |
+ 0x66 (102) |
+ 0x66 (102) |
+ 0x66 (102) |
+ 0x66 (102) |
+ 0x66 (102) |
+ 0x66 (102) |
+
"Numpad7" |
+ 0x67 (103) |
+ 0x67 (103) |
+ 0x67 (103) |
+ 0x67 (103) |
+ 0x67 (103) |
+ 0x67 (103) |
+ 0x67 (103) |
+ 0x67 (103) |
+
"Numpad8" |
+ 0x68 (104) |
+ 0x68 (104) |
+ 0x68 (104) |
+ 0x68 (104) |
+ 0x68 (104) |
+ 0x68 (104) |
+ 0x68 (104) |
+ 0x68 (104) |
+
"Numpad9" |
+ 0x69 (105) |
+ 0x69 (105) |
+ 0x69 (105) |
+ 0x69 (105) |
+ 0x69 (105) |
+ 0x69 (105) |
+ 0x69 (105) |
+ 0x69 (105) |
+
"NumpadAdd" |
+ 0x6B (107) |
+ 0x6B (107) |
+ 0x6B (107) |
+ 0x6B (107) |
+ 0x6B (107) |
+ 0x6B (107) |
+ 0x6B (107) |
+ 0x6B (107) |
+
"NumpadComma" （"," を入力） |
+ 0xC2 (194) |
+ 0xC2 (194) |
+ 0xBC (188)⚠️ |
+ ❌ 常に "." を入力 |
+ 0xBC (188)⚠️ |
+ 0xC2 (194) |
+ 0x6C (108)⚠️ |
+ ❌ 常に "." を入力 |
+
+ "NumpadComma" （"." または空文字列を入力）
+ |
+ 0xC2 (194) |
+ 0xC2 (194) |
+ 0xBE (190)⚠️ |
+ 0x6E (110)⚠️ |
+ 0xBE (190)⚠️ |
+ 0xC2 (194) |
+ 0x6C (108)⚠️ |
+ 0x6E (110)⚠️ |
+
+ "NumpadDecimal" （"." を入力）
+ |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+
+ "NumpadDecimal" （"," を入力）
+ |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6C (108)⚠️ |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6E (110) |
+ 0x6C (108)⚠️ |
+
"NumpadDivide" |
+ 0x6F (111) |
+ 0x6F (111) |
+ 0x6F (111) |
+ 0x6F (111) |
+ 0x6F (111) |
+ 0x6F (111) |
+ 0x6F (111) |
+ 0x6F (111) |
+
"NumpadEnter" |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+ 0x0D (13) |
+
"NumpadEqual" |
+ 0x0C (12) |
+ 0x0C (12) |
+ 0xBB (187)⚠️ |
+ 0xBB (187)⚠️ |
+ 0xBB (187)⚠️ |
+ 0x0C (12) |
+ 0x3D (61)⚠️ |
+ 0x3D (61)⚠️ |
+
"NumpadMultiply" |
+ 0x6A (106) |
+ 0x6A (106) |
+ 0x6A (106) |
+ 0x6A (106) |
+ 0x6A (106) |
+ 0x6A (106) |
+ 0x6A (106) |
+ 0x6A (106) |
+
"NumpadSubtract" |
+ 0x6D (109) |
+ 0x6D (109) |
+ 0x6D (109) |
+ 0x6D (109) |
+ 0x6D (109) |
+ 0x6D (109) |
+ 0x6D (109) |
+ 0x6D (109) |
+
| + {{domxref("KeyboardEvent.code")}} + | +Windows | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +Mac (10.9) | +Windows | +Mac (10.9) | +Linux (Ubuntu 14.04) | +
| IE 11 | +Google Chrome 34 | +Chromium 34 | +Safari 7 | +Gecko 29 | +||||
| + {{domxref("KeyboardEvent.code")}} + | +IE 11 | +Google Chrome 34 | +Chromium 34 | +Gecko 29 | +|
|---|---|---|---|---|---|
| Windows | +Windows | +Linux (Ubuntu 14.04) | +Windows | +Linux (Ubuntu 14.04) | +|
"Numpad0" ("Insert") |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+ 0x2D (45) |
+
"Numpad1" ("End") |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+ 0x23 (35) |
+
"Numpad2" ("ArrowDown") |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+ 0x28 (40) |
+
"Numpad3" ("PageDown") |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+ 0x22 (34) |
+
"Numpad4" ("ArrowLeft") |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+ 0x25 (37) |
+
"Numpad5" |
+ 0x0C (12) |
+ 0x0C (12) |
+ 0x0C (12) |
+ 0x0C (12) |
+ 0x0C (12) |
+
"Numpad6" ("ArrowRight") |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+ 0x27 (39) |
+
"Numpad7" ("Home") |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+ 0x24 (36) |
+
"Numpad8" ("ArrowUp") |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+ 0x26 (38) |
+
"Numpad9" ("PageUp") |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+ 0x21 (33) |
+
"NumpadDecimal" ("Delete") |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+ 0x2E (46) |
+
| + {{domxref("KeyboardEvent.code")}} + | +Windows | +Windows | +Linux (Ubuntu 14.04) | +Windows | +Linux (Ubuntu 14.04) | +
| IE 11 | +Google Chrome 34 | +Chromium 34 | +Gecko 29 | +||
| 定数 | +値 | +説明 | +
|---|---|---|
DOM_VK_CANCEL |
+ 0x03 (3) | +キャンセルキー。 | +
DOM_VK_HELP |
+ 0x06 (6) | +Help キー。 | +
DOM_VK_BACK_SPACE |
+ 0x08 (8) | +Backspace キー。 | +
DOM_VK_TAB |
+ 0x09 (9) | +Tab キー。 | +
DOM_VK_CLEAR |
+ 0x0C (12) | ++ NumLock を解除した状態における、テンキーの "5" キー。 Mac の場合は、 NumLock キーと同じ位置にあるクリアキーを押します。 + | +
DOM_VK_RETURN |
+ 0x0D (13) | +メインキーボードのリターン/エンターキー。 | +
DOM_VK_ENTER |
+ 0x0E (14) | ++ 予約済みですが、使用されていません。 {{deprecated_inline}} （削除。 + {{bug(969247)}} を参照） + | +
DOM_VK_SHIFT |
+ 0x10 (16) | +Shift キー。 | +
DOM_VK_CONTROL |
+ 0x11 (17) | +Control キー。 | +
DOM_VK_ALT |
+ 0x12 (18) | +Alt （Mac では Option）キー。 | +
DOM_VK_PAUSE |
+ 0x13 (19) | +Pause キー。 | +
DOM_VK_CAPS_LOCK |
+ 0x14 (20) | +Caps lock。 | +
DOM_VK_KANA |
+ 0x15 (21) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_HANGUL |
+ 0x15 (21) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_EISU |
+ 0x 16 (22) | +日本語の Mac キーボードの "英数" キー。 | +
DOM_VK_JUNJA |
+ 0x17 (23) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_FINAL |
+ 0x18 (24) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_HANJA |
+ 0x19 (25) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_KANJI |
+ 0x19 (25) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_ESCAPE |
+ 0x1B (27) | +Escape キー。 | +
DOM_VK_CONVERT |
+ 0x1C (28) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_NONCONVERT |
+ 0x1D (29) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_ACCEPT |
+ 0x1E (30) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_MODECHANGE |
+ 0x1F (31) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_SPACE |
+ 0x20 (32) | +スペースバー。 | +
DOM_VK_PAGE_UP |
+ 0x21 (33) | +Page Up キー。 | +
DOM_VK_PAGE_DOWN |
+ 0x22 (34) | +Page Down キー。 | +
DOM_VK_END |
+ 0x23 (35) | +End キー。 | +
DOM_VK_HOME |
+ 0x24 (36) | +Home キー。 | +
DOM_VK_LEFT |
+ 0x25 (37) | +左矢印。 | +
DOM_VK_UP |
+ 0x26 (38) | +上矢印。 | +
DOM_VK_RIGHT |
+ 0x27 (39) | +右矢印。 | +
DOM_VK_DOWN |
+ 0x28 (40) | +下矢印。 | +
DOM_VK_SELECT |
+ 0x29 (41) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_PRINT |
+ 0x2A (42) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_EXECUTE |
+ 0x2B (43) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_PRINTSCREEN |
+ 0x2C (44) | +Print Screen キー。 | +
DOM_VK_INSERT |
+ 0x2D (45) | +Ins(ert) キー。 | +
DOM_VK_DELETE |
+ 0x2E (46) | +Del(ete) キー。 | +
DOM_VK_0 |
+ 0x30 (48) | +"0" キー（メインキー）。 | +
DOM_VK_1 |
+ 0x31 (49) | +"1" キー（メインキー）。 | +
DOM_VK_2 |
+ 0x32 (50) | +"2" キー（メインキー）。 | +
DOM_VK_3 |
+ 0x33 (51) | +"3" キー（メインキー）。 | +
DOM_VK_4 |
+ 0x34 (52) | +"4" キー（メインキー）。 | +
DOM_VK_5 |
+ 0x35 (53) | +"5" キー（メインキー）。 | +
DOM_VK_6 |
+ 0x36 (54) | +"6" キー（メインキー）。 | +
DOM_VK_7 |
+ 0x37 (55) | +"7" キー（メインキー）。 | +
DOM_VK_8 |
+ 0x38 (56) | +"8" キー（メインキー）。 | +
DOM_VK_9 |
+ 0x39 (57) | +"9" キー（メインキー）。 | +
DOM_VK_COLON |
+ 0x3A (58) | +コロン (":") キー。 | +
DOM_VK_SEMICOLON |
+ 0x3B (59) | +セミコロン (";") キー。 | +
DOM_VK_LESS_THAN |
+ 0x3C (60) | +小なり ("<") キー。 | +
DOM_VK_EQUALS |
+ 0x3D (61) | +等号 ("=") キー。 | +
DOM_VK_GREATER_THAN |
+ 0x3E (62) | +大なり (">") キー。 | +
DOM_VK_QUESTION_MARK |
+ 0x3F (63) | +疑問符 ("?") キー。 | +
DOM_VK_AT |
+ 0x40 (64) | +アットマーク ("@") キー。 | +
DOM_VK_A |
+ 0x41 (65) | +"A" キー。 | +
DOM_VK_B |
+ 0x42 (66) | +"B" キー。 | +
DOM_VK_C |
+ 0x43 (67) | +"C" キー。 | +
DOM_VK_D |
+ 0x44 (68) | +"D" キー。 | +
DOM_VK_E |
+ 0x45 (69) | +"E" キー。 | +
DOM_VK_F |
+ 0x46 (70) | +"F" キー。 | +
DOM_VK_G |
+ 0x47 (71) | +"G" キー。 | +
DOM_VK_H |
+ 0x48 (72) | +"H" キー。 | +
DOM_VK_I |
+ 0x49 (73) | +"I" キー。 | +
DOM_VK_J |
+ 0x4A (74) | +"J" キー。 | +
DOM_VK_K |
+ 0x4B (75) | +"K" キー。 | +
DOM_VK_L |
+ 0x4C (76) | +"L" キー。 | +
DOM_VK_M |
+ 0x4D (77) | +"M" キー。 | +
DOM_VK_N |
+ 0x4E (78) | +"N" キー。 | +
DOM_VK_O |
+ 0x4F (79) | +"O" キー。 | +
DOM_VK_P |
+ 0x50 (80) | +"P" キー。 | +
DOM_VK_Q |
+ 0x51 (81) | +"Q" キー。 | +
DOM_VK_R |
+ 0x52 (82) | +"R" キー。 | +
DOM_VK_S |
+ 0x53 (83) | +"S" キー。 | +
DOM_VK_T |
+ 0x54 (84) | +"T" キー。 | +
DOM_VK_U |
+ 0x55 (85) | +"U" キー。 | +
DOM_VK_V |
+ 0x56 (86) | +"V" キー。 | +
DOM_VK_W |
+ 0x57 (87) | +"W" キー。 | +
DOM_VK_X |
+ 0x58 (88) | +"X" キー。 | +
DOM_VK_Y |
+ 0x59 (89) | +"Y" キー。 | +
DOM_VK_Z |
+ 0x5A (90) | +"Z" キー。 | +
DOM_VK_WIN |
+ 0x5B (91) | +Windows では Windows ロゴキー。 Linux ではスーパー／ハイパーキー。 | +
DOM_VK_CONTEXT_MENU |
+ 0x5D (93) | +コンテキストメニューを開くキー。 | +
DOM_VK_SLEEP |
+ 0x5F (95) | +このキーコードの Linux 対応は Gecko 4.0 で追加されました。 | +
DOM_VK_NUMPAD0 |
+ 0x60 (96) | +"0" キー（テンキー）。 | +
DOM_VK_NUMPAD1 |
+ 0x61 (97) | +"1" キー（テンキー）。 | +
DOM_VK_NUMPAD2 |
+ 0x62 (98) | +"2" キー（テンキー）。 | +
DOM_VK_NUMPAD3 |
+ 0x63 (99) | +"3" キー（テンキー）。 | +
DOM_VK_NUMPAD4 |
+ 0x64 (100) | +"4" キー（テンキー）。 | +
DOM_VK_NUMPAD5 |
+ 0x65 (101) | +"5" キー（テンキー）。 | +
DOM_VK_NUMPAD6 |
+ 0x66 (102) | +"6" キー（テンキー）。 | +
DOM_VK_NUMPAD7 |
+ 0x67 (103) | +"7" キー（テンキー）。 | +
DOM_VK_NUMPAD8 |
+ 0x68 (104) | +"8" キー（テンキー）。 | +
DOM_VK_NUMPAD9 |
+ 0x69 (105) | +"9" キー（テンキー）。 | +
DOM_VK_MULTIPLY |
+ 0x6A (106) | +"*" キー（テンキー）。 | +
DOM_VK_ADD |
+ 0x6B (107) | +"+" キー（テンキー）。 | +
DOM_VK_SEPARATOR |
+ 0x6C (108) | ++ |
DOM_VK_SUBTRACT |
+ 0x6D (109) | +"-" キー（テンキー）。 | +
DOM_VK_DECIMAL |
+ 0x6E (110) | +テンキーの浮動小数点キー。 | +
DOM_VK_DIVIDE |
+ 0x6F (111) | +"/" キー（テンキー）。 | +
DOM_VK_F1 |
+ 0x70 (112) | +F1 キー。 | +
DOM_VK_F2 |
+ 0x71 (113) | +F2 キー。 | +
DOM_VK_F3 |
+ 0x72 (114) | +F3 キー。 | +
DOM_VK_F4 |
+ 0x73 (115) | +F4 キー。 | +
DOM_VK_F5 |
+ 0x74 (116) | +F5 キー。 | +
DOM_VK_F6 |
+ 0x75 (117) | +F6 キー。 | +
DOM_VK_F7 |
+ 0x76 (118) | +F7 キー。 | +
DOM_VK_F8 |
+ 0x77 (119) | +F8 キー。 | +
DOM_VK_F9 |
+ 0x78 (120) | +F9 キー。 | +
DOM_VK_F10 |
+ 0x79 (121) | +F10 キー。 | +
DOM_VK_F11 |
+ 0x7A (122) | +F11 キー。 | +
DOM_VK_F12 |
+ 0x7B (123) | +F12 キー。 | +
DOM_VK_F13 |
+ 0x7C (124) | +F13 キー。 | +
DOM_VK_F14 |
+ 0x7D (125) | +F14 キー。 | +
DOM_VK_F15 |
+ 0x7E (126) | +F15 キー。 | +
DOM_VK_F16 |
+ 0x7F (127) | +F16 キー。 | +
DOM_VK_F17 |
+ 0x80 (128) | +F17 キー。 | +
DOM_VK_F18 |
+ 0x81 (129) | +F18 キー。 | +
DOM_VK_F19 |
+ 0x82 (130) | +F19 キー。 | +
DOM_VK_F20 |
+ 0x83 (131) | +F20 キー。 | +
DOM_VK_F21 |
+ 0x84 (132) | +F21 キー。 | +
DOM_VK_F22 |
+ 0x85 (133) | +F22 キー。 | +
DOM_VK_F23 |
+ 0x86 (134) | +F23 キー。 | +
DOM_VK_F24 |
+ 0x87 (135) | +F24 キー。 | +
DOM_VK_NUM_LOCK |
+ 0x90 (144) | +Num Lock キー。 | +
DOM_VK_SCROLL_LOCK |
+ 0x91 (145) | +Scroll Lock キー。 | +
DOM_VK_WIN_OEM_FJ_JISHO |
+ 0x92 (146) | ++ Windows の OEM 固有キー。 + これは富士通の OASYS で「辞書」キーに使われていました。 + | +
DOM_VK_WIN_OEM_FJ_MASSHOU |
+ 0x93 (147) | ++ Windows の OEM 固有キー。 + これは富士通の OASYS で「単語登録解除」キーに使われていました。 + | +
DOM_VK_WIN_OEM_FJ_TOUROKU |
+ 0x94 (148) | ++ Windows の OEM 固有キー。 + これは富士通の OASYS で「単語登録」キーに使われていました。 + | +
DOM_VK_WIN_OEM_FJ_LOYA |
+ 0x95 (149) | ++ Windows の OEM 固有キー。 + これは富士通の OASYS で「左親指シフト」キーに使われていました。 + | +
DOM_VK_WIN_OEM_FJ_ROYA |
+ 0x96 (150) | ++ An + Windows の OEM 固有キー。 + これは富士通の OASYS で「右親指シフト」キーに使われていました。 + | +
DOM_VK_CIRCUMFLEX |
+ 0xA0 (160) | +サーカムフレックス ("^") キー。 | +
DOM_VK_EXCLAMATION |
+ 0xA1 (161) | +感嘆符 ("!") キー。 | +
DOM_VK_DOUBLE_QUOTE |
+ 0xA3 (162) | +二重引用符 (""") キー。 | +
DOM_VK_HASH |
+ 0xA3 (163) | +ハッシュ ("#") キー。 | +
DOM_VK_DOLLAR |
+ 0xA4 (164) | +ドル記号 ("$") キー。 | +
DOM_VK_PERCENT |
+ 0xA5 (165) | +パーセント ("%") キー。 | +
DOM_VK_AMPERSAND |
+ 0xA6 (166) | +アンパーサンド ("&") キー。 | +
DOM_VK_UNDERSCORE |
+ 0xA7 (167) | +アンダースコア ("_") キー。 | +
DOM_VK_OPEN_PAREN |
+ 0xA8 (168) | +開き括弧 ("(") キー。 | +
DOM_VK_CLOSE_PAREN |
+ 0xA9 (169) | +閉じ括弧 (")") キー。 | +
DOM_VK_ASTERISK |
+ 0xAA (170) | +アスタリスク ("*") キー。 | +
DOM_VK_PLUS |
+ 0xAB (171) | +正記号 ("+") キー。 | +
DOM_VK_PIPE |
+ 0xAC (172) | +パイプ ("|") キー。 | +
DOM_VK_HYPHEN_MINUS |
+ 0xAD (173) | +ハイフン/マイナス ("-") キー。 | +
DOM_VK_OPEN_CURLY_BRACKET |
+ 0xAE (174) | +開き波括弧 ("{") キー。 | +
DOM_VK_CLOSE_CURLY_BRACKET |
+ 0xAF (175) | +閉じ波括弧 ("}") キー。 | +
DOM_VK_TILDE |
+ 0xB0 (176) | +チルダ ("~") キー。 | +
DOM_VK_VOLUME_MUTE |
+ 0xB5 (181) | +消音キー。 | +
DOM_VK_VOLUME_DOWN |
+ 0xB6 (182) | +音量下げキー | +
DOM_VK_VOLUME_UP |
+ 0xB7 (183) | +音量上げキー | +
DOM_VK_COMMA |
+ 0xBC (188) | +カンマ (",") キー。 | +
DOM_VK_PERIOD |
+ 0xBE (190) | +ピリオド (".") キー。 | +
DOM_VK_SLASH |
+ 0xBF (191) | +スラッシュ ("/") キー。 | +
DOM_VK_BACK_QUOTE |
+ 0xC0 (192) | +逆引用符 ("`") キー。 | +
DOM_VK_OPEN_BRACKET |
+ 0xDB (219) | +開き角括弧 ("[") キー。 | +
DOM_VK_BACK_SLASH |
+ 0xDC (220) | +バックスラッシュ ("\") キー。 | +
DOM_VK_CLOSE_BRACKET |
+ 0xDD (221) | +閉じ角括弧 ("]") キー。 | +
DOM_VK_QUOTE |
+ 0xDE (222) | +単一引用符 (''') キー。 | +
DOM_VK_META |
+ 0xE0 (224) | +Linux の Meta キー、 Mac の Command キー。 | +
DOM_VK_ALTGR |
+ 0xE1 (225) | +Linux の AltGr キー (Level 3 Shift キーまたは Level 5 Shift キー)。 | +
DOM_VK_WIN_ICO_HELP |
+ 0xE3 (227) | ++ Windows の OEM 固有キー。 + これは Olivetti ICO キーボードで使われています（いました？） + | +
DOM_VK_WIN_ICO_00 |
+ 0xE4 (228) | ++ Windows の OEM 固有キー。 + これは Olivetti ICO キーボードで使われています（いました？） + | +
DOM_VK_WIN_ICO_CLEAR |
+ 0xE6 (230) | ++ Windows の OEM 固有キー。 + これは Olivetti ICO キーボードで使われています（いました？） + | +
DOM_VK_WIN_OEM_RESET |
+ 0xE9 (233) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_JUMP |
+ 0xEA (234) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_PA1 |
+ 0xEB (235) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_PA2 |
+ 0xEC (236) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_PA3 |
+ 0xED (237) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_WSCTRL |
+ 0xEE (238) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_CUSEL |
+ 0xEF (239) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_ATTN |
+ 0xF0 (240) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_FINISH |
+ 0xF1 (241) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_COPY |
+ 0xF2 (242) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_AUTO |
+ 0xF3 (243) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_ENLW |
+ 0xF4 (244) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_WIN_OEM_BACKTAB |
+ 0xF5 (245) | ++ Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 + | +
DOM_VK_ATTN |
+ 0xF6 (246) | +IBM ミッドレンジコンピューター（AS/400 など）の Attn (Attention) キー。 | +
DOM_VK_CRSEL |
+ 0xF7 (247) | +IBM 3270 キーボードレイアウトの CrSel （カーソル選択）キー。 | +
DOM_VK_EXSEL |
+ 0xF8 (248) | +IBM 3270 キーボードレイアウトの ExSel （拡張選択）キー。 | +
DOM_VK_EREOF |
+ 0xF9 (249) | +IBM 3270 キーボードレイアウトの Erase EOF キー。 | +
DOM_VK_PLAY |
+ 0xFA (250) | +IBM 3270 キーボードレイアウトの Play キー。 | +
DOM_VK_ZOOM |
+ 0xFB (251) | +Zoom キー。 | +
DOM_VK_PA1 |
+ 0xFD (253) | +IBM 3270 キーボードレイアウトの PA1 キー。 | +
DOM_VK_WIN_OEM_CLEAR |
+ 0xFE (254) | +
+ クリアキーです。ただし、 DOM_VK_CLEAR との違いは分かりません。
+ |
+
| 定数 | +値 | +説明 | +
|---|---|---|
DOM_KEY_LOCATION_STANDARD |
+ 0 | ++ このキーは 1 つしかない、または左右の区別がつかないもので、テンキーやキーパッドの一部とみなされるキーで押されたものではありません。 + | +
DOM_KEY_LOCATION_LEFT |
+ 1 | ++ このキーは、左側のキーです。例えば、標準的な 101 キーの US キーボードでは、左側の Control キーが押されたことになります。この値は、キーボード上に 2 つ以上の位置にある可能性があるキーにのみ使用されます。 + | +
DOM_KEY_LOCATION_RIGHT |
+ 2 | ++ このキーは、右側のキーです。例えば、標準的な 101 キーの US キーボードでは、右側の Control キーが押されたことになります。この値は、キーボード上に 2 つ以上の位置にある可能性があるキーにのみ使用されます。 + | +
DOM_KEY_LOCATION_NUMPAD |
+ 3 | +
+ + キーがテンキーにあるか、テンキーに対応する仮想キーコードを持っています。 + +
+
+
+ メモ: NumLock がロックされているとき、Gecko はテンキーのキーに対して常に
+
+
+ メモ: NumLock キーのキーイベントは、 Gecko と Internet Explorer の両方で |
+
+ DOM_KEY_LOCATION_MOBILE
+ {{Non-standard_inline()}}{{deprecated_inline}}
+ |
+ 4 | +
+ + キーはモバイル機器にあります。これは物理的なキーパッドでも仮想キーボードでもかまいません。 + +
+
+
+ Note: Gecko では |
+
+ DOM_KEY_LOCATION_JOYSTICK {{Non-standard_inline()}}
+ {{deprecated_inline}}
+ |
+ 5 | +
+ + このキーは、ゲーム機のコントローラーのボタンやモバイル機器のジョイスティックです。 + +
+
+
+ メモ: Gecko は Android 以外では |
+
SHIFT キーを押しながら、または押さずに、任意の文字キーを押してください。
+SHIFT キーと ALT キーを併用することもできます。
{{APIRef("Media Capture and Streams")}}
- -MediaStreamTrack.enabled プロパティは {{domxref("Boolean")}}型の値を返します。このトラックが有効な場合はtrueを返し、メディアソースストリームによって処理されることが許可されます。このトラックが無効な場合は falseを返し、 メディアソースストリームによって処理されることはありません。トラックが切り離されている場合は、この値の変更は何の影響もありません。
var bool = track.enabled; -track.enabled = [true | false];- -
| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#dom-mediastreamtrack-enabled', 'enabled') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.enabled")}}
- -{{ APIRef("Media Capture and Streams") }}
- -MediaStreamTrack.onended イベントハンドラはendedイベントが発生した時に実行するEventHandlerの関数です。このイベントは、MediaStreamTrackオブジェクトのソースが、これ以上データを提供することがないか、ユーザーの操作によって許可が無効になったか、ソースデバイスが取り出されたか、リモートのピアがデータの送信を停止した時に発生します。
MediaStreamTrack.onended = function; -- -
{{event("ended")}}イベントが発生した時の実行する処理の関数を{{event("Event_handlers", "event handler")}}として設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な{{domxref("Event")}}のオブジェクトです。
- -この例では、endedイベントのイベントハンドラを設定しています。このイベントハンドラでは、トラックがアクティブでない状態を示すために画面上のアイコンを変更します。
- -track.onended = function(event) {
- let statusElem = document.getElementById("status-icon");
-
- statusElem.src = "/images/stopped-icon.png";
-}
-
-
-| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-onended', 'MediaStreamTrack.onended') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.onended")}}
- -{{APIRef("Media Capture and Streams")}}
- -MediaStreamTrack.id は読み取り専用のプロパティであり、このトラックのための固有識別子(GUID)を含む{{domxref("DOMString")}}を返します。この値はブラウザによって生成されるものです。
var id = track.id;- -
| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-id', 'MediaStreamTrack.id') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.id")}}
- -MediaStreamTrack インターフェイスは、ストリームに含まれる一つのメディアトラックを表現します。一般的に、オーディオやビデオのトラックですが、他の種類のトラックも存在することができます。
以下に示すプロパティに加えて、 MediaStreamTrack は制約可能なプロパティを持っています。これらのプロパティは、 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} によって設定でき、 {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} と {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} によって取得できます。制約可能なプロパティを用いて適切に動作させるためにはどのようにすればいいかを知りたい場合は、 Capabilities, constraints, and settings を見てください。適切に動作させなかった場合の結果として、あなたが作成したコードは信頼できないものになります。
true の値になり、メディアソースストリームを描画することができます。トラックが無効の場合は false の値になり、メディアソースストリームに描画されません。トラックの接続が解除された場合、この値は変更することはできますが影響を与えることはありません。
- enabled を false にします。 muted プロパティは技術的な問題でメディアがない状態を表します。true if the track is isolated; that is, the track cannot be accessed by the document that owns the MediaStreamTrack. This happens when the {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} property is set, or if the track comes from a cross-origin source."audio"が設定され、ビデオトラックの場合は"video"が設定されます。ソースからの関連付けが解除された場合、この値が変更されることはありません。"internal microphone"のようなトラックソースを識別するユーザエージェントによって割り当てられたラベルを含む{{domxref("DOMString")}}を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。enabled to false, and unmute the media by setting it back to true again.trueを返し、それ以外の場合はfalseを返します。"live"は入力デバイスが接続されており、ベストエフォートでリアルタイムなデータを提供することを表します。この状態では、MediaStreamTrack.enabled属性を用いることで、データの出力のオンとオフを切り替えることができます。"ended"は入力デバイスがこれ以上データを提供することがなく、新しいデータも一切提供されないことを示します。trueであり、それ以外はfalseです。MediaStreamTrackの有効な制約可能な値についての許容できる値の範囲を指定します。MediaStreamTrackの複製を返します。MediaStreamTrackで有効な制約可能なプロパティの一覧を返します。MediaStreamTrackの制約可能なプロパティの値を含む{{domxref("MediaTrackSettings")}}オブジェクトを返します。endedに設定されます。これらのイベントを待ち受けするには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかします。
ended).MediaStreamTrack when the value of the {{domxref("MediaStreamTrack.muted", "muted")}} property is changed to true, indicating that the track is unable to provide data temporarily (such as when the network is experiencing a service malfunction).muted state.| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}} | -{{Spec2("WebRTC Identity")}} | -独立トラック対応のための追加プロパティ | -
| {{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}} | -{{Spec2('Media Capture')}} | -初回定義 | -
{{Compat("api.MediaStreamTrack")}}
- -{{APIRef("Media Capture and Streams")}}
- -MediaStreamTrack.kindは読み取り専用のプロパティであり、トラックの種類を示す{{domxref("DOMString")}}を返します。トラックがオーディオトラックの場合は"audio"を返し、ビデオトラックの場合は"video"を返します。トラックがソースから切り離されている場合は、何も変更されません。
var type = track.kind;- -
以下に示す{{domxref("DOMString")}}型の値を取ります。
- -"audio": このトラックはオーディオトラックであることを表します。"video": このトラックはビデオトラックであることを表します。| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-kind', 'MediaStreamTrack.kind') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.kind")}}
- -{{APIRef("Media Capture and Streams")}}
- -MediaStreamTrack.label は読み取り専用のプロパティであり、 "internal microphone"のようなトラックソースを識別するユーザエージェントによって割り当てられたラベルを含むDOMStringを返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。
var name = track.label;- -
| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-label', 'MediaStreamTrack.label') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.label")}}
- -mute イベントは、トラックのソースが一時的にメディアデータを提供することができなくなったときに {{domxref("MediaStreamTrack")}} へ送られます。トラックがメディア出力可能になると、 {{domxref("MediaStreamTrack/unmute_event", "unmute")}} が送られます。
mute イベントと unmute イベントとの間、トラックの {{domxref("MediaStreamTrack.muted", "muted")}} プロパティの値は true になります。
メモ: 多くの人が「ミュート」と考える状態 (すなわち、トラックを無音にすることをユーザーが制御できる方法) は実際には {{domxref("MediaStreamTrack.enabled")}} プロパティを使用して管理され、こちらではイベントが発生しません。
-| バブリング | -なし | -
|---|---|
| キャンセル | -不可 | -
| インターフェイス | -{{domxref("Event")}} | -
| イベントハンドラープロパティ | -{{domxref("MediaStreamTrack.onmute", "onmute")}} | -
この例では、イベントハンドラーを mute および {{domxref("MediaStreamTrack/unmute_event", "unmute")}} の各イベントに設定し、 {{domxref("MediaStreamTrack")}} が入った変数 musicTrack のソースからメディアが流れていない場合を検出しています。
musicTrack.addEventListener("mute", event => {
- document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
-}, false);
-
-musicTrack.addEventListener("unmute", event => {
- document.getElementById("timeline-widget").style.backgroundColor = "#fff";
-}, false);
-
-
-これらのイベントハンドラーのある場面で、トラック musicTrack が {{domxref("MediaStreamTrack.muted", "muted")}} の状態になったとき、 timeline-widget の ID を持った要素の背景色が #aaa に変化します。トラックのミュート状態を抜けたことを — unmute イベントが到着したことによって — 検出すると、背景色は白に戻ります。
{{domxref("MediaStreamTrack.onmute", "onmute")}} イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 {{domxref("MediaStreamTrack.onunmute", "onunmute")}} イベントハンドラープロパティが unmute イベントを設定するために利用できます。以下の例ではこれを示しています。
musicTrack.onmute = event => {
- document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
-}
-
-musicTrack.mute = event = > {
- document.getElementById("timeline-widget").style.backgroundColor = "#fff";
-}
-
-
-| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{SpecName('Media Capture', '#event-mediastreamtrack-unmute', 'unmute')}} | -{{Spec2('Media Capture')}} | -初回定義 | -
{{Compat("api.MediaStreamTrack.mute_event")}}
- -{{APIRef("Media Capture and Streams")}}
- -MediaStreamTrack.mutedは読み取り専用のプロパティであり、トラックがミュートであるかどうかを示すBooleanの値を返します。
var bool = track.muted;- -
{{jsxref('Boolean')}}型の値。
- -// TBD- -
| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{SpecName('Media Capture', '#dom-mediastreamtrack-muted', 'muted')}} | -{{Spec2('Media Capture')}} | -初版 | -
{{Compat("api.MediaStreamTrack.muted")}}
diff --git a/files/ja/web/api/mediastreamtrack/muted/index.md b/files/ja/web/api/mediastreamtrack/muted/index.md new file mode 100644 index 00000000000000..6c1d79c9ab8f3f --- /dev/null +++ b/files/ja/web/api/mediastreamtrack/muted/index.md @@ -0,0 +1,49 @@ +--- +title: MediaStreamTrack.muted +slug: Web/API/MediaStreamTrack/muted +page-type: web-api-instance-property +tags: + - API + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference + - muted +browser-compat: api.MediaStreamTrack.muted +translation_of: Web/API/MediaStreamTrack/muted +--- +{{APIRef("Media Capture and Streams")}} + +**`muted`** は {{domxref("MediaStreamTrack")}} 読み取り専用のプロパティであり、トラックが現在メディア出力を提供できない状態であるかどうかを示します。 + +> **Note:** ユーザーがトラックをミュート/ミュート解除する方法を実装するには、{{domxref("MediaStreamTrack.enabled", "enabled")}} プロパティを使用してください。 `enabled` を `false` に設定してトラックを無効にすると、空のフレーム（すべてのサンプルが 0 である音声フレーム、またはすべてのピクセルが黒である映像フレーム）だけが生成されます。 + +## 値 + +論理値で、トラックが現在ミュートされている場合は `true` となり、ミュートされていない場合は `false` となります。 + +> **Note:** 可能であれば、`muted` をポーリングしてトラックのミュート状態を監視することは避けてください。 +> 代わりに、 {{domxref("MediaStreamTrack.mute_event", "mute")}} と {{domxref("MediaStreamTrack.unmute_event", "unmute")}} イベントに対するイベントリスナーを追加してください。 + +## 例 + +この例では、 {{domxref("MediaStreamTrack")}} オブジェクトの配列の中で、現在ミュートされているトラックの数を数えます。 + +```js +let mutedCount = 0; + +trackList.forEach((track) => { + if (track.muted) { + mutedCount += 1; + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html b/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html deleted file mode 100644 index e141ad3ac900e8..00000000000000 --- a/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: MediaStreamTrack.onoverconstrained -slug: Web/API/MediaStreamTrack/overconstrained_event -translation_of: Web/API/MediaStreamTrack/onoverconstrained -original_slug: Web/API/MediaStreamTrack/onoverconstrained ---- -{{ APIRef("Media Capture and Streams") }}
- -MediaStreamTrack.onoverconstrainedイベントハンドラは、{{event("overconstrained")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、影響を受けた各トラック(複数のトラックが同一のソースを共有している時)で発生します。このイベントは、ユーザエージェントが与えられたソースに対して現在の制約を評価し、与えられた制約でソースを設定することができない時に発生します。 過制約のため、ユーザエージェントは影響をうけた各トラックをミュートにします。影響を受けたトラックは、現在のソースの有効な能力に配慮してアプリケーションが制約を調整するまでmutedの状態を維持します。
- -
track.onoverconstrained = function; -- -
functionはユーザーが定義した関数の名前で末尾の()やパラメータを省略したもの、または、function(event) {...}の形式で表現された匿名関です。イベントハンドラは常に 、{{domxref("MediaStreamErrorEvent")}}型のイベントを含む1つのパラメータを持ちます。dc.onoverconstrained = function(ev) { alert("overconstrained event detected!"); };
-
-
-| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-onoverconstrained', 'MediaStreamTrack.onoverconstrained') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.onoverconstrained")}}
- -{{APIRef("Media Capture and Streams")}}
- -MediaStreamTrack.readyStateは読み取り専用のプロパティであり、トラックの状態を表す値を返します。
var state = track.readyState;- -
以下の値のどれかを取ります。
- -"live"は、入力が接続され、リアルタイムなデータがベストエフォートで提供されている状態を示します。この状態では、データの出力は、MediaStreamTrack.enabled プロパティを用いて、オン/オフを切り替えることができます。"ended"は入力がこれ以上データを提供しない状態を示します。| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-readystate', 'MediaStreamTrack.readyState') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.readyState")}}
- -{{APIRef("Media Capture and Streams")}}
- -{{domxref("MediaStreamTrack")}}のstop()はトラックを停止します。
MediaStreamTrack.stop(); -- -
stop() の呼び出しは、 {{glossary("user agent")}}へ、トラックのソース(ファイル、ネットワークストリーム、ローカルカメラやマイク)がこれ以上MediaStreamTrackで必要とされないことを伝えます。複数のトラックが同じソースを使用すること(例えば、2つのタブがデバイスのマイクを使っている場合など)もあるため、ソースが必ずしも直ぐに停止させられる必要はありません。その代わり、トラックからの関連付けが解除され、そのトラックオブジェクトが停止されます。ソースからメディアトラックが使用されなくなると、ソースは実際に完全に停止させられるでしょう。
stop()を呼び出した直後に、{{domxref("MediaStreamTrack.readyState", "track")}}の状態はendedになります。
In this example, we see a function which stops a streamed video by calling stop() on every track on a given {{HTMLElement("video")}}.
この例では、与えられた{{HTMLElement("video")}}の各トラックのstop()を呼び出すことで、ストリーミングされているビデオを停止する関数を定義しています。
function stopStreamedVideo(videoElem) {
- let stream = videoElem.srcObject;
- let tracks = stream.getTracks();
-
- tracks.forEach(function(track) {
- track.stop();
- });
-
- videoElem.srcObject = null;
-}
-
-{{domxref("HTMLMediaElement.srcObject", "srcObject")}}プロパティからビデオ要素のストリームを取得することで機能しています。次に、{{domxref("MediaStream.getTracks", "getTracks()")}}メソッドを呼び出すことで、ストリームのトラックリストを取得しています。ここから、{{jsxref("Array.forEach", "forEach()")}}を使ってトラックリストから各トラックを繰り返し呼び出し、それぞれのトラックでstop()メソッドを呼び出しています。
最後に、{{domxref("MediaStream")}}オブジェクトへの参照を解くためにsrcObjectにnullを設定することで、このオブジェクトは解放できるようになります。
| 仕様 | -状況 | -コメント | -
|---|---|---|
| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-stop', 'MediaStreamTrack.stop()') }} | -{{ Spec2('Media Capture') }} | -初版 | -
{{Compat("api.MediaStreamTrack.stop")}}
- -unmute イベントは、トラックのソースが休止時間の後、再びメディアデータを提供するようになると一度発生します。これは {{domxref("MediaStreamTrack/mute_event", "mute")}} で始まった {{domxref("MediaStreamTrack.muted", "muted")}} の状態を終了します。
| バブリング | -なし | -
|---|---|
| キャンセル | -不可 | -
| インターフェイス | -{{domxref("Event")}} | -
| イベントハンドラープロパティ | -{{domxref("MediaStreamTrack.onunmute", "onunmute")}} | -
メモ: 多くの人が「ミュート」と考える状態 (すなわち、トラックを無音にすることをユーザーが制御できる方法) は実際には {{domxref("MediaStreamTrack.enabled")}} プロパティを使用して管理され、こちらではイベントが発生しません。
-この例では、イベントハンドラーを {{domxref("MediaStreamTrack/mute_event", "mute")}} および unmute の各イベントに設定し、 {{domxref("MediaStreamTrack")}} が入った変数 musicTrack のソースからメディアが流れていない場合を検出しています。
musicTrack.addEventListener("mute", event => {
- document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
-}, false);
-
-musicTrack.addEventListener("unmute", event => {
- document.getElementById("timeline-widget").style.backgroundColor = "#fff";
-}, false);
-
-
-これらのイベントハンドラーのある場面で、トラック musicTrack が {{domxref("MediaStreamTrack.muted", "muted")}} の状態になったとき、 timeline-widget の ID を持った要素の背景色が #aaa に変化します。トラックのミュート状態を抜けたことを — unmuted イベントが到着したことによって — 検出すると、背景色は白に戻ります。
{{domxref("MediaStreamTrack.onunmute", "onunmute")}} イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 {{domxref("MediaStreamTrack.onmute", "onmute")}} イベントハンドラープロパティが mute イベントを設定するために利用できます。以下の例ではこれを示しています。
musicTrack.onmute = event => {
- document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
-}
-
-musicTrack.mute = event = > {
- document.getElementById("timeline-widget").style.backgroundColor = "#fff";
-}
-
-
-| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{SpecName('Media Capture', '#event-mediastreamtrack-unmute', 'unmute')}} | -{{Spec2('Media Capture')}} | -初回定義 | -
{{Compat("api.MediaStreamTrack.unmute_event")}}
- -カスタムプロパティ (CSS 変数やカスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、--main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(--main-color);) を使ってアクセスします。
カスタムプロパティ (CSS 変数やカスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、--main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(--main-color);) を使ってアクセスします。
複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはなりません。カスタムプロパティを使えば、一ヶ所に値を保存しておき、複数の場所から参照することができます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 --main-text-color は #00ff00 より、とりわけ同じ色がさまざまな文脈で使われる場合は理解しやすいでしょう。
{{EmbedLiveSample("sample1",600,180)}}
CSS 中に同じ宣言が繰り返し出てくることに注意してください。いろいろな場所で背景色が brown に設定されています。 CSS の宣言によっては、カスケードの上流でこれを宣言し、 CSS の継承によってこの問題を自然に解決することもできます。些末なプロジェクトを除いて、常にこの手法が使えるわけではありません。 {{cssxref(":root")}} 擬似クラスでカスタムプロパティを宣言し、文書内の必要な場所で使用することで、繰り返して書く必要性を減らすことができるのです。
PATH に /wabt/out ディレクトリを追加します。-o パラメータ、出力ファイルパスを指定します:
wat2wasm simple.wat -o simple.wasmdiff --git a/files/ko/learn/javascript/asynchronous/index.md b/files/ko/learn/javascript/asynchronous/index.md index 6306930248a211..cb98bcfd9733b4 100644 --- a/files/ko/learn/javascript/asynchronous/index.md +++ b/files/ko/learn/javascript/asynchronous/index.md @@ -19,39 +19,39 @@ translation_of: Learn/JavaScript/Asynchronous --- {{LearnSidebar}} -In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server. +이 과정에서 우리는 {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}와 이것이 중요한 이유, 서버에서 리소스를 가져오는 것과 같은 잠재적 블로킹 연산을 어떻게 효과적으로 다룰 수 있을지에 대해 살펴봅니다. > **Callout:** > -> #### Looking to become a front-end web developer? +> #### 프론트엔드 웹 개발자가 되고싶으신가요? > -> We have put together a course that includes all the essential information you need to -> work towards your goal. +> 목표를 향해 나아가기 위해 필요한 모든 필수 정보를 포함한 교육과정을 준비했습니다. > -> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) +> [**시작하기**](/ko/docs/Learn/Front-end_web_developer) -## Prerequisites +## 필요한 사전 지식 -Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through [JavaScript first steps](/en-US/docs/Learn/JavaScript/First_steps) and [JavaScript building blocks](/en-US/docs/Learn/JavaScript/Building_blocks) modules before attempting this. +Asynchronous Javascript는 상당히 고급 주제에 속하고, 시도해보기 전에 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)과 [JavaScript 구성요소](/ko/docs/Learn/JavaScript/Building_blocks) 과정을 거치는것이 좋습니다. -> **Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com). +> **참고:** 만약 파일을 만들 수 없는 컴퓨터/테블릿/기타 장치를 사용하고 있다면, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)와 같은 온라인 코딩 프로그램에서 (대부분의) 예제 코드를 사용해볼 수 있습니다. -## Guides -- [Introducing asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous/Introducing) - - : In this article we'll see what **synchronous** and **asynchronous** programming are, why we often need to use asynchronous techniques, how asynchronous functions have historically been implemented in JavaScript, and what their problems are. -- [How to use promises](/en-US/docs/Learn/JavaScript/Asynchronous/Promises) - - : Here we'll introduce promises and show how to use promise-based APIs. We'll also introduce the `async` and `await` keywords. -- [Implementing a promise-based API](/en-US/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API) - - : This article outlines how to implement your own promise-based API. -- [Introducing workers](/en-US/docs/Learn/JavaScript/Asynchronous/Introducing_workers) - - : Workers enable you to run certain tasks in a separate thread, to keep your main code responsive. In this article we'll rewrite a long-running synchronous function to use a worker. +## 가이드 -## Assessments +- [Introducing asynchronous JavaScript](/ko/docs/Learn/JavaScript/Asynchronous/Introducing) + - : **동기**와 **비동기** 프로그램이 무엇인지, 비동기 기술을 자주 사용해야하는 이유, 역사적으로 Javascript에서 비동기 함수가 구현된 방식 및 문제를 살펴봅니다. +- [How to use promises](/ko/docs/Learn/JavaScript/Asynchronous/Promises) + - : 프로미스와 프로미스 기반 API를 어떻게 사용하는지 알아봅니다. 또한 `async`와 `await` 키워드를 소개합니다. +- [Implementing a promise-based API](/ko/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API) + - : 자신만의 프로미스 기반 API를 구현하는 방법을 간략하게 설명합니다. +- [Introducing workers](/ko/docs/Learn/JavaScript/Asynchronous/Introducing_workers) + - : workers를 사용하면 별도의 스레드에서 특정 작업을 실행하여 메인 코드의 응답성을 유지할 수 있습니다. 이 글에서는 workers를 사용하도록 장기 실행 동기 함수를 다시 작성합니다. -- [Sequencing animations](/en-US/docs/Learn/JavaScript/Asynchronous/Sequencing_animations) - - : The assessment asks you to use promises to play a set of animations in a particular sequence. +## 평가 -## See also +- [Sequencing animations](/ko/docs/Learn/JavaScript/Asynchronous/Sequencing_animations) + - : 프로미스를 사용하여 특정 시퀀스에서 애니메이션 세트를 재생하는 평가입니다. -- [Asynchronous Programming](https://eloquentjavascript.net/11_async.html) from the fantastic [Eloquent JavaScript](https://eloquentjavascript.net/) online book by Marijn Haverbeke. +## 같이 보기 + +- Marijn Haverbeke의 환상적인 [Eloquent JavaScript](https://eloquentjavascript.net/) 온라인 책 [Asynchronous Programming](https://eloquentjavascript.net/11_async.html). diff --git a/files/ko/web/accessibility/index.md b/files/ko/web/accessibility/index.md index 5d1f0d4c970740..c158029300f120 100644 --- a/files/ko/web/accessibility/index.md +++ b/files/ko/web/accessibility/index.md @@ -51,4 +51,3 @@ MDN은(는) [접근성 학습 영역](/ko/docs/Learn/Accessibility) 접근성에 - [WAI Interest Group](https://www.w3.org/WAI/IG/) - [개발자 가이드](/ko/docs/Web/Guide) -- [접근성 그리고 Mozilla](/ko/docs/Mozilla/Accessibility) diff --git a/files/ko/web/http/basics_of_http/mime_types/index.html b/files/ko/web/http/basics_of_http/mime_types/index.html index 9b2ee96c875ab4..cda1b2ba536433 100644 --- a/files/ko/web/http/basics_of_http/mime_types/index.html +++ b/files/ko/web/http/basics_of_http/mime_types/index.html @@ -294,7 +294,7 @@
MIME 타입이 없을 때, 혹은 클라이언트가 타입이 잘못 설정됐다고 판단한 어떤 다른 경우에, 브라우저들은 MIME 스니핑을 시도할 수도 있는데, 이는 리소스를 훑어보고 정확한 MIME 타입을 추축해내는 것입니다. 각각의 브라우저들은 이런 과정을 다른 방식으로, 다른 환경 속에서 처리해냅니다. 이런 과정에 관한 몇 가지 보안 관련 사항들이 있는데, 몇몇 MIME 타입들은 실행 가능한 컨텐츠를 나타내고 다른 타입들은 그렇지 않기 때문입니다. 서버들은 {{HTTPHeader("Content-Type")}} 중에 {{HTTPHeader("X-Content-Type-Options")}}를 전송하여 이런 MIME 스니핑을 차단할 수 있습니다.
+MIME 타입이 없을 때, 혹은 클라이언트가 타입이 잘못 설정됐다고 판단한 어떤 다른 경우에, 브라우저들은 MIME 스니핑을 시도할 수도 있는데, 이는 리소스를 훑어보고 정확한 MIME 타입을 추측 해내는 것입니다. 각각의 브라우저들은 이런 과정을 다른 방식으로, 다른 환경 속에서 처리해냅니다. 이런 과정에 관한 몇 가지 보안 관련 사항들이 있는데, 몇몇 MIME 타입들은 실행 가능한 컨텐츠를 나타내고 다른 타입들은 그렇지 않기 때문입니다. 서버들은 {{HTTPHeader("Content-Type")}} 중에{{HTTPHeader("X-Content-Type-Options")}}를 전송하여 이런 MIME 스니핑을 차단할 수 있습니다.
Você pode adicionar múltiplos media queries dentro de uma folha de de estilo, ajustando inteiramente seu layout ou partes dele que melhor se adequem a vários tamanhos de tela. Os pontos em quem uma Media Query é introduzida e o layout alterado são conhecidos como breakpoints.
+Você pode adicionar múltiplos media queries dentro de uma folha de estilo, ajustando inteiramente seu layout ou partes dele que melhor se adequem a vários tamanhos de tela. Os pontos em quem uma Media Query é introduzida e o layout alterado são conhecidos como breakpoints.
Uma abordagem comum ao utilizar Media Queries é criar um layout de única coluna para dispositivos de telas pequenas (e.g smartphones), então fazer a checagem para telas maiores e implementar um layout de múltiplas colunas quando houver largura suficiente. Esse design é frequentemente descrito como mobile first.
diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html index 5bd53a33185975..7cb70b0518d1d2 100644 --- a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html @@ -335,10 +335,10 @@// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +
// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +
Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.
CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).
+CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).
Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. <em> и <i> являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?
По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <em> представляет ударение на его содержании, в то время как элемент <i> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <cite>.)
По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <em> представляет ударение на его содержании, в то время как элемент <i> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <cite>.)
Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 9768f75d6a2102..26db662a01e7aa 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1198,9 +1198,6 @@ /zh-CN/docs/Server-sent_events/EventSource/onerror /zh-CN/docs/Web/API/EventSource/error_event /zh-CN/docs/Server-sent_events/EventSource/onopen /zh-CN/docs/Web/API/EventSource/open_event /zh-CN/docs/Server-sent_events/Using_server-sent_events /zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events -/zh-CN/docs/Site_Compatibility_for_Firefox_19 /zh-CN/docs/Mozilla/Firefox/Releases/19/Site_compatibility -/zh-CN/docs/Site_Compatibility_for_Firefox_21 /zh-CN/docs/Mozilla/Firefox/Releases/21/Site_compatibility -/zh-CN/docs/Site_Compatibility_for_Firefox_24 /zh-CN/docs/Mozilla/Firefox/Releases/24/Site_compatibility /zh-CN/docs/Tips_for_Authoring_Fast-loading_HTML_Pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /zh-CN/docs/Tools https://firefox-source-docs.mozilla.org/devtools-user/index.html /zh-CN/docs/Tools-840092-dup/Remote_Debugging https://firefox-source-docs.mozilla.org/devtools-user/remote_debugging/index.html @@ -1480,10 +1477,13 @@ /zh-CN/docs/Web/API/GlobalEventHandlers/onended /zh-CN/docs/conflicting/Web/API/HTMLMediaElement/ended_event /zh-CN/docs/Web/API/GlobalEventHandlers/onfocus /zh-CN/docs/conflicting/Web/API/Window/focus_event /zh-CN/docs/Web/API/GlobalEventHandlers/onformdata /zh-CN/docs/Web/API/HTMLFormElement/formdata_event +/zh-CN/docs/Web/API/GlobalEventHandlers/ongotpointercapture /zh-CN/docs/Web/API/Element/gotpointercapture_event /zh-CN/docs/Web/API/GlobalEventHandlers/oninput /zh-CN/docs/conflicting/Web/API/HTMLElement/input_event +/zh-CN/docs/Web/API/GlobalEventHandlers/oninvalid /zh-CN/docs/conflicting/Web/API/HTMLInputElement/invalid_event /zh-CN/docs/Web/API/GlobalEventHandlers/onkeydown /zh-CN/docs/conflicting/Web/API/Element/keydown_event /zh-CN/docs/Web/API/GlobalEventHandlers/onkeypress /zh-CN/docs/conflicting/Web/API/Element/keypress_event /zh-CN/docs/Web/API/GlobalEventHandlers/onkeyup /zh-CN/docs/conflicting/Web/API/Element/keyup_event +/zh-CN/docs/Web/API/GlobalEventHandlers/onlostpointercapture /zh-CN/docs/Web/API/Element/lostpointercapture_event /zh-CN/docs/Web/API/GlobalEventHandlers/onmousedown /zh-CN/docs/conflicting/Web/API/Element/mousedown_event /zh-CN/docs/Web/API/GlobalEventHandlers/onmouseenter /zh-CN/docs/conflicting/Web/API/Element/mouseenter_event /zh-CN/docs/Web/API/GlobalEventHandlers/onmouseleave /zh-CN/docs/conflicting/Web/API/Element/mouseleave_event @@ -2244,8 +2244,8 @@ /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid/sandbox /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid/upgrade-insecure-requests /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests /zh-CN/docs/Web/HTTP/Headers/Cookie2 /zh-CN/docs/Web/HTTP/Headers/Cookie -/zh-CN/docs/Web/HTTP/Headers/Public-Key-Pins /zh-CN/docs/conflicting/Web/HTTP/Headers/Expect-CT -/zh-CN/docs/Web/HTTP/Headers/Public-Key-Pins-Report-Only /zh-CN/docs/conflicting/Web/HTTP/Headers/Expect-CT_63e560324d2c47190db4456d746ba07b +/zh-CN/docs/Web/HTTP/Headers/Public-Key-Pins /zh-CN/docs/Web/HTTP/Headers/Expect-CT +/zh-CN/docs/Web/HTTP/Headers/Public-Key-Pins-Report-Only /zh-CN/docs/Web/HTTP/Headers/Expect-CT /zh-CN/docs/Web/HTTP/Headers/Set-Cookie2 /zh-CN/docs/Web/HTTP/Headers/Set-Cookie /zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file /zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file /zh-CN/docs/Web/HTTP/Public_Key_Pinning /zh-CN/docs/Web/Security/Certificate_Transparency diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 2a30de6ed9415a..2df4774223f791 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -1937,6 +1937,15 @@ "micblo" ] }, + "Glossary/Safe/HTTP": { + "modified": "2020-02-12T10:37:33.808Z", + "contributors": [ + "RainSlide", + "shersty", + "joy-yu", + "maicss" + ] + }, "Glossary/Same-origin_policy": { "modified": "2020-06-01T19:24:49.887Z", "contributors": [ @@ -2383,15 +2392,6 @@ "mySoul" ] }, - "Glossary/safe": { - "modified": "2020-02-12T10:37:33.808Z", - "contributors": [ - "RainSlide", - "shersty", - "joy-yu", - "maicss" - ] - }, "Glossary/speculative_parsing": { "modified": "2019-03-23T22:46:26.910Z", "contributors": [ @@ -6353,13 +6353,6 @@ "ziyunfei" ] }, - "Mozilla/Firefox/Releases/19/Site_compatibility": { - "modified": "2019-01-16T17:00:07.852Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, "Mozilla/Firefox/Releases/20": { "modified": "2019-01-16T16:54:50.861Z", "contributors": [ @@ -6376,13 +6369,6 @@ "ethertank" ] }, - "Mozilla/Firefox/Releases/21/Site_compatibility": { - "modified": "2019-01-16T17:20:04.063Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, "Mozilla/Firefox/Releases/22": { "modified": "2019-01-16T17:05:04.663Z", "contributors": [ @@ -6399,13 +6385,6 @@ "ziyunfei" ] }, - "Mozilla/Firefox/Releases/24/Site_compatibility": { - "modified": "2019-01-16T17:27:30.001Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, "Mozilla/Firefox/Releases/25": { "modified": "2019-01-16T17:41:39.671Z", "contributors": [ @@ -6413,13 +6392,6 @@ "ziyunfei" ] }, - "Mozilla/Firefox/Releases/25/Site_Compatibility": { - "modified": "2019-01-16T17:41:38.257Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, "Mozilla/Firefox/Releases/26": { "modified": "2019-01-16T17:45:32.245Z", "contributors": [ @@ -6427,13 +6399,6 @@ "ziyunfei" ] }, - "Mozilla/Firefox/Releases/26/Site_Compatibility": { - "modified": "2019-01-16T17:48:36.057Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, "Mozilla/Firefox/Releases/27": { "modified": "2019-01-16T17:56:24.955Z", "contributors": [ @@ -6449,13 +6414,6 @@ "Zefling" ] }, - "Mozilla/Firefox/Releases/28/Site_Compatibility": { - "modified": "2019-01-16T18:02:00.053Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, "Mozilla/Firefox/Releases/3": { "modified": "2019-03-23T23:59:15.526Z", "contributors": [ @@ -11547,6 +11505,12 @@ "Topppy" ] }, + "Web/API/Element/gotpointercapture_event": { + "modified": "2019-03-23T22:20:50.816Z", + "contributors": [ + "876843240" + ] + }, "Web/API/Element/hasAttribute": { "modified": "2019-03-23T23:09:36.135Z", "contributors": [ @@ -11658,6 +11622,13 @@ "joeliu926" ] }, + "Web/API/Element/lostpointercapture_event": { + "modified": "2019-03-18T21:41:59.901Z", + "contributors": [ + "SphinxKnight", + "jvua" + ] + }, "Web/API/Element/matches": { "modified": "2020-10-15T21:06:49.284Z", "contributors": [ @@ -13302,18 +13273,6 @@ "KingMario" ] }, - "Web/API/GlobalEventHandlers/ongotpointercapture": { - "modified": "2019-03-23T22:20:50.816Z", - "contributors": [ - "876843240" - ] - }, - "Web/API/GlobalEventHandlers/oninvalid": { - "modified": "2020-10-15T22:15:01.666Z", - "contributors": [ - "chenqingyue" - ] - }, "Web/API/GlobalEventHandlers/onload": { "modified": "2019-03-23T23:15:22.431Z", "contributors": [ @@ -13349,13 +13308,6 @@ "EdwinChanFullStack" ] }, - "Web/API/GlobalEventHandlers/onlostpointercapture": { - "modified": "2019-03-18T21:41:59.901Z", - "contributors": [ - "SphinxKnight", - "jvua" - ] - }, "Web/API/GlobalEventHandlers/onpause": { "modified": "2020-10-15T22:17:32.669Z", "contributors": [ @@ -45911,6 +45863,12 @@ "ziyunfei" ] }, + "conflicting/Web/API/HTMLInputElement/invalid_event": { + "modified": "2020-10-15T22:15:01.666Z", + "contributors": [ + "chenqingyue" + ] + }, "conflicting/Web/API/HTMLInputElement/select_event": { "modified": "2019-03-24T00:16:24.778Z", "contributors": [ @@ -46663,20 +46621,6 @@ "ziyunfei" ] }, - "conflicting/Web/HTTP/Headers/Expect-CT": { - "modified": "2020-10-15T21:55:02.367Z", - "contributors": [ - "shevacjs", - "WayneCui" - ] - }, - "conflicting/Web/HTTP/Headers/Expect-CT_63e560324d2c47190db4456d746ba07b": { - "modified": "2020-10-15T22:04:11.647Z", - "contributors": [ - "ujsxn", - "shevacjs" - ] - }, "conflicting/Web/HTTP/Status": { "modified": "2019-01-16T13:20:30.376Z", "contributors": [ diff --git a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html b/files/zh-cn/conflicting/web/api/htmlinputelement/invalid_event/index.html similarity index 82% rename from files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html rename to files/zh-cn/conflicting/web/api/htmlinputelement/invalid_event/index.html index c7b61a02ba6c50..99d199de0e82d8 100644 --- a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html +++ b/files/zh-cn/conflicting/web/api/htmlinputelement/invalid_event/index.html @@ -1,6 +1,6 @@ --- title: GlobalEventHandlers.oninvalid -slug: Web/API/GlobalEventHandlers/oninvalid +slug: conflicting/Web/API/HTMLInputElement/invalid_event tags: - API - GlobalEventHandlers @@ -8,12 +8,13 @@ - 属性 - 引用 translation_of: Web/API/GlobalEventHandlers/oninvalid +original_slug: Web/API/GlobalEventHandlers/oninvalid ---{{domxref("GlobalEventHandlers")}} 混合的oninvalid属性 是 {{event("Event_handlers", "event handler")}} 处理{{event("invalid")}} 事件。
{{domxref("GlobalEventHandlers")}} 混合的oninvalid属性 是 {{event("Event_handlers", "event handler")}} 处理{{event("invalid")}} 事件。
invalid 事件被触发当一个从属元素被勾选 checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中，或者在 checkValidity() 方法之后它自己的表单被调用。
invalid 事件被触发当一个从属元素被勾选 checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中，或者在 checkValidity() 方法之后它自己的表单被调用。
Public-Key-Pins 是一个响应首部，其包含该 Web 服务器用来进行加密的 public {{glossary('key')}}（公钥）信息 ，以此来降低使用伪造证书进行 {{Glossary("MITM")}} （中间人攻击）的风险。如果锚定的加密串与服务器返回的公钥不匹配，那么浏览器将会认定响应不合法，并且不会将结果展示给用户。
更多相关信息请参考 HTTP Public Key Pinning 这篇文章。
- -| Header type | -{{Glossary("Response header")}} | -
|---|---|
| {{Glossary("Forbidden header name")}} | -no | -
Public-Key-Pins: pin-sha256="<pin-value>"; - max-age=<expire-time>; - includeSubDomains; - report-uri="<uri>"- -
pin-sha256="<pin-value>"includeSubDomains {{optional_inline}}report-uri="<uri>" {{optional_inline}}如果设置不合理，HPKP 可能会使得用户长时间不能访问网站。因此建议也同时固定备用证书或者 CA 证书。
-Public-Key-Pins: - pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; - pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; - max-age=5184000; includeSubDomains; - report-uri="https://www.example.org/hpkp-report"- -
在这个例子里面，pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" 固定了该服务器的公钥。第二个声明pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" 也固定了服务器的备用公钥. max-age=5184000 则是让客户端 (浏览器) 将该固定扩展信息存储两个月，这个是 IETF RFC 建议时间。同时通过includeSubDomains 的声明使得该设置对所有子域名都生效；最后， report-uri="https://www.example.org/hpkp-report" 则是定义了验证失败时异常信息发送的服务器地址。
- -| Specification | -Title | -
|---|---|
| {{RFC("7469", "Public-Key-Pins", "2.1")}} | -Public Key Pinning Extension for HTTP | -
{{Compat("http.headers.Public-Key-Pins")}}
- -Public-Key-Pins-Report-Only用于设置在公钥固定不匹配时，发送错误信息到report-uri。 但和{{HTTPHeader("Public-Key-Pins")}}不同的是，即便公钥固定异常，其允许浏览器继续访问服务器。- -
更多信息可以查看{{HTTPHeader("Public-Key-Pins")}}参考页面和HTTP Public Key Pinning文章
- -- -
| Header type | -{{Glossary("Response header")}} | -
|---|---|
| {{Glossary("Forbidden header name")}} | -no | -
Public-Key-Pins-Report-Only: pin-sha256="<pin-value>"; - max-age=<expire-time>; - includeSubDomains; - report-uri="<uri>"- -
pin-sha256="<pin-value>"includeSubDomains {{optional_inline}}report-uri="<uri>"设置 Pin 验证失败报告的 URL 地址。这个指令应该和该头部一起使用，否则这个头部将是一个空操作。
- -Public-Key-Pins-Report-Only: - pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; - pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; - includeSubDomains; - report-uri="https://www.example.org/hpkp-report"- -
在这个例子里面，pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" 固定了该服务器的公钥.。第二个声明pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" 也固定了服务器的备用公钥。同时通过includeSubDomains 的声明使得该设置对所有子域名都生效。最后， report-uri="https://www.example.org/hpkp-report" 则是定义了在验证失败时将异常信息发送到该服务器。
- -| Specification | -Title | -
|---|---|
| {{RFC("7469", "Public-Key-Pins-Report-Only", "2.1")}} | -Public Key Pinning Extension for HTTP | -
{{Compat("http.headers.Public-Key-Pins-Report-Only")}}
- -给{{htmlelement("p")}}添加样式：
+给 {{htmlelement("p")}} 添加样式：
rem使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。rem 使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。现在让我们看一看 {{cssxref("mix-blend-mode")}}。 这里我们将给出两个相同的<div>s，但是每个都位于一个有着紫色背景的简单的<div>上，来向你展示元素们将会怎样混合在一起：
现在让我们看一看 {{cssxref("mix-blend-mode")}}。 这里我们将给出两个相同的<div>，但是每个都位于一个有着紫色背景的简单的<div>上，来向你展示元素们将会怎样混合在一起：
<article> No mix blend mode @@ -312,31 +312,31 @@mix-blend-mode
你可以看到，多层混合（mix-blend）不仅混合了两种背景图像，还混合了在
<div>下面的颜色。-注意：如果您不理解上面的一些布局属性，请不要担心，像 {{cssxref("position")}}， {{cssxref("top")}}， {{cssxref("bottom")}}， {{cssxref("z-index")}}等。我们将在CSS Layout模块中详细地介绍这些内容。
+备注： 如果你不理解上面的一些布局属性，请不要担心，像 {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} 等。我们将在 CSS Layout 模块中详细地介绍这些内容。
-webkit-background-clip: text
-另一个我们认为在继续之前会提到的新特性 (目前支持 Chrome、Safari 和 Opera，和在 Firefox 正在实现) 是{{cssxref("background-clip")}}的
+text值。当与专有-webkit-text-fill-color: transparent;特性一起使用时，这允许您将背景图像剪贴到元素文本的形状，从而产生一些不错的效果。这不是一个正式的标准，但是已经在多个浏览器中实现了，因为它很流行，并且被开发人员广泛使用。在这种情况下，这两种属性都需要一个-webkit-供应商前缀，甚至对于非 webkit/Chrome-based 的浏览器来说也是如此。另一个我们认为在继续之前会提到的新特性 (目前支持 Chrome、Safari 和 Opera，和 Firefox 正在实现) 是{{cssxref("background-clip")}}的
text值。当与专有-webkit-text-fill-color: transparent;特性一起使用时，这允许您将背景图像剪贴到元素文本的形状，从而产生一些不错的效果。这不是一个正式的标准，但是已经在多个浏览器中实现了，因为它很流行，并且被开发人员广泛使用。在这种情况下，这两种属性都需要一个-webkit-供应商前缀，甚至对于非 webkit/Chrome-based 的浏览器来说也是如此。.text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }-那么为什么其他浏览器会实现一个
+-webkit-前缀？主要是为了浏览器兼容性——许多 web 开发人员已经开始使用-webkit-前缀来实现 web 站点，它开始看起来像其他的浏览器一样被破坏了，而实际上他们遵循的是标准。因此，他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的 CSS 特性的危险——这不仅会导致浏览器兼容性问题，而且还会发生变化，因此你的代码随时可能崩溃。坚持标准要好得多。那么为什么其他浏览器会实现一个
-webkit-前缀？主要是为了浏览器兼容性——许多 web 开发人员已经开始使用-webkit-前缀来实现 web 站点，它开始看起来像其他的浏览器一样被破坏了，而实际上他们遵循的是标准。因此，他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的 CSS 特性的危险——这不仅会导致浏览器兼容性问题，而且还会发生变化，因此你的代码随时可能崩溃。坚持标准要好得多。如果您确实希望在您的生产工作中使用这些特性，请确保在浏览器中进行彻底的测试，并检查这些特性不工作的地方，站点仍然可用。
-注意：对于一个完整的
+-webkit-background-clip: text代码示例，见background-clip-text.html（也可以见源码）。注意：对于一个完整的
-webkit-background-clip: text代码示例，见background-clip-text.html（也可以见源码）。自主学习：尝试一些效果
现在轮到你了。对于这种自主学习，我们希望您使用下面所提供的代码来试验上面所读到的一些效果。
-如果你犯了一个错误，你可以用Reset按钮来重置这个例子。
+如果你犯了一个错误，你可以用 Reset 按钮来重置这个例子。
Playable code
@@ -361,7 +361,7 @@Playable code
<h2>Output</h2> <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> <div class="controls"> - <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> </div> </div> diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html index f569572c46de37..638c08b23a3066 100644 --- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -11,7 +11,7 @@预备知识： -基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识 (如果不了解 HTML，请移步 学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果不了解 CSS，请移步 学习 CSS 第一步.) +基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识 (如果不了解 HTML，请移步 学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果不了解 CSS，请移步 学习 CSS 第一步.) 目标： @@ -22,7 +22,7 @@CSS 的背景样式
-CSS {{cssxref("background")}}属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值。
+CSS {{cssxref("background")}} 属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值。
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, @@ -34,7 +34,7 @@CSS 的背景样式
背景颜色
-{{cssxref("background-color")}}属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的
+<color>值。背景色扩展到元素的内容和内边距的下面。{{cssxref("background-color")}} 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的
<color>值。背景色扩展到元素的内容和内边距的下面。在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading 和{{htmlelement("span")}}元素。
@@ -44,7 +44,7 @@背景颜色
背景图片
-{{cssxref("background-image")}}属性允许在元素的背景中显示图像。在下面的例子中，我们有两个方框——一个是比方框大的背景图像，另一个是星星的小图像。
+{{cssxref("background-image")}} 属性允许在元素的背景中显示图像。在下面的例子中，我们有两个方框——一个是比方框大的背景图像，另一个是星星的小图像。
这个例子演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。
@@ -54,7 +54,7 @@背景图片
控制背景平铺
-{{cssxref("background-repeat")}}属性用于控制图像的平铺行为。可用的值是：
+{{cssxref("background-repeat")}} 属性用于控制图像的平铺行为。可用的值是：
- @@ -92,7 +92,7 @@
no-repeat— 不重复。调整背景图像的大小
背景图像定位
-{{cssxref("background-position")}}属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。
+{{cssxref("background-position")}} 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。
-注意：默认的背景位置值是 (0,0)。
@@ -100,7 +100,7 @@背景图像定位
最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。
-你可以使用像
+top和right这样的关键字 (在{{cssxref("background-image")}}页面上查找其他的关键字):你可以使用像
top和right这样的关键字 (在 {{cssxref("background-image")}} 页面上查找其他的关键字):- +.box { background-image: url(star.png); @@ -109,7 +109,7 @@背景图像定位
}.box { background-image: url(star.png); @@ -139,14 +139,14 @@背景图像定位
{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}
-注意：
+background-position是{{cssxref("background-position-x")}}和{{cssxref("background-position-y")}}的简写，它们允许您分别设置不同的坐标轴的值。备注：
background-position是 {{cssxref("background-position-x")}} 和 {{cssxref("background-position-y")}} 的简写，它们允许您分别设置不同的坐标轴的值。渐变背景
-当渐变用于背景时，也可以使用像图像一样的{{cssxref("background-image")}}属性设置。
+当渐变用于背景时，也可以使用像图像一样的 {{cssxref("background-image")}} 属性设置。
-您可以在 MDN 的
+<gradient>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用 web 上可用的许多 CSS 渐变生成器之一，比如这个 。您可以创建一个渐变，然后复制并粘贴生成它的源代码。您可以在 MDN 的
<gradient>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用 web 上可用的许多 CSS 渐变生成器之一，比如这个。您可以创建一个渐变，然后复制并粘贴生成它的源代码。在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性梯度，它延伸到整个盒子上，还有一个径向梯度，它有一个固定的大小，因此会重复。
@@ -154,7 +154,7 @@渐变背景
多个背景图像
-也可以有多个背景图像——在单个属性值中指定多个
+background-image值，用逗号分隔每个值。也可以有多个背景图像——在单个属性值中指定多个
background-image值，用逗号分隔每个值。当你这样做时，你可能会以背景图像互相重叠而告终。背景将与最后列出的背景图像层在堆栈的底部，背景图像在代码列表中最先出现的在顶端。
@@ -164,13 +164,13 @@多个背景图像
注意：渐变可以与常规的背景图像很好地混合在一起。
其它
+background-*属性，该属性值用逗号分隔的方式设置。例如下列background-image：其它
background-*属性，该属性值用逗号分隔的方式设置。例如下列background-image：background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;-不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 image1 的 background-repeat 值将是 no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。
+不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 image1 的
background-repeat值将是no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。
@@ -178,7 +178,7 @@多个背景图像
背景附加
-另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由{{cssxref("background-attachment")}}属性控制的，它可以接受以下值：
+另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由 {{cssxref("background-attachment")}} 属性控制的，它可以接受以下值：
-
- @@ -186,11 +186,11 @@
scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。背景附加
local: 这个值是后来添加的 (它只在 Internet Explorer 9+中受支持，而其他的在 IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。{{cssxref("background-attachment")}}属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 background-attachment.html (或者看看这儿的 源代码))。
+{{cssxref("background-attachment")}} 属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 background-attachment.html (或者看看这儿的 源代码))。
使用 background 的简写
-正如我在本课开始时提到的，您将经常看到使用{{cssxref("background")}}属性指定的背景。这种简写允许您一次设置所有不同的属性。
+正如我在本课开始时提到的，您将经常看到使用 {{cssxref("background")}} 属性指定的背景。这种简写允许您一次设置所有不同的属性。
如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。
@@ -201,7 +201,7 @@使用 background 的简写
- -
background-size值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。查看{{cssxref("background")}}的 MDN 页面，以查看所有的注意事项。
+查看 {{cssxref("background")}} 的 MDN 页面，以查看所有的注意事项。
{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}
@@ -213,7 +213,7 @@背景的可访问性考虑
边框
-在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边界。通常，当我们使用 CSS 向元素添加边框时，我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。我们可以使用{{cssxref("border")}}为一个框的所有四个边设置边框。
+在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边界。通常，当我们使用 CSS 向元素添加边框时，我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。我们可以使用 {{cssxref("border")}} 为一个框的所有四个边设置边框。
-.box { border: 1px solid black; @@ -251,7 +251,7 @@边框
圆角
-通过使用{{cssxref("border-radius")}}属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。
+通过使用 {{cssxref("border-radius")}} 属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。
例如，要使一个盒子的四个角都有 10px 的圆角半径：
@@ -265,7 +265,7 @@圆角
border-top-right-radius: 1em 10%; }我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。您可以使用这些值来更改圆角样式。查看{{cssxref("border-radius")}}的属性页，查看可用的语法选项。
+我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。您可以使用这些值来更改圆角样式。查看 {{cssxref("border-radius")}} 的属性页，查看可用的语法选项。
{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}
@@ -282,7 +282,7 @@玩转背景和边框
{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}
总结
diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html index c5fa1645d387c2..be98cbc94eaebc 100644 --- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -87,23 +87,24 @@理解继承
控制继承
-CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。
+CSS 为控制继承提供了五个特殊的通用属性值。每个 css 属性都接收这些值。
-
- {{cssxref("inherit")}}
- 设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".
- {{cssxref("initial")}}
- 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为
+inherit。- {{cssxref("revert")}}
+- 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于
+unset。- {{cssxref("revert-layer")}}
+- 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
- {{cssxref("unset")}}
-- 将属性重置为自然值，也就是如果属性是自然继承那么就是
+inherit，否则和initial一样- 将属性重置为自然值，也就是如果属性是自然继承那么就是
inherit，否则和initial一样-注: 还有一个新的属性， {{cssxref("revert")}}， 只有很少的浏览器支持。
--注: 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 有更多信息和具体是怎么工作的。
+备注： 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "CSS 声明的源")}} 有更多信息和具体是怎么工作的。
下面的例子你可以通过修改 css 来查看它们的功能，写代码是掌握 html 和 css 最好的办法。
diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html index 2b8b47562b002f..33b862e35d58fd 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html @@ -20,18 +20,18 @@HTML 到底是什么？
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（{{Glossary("element", "elements")}}）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ {{Glossary("tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：
-我的猫非常脾气暴躁 +@@ -110,7 +110,7 @@My cat is very grumpy可以将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：
-<p>我的猫非常脾气暴躁</p>+<p>My cat is very grumpy</p>HTML 元素详解
让我们深入探索一下这个段落元素。
-+
这个元素的主要部分有：
@@ -44,7 +44,7 @@HTML 元素详解
元素也可以有属性（Attribute）：
-+
属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，
@@ -62,13 +62,13 @@class是属性名称，editor-note是属性的值。class属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。HTML 元素详解
嵌套元素
-也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将“暴躁”用 {{htmlelement("strong")}} 元素包围，爆字将突出显示：
+也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将“very”用 {{htmlelement("strong")}} 元素包围，爆字将突出显示：
-<p>我的猫咪脾气<strong>暴躁</strong>:)</p>+<p>My cat is <strong>very</strong> grumpy.</p>必须保证元素嵌套次序正确：本例首先使用 {{htmlelement("p")}} 标签，然后是 {{htmlelement("strong")}} 标签，因此要先结束 {{htmlelement("strong")}} 标签，最后再结束 {{htmlelement("p")}} 标签。这样是不对的：
-<p>我的猫咪脾气<strong>暴躁</p></strong>+<p>My cat is <strong>very grumpy.</p></strong>元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！
@@ -76,7 +76,7 @@空元素
不包含任何内容的元素称为空元素。比如 {{htmlelement("img")}} 元素：
-<img src="images/firefox-icon.png" alt="测试图片">+<img src="images/firefox-icon.png" alt="My test image">本元素包含两个属性，但是并没有
@@ -88,10 +88,10 @@</img>结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。HTML 文档详解
<html> <head> <meta charset="utf-8"> - <title>测试页面</title> + <title>My test page</title> </head> <body> - <img src="images/firefox-icon.png" alt="测试图片"> + <img src="images/firefox-icon.png" alt="My test image"> </body> </html>图像
重温一下 {{htmlelement("img")}} 元素：
-<img src="images/firefox-icon.png" alt="测试图片">+<img src="images/firefox-icon.png" alt="My test image">像之前所讲，该元素通过包含图像文件路径的地址属性
@@ -121,7 +121,7 @@src，可在所在位置嵌入图像。图像
- 有些错误使图像无法显示。可以试着故意将
-src属性里的路径改错。保存并刷新页面就可以在图像位置看到：+
@@ -163,27 +163,27 @@
alt属性的关键字即“描述文本”。alt文本应向用户完整地传递图像要表达的意思。用 "测试图片" 来描述 Firefox 标志并不合适，修改成 "Firefox 标志：一只盘旋在地球上的火狐" 就好多了。列表（List）
Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：
-
- 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 {{htmlelement("ul")}} 元素包围。
-- 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 {{htmlelement("ol")}} 元素包围。
+- 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 {{htmlelement("ul")}} 元素包围。
+- 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 {{htmlelement("ol")}} 元素包围。
列表的每个项目用一个列表项目（List Item）元素 {{htmlelement("li")}} 包围。
比如，要将下面的段落片段改成一个列表：
-<p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的技术人员、思考者和建造者，我们致力于……</p>+<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together… </p>可以这样更改标记：
-<p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p> +<p>At Mozilla, we're a global community of</p> <ul> - <li>技术人员</li> - <li>思考者</li> - <li>建造者</li> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> </ul> -<p>我们致力于……</p>+<p>working together… </p>试着在示例页面中添加一个有序列表和无序列表。
@@ -192,15 +192,15 @@链接
链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — {{htmlelement("a")}} — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：
-
@@ -214,11 +214,11 @@- 选择一些文本。比如“Mozilla 宣言”。
+- 选择一些文本。比如“Mozilla Manifesto”。
- 将文本包含在 {{htmlelement("a")}} 元素内，就像这样： -
<a>Mozilla 宣言</a>+<a>Mozilla Manifesto</a>- 为此 {{htmlelement("a")}} 元素添加一个
href属性，就像这样： -<a href="">Mozilla 宣言</a>+<a href="">Mozilla Manifesto</a>- 把属性的值设置为所需网址： -
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>+<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>链接
小结
-如果你一直跟着这篇文章里的指导做的话，你应该完成了一个像下面这样的页面。（你也可以 从这查看）：
+如果你一直跟着这篇文章里的指导做的话，你应该完成了一个像下面这样的页面。（你也可以 从这查看）：
+
--
如果你遇到困难，你可以将 Github 上的 完整示例代码 上与你的文件进行比较。
+如果你遇到困难，你可以将 Github 上的完整示例代码与你的文件进行比较。
在这里，我们只是介绍了一点点 HTML。要学习更多，访问我们的 HTML 学习主题页面 。
diff --git a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.html b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.html index c534773f8a85a0..21e8c3f83bfbc2 100644 --- a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.html +++ b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.html @@ -386,9 +386,9 @@主动学习：一个简单的日
在这个例子中，您将帮助我们完成一个简单的日历应用程序。在你的代码中：
-
- 一个元素表示一个控件，提供一个选项菜单：">
-<select>元素，允许用户在不同月份之间进行选择。- -
onchange检测<select>菜单中选择的值何时更改的事件处理程序。- 一个函数叫做
+createCalendar()绘制日历并在是最重要的，<h6>是最少的。 标题元素简要介绍了它介绍的部分的主题。 标题信息可以由用户代理使用，例如，自动构建文档的目录。"><h1>元素中显示正确的月份。- 一个
+<select>元素表示一个控件，提供一个选项菜单元素，允许用户在不同月份之间进行选择。- +
onchange事件处理器检测<select>菜单中选择的值何时更改。- 一个叫做
createCalendar()的函数，它用来绘制日历并在<h1>元素中显示正确的月份。我们需要你在
diff --git a/files/zh-cn/learn/performance/css/index.html b/files/zh-cn/learn/performance/css/index.html deleted file mode 100644 index 17abde06d6907d..00000000000000 --- a/files/zh-cn/learn/performance/css/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: CSS performance optimization -slug: Learn/Performance/CSS -translation_of: Learn/Performance/CSS ---- -onchange处理函数中写一个条件语句，就在// ADD CONDITIONAL HERE任务的下面 。这应该：页面在样式没有渲染完毕的情况下被绘制，在样式渲染完毕后又被刷新，这大概是很糟糕的用户体验。因此，除非浏览器知道当前不需要 该 CSS，否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径：绘制 paint 仅在布局 layout 之后进行，布局 layout 则在创建渲染树 render tree 之后进行，创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造，请删除不必要的样式，对 CSS 进行最小化，压缩和缓存，并将页面加载时不需要的 CSS 拆分为其他文件，以减少 CSS 渲染阻塞。
- -阻塞渲染优化
- -CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要，可以帮助我们优化关键渲染路径。浏览器会阻塞渲染，直到它解析完全部的样式，但不会阻塞渲染它认为不会使用的样式，例如打印样式表。通过基于媒体查询将 CSS 分成多个文件，可以防止在下载未使用的 CSS 期间阻止渲染。为了创建非阻塞 CSS 链接，将不会立即使用的样式（例如打印样式）移动到单独的文件中，将
- -<link>添加到 HTML 中，并添加媒体查询，在这种情况下说明它是打印样式表。<link rel="stylesheet" href="styles.css"> <!-- blocking --> -<link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> -<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens -->- -默认情况下，浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media 属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。通过将 CSS 分成多个文件，主要的 阻塞渲染 文件（本例中为
- -styles.css）的大小变得更小，从而减少了渲染被阻塞的时间。在 GPU 上呈现动画
- -浏览器针对处理 CSS 动画和不会很好地触发重排（因此也导致重新绘制）的动画属性进行了优化。为了提高性能，可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms (
- -transform: translateZ(),rotate3d()，etc.)，animating transform 和opacity,position: fixed，will-change，和filter。一些元素，例如<video>,<canvas>和<iframe>，也位于各自的图层上。 将元素提升为图层（也称为合成）时，动画转换属性将在 GPU 中完成，从而改善性能，尤其是在移动设备上。- -
will-change属性CSS
- -will-change属性告诉浏览器元素的哪些属性需要修改，使浏览器能够在元素实际更改之前设置优化，通过在实际更改前执行耗时的工作以提升性能。will-change: opacity, transform;- -- -
font-display属性根据 @font-face 规则，font-display 属性定义了浏览器如何加载和显示字体文件，允许文本在字体加载或加载失败时显示回退字体。可以通过依靠折中无样式文本闪现使文本可见替代白屏来提高性能。
- -@font-face { - font-family: someFont; - src: url(/path/to/fonts/someFont.woff) format('woff'); - font-weight: 400; - font-style: normal; - font-display: fallback; -}- -- -
contain属性CSS 的
diff --git a/files/zh-cn/learn/performance/css/index.md b/files/zh-cn/learn/performance/css/index.md new file mode 100644 index 00000000000000..105e9c80ff3b09 --- /dev/null +++ b/files/zh-cn/learn/performance/css/index.md @@ -0,0 +1,48 @@ +--- +title: CSS performance optimization +slug: Learn/Performance/CSS +translation_of: Learn/Performance/CSS +--- +页面在样式没有渲染完毕的情况下被绘制，在样式渲染完毕后又被刷新，这大概是很糟糕的用户体验。因此，除非浏览器知道当前不需要 该 CSS，否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径：绘制 paint 仅在布局 layout 之后进行，布局 layout 则在创建渲染树 render tree 之后进行，创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造，请删除不必要的样式，对 CSS 进行最小化，压缩和缓存，并将页面加载时不需要的 CSS 拆分为其他文件，以减少 CSS 渲染阻塞。 + +### 阻塞渲染优化 + +CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要，可以帮助我们优化关键渲染路径。浏览器会阻塞渲染，直到它解析完全部的样式，但不会阻塞渲染它认为不会使用的样式，例如打印样式表。通过基于媒体查询将 CSS 分成多个文件，可以防止在下载未使用的 CSS 期间阻止渲染。为了创建非阻塞 CSS 链接，将不会立即使用的样式（例如打印样式）移动到单独的文件中，将 [``](/en-US/docs/Web/HTML/Element/link) 添加到 HTML 中，并添加媒体查询，在这种情况下说明它是打印样式表。 + +```html + + + +``` + +默认情况下，浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media 属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。通过将 CSS 分成多个文件，主要的 阻塞渲染 文件（本例中为 `styles.css`）的大小变得更小，从而减少了渲染被阻塞的时间。 + +### 在 GPU 上呈现动画 + +浏览器针对处理 CSS 动画和不会很好地触发重排（因此也导致重新绘制）的动画属性进行了优化。为了提高性能，可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms ([`transform: translateZ()`](/en-US/docs/Web/CSS/transform), [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d)，etc.)，animating transform 和 [`opacity`](/en-US/docs/Web/CSS/opacity), [`position: fixed`](/en-US/docs/Web/CSS/position)，[`will-change`](/en-US/docs/Web/CSS/will-change)，和 [`filter`](/en-US/docs/Web/CSS/filter)。一些元素，例如 [`contain属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。这允许浏览器针对 DOM 的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。
