[インデックス 10977] ファイルの概要

このコミットは、Goプロジェクトのドキュメントで使用されているCSSファイル doc/all.css における、誤って記述されたCSSプロパティの修正に関するものです。具体的には、border-radius に関連するMozillaベンダープレフィックス付きプロパティのスペルミスが修正されています。

コミット

doc: fix misspelt CSS properties.

R=golang-dev, rsc
CC=golang-dev
https://golang.org/cl/5498071

GitHub上でのコミットページへのリンク

https://github.com/golang/go/commit/ddf67af01b49789974201c930a7b13993219c164

元コミット内容

commit ddf67af01b49789974201c930a7b13993219c164
Author: David Symonds <dsymonds@golang.org>
Date:   Fri Dec 23 08:48:21 2011 +1100

    doc: fix misspelt CSS properties.
    
    R=golang-dev, rsc
    CC=golang-dev
    https://golang.org/cl/5498071
---
 doc/all.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/doc/all.css b/doc/all.css
index 29c2895abc..8caab97206 100644
--- a/doc/all.css
+++ b/doc/all.css
@@ -81,15 +81,15 @@ h1#title {\n   -webkit-box-shadow: 0 1px 1px #ccc;\n }\n #nav-main li:first-child {\n-  -moz-border-top-left-radius: 4px;\n+  -moz-border-radius-topleft: 4px;\n   border-top-left-radius: 4px;\n-  -moz-border-bottom-left-radius: 4px;\n+  -moz-border-radius-bottomleft: 4px;\n   border-bottom-left-radius: 4px;\n }\n #nav-main li:last-child {\n-  -moz-border-top-right-radius: 4px;\n+  -moz-border-radius-topright: 4px;\n   border-top-right-radius: 4px;\n-  -moz-border-bottom-right-radius: 4px;\n+  -moz-border-radius-bottomright: 4px;\n   border-bottom-right-radius: 4px;\n }\n #nav-main .quickref {\n

このコミットの背景は、Goプロジェクトの公式ドキュメントサイトのスタイルシート doc/all.css に存在する、CSSプロパティのスペルミスを修正することです。具体的には、Mozilla Firefoxブラウザ向けのベンダープレフィックス付き border-radius プロパティにおいて、古いまたは誤った記述が使用されていたため、これを正しい形式に修正する必要がありました。これにより、ドキュメントの表示が意図通りに行われ、ブラウザ間の互換性が向上することが期待されます。

前提知識の解説

このコミットを理解するためには、以下の前提知識が必要です。

CSS (Cascading Style Sheets): ウェブページの見た目（レイアウト、色、フォントなど）を定義するためのスタイルシート言語です。HTML要素にスタイルを適用するために使用されます。
border-radius プロパティ: CSS3で導入されたプロパティで、要素の角を丸めるために使用されます。このプロパティは、単一の値で全ての角を丸めたり、複数の値で各角の丸め具合を個別に指定したりできます。
- 例: border-radius: 10px; (全ての角が10pxの半径で丸められる)
- 例: border-top-left-radius: 5px; (左上の角のみ5pxの半径で丸められる)
ベンダープレフィックス (Vendor Prefixes): CSS3の機能が標準化される前に、各ブラウザベンダーが独自に先行実装したプロパティに付けられた接頭辞です。これにより、ブラウザは新しい機能を実験的に導入し、開発者はそれらを早期に利用することができました。
- -moz-: Mozilla Firefox向け
- -webkit-: WebKitベースのブラウザ（Chrome, Safariなど）向け
- -o-: Opera向け
- -ms-: Internet Explorer/Edge向けベンダープレフィックスは、標準化が進むにつれて不要になり、最終的には削除されることが推奨されます。しかし、古いブラウザのサポートが必要な場合や、過渡期には使用されることがあります。
border-radius のベンダープレフィックスの歴史: border-radius プロパティは、CSS3の初期段階で各ブラウザが独自に実装を進めました。Mozilla Firefoxでは、当初 -moz-border-radius というショートハンドプロパティや、-moz-border-top-left-radius のようなロングハンドプロパティが使用されていました。しかし、これらのプロパティの命名規則や構文は、標準化の過程で変更されることがありました。このコミットで修正されているのは、まさにこの -moz- プレフィックス付きプロパティの古いまたは誤った構文です。

技術的詳細

このコミットは、doc/all.css ファイル内の特定のCSSプロパティの修正に焦点を当てています。修正されたプロパティは、Mozilla Firefox向けのベンダープレフィックス付き border-radius プロパティです。

具体的には、以下の4つのプロパティが修正されています。

-moz-border-top-left-radius が -moz-border-radius-topleft に変更
-moz-border-bottom-left-radius が -moz-border-radius-bottomleft に変更
-moz-border-top-right-radius が -moz-border-radius-topright に変更
-moz-border-bottom-right-radius が -moz-border-radius-bottomright に変更

これらの変更は、border-radius のベンダープレフィックス付きプロパティの命名規則の進化、または単なるスペルミスに起因すると考えられます。

歴史的に見ると、CSS3の border-radius プロパティが標準化される過程で、各ブラウザベンダーは独自のプレフィックス付きプロパティを導入しました。Mozilla Firefoxの場合、初期には -moz-border-radius のようなショートハンドや、-moz-border-top-left-radius のようなロングハンドが使われていました。しかし、より一般的な命名規則に合わせる形で、-moz-border-radius-topleft のような形式が採用された時期がありました。このコミットは、おそらく古いまたは誤った形式のプロパティが使用されていた箇所を、当時のFirefoxが正しく解釈する形式に修正したものです。

現代のCSSでは、border-radius プロパティはほとんどのブラウザでベンダープレフィックスなしで完全にサポートされており、border-top-left-radius のような標準的なロングハンドプロパティを使用することが推奨されます。しかし、このコミットが作成された2011年当時は、まだベンダープレフィックスが広く使用されており、ブラウザごとの実装の違いに対応する必要がありました。

この修正は、GoドキュメントサイトのCSSが、当時のFirefoxブラウザで正しく角丸をレンダリングできるようにするための、互換性維持のための変更と言えます。

コアとなるコードの変更箇所

このコミットは、doc/all.css ファイルのみを変更しています。具体的な変更は、以下のCSSプロパティの置換です。

--- a/doc/all.css
+++ b/doc/all.css
@@ -81,15 +81,15 @@ h1#title {
   -webkit-box-shadow: 0 1px 1px #ccc;
 }
 #nav-main li:first-child {
-  -moz-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
-  -moz-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
 }
 #nav-main li:last-child {
-  -moz-border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
-  -moz-border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
 #nav-main .quickref {

この差分は、doc/all.css 内で、#nav-main 要素内の li:first-child と li:last-child セレクタに適用されている -moz-border-radius 関連のプロパティが修正されていることを示しています。

コアとなるコードの解説

変更されたコードは、Goドキュメントサイトのナビゲーションメニュー (#nav-main) のリストアイテム (li) の角を丸めるためのスタイル定義です。

#nav-main li:first-child: ナビゲーションメニューの最初の項目に適用されるスタイルです。ここでは、左上の角と左下の角を丸めるためのプロパティが定義されています。
- -moz-border-top-left-radius: 4px; が -moz-border-radius-topleft: 4px; に変更されました。
- -moz-border-bottom-left-radius: 4px; が -moz-border-radius-bottomleft: 4px; に変更されました。
#nav-main li:last-child: ナビゲーションメニューの最後の項目に適用されるスタイルです。ここでは、右上の角と右下の角を丸めるためのプロパティが定義されています。
- -moz-border-top-right-radius: 4px; が -moz-border-radius-topright: 4px; に変更されました。
- -moz-border-bottom-right-radius: 4px; が -moz-border-radius-bottomright: 4px; に変更されました。

これらの変更は、古いまたは誤った形式のMozillaベンダープレフィックス付き border-radius プロパティを、当時のFirefoxブラウザが正しく解釈する形式に修正することを目的としています。これにより、Goドキュメントサイトのナビゲーションメニューの角丸が、Firefoxで意図通りに表示されるようになります。

また、各変更箇所には、ベンダープレフィックスなしの標準プロパティ (border-top-left-radius, border-bottom-left-radius など) も併記されています。これは、モダンなブラウザが標準プロパティを解釈し、古いFirefoxブラウザがベンダープレフィックス付きプロパティを解釈するという、フォールバックの仕組みを提供しています。これにより、幅広いブラウザで一貫した表示が保証されます。

参考にした情報源リンク

CSS border-radius プロパティに関するMDN Web Docs: https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
CSS ベンダープレフィックスに関する情報 (Stack Overflow, Medium, CSS-Tricksなど):
border-radius のベンダープレフィックスの歴史に関する情報 (Web検索結果より)
- weser.io (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQE9RITGlcwJ5QwbPTg1A-xP29WE4rBaa5dOzvuOxcNCs5f0QBHEllzFm-bAqaEwho5QPwgwQZ6n2sAFQ2vUGwNrCs-57eRys5rL3X_KbLOcwMT0APbHGzdYaIPTB58yzs-m8wyqvkP2)
- wiktionary.org (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQHbe9DH6aq5Iyj6sgGzf0m528SMHZ9K-10th8W5bbxi2H52f8ia5KgDcnXn7geXpWC5iVGRuMECXaFFSJygGqOrM_TQtdvW4m9Iz_rcgNCDq-knXS3unKzQ9gZKm8j5iCQspwU=)
- techterms.com (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQHGtDKgwbCY0spWNWIPnIxobCnHMdUtw8e0BKV3Fn-FntW2Rh4OB4GVNu3XxAV9UGn0uvv5duZOWjxuo5cqR50KnMfTAwugHK6wl9hi1-WbdpOdeVMGq49x2vp5JKKZBkxjEMyfnw==)
- dictionary.com (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQGlAzrdbuBNzqyt1ZhsrRYZJZfYsagYzOL9agCb0uystHq0GV2iPYA4EyCPybILqmlma8GENVhsxjD9na_-pcKJ6J_r83VawgyyYaaNOb0dNpnNh7GuTNAnAhcqDcsHF4EY7jiubws=)
- wikipedia.org (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQE48PN7leOWc3z6BQsLbR7giUIdxGeHwpUWu-9CACXrC9jyfYfx6vlsmQNvRq3l6Weq5iJ6DTscic_wTFByUEOPS65yj7yrrxCp2p_FdhjT2q6dutruuXM59AaIXIOaV2wm6AI=)
- stackoverflow.com (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQGg3CY75Yj1IKDwiGB-_CP80R8HueZLeC4T9_XrCLeRnNc5koyIQbIcHWeeDtyyTnKYnKM5wjL31kINMjVgL29s0VzG9S4fjDI4aaFdgeZ5K3uYkCXHhkwdufj7sq7L942S75BZR5Wwr7uqwtYY6gIlKx24k0aMIPZozIceZn1iSr9Rcg==)
- css-tricks.com (https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQHFJNuAmG5RQlcKrSZJzqgJTsMZkFSm-ZgeQQg58FgGROWU0g41LFmQri7TVYdPVpfGwT5b1Ob_1s5fdR4sNd1EJVFh_1jGlm01pAkkbqyb4SvkZIISVreKQoWO3Z-sGVwcdluxZqodc7ql2YkE-BzNfVoD7w==)

comemo