はてなブックマーク

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

HTTP defines a set of request methods to indicate the purpose of the request and what is expected if the request is successful. Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs. Each request method has its own semantics, but some characteristics are shared across multiple methods, specifically request methods can be safe, idempotent, or cacheable. GET

解説 ほとんどのグローバルオブジェクトとは異なり、 Temporal はコンストラクターではありません。 new 演算子と一緒に使用したり、 Temporal オブジェクトを関数として呼び出したりすることはできません。 Temporal のすべてのプロパティとメソッドは静的です（Math オブジェクトと同様）。 Temporal は複雑で強力な API を備えています。複数のクラスを通じて 200 以上のユーティリティメソッドを公開しているため、とても複雑に見えるかもしれません。これらの API が互いにどのように関連しているかを、概要で説明します。 背景と概念 JavaScript には、その誕生当初から日付と時刻を処理するための Date オブジェクトが存在していました。しかし、Date API は、設計が良くなく 2010 年代初頭に置き換えられた Java の java.util.

If you missed the previous posts in this series, start with the Part 1: Color models for humans and devices and Part 2: Pixel data from encoders to decoders. They covered the basics of image compression. Now, in this final part, we'll take a more hands-on approach. We'll run some experiments with different codecs and compression techniques, and check out some useful tools for building your own ima

Imagine if your site could animate smoothly between pages – taking you from say index.html to about.html – without a jarring reload. Well, this is possible now, thanks to the support for View Transition API in modern browsers. View transitions were once exclusive to single-page applications (SPAs). In this post, we'll explore how view transitions bring smooth, animated navigation to multi-page app

text-autospace: normal; text-autospace: no-autospace; text-autospace: ideograph-alpha; text-autospace: ideograph-numeric; text-autospace: punctuation; text-autospace: insert; text-autospace: replace; text-autospace: ideograph-alpha ideograph-numeric punctuation; text-autospace: ideograph-alpha ideograph-numeric; text-autospace: ideograph-alpha ideograph-numeric insert; text-autospace: auto; /* グロー

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English Always switch to English このページでは、 Markdown を使用してどのように MDN Web Docs のドキュメントを書くかを説明します。ベースラインとして GitHub-Flavored Markdown (GFM) を選択し、 GFM では容易にサポートされていない MDN で行う必要のあるいくつかのことに対応するために、いくつかの拡張機能を追加しました。 ベースライン: GitHub-Flavored Markdown MDN Markdown のベースラインは GitHub-Flavored Markdown (GFM、 https://github.github.com/g

以下のガイドラインは MDN Web Docs の JavaScript のサンプルコードの書き方について述べたものです。この記事は、可能な限り多くの人が理解できるような簡潔な例を書くためのルールをまとめたものです。 JavaScript サンプルコードに関する一般的なガイドライン この節では、 JavaScript のサンプルコードを書く際に留意すべき一般的なガイドラインを説明します。後の節では、より具体的な詳細について説明します。 書式の選択 正しいインデント、ホワイトスペース、行の長さに関する意見は常に論争の的となってきました。このようなトピックに関するディスカッションは、コンテンツを作成したり維持したりすることの妨げになります。 MDN Web Docs では、コードスタイルの一貫性を保つために（そしてトピック外の議論を避けるために）、コード整形ツールとして Prettier を使

This feature is not Baseline because it does not work in some of the most widely-used browsers. Want more support for this feature? Tell us why. Learn more See full compatibility Previous Next This article explains how to create fully-customized <select> elements using experimental browser features. This includes having full control over styling the select button, drop-down picker, arrow icon, cur

This feature is not Baseline because it does not work in some of the most widely-used browsers. Want more support for this feature? Tell us why. Learn more See full compatibility The Temporal object enables date and time management in various scenarios, including built-in time zone and calendar representation, wall-clock time conversions, arithmetics, formatting, and more. It is designed as a full

キーボード API Experimental Keyboard Experimental インスタンスメソッドgetLayoutMap() Experimental lock() Experimental unlock() Experimental 継承EventTargetKeyboard API に関連するページKeyboardLayoutMap Experimental Navigator.keyboard Experimental

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 P���View in English �� �Always switch to English このページには、Firefox の実験的機能および部分的に実装されている機能、および開発中または提案中のウェブプラットフォーム標準が記載されています。 以下の各項目には、その機能が含まれているビルド（Nightly、Beta、Developer Edition、Release）、その機能が既定で有効になっているかどうか、およびその機能を有効化または設定するために使用できる環境設定の名前に関する情報が記載されています。 それぞれの機能の説明には、その機能を実装または有効にする Bugzilla のバグへのリンクも記載されています。 この情報により、実験

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

Since ⁨August 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. Learn more See full compatibility Report feedback

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page cont

引数 string JSON テキストです。プリミティブ値を表す有効な JSON でなければなりません。 返値 指定された文字列と全く同じ内容を持つ JSON テキストを作成するために使用することができるオブジェクトで、文字列自体を囲む引用符はありません。このオブジェクトのプロトタイプは nullであり、プロトタイプを保有し、凍結されています（そのため、何らかのプリミティブ変換によって誤って通常のオブジェクトとしてシリアライズされることはありません）。 rawJSON 提供された元の JSON の string です。 さらに、プライベートフィールドを持ち、それ自身を生の JSON オブジェクトとしてマークします。これにより、 JSON.stringify() と JSON.isRawJSON() で識別できるようになります。 例外 SyntaxError 文字列 string が有効な

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �0�Ԫ�View in English �ՐԪ�Always switch to English 最上位レイヤーは、ビューポートの幅と高さ全体にわたり、ウェブ文書内に表示される他のすべてのレイヤーの最上位に位置する固有のレイヤーです。これは、ページ上の他のすべてのコンテンツの上に現れるべき要素を含むために、ブラウザーによって作成されます。 最上位レイヤーに配置された要素は新しい重ね合わせコンテキストを生成し、対応する ::backdrop 擬似要素も生成します。 最上位レイヤーに現れる要素は以下の通りです。 全画面要素、つまり Element.requestFullscreen() の呼び出しが成功して全画面モードで表示するように指定された要素

const segmenterFr = new Intl.Segmenter("fr", { granularity: "word" }); const string = "Que ma joie demeure"; const iterator = segmenterFr.segment(string)[Symbol.iterator](); console.log(iterator.next().value.segment); // 予想される結果: 'Que' console.log(iterator.next().value.segment); // 予想される結果: ' ' コンストラクター Intl.Segmenter() 新しい Intl.Segmenter オブジェクトを作成します。 静的メソッド Intl.Segmenter.supportedLocalesOf() 指定

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 `> 㪪View in English `t�㪪Always switch to English テキストフラグメントは、URL フラグメントの特定の構文を使用することにより、作成者が ID で注釈を付けなくても、ウェブ文書内のテキストの特定の部分に直接リンクできるようにするものです。対応しているブラウザーは、リンクされたテキストに注意を引く方法を自由に選べます。例えば、色の強調表示やページ上のコンテンツへのスクロールなどです。これは、ウェブコンテンツの作成者が、使用可能な ID が存在しなくても、制御下にない他のコンテンツに深くリンクすることができるため有益なものです。さらに、ユーザーが互いに交換するための、より効果的なコンテンツ共有リンクを生

要素に適用される CSS の各プロパティには、1 つの値しかありません。ある要素に適用されるすべてのプロパティ値は、ブラウザー開発者ツールでその要素を検査することで確認できます。ツールの「スタイル」パネルには、検査対象の要素に適用されているすべてのプロパティ値と、一致するセレクター、CSS のソースファイルが表示されます。元からあるセレクターが優先され、その値が一致する要素に適用されます。 スタイルパネルには、適用されたスタイルに加えて、選択した要素に一致するが、カスケード、詳細度、ソース順のために適用されなかった値が、取り消し線で表示されます。取り消し線が引かれたスタイルは、優先順位は同じだが詳細度が低いオリジン間、またはオリジンと詳細度が一致するがコードベース内でより早く見つかったものである場合があります。適用されたプロパティ値には、多くの異なるソースから消し込まれた宣言がある可能性が