Under the hood of MDN's new frontend
Last year, we launched a new frontend for MDN. The most noticeable changes were adjustments to our styles; we simplified and unified the MDN design across all of our pages. In truth, the biggest changes were not reader-visible, but rather in the overhauled code that powers our frontend. This post describes what we've done, the technologies we chose, and why we did it at all. MDN's architecture To
Clear-Site-Data header - HTTP | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback The HTTP Clear-Site-Data response header sends a signal to the client that it should remove all browsing data of certain types (cookies, stora
Web Locks API - Web APIs | MDN
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. The Web Locks API allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then release it. While held, no other script executing in the same origin can acquire the same lock, which allows a web app running in multiple tabs or workers
オリジンプライベートファイルシステム - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月. Learn more See full compatibility Report feedback ファイルシステムアクセス API を使用したファイルでの作業 ファイルシステムアクセス API は、ファイルシステム API を拡張したもので、は、ピッカーメソッドを使ったファイルへのアクセスを提供します。例えば、 Window.showOpenFilePicker() では、ユーザーがアクセスするファイルを選択することができ、その結果、 FileSystemFileHandle オブジェクトが返されます。 FileSyst
The structured clone algorithm - Web APIs | MDN
The structured clone algorithm copies complex JavaScript objects. It is used internally when invoking structuredClone(), to transfer data between Workers via postMessage(), storing objects with IndexedDB, or copying objects for other APIs. It clones by recursing through the input object while maintaining a map of previously visited references, to avoid infinitely traversing cycles. Things that don
Window: structuredClone() method - Web APIs | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022. Learn more See full compatibility Report feedback The structuredClone() method of the Window interface creates a deep clone of a value using the structured clone algorithm. The method also allows transferable objects in the original value to be transferred rath
z-index を理解する - CSS | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 � �View in English ���Always switch to English 最も基本的な場合では、HTML のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。CSS はそれほど単純ではありません。CSS の位置指定、座標変換、コンテナー機能、その他の機能により、要素が重なることがあります。このガイドでは、同じ重ね合わせコンテキスト内で要素を他の要素の前または後ろに配置できる z-index プロパティを紹介します。 Z 軸のレイヤー ページ上に描画される要素は一連のボック
重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ��S�View in English ઽ�Always switch to English 重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。重ね合わせコンテキストは、Z 軸（画面上の「奥行き」のサイズと考えてください）に沿って要素が互いに重なり合う方法を決定します。重ね合わせコンテキストは、重なり合うコンテンツがどのようにレンダリングされるかの視覚的な順序を決定します。 重ね合わせコンテキスト内の要素は、その重ね合わせコンテキスト外の要素とは独立して重ね合わされます。これにより、ある重ね
キャンバスとピクセル操作 - Web API | MDN
前のページ 次のページ これまで、キャンバスの実際のピクセルは見てきませんでした。 ImageData オブジェクトを使用して、ピクセルデータを操作するためにデータ配列へ直接読み取りや書き込みを行うことが可能です。また、画像のスムージング（アンチエイリアシング）の制御方法やキャンバスの画像を保存する方法も見ていきます。 ImageData オブジェクト ImageData オブジェクトは、キャンバスオブジェクトの領域にあるピクセルデータを表します。これには以下の読み取り専用プロパティがあります。 width 画像の幅をピクセル数で表します。 height 画像の高さをピクセル数で表します。 data 0 から 255 の間の (両端の値を含む) 整数データを RGBA の順で収めた一次元配列を表す Uint8ClampedArray です。 data プロパティは、生のピクセルデータを参照
WebGL2RenderingContext - Web APIs | MDN
Note: WebGL 2 is an extension to WebGL 1. The WebGL2RenderingContext interface implements all members of the WebGLRenderingContext interface. Some methods of the WebGL 1 context can accept additional values when used in a WebGL 2 context. You will find this info noted on the WebGL 1 reference pages. Constants See the WebGL constants page. State information WebGL2RenderingContext.getIndexedParamete
キャンバスの最適化 - Web API | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �~W몪View in English @уꪪAlways switch to English 前のページ 次のページ <canvas> 要素は、ウェブで 2 次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバス API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。
WebAssembly テキスト形式の理解 - WebAssembly | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 � ��View in English ���Always switch to English WebAssembly を人間が読んだり編集したりできるようにするため、 Wasm バイナリー形式にはテキスト表現が存在します。これはテキストエディター、ブラウザーの開発者ツールなどで見せるために設計された中間表現です。この記事では、テキスト形式のしくみ、生の構文、および元のバイトコードの表現との関係 (と JavaScript で Wasm を表現したラッパーオブジェクト) について説明します。 メモ: この記事は、あなたがウェブ開発者で Wasm モジュールをページに読み込んでコード内で使用するだけなら過剰なものかもしれません (WebAssem
DOM - MDC
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 `�Ī�View in English �\vĪ�Always switch to English ドキュメントオブジェクトモデル (Document Object Model, DOM) は、ウェブページを表す HTML のような文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。ふつうは JavaScript を使用しますが、HTML、SVG、XML などの文書をオブジェクトとしてモデリングすることはコア JavaScript 言語の一部ではありません。 DOM は文書を論理的なツリーで表現します。ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。 D
Manipulating video using canvas - Web APIs | MDN
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Video test page</title> <style> body { background: black; color: #cccccc; } #c2 { background-image: url("media/foo.png"); background-repeat: no-repeat; } div { float: left; border: 1px solid #444444; padding: 10px; margin: 10px; background: #3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" con
CanvasRenderingContext2D.drawImage() - Web APIs | MDN
Parameters image An element to draw into the context. The specification permits any canvas image source, specifically, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a VideoFrame. sx Optional The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. Use the
音声と動画の加工 - ウェブメディア技術 | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 � � ��View in English P�� ��Always switch to English ウェブのよいところは、複数の技術をまとめて新しいものを作ることができる点です。ネイティブの音声や動画をブラウザー上で利用できるということは、これらのデータストリームを <canvas>、WebGL、Web Audio API を利用して操作することで、音声や動画に直接変更を加えることができることを意味します。例えば音声にリバーブやコンプレッション効果をかけたり、動画にグレイスケールやセピアのフィルターをかけたりすることができます。この記事では、必要なことを説明するためのリファレンスを提供します。 動画の加工 動画の各フレームからピクセルの値を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Document: scrollend event - Web APIs | MDN
AbortSignal: timeout() static method - Web APIs | MDN
Build a cross-browser extension
Crypto: randomUUID() method - Web APIs | MDN
