Skip to content

Commit

Permalink
Merge branch 'fix/First_steps_How_CSS_is_structured' of github.com:OH…
Browse files Browse the repository at this point in the history
…MORIYUSUKE/translated-content into fix/First_steps_How_CSS_is_structured
  • Loading branch information
OHMORIYUSUKE committed Dec 8, 2024
2 parents c3e03b0 + 9eaf34d commit 721b99b
Show file tree
Hide file tree
Showing 226 changed files with 3,537 additions and 1,114 deletions.
28 changes: 27 additions & 1 deletion docs/ru/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@

## Использование ссылок

При переводе документов не забывайте изменять язык (`en-US` на `ru`) во внутренних ссылках на сайт MDN так, чтобы они вели на соответствующие локализованные страницы. Также для внутренних ссылок необходимо сохранять только путь в URL-адресе (без схемы и имени домена).
### Внутренние ссылки

Во внутренних ссылках на сайт MDN необходимо изменять язык (`en-US` на `ru`) и сохранять только путь в URL-адресе (без схемы и имени домена) так, чтобы они вели на соответствующие локализованные страницы.

Рассмотрим пример:

Expand All @@ -18,6 +20,30 @@ If you are new to HTML, CSS, JavaScript, etc., try our [Learn web development](/
Если вы только начинаете изучение HTML, CSS и JavaScript, попробуйте наши руководства по [Изучению веб-разработки](/ru/docs/Learn).
```

### Внешние ссылки

При переводе ссылок на сторонние сайты следует придерживаться следующих правил:

- Если у документа есть локализованная версия, то заменять ссылку на неё, включая название документа и URL-адрес (это применительно к таким ресурсам как [Википедия](https://ru.wikipedia.org/)). В случаях, когда локализованная версия статьи уступает англоязычной (по объёму или дате обновления) до потери ценности, можно оставить оригинальную ссылку.
- Если у документа нет локализованной версии, то оставлять оригинальное название документа, и переводить только окружающий текст. Также можно добавлять информацию о языке документа (например, `(англ.)`).
- В некоторых случаях в тексте ссылки вместо названия ресурса лучше указывать его описание на русском языке. Например, если в заголовке статьи есть «игра слов» или аббревиатура, понятная только на языке оригинала.

Примеры ссылок на сторонние сайты:

```md
- [Global variable](https://en.wikipedia.org/wiki/Global_variable) on Wikipedia
- [Class-based programming](https://en.wikipedia.org/wiki/Class-based_programming) on Wikipedia
- [FAQ](https://www.chromium.org/blink/developer-faq/) on Blink
```

На русский язык следует перевести таким образом:

```md
- [Глобальная переменная](https://ru.wikipedia.org/wiki/Глобальная_переменная) в Википедии
- [Class-based programming](https://en.wikipedia.org/wiki/Class-based_programming) в Википедии (англ.)
- [Часто задаваемые вопросы](https://www.chromium.org/blink/developer-faq/) на сайте Blink (англ.)
```

## Общие рекомендации по переводу на русский язык

- «_Вы_» и его производные пишите с маленькой буквы.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -209,9 +209,7 @@ La guía de [Mejora progresiva en la compaginación en cuadrícula](/es/docs/Web

## Pruebas con navegadores antiguos

Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de [comprobación de compatibilidad entre navegadores](/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing).

También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una [variedad de máquinas virtuales de descarga gratuita](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/). Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.
Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de [comprobación de compatibilidad entre navegadores](/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing).

## Resumen

Expand Down
2 changes: 1 addition & 1 deletion files/es/web/javascript/event_loop/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Al llamar [`setTimeout`](/es/docs/Web/API/setTimeout) se añadirá un mensaje a

### Cero retraso

Cero retraso no significa que una llamada a una función (call back) se disparará después de cero milisegundos. Al llamar {{domxref("WindowTimers.setTimeout", "setTimeout")}} con un retraso de 0 (cero) milisegundos, no se ejecuta la llamada de la función después de el intervado dado. La ejecución depende del número de tareas en espera en la cola. En el ejemplo de abajo el mensaje "this is just a message" será escrito en la terminal antes de que el mensaje de la llamada a la función sea procesado, esto es por que el retraso es el tiempo mínimo requerido para que el programa procese la petición, pero no es un tiempo garantizado.
Cero retraso no significa que una llamada a una función (call back) se disparará después de cero milisegundos. Al llamar {{domxref("WindowTimers.setTimeout", "setTimeout")}} con un retraso de 0 (cero) milisegundos, no se ejecuta la llamada de la función después de el intervalo dado. La ejecución depende del número de tareas en espera en la cola. En el ejemplo de abajo el mensaje "this is just a message" será escrito en la terminal antes de que el mensaje de la llamada a la función sea procesado, esto es por que el retraso es el tiempo mínimo requerido para que el programa procese la petición, pero no es un tiempo garantizado.

```js
(function () {
Expand Down
14 changes: 14 additions & 0 deletions files/ja/glossary/rdf/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: RDF
slug: Glossary/RDF
l10n:
sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---

{{GlossarySidebar}}

**RDF**(Resource Description Framework)は、W3C によって開発された、ウェブページなどのワールドワイドウェブ上の情報を表現するための言語です。RDF は、リソース情報をエンコードする標準的な方法を提供し、アプリケーション間で完全に自動化された方法で交換できるようにします。

## 関連情報

- Wikipedia:[Resource Description Framework](https://ja.wikipedia.org/wiki/Resource_Description_Framework)
14 changes: 14 additions & 0 deletions files/ja/glossary/ril/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: RIL
slug: Glossary/RIL
l10n:
sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---

{{GlossarySidebar}}

RIL(Radio Interface Layer)はモバイル・オペレーティング・システムのコンポーネントで、デバイスのソフトウェアとデバイスの電話、無線、モデムのハードウェアの間で通信を行います。

## 関連情報

- Wikipedia:[Radio Interface Layer](https://en.wikipedia.org/wiki/Radio_Interface_Layer)
4 changes: 2 additions & 2 deletions files/ja/learn/css/first_steps/how_css_is_structured/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ

これは次のように表示されます。

{{EmbedLiveSample('The_calc_function', '100%', 200)}}
{{EmbedLiveSample('calc()_関数', '100%', 200)}}

関数は、関数名と、関数に渡す値を囲む括弧で構成されています。上記の `calc()` の例では、値は、このボックスの幅を含むブロックの幅の 90% から 30 ピクセルを引いた値と定義しています。計算の結果は、事前に計算して静的な値として入力できるものではありません。

Expand All @@ -332,7 +332,7 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ

上記のコードの出力は次のようになります。

{{EmbedLiveSample('Transform_functions', '100%', 200)}}
{{EmbedLiveSample('座標変換関数', '100%', 200)}}

**以下に挙げたプロパティのそれぞれの値を調べてみましょう。ぞれぞれの HTML 要素にスタイルを適用する CSS ルールを記述してみましょう。**

Expand Down
6 changes: 3 additions & 3 deletions files/ja/web/api/analysernode/getbytefrequencydata/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ l10n:

配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。

配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。
配列の持つ要素が {{domxref("AnalyserNode.frequencyBinCount")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

## 構文

Expand All @@ -25,8 +25,8 @@ getByteFrequencyData(array)
### 引数

- `array`
- : 周波数領域データがコピーされる {{jsxref("Uint8Array")}}。無音のサンプルの場合、値は `-Infinity` です。
配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。
- : 周波数領域データがコピーされる {{jsxref("Uint8Array")}}。
配列の持つ要素が {{domxref("AnalyserNode.frequencyBinCount")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

### 返値

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/api/document/createtreewalker/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ createTreeWalker(root, whatToShow, filter)

| 定数 | 数値 | 説明 |
| -------------------------------------------------------- | ------------ | --------------------------------------------------------- |
| `NodeFilter.SHOW_ALL` | `0xFFFFFFFF` | すべて絵のノードを出力します。 |
| `NodeFilter.SHOW_ALL` | `0xFFFFFFFF` | すべてのノードを出力します。 |
| `NodeFilter.SHOW_ATTRIBUTE` | `0x2` | {{domxref("Attr")}} ノードを出力します。 |
| `NodeFilter.SHOW_CDATA_SECTION` | `0x8` | {{domxref("CDATASection")}} ノードを出力します。 |
| `NodeFilter.SHOW_COMMENT` | `0x80` | {{domxref("Comment")}} ノードを出力します。 |
Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/css/color_value/oklab/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ l10n:

{{CSSRef}}

**`oklab()`** 関数記法は、指定された色を、人間の目による色の知覚方法を模倣しようとするOKlab色空間で表現する。この `oklab()` は Oklab 色空間上の同次座標系、 a 軸と b 軸で動作します。極座標系、彩度、色相が必要な場合は、 {{cssxref("color_value/oklch", "oklch()")}} を使用してください。
**`oklab()`** 関数記法は、指定された色を、人間の目による色の知覚方法を模倣しようとする Oklab 色空間で表現する。この `oklab()` は Oklab 色空間上の同次座標系、 a 軸と b 軸で動作します。極座標系、彩度、色相が必要な場合は、 {{cssxref("color_value/oklch", "oklch()")}} を使用してください。

Oklab は知覚的色空間で、次のような場合に使用されます。

Expand Down
51 changes: 33 additions & 18 deletions files/ja/web/css/element/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: element()
slug: Web/CSS/element
l10n:
sourceCommit: 66944f622b6b51bc9c24bebbbea242138d910600
---

{{CSSRef}}{{SeeCompatTable}}
Expand All @@ -24,13 +26,13 @@ element(id)

##

この例を[ライブで見る](https://mdn.dev/archives/media/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です
以下の例は、 `-moz-element()` に対応している Firefox のビルドが必要です

<h3 id="A_somewhat_realistic_example">いくらか現実的な例</h3>
### いくらか現実的な例

この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

```html
```html live-sample___a_somewhat_realistic_example
<div
style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
<p>This box uses the element with the #myBackground1 ID as its background!</p>
Expand All @@ -40,31 +42,45 @@ element(id)
<div
id="myBackground1"
style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
<p style="transform-origin:0 0; transform: rotate(45deg); color:white;">
<p style="transform-origin:0 0; rotate: 45deg; color:white;">
This text is part of the background. Cool, huh?
</p>
</div>
</div>
```

"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。
{{EmbedLiveSample("A_somewhat_realistic_example")}}

![](example1.png)
"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。

<h3 id="A_somewhat_more_bizarre_example">いくらか突飛な例</h3>
### ページプレビュー

この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません
この [Vincent De Oliveira の例に基づいた例](https://iamvdo.me/en/blog/css-element-function)は、 `<div id="css-source">` のプレビューを `<div id="css-result">` の中に生成します

```html
<div
style="width:400px; height:100px; background:-moz-element(#myBackground2);"></div>
#### HTML

<div style="overflow:hidden; height:0;">
<button id="myBackground2" type="button">Evil button!</button>
```html live-sample___page_preview
<div id="css-source">
<h1>Page Preview</h1>
</div>
<div id="css-result"></div>
```

![](example2.png)
#### CSS

```css live-sample___page_preview
#css-result {
background: -moz-element(#css-source) no-repeat;
width: 256px;
height: 32px;
background-size: 80%;
border: dashed;
}
```

#### 結果

{{EmbedLiveSample("Page_Preview")}}

## 仕様書

Expand All @@ -76,10 +92,9 @@ element(id)

## 関連情報

- {{cssxref("image/image()", "image()")}}
- {{cssxref("image/image-set()", "image-set()")}}
- {{cssxref("image/image", "image()")}}
- {{cssxref("image/image-set", "image-set()")}}
- {{cssxref("&lt;image&gt;")}}
- {{cssxref("&lt;gradient&gt;")}}
- {{cssxref("element()")}}
- {{cssxref("cross-fade()")}}
- {{cssxref("cross-fade", "cross-fade()")}}
- {{domxref("document.mozSetImageElement()")}}
Loading

0 comments on commit 721b99b

Please sign in to comment.