From 8b8966ae5458f673309a881fbd9226486dcad18d Mon Sep 17 00:00:00 2001 From: Vivi Date: Wed, 18 Dec 2024 09:28:47 +0900 Subject: [PATCH 01/22] =?UTF-8?q?[ko]=20::before=20=EC=8B=A0=EA=B7=9C=20?= =?UTF-8?q?=EB=B2=88=EC=97=AD=20(#24525)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ko/web/css/_doublecolon_before/index.md | 212 ++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 files/ko/web/css/_doublecolon_before/index.md diff --git a/files/ko/web/css/_doublecolon_before/index.md b/files/ko/web/css/_doublecolon_before/index.md new file mode 100644 index 00000000000000..20f67ed07bf2f2 --- /dev/null +++ b/files/ko/web/css/_doublecolon_before/index.md @@ -0,0 +1,212 @@ +--- +title: "::before" +slug: Web/CSS/::before +l10n: + sourceCommit: 632289fcc10e926d166e1b49e5ba3505de182856 +--- + +{{CSSRef}} + +CSS에서, **`::before`** 는 선택된 요소의 첫번째 자식인 [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)를 생성합니다. 이는 종종 {{cssxref("content")}} 속성을 활용하여 요소에 장식 콘텐츠를 추가하는 데에 사용됩니다. 기본적으로 인라인 형식입니다. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-element-before.html", "tabbed-standard")}} + +> [!NOTE] > `::before` 와 `::after` 로 생성된 의사 요소들은 마치 해당 요소가 적용된 요소의 직속 자식인 것처럼 생성된 박스입니다. 즉, 원본 요소의 직계 자식이기 때문에 {{htmlelement("img")}} 처럼 콘텐츠가 CSS 서식 모델의 범위를 벗어나는 [대체 요소](/ko/docs/Web/CSS/Replaced_element) 에는 적용할 수 없습니다. + +## 구문 + +```css-nolint +::before { + content: /* value */; + /* properties */ +} +``` + +[`content`](/ko/docs/Web/CSS/content) 속성이 정의되지 않았거나 유효하지 않은 값을 가지거나, 값으로 `normal` 이나 `none` 을 가지고 있다면 `::before` 가상 요소는 렌더되지 않고 `display: none` 이 설정된 것처럼 동작합니다. + +> **Note:** [선택자 레벨 3](https://drafts.csswg.org/selectors-3/#gen-content) 에서는 콜론 표기법인 `::before` 를 [의사 요소](/ko/docs/Web/CSS/Pseudo-elements) 의 [의사 클래스](/ko/docs/Web/CSS/Pseudo-classes) 의 하나로 소개합니다. 브라우저는 세미콜론 표기인 `:before` 도 수용하며, 이는 CSS2에서 소개되어 있습니다. + +## 접근성 + +스크린 리더에서는 원활히 접근되지 않기 때문에 콘텐츠를 추가하기 위해 `::before` 의사 요소를 사용하는 것은 권장되지 않습니다. + +## 예제 + +### 인용 표시 추가하기 + +아래는 `::before` 의사 요소를 사용하여 인용 표시를 추가하는 예제입니다. 인용 문자를 추가하기 위해 `::before` 와 {{Cssxref("::after")}} 를 모두 사용합니다. + +#### HTML + +```html +Some quotes, he said, are better than none. +``` + +#### CSS + +```css +q::before { + content: "«"; + color: blue; +} + +q::after { + content: "»"; + color: red; +} +``` + +#### 결과 + +{{EmbedLiveSample('Adding_quotation_marks', '500', '50')}} + +### 장식 예제 + +{{cssxref("content")}} 속성 내의 텍스트나 이미지 또한 원하는대로 수정할 수 있습니다. + +#### HTML + +```html +오렌지색 박스가 어디에 있는지 보세요. +``` + +#### CSS + +```css +.ribbon { + background-color: #5bc8f7; +} + +.ribbon::before { + content: "여기 오렌지색 박스가 있습니다."; + background-color: #ffba10; + border-color: black; + border-style: dotted; +} +``` + +#### 결과 + +{{EmbedLiveSample('Decorative_example', 450, 60)}} + +### 투두 리스트 + +이번 예제에서는 의사 요소를 활용하여 투두 리스트를 만듭니다. 여기서는 적은 공수를 들여 UI 와 사용자 경험을 향상시켰습니다. + +#### HTML + +```html + +``` + +#### CSS + +```css +li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #ccff99; +} + +li.done::before { + content: ""; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +} +``` + +#### JavaScript + +```js +const list = document.querySelector("ul"); +list.addEventListener( + "click", + (ev) => { + if (ev.target.tagName === "LI") { + ev.target.classList.toggle("done"); + } + }, + false, +); +``` + +위 코드가 실행된 이후의 결과를 확인할 수 있습니다. 아무런 아이콘도 사용되지 않았고, 체크 표시는 보이는 바와 같이 CSS 내의 스타일에서 `::before` 에 설정된 것입니다. 몇 가지 일을 완료로 처리해 보세요. + +#### 결과 + +{{EmbedLiveSample('To-do_list', 400, 300)}} + +### 특수 문자 + +HTML이 아니라 CSS라는 특성 때문에 마크업 요소들을 콘텐츠 값에 사용할 수 없습니다. 만일 특수 문자를 사용해야 하는데 CSS 콘텐츠 문자열에 직접 입력할 수 없는 경우, 백슬래시와 16진수 유니코드 값으로 구성된 유니코드 이스케이프 시퀀스를 사용하십시오. + +#### HTML + +```html +
    +
  1. Crack Eggs into bowl
    2. +
  2. Add Milk
    3. +
  3. Add Flour
    4. +
  4. Mix thoroughly into a smooth batter
    5. +
  5. Pour a ladleful of batter onto a hot, greased, flat frying pan
    6. +
  6. Fry until the top of the pancake loses its gloss
    7. +
  7. Flip it over and fry for a couple more minutes
    8. +
  8. serve with your favorite topping
    9. +
+``` + +#### CSS + +```css +li { + padding: 0.5em; +} + +li[aria-current="step"] { + font-weight: bold; +} + +li[aria-current="step"]::after { + content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/ + display: inline; +} +``` + +#### 결과 + +{{EmbedLiveSample('Special_characters', 400, 200)}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{Cssxref("::after")}} +- {{Cssxref("content")}} From 9b3545aa9e3942de634bef19fd19538b0b0dfbbc Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 18 Dec 2024 09:54:08 +0800 Subject: [PATCH 02/22] zh-CN: create `notifications.onButtonClicked` (#25073) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../notifications/onbuttonclicked/index.md | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onbuttonclicked/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onbuttonclicked/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onbuttonclicked/index.md new file mode 100644 index 00000000000000..9f2e1b091b6e9f --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onbuttonclicked/index.md @@ -0,0 +1,49 @@ +--- +title: notifications.onButtonClicked +slug: Mozilla/Add-ons/WebExtensions/API/notifications/onButtonClicked +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +当用户点击通知的按钮时触发。 + +## 语法 + +```js-nolint +browser.notifications.onButtonClicked.addListener(listener) +browser.notifications.onButtonClicked.removeListener(listener) +browser.notifications.onButtonClicked.hasListener(listener) +``` + +事件有三个函数： + +- `addListener(listener)` + - : 添加一个监听器到这个事件。 +- `removeListener(listener)` + - : 停止监听这个事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册到这个事件。若在监听，返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + + - : 当这个事件发生时调用的函数。这个函数会接收以下参数： + + - `notificationId` + - : `string`。被点击按钮的通知的 ID。 + - `buttonIndex` + - : `integer`。被点击按钮的[从零开始](https://zh.wikipedia.org/wiki/從零開始的編號)的索引。 + +## 浏览器兼容性 + +{{Compat}} + +{{WebExtExamples}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.notifications`](https://developer.chrome.google.cn/docs/extensions/reference/api/notifications) API。 From fa395169ae52add5aa83b898bfab22189b80c3d6 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 18 Dec 2024 02:15:02 +0000 Subject: [PATCH 03/22] Markdownlint auto-cleanup for es (#25140) es: auto-fix Markdownlint issues --- files/es/web/api/element/keyup_event/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/es/web/api/element/keyup_event/index.md b/files/es/web/api/element/keyup_event/index.md index bf95acaecc7939..1e39e73cc867ae 100644 --- a/files/es/web/api/element/keyup_event/index.md +++ b/files/es/web/api/element/keyup_event/index.md @@ -1,9 +1,9 @@ --- title: "Element: evento keyup" +short-title: keyup slug: Web/API/Element/keyup_event l10n: sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf -short-title: keyup --- {{APIRef}} From 800edaf7418dc91c79322ffc138f719c62848c6c Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 18 Dec 2024 02:16:21 +0000 Subject: [PATCH 04/22] [es] sync translated content (#25147) es: sync translated content --- files/es/_redirects.txt | 1 + .../{glossary => web/security/attacks}/clickjacking/index.md | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) rename files/es/{glossary => web/security/attacks}/clickjacking/index.md (93%) diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index f31c01ed33eb41..aeec57dbadf2cc 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -469,6 +469,7 @@ /es/docs/Glossary/Clasificación_por_tarjetas_(card_sorting) /es/docs/Glossary/Card_sorting /es/docs/Glossary/Clausura /es/docs/Glossary/Closure /es/docs/Glossary/Clave /es/docs/Glossary/Key +/es/docs/Glossary/Clickjacking /es/docs/Web/Security/Attacks/Clickjacking /es/docs/Glossary/Constante /es/docs/Glossary/Constant /es/docs/Glossary/Criptoanálisis /es/docs/Glossary/Cryptanalysis /es/docs/Glossary/Criptografía /es/docs/Glossary/Cryptography diff --git a/files/es/glossary/clickjacking/index.md b/files/es/web/security/attacks/clickjacking/index.md similarity index 93% rename from files/es/glossary/clickjacking/index.md rename to files/es/web/security/attacks/clickjacking/index.md index ddc0a97b9af4b8..13e08db9d9a04b 100644 --- a/files/es/glossary/clickjacking/index.md +++ b/files/es/web/security/attacks/clickjacking/index.md @@ -1,6 +1,7 @@ --- title: Clickjacking -slug: Glossary/Clickjacking +slug: Web/Security/Attacks/Clickjacking +original_slug: Glossary/Clickjacking --- {{GlossarySidebar}} From 905267a04d355b8f04fe52f0c924c65edd0fc736 Mon Sep 17 00:00:00 2001 From: Emiliano <47641194+Emilianoac@users.noreply.github.com> Date: Tue, 17 Dec 2024 23:17:26 -0300 Subject: [PATCH 05/22] Fix typo: change 'proque' to 'porque' (#25148) --- files/es/web/javascript/reference/global_objects/proxy/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/es/web/javascript/reference/global_objects/proxy/index.md b/files/es/web/javascript/reference/global_objects/proxy/index.md index 0a18712ec74e72..e490cdcabe1afc 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/index.md +++ b/files/es/web/javascript/reference/global_objects/proxy/index.md @@ -61,7 +61,7 @@ Aquí hemos provisto una implementación del manipulador intentos de acceder a las propiedades del objeto envuelto. Las funciones manipuladoras son llamadas a menudo _trampas_, probablemente -proque atrapan las llamadas al objeto envuelto. La trampa simple de arriba en +porque atrapan las llamadas al objeto envuelto. La trampa simple de arriba en `handler2` redefine todos los accesores de propiedades: ```js From 1439f79cc3d69aef4350b17d854913801aa0ab82 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 18 Dec 2024 07:31:44 +0000 Subject: [PATCH 06/22] [zh-cn] sync translated content (#25146) * zh-cn: sync translated content * clickjacking guide ref: mdn/content#37166 --------- Co-authored-by: Allo --- files/zh-cn/_redirects.txt | 1 + files/zh-cn/glossary/clickjacking/index.md | 18 ----- files/zh-cn/glossary/csp/index.md | 8 +-- .../other_embedding_technologies/index.md | 31 +++----- .../frame-ancestors/index.md | 10 +-- .../security/attacks/clickjacking/index.md | 72 +++++++++++++++++++ files/zh-cn/web/security/index.md | 55 +++----------- .../practical_implementation_guides/index.md | 6 +- .../web/security/types_of_attacks/index.md | 8 +-- 9 files changed, 107 insertions(+), 102 deletions(-) delete mode 100644 files/zh-cn/glossary/clickjacking/index.md create mode 100644 files/zh-cn/web/security/attacks/clickjacking/index.md diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index b559f964da7b13..394c8fbee7e76d 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -517,6 +517,7 @@ /zh-CN/docs/Glossary/404 /zh-CN/docs/Web/HTTP/Status/404 /zh-CN/docs/Glossary/502 /zh-CN/docs/Web/HTTP/Status/502 /zh-CN/docs/Glossary/Bézier_curve /zh-CN/docs/Glossary/Bezier_curve +/zh-CN/docs/Glossary/Clickjacking /zh-CN/docs/Web/Security/Attacks/Clickjacking /zh-CN/docs/Glossary/DOS_attack /zh-CN/docs/Glossary/Denial_of_Service /zh-CN/docs/Glossary/Descriptor_(CSS) /zh-CN/docs/Glossary/CSS_Descriptor /zh-CN/docs/Glossary/Empty_element /zh-CN/docs/Glossary/Void_element diff --git a/files/zh-cn/glossary/clickjacking/index.md b/files/zh-cn/glossary/clickjacking/index.md deleted file mode 100644 index a1d078e3ceca89..00000000000000 --- a/files/zh-cn/glossary/clickjacking/index.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: 点击劫持 -slug: Glossary/Clickjacking -l10n: - sourceCommit: ede0057ebf9c1dc646242d019803a567acbb2995 ---- - -{{GlossarySidebar}} - -点击劫持是一种基于界面的攻击，诱使网站用户在不知情的情况下点击恶意链接。在点击劫持中，攻击者将其恶意链接嵌入到网站的按钮或合法页面中。在被感染的{{glossary("Site", "网站")}}中，每当用户点击一个合法链接时，攻击者就会获取该用户的机密信息，从而最终危害用户在互联网上的隐私。 - -可以通过实施[内容安全策略（frame-ancestors）](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)和实施 [Set-Cookie 属性](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#属性)来预防点击劫持行为。 - -## 参见 - -- [网络安全：点击劫持保护](/zh-CN/docs/Web/Security#点击劫持保护) -- [维基百科上的点击劫持](https://zh.wikipedia.org/wiki/点击劫持) -- [OWASP 上的点击劫持](https://owasp.org/www-community/attacks/Clickjacking) diff --git a/files/zh-cn/glossary/csp/index.md b/files/zh-cn/glossary/csp/index.md index 441035b192d7d1..5e9614f79be246 100644 --- a/files/zh-cn/glossary/csp/index.md +++ b/files/zh-cn/glossary/csp/index.md @@ -1,15 +1,15 @@ --- -title: 内容安全策略 +title: CSP slug: Glossary/CSP l10n: - sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f + sourceCommit: 9c09d1ce824bd5e6ef879094428879c476ccbace --- {{GlossarySidebar}} -[**内容安全策略**](/zh-CN/docs/Web/HTTP/CSP)（CSP）用于检测和减轻用于 Web 站点的特定类型的攻击，例如{{Glossary("Cross-site_scripting", "跨站脚本攻击")}}、[点击劫持](/zh-CN/docs/Glossary/Clickjacking)和数据注入。 +**CSP**（[内容安全策略](/zh-CN/docs/Web/HTTP/CSP)）用于检测和减轻用于 Web 站点的特定类型的攻击，例如{{Glossary("Cross-site_scripting", "跨站脚本攻击")}}、[点击劫持](/zh-CN/docs/Web/Security/Attacks/Clickjacking)和数据注入。 -该安全策略的实现基于一个称作 {{HTTPHeader("Content-Security-Policy")}} 的 HTTP 标头。 +该安全策略的实现基于一个称作 {{HTTPHeader("Content-Security-Policy")}} 的 {{Glossary("HTTP")}} 标头。 ## 参见 diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 64c87f8c2a2731..e1cc7e81c2f8ae 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -2,7 +2,7 @@ title: 从 object 到 iframe——其他嵌入技术 slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: be3f184d89979d413204b8f9cbecfc8dd0e5ecf9 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}} @@ -68,10 +68,6 @@ l10n: 如果你犯了某些错误，你可以点击*重置*按钮以重置编辑器。如果你实在无法解决，可以按下*显示答案*按钮以借鉴答案。 ```html hidden -

- 可以试着引入 B 站（哔哩哔哩视频网站）的“改革春风吹满地”视频吗？（其 BV 号为 - BV1bW411n7fY） -

实时输出

@@ -151,12 +147,12 @@ window.addEventListener("load", updateCode); // 转而使其在当前光标位置插入一个制表符 textarea.onkeydown = function (e) { - if (e.keyCode === 9) { + if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } - if (e.keyCode === 27) { + if (e.code === "Escape") { textarea.blur(); } }; @@ -194,7 +190,7 @@ textarea.onkeyup = function () { {{ EmbedLiveSample('动手练习：典型嵌入的使用', 700, 600) }} -## Iframe 详解 +## iframe 详解 是不是很简单又有趣呢？你可以通过 {{htmlelement("iframe")}} 元素将其他 Web 文档嵌入到当前文档中。这很适合将第三方内容嵌入你的网站，这些内容你可能无法直接控制，也不想实现自己的版本——例如来自在线视频提供商的视频、[Disqus](https://disqus.com/) 等评论系统、在线地图提供商、广告横幅等。甚至本课程使用的实时可编辑示例就是使用 ` +``` + +在页面的 CSS 中，攻击者： + +- 隐藏了 `