這不是我認(rèn)識(shí)的 MDN 吧？

2022年3月1日我在查資料時(shí)，意外發(fā)現(xiàn) MDN 竟然大變樣了！這還是我認(rèn)識(shí)的MDN嗎？

原來長啥樣來著？

不得不說，新版MDN的UI已經(jīng)跟上時(shí)代的潮流了啊~ 最早期的MDN是在Github上作為wiki開始出現(xiàn)的，現(xiàn)在它的靜態(tài)網(wǎng)站是掛在Github提供的靜態(tài)站點(diǎn)

MDN：https://developer.mozilla.org/

在MDN維護(hù)的十幾年內(nèi)，參與網(wǎng)站內(nèi)容共建的有 45000+ 的開發(fā)人員以及UI，導(dǎo)致原先的MDN網(wǎng)站內(nèi)容和樣式上有眾多的不一致，所以在2021年，MDN團(tuán)隊(duì)正式啟動(dòng)對(duì)網(wǎng)站樣式的重新設(shè)計(jì)，核心目的就是更加聚焦、更加簡潔~

首頁

一個(gè)網(wǎng)站打開，我一般第一眼會(huì)看它左上角的Logo，MDN也從原來的狗頭（是狗頭嗎？），換成了現(xiàn)在的字母Logo，據(jù)說這也是請(qǐng)了設(shè)計(jì)師的，而且最終選用的這個(gè)Logo還是由網(wǎng)友從官方提供的8個(gè)方案中投票篩選出來的！

你覺得這個(gè)Logo值多少錢（手動(dòng)狗頭）

從首頁看下來，原本在右上角的搜索功能，現(xiàn)在放到了網(wǎng)站的中央作為核心功能，這也確實(shí)是我們平時(shí)用的最多的功能

再往下是一個(gè)叫 Featured Articles 的模塊，主要就是向我們展示最近新特性或閱讀量較大的文章（值得關(guān)注一下）

最后展示了最新的 Contributor 在 Github 上的貢獻(xiàn)內(nèi)容

細(xì)心的你還能發(fā)現(xiàn)，右上角多了一個(gè)切換主題的 button

文章

再到具體的文檔里看看，現(xiàn)在的三欄布局：

• 左側(cè)是跟你當(dāng)前閱讀內(nèi)容強(qiáng)相關(guān)的 Reference Link
• 中間是你閱讀的文檔信息，不得不提一下這點(diǎn)，文檔內(nèi)容的樣式比以前好看太多了
• 右側(cè)是你當(dāng)前閱讀內(nèi)容的目錄，它會(huì)一直懸浮在那，點(diǎn)擊即可跳轉(zhuǎn)

兼容性

以前對(duì)于每個(gè)特性的兼容性，MDN是列的非常詳細(xì)，針對(duì)到每個(gè)屬性在每個(gè)瀏覽器的某些版本上是否支持，

其實(shí)我覺得這個(gè)還挺不錯(cuò)的，稍微看一眼就能知道版本的支持情況，不過對(duì)于大部分人來說，其實(shí)那個(gè)版本數(shù)字沒什么作用，因?yàn)槟愀静粫?huì)注意這些。所以MDN官方就移除了瀏覽器版本這個(gè)維度，從大局觀的角度來看該屬性在每個(gè)瀏覽器上是否支持，我覺得也是合理的

現(xiàn)在如果你真的要去查看非常詳細(xì)的瀏覽器版本維度的屬性支持情況，還是建議去 can i use 上看看，或者你親手去實(shí)踐檢驗(yàn)一下

can i use：https://caniuse.com/

國際化

原先的MDN的語言切換按鈕就在每篇文章的最底部，我一直覺得這個(gè)設(shè)計(jì)很不好，我剛進(jìn)來是英文，我要是想看中文，我得先從頭滑到底才能切換，這不是浪費(fèi)時(shí)間么！

肯定是被很多人吐槽了，這次的新版文檔，語言切換的按鈕放到了右上角