那個時候我嘗試在沒有CSS的情況下瀏覽網絡

CSS是賦予每個網站設計的原因。沒有它，網站肯定不是很有趣和友好！我已經閱讀了一個星期沒有JavaScript的人，以及經驗如何導致更快的網站，儘管它們的某些方面無法按預期運行。

但是CSS。在瀏覽網絡時關閉CSS並不能完全使網絡少可用……對嗎？或者，像JavaScript一樣，某些功能是否可以正常工作？出於好奇，我決定給它一個旋轉，並在瀏覽幾個站點時將CSS的肉從HTML骨架上撕下。

為什麼，您可能會問？是否有任何非宣傳原因關閉CSS？ Heydon Pickering曾經在推特上發布禁用CSS是檢查某些可訪問性標準的好方法：

1. 標題，列表和表單控件等常見元素是語義的，而且看起來仍然不錯。
2. 仍以默認樣式建立視覺層次結構。
3. 內容仍然可以按邏輯順序讀取。
4. 圖像仍然以標籤而存在，而不是像CSS背景一樣迷失。

2018年的WebAIM調查報告說，有12.5％的用戶依靠任何類型的輔助技術瀏覽Web使用自定義樣式表，其中包括取消網站上的每份CSS聲明。而且，如果我們談論的是互聯網慢的連接，那麼拋棄CSS可能是更快消費內容的一種方法。由於我們的直接控制之外的原因，例如服務器無法加載資產時，CSS也有可能被禁用。

作為一個實驗，我使用了五個網站和一個沒有CSS的網絡應用程序，這篇文章將涵蓋我的經驗。對我個人而言，這是一次令人大開眼界的冒險，但我也希望以我的方式專業地將我作為開發人員告知我。

但是首先，這是禁用CSS的方法

您絕對歡迎您以這篇文章的形式通過我來現場直播。但是，對於那些想完成任務並想體驗無風格網絡的人來說，這是如何在各種瀏覽器中禁用CSS的方法：

• Chrome：實際上，Chrome中沒有設置可以禁用CSS，因此我們必須求助於延伸，例如Disable-HTML。
• Firefox：查看>頁面樣式>沒有樣式
• Safari： Safari >首選項... >在菜單欄中顯示開髮菜單。然後轉到開發下拉列表，然後選擇“禁用樣式”選項。
• 歌劇：像Chrome一樣，我們需要擴展名，Web開發人員適合該法案。
• Internet Explorer 11：視圖>樣式>沒有樣式

我找不到一種記錄的方法來禁用EDGE中的CSS，但是我們可以通過DevTools Console中的CSS對像模型API從其編程中刪除CSS以及任何其他瀏覽器：

 var d =文檔;

對於（s = d.StylesHeets）
    s [s] .disabled = true;

for（i = d.d.queryselectorall（“ [style]”）））
    i [i] .spyle =“”;

第一個循環禁用所有外部和內部樣式（在和中），第二個循環消除了任何內聯樣式。但是，這裡需要注意的是，元素仍然可以動態地給予新的內聯樣式。為了立即刪除它們，最好的解決方法是添加計時器。這樣的事情：

 （f = function（）{
    //刪除CSS
    ...

    Settimeout（F，20）;
}）（）;

另外，還有隻有文本的瀏覽器，例如古老的Lynx，但期望沒有視頻，圖像（包括SVG）和JavaScript生活。

透過無樣式的玻璃...

對於每個網站，我都沒有CSS（亞馬遜，Duckduckgo，github，stack溢出，Wikipedia和對比檢查器）稱為Hex Naw-稱為Hex Naw-我將分享我的第一印象，並提出一些建議，這可能有助於體驗。

準備好，因為事情可能會有點……令人震驚。 ？

網站1：Amazon.com

這裡沒有真正的介紹。亞馬遜不僅是我們許多人的家用主食，而且由於其無處不在的亞馬遜網絡服務平台，它還為網絡的很大一部分提供了動力。

這裡有很多事情正在發生，所以我將探索在找到產品並假裝購買產品時所吸引的無風格的東西。

在主頁上，我立即看到該網站使用的精靈表。它確實代替了徽標的位置，因此很難知道這些圖像是否旨在存在。每個精靈都包含多個版本的徽標，即使我可以看到其中的“亞馬遜”單詞標記，但令人驚訝的是，它不是全球家庭鏈接。如果您很好奇家庭鏈接的真正位置，就是這種跨度結構，徽標被用作背景圖像……在CSS中：

 <a href="%E2%80%9C/ref" nav_logo aria-label="“" amazon tabindex="“">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

出現的下一個問題是“跳到主內容”鏈接看起來不像典型的跳過鏈接，但它的工作方式像一個鏈接。事實證明，它是沒有HREF的元素，而JavaScript（是的，我確實離開了該啟用）來模仿錨點功能。

當我開始搜索時，我必須在“入門”鏈接下方進一步查看建議。在“您的列表”和“您的帳戶”項目下，很難區分鏈接。它們似乎都串在一起，好像它們是一個超長的大型鏈接一樣。我相信，在這種情況下，使用語義無序列表來保持層次結構會更有效。

但是，在所有這些搜索建議下，帳戶和導航鏈接易於閱讀，因為它們被某些空間分開。

有趣的是，頁面下方的輪播仍然有效。如果我單擊“上一頁”或“下一頁”選項，則更改圖像的順序。但是，在這些選項之間跳躍需要我滾動。

進一步跳下來，有一個廣告元素。它包含一個“廣告反饋”字符串，看起來像我們在“跳過到主內容”鏈接的“跳過到主內容”鏈接中所看到的那樣。好吧，我無論如何都單擊了它，它揭示了一種表格，以分享有關廣告相關性的反饋。

您可能已經錯過了它，但是兩組標籤上方有一個空白按鈕，並且收音機按鈕不合適。結構令人困惑，因為我不知道哪個標籤屬於哪個無線電按鈕。我的意思是，我想我可以假設第一個標籤與第一個無線電輸入有關，但這正是這樣：一個猜測。

令人困惑的是，在表單底部的“關閉窗口”，“取消”和“發送反饋”選項之間存在提交按鈕。如果我按其中任何一個，我會回到廣告中。現在，假設我是盲目的，即使存在CSS，也使用屏幕讀取器來導航相同的部分。我會被告知兩個按鈕的“提交，按鈕”，因此在不猜測的情況下將零知道該怎麼做。這是關於語義在處理標記時的重要性的另一個好提醒（在這種情況下按鈕標籤），並註意在JavaScript上放置多少依賴以覆蓋Web默認值。

進行搜索 - 假設“ Mac Minis” - 我仍然可以訪問和理解產品評分，因為它們被顯示為文本（代替了它們本來是其他工具提示）代替恆星。這是一個很好的例子，當圖像用作視覺內容時，使用堅實的文本回退，但在CSS中被用作背景圖像。

選擇Mac Mini使用Intel Core i3選擇了我選擇的產品上方的其他Mac產品，並且必須超越它們以選擇我要購買的數量。

向下滾動，並在帶有相同內容的標籤旁邊顯示一個“添加到購物車”按鈕。這是多餘的，可能是不必要的，因為元素能夠持有自己的標籤：

 添加到購物車

接下來，我們將提供亞馬遜優勢會員資格的報價。這一切都很好，但是請注意，它是在我購買的產品和“立即購買”按鈕之間插入的。我很難知道單擊“立即購買”是否會添加Mac mini來結帳，還是我是購買Amazon Prime。

我還想玩一些，所以一旦我弄清楚瞭如何添加它，我就嘗試從購物車中刪除Mac mini。我花了大約十秒鐘的時間來找到購物車，所以我可以編輯它。事實證明，它直接在“繼續結帳（1個項目）”鏈接旁邊，但並在其旁邊向上撞，因此所有這些鏈接看起來都像一個鏈接。

總體而言，找到產品並不難。另一方面，隨著我的進行，結帳的道路更加頭疼。有一些與語義和可訪問性相關的糟糕的實踐引起了混亂，重要的按鈕和鏈接變得更加困難。

？該網站做得很好	？網站可以改善什麼
即使沒有樣式，旋轉木馬也是實用的。	徽標依靠背景圖像，掩蓋了回家的路徑。
內容層次結構通常仍然有助於了解我們在頁面上的位置。	許多鏈接和錨點都依賴JavaScript，並且似乎並不互動。
元素的順序大致保持穩定。	鏈接通常相互碰撞或將其放置在其相關的地方。
大量使用後備作為依賴背景圖像的產品評級。	按鈕標籤是誤導或重複的。
	形式要素無法正確對齊。
	有一個艱難的旅程要結帳。

網站2：DuckDuckgo

您以前使用過DuckDuckgo嗎？我認為許多閱讀CSS漫步的人都有，但是對於那些可能是第一次聽到的人來說，這是Google搜索的替代方法，重點是用戶隱私。

因此，開始時有點誤導，因為DuckDuckgo首頁非常簡單。那裡沒有什麼問題，對嗎？好吧，這比這比這更重要的是，因為我們要處理搜索搜索查詢後處理搜索結果，內容層次結構和相關性。

馬上，我受到歡迎的內容比我對如此簡單的著陸器所期望的要多得多。在掃描網站時，目前尚不清楚這是哪個網站。第一個提及產品名稱是第一個無序列表中的第四項，這是“傳播DuckDuckgo”的呼籲。徽標完全缺少，這顯然意味著它被用作背景……在CSS中。

說到那個無序的列表，我認為我看到的屬於標題中，並且沒有跳過導航。我們有一個三重箭頭圖標（這是一個移動菜單或菜單來隱藏最不重要的項目，或其他內容？），其次是與隱私相關的內容，社交媒體鏈接，看起來像一個鏈接，但實際上是“關於DuckDuckgo”和“ Duckduckgo”和“了解更多信息”的兩個鏈接。

最後，朝下是該網站的主要用例實際上出現的地方：搜索欄。我認為“ S”標籤的意思是“搜索”，而“ X”標籤是清除搜索字段的簡寫。

好吧，進行搜索。我仍然可以看到自動探測並使用上下箭頭鍵突出顯示每個箭頭是非常酷的。但是，清除該領域，建議直到我刷新頁面後才消失。

設置菜單中的所有內容均為列表中的項目，包括“設置”，“隱私必需品”，“為什麼隱私”，“我們是誰”和“保持聯繫”。如果啟用CSS，這些可能是移動男士的一部分，也許是由頂部的三重箭頭鏈接觸發的。在該菜單中，我看到“設置”和“更多主題”之間的四個空白項目符號。

作為新用戶來到這裡，我不知道那些空列表項目是什麼，但是我在上面的屏幕截圖中突出顯示的子彈實際上是主題按鈕。為了澄清意圖，一些後備文本將有所幫助，這些文本應該是無線電或普通按鈕而不是列表項目（考慮其功能）。

每個內容都沒有“ X”（包括“設置”）的每個內容。但是，單擊徒步旅行者映像圖像上方的“ X”確實會導致大量內容清除屏幕 - 這要歸功於JavaScript仍在啟用。我真正發現尷尬的是“切換到Duckduckgo……”下的有序列表中的冗餘計數……我們看到了：

 1。1我們不存儲您的個人信息
2。2我們不要跟隨您的廣告
3。3我們不跟踪你。曾經。

看起來一些混合用例的語義標記案例以及其他一些顯示列表項目編號的方法。

遠足者圖像下方有巨大數量的空白，直到第一個

元素。假設它們是鏈接或按鈕，請單擊“將DuckDuckgo添加到[瀏覽器]的每個實例”無濟於事。每個部分的插圖都會導致一些不必要的水平滾動，這是我們在其他網站中看到的常見問題。

在這些部分之後，有一個空白框，我不知道它是什麼。

我破解了開放的DevTools，事實證明是

在此之後，我看到了兩個重複的實例“設置為默認搜索引擎”，圍繞著“設置為主頁”部分。

當我單擊“添加DuckDuckgo…”動作時，這些一定是彈出的說明，但它顯示了隱藏的影響並顯示內容時可以使用直接標記。相應的鏈接或按鈕不用重複內容，應指向一個實例。那將減少這裡的冗餘。

好的，是時候最終進入搜索了。我在搜索結果中看到的第一件事是一個空盒子，其中包含指令以忽略盒子。那時。

繼續前進，您看到Duckduckgo鏈接了嗎？那一定是徽標，我想知道為什麼這不在主頁上。似乎是低懸垂的水果以改進。

除了“ S”和“ X”按鈕外，搜索欄仍然正常運行，這些按鈕已將其在主頁上的位置交換。

在搜索結果上。我可以很容易地將一個結果與另一個結果區分開。我發現不必要的，但有趣的是，“您的瀏覽器表示您是否訪問了此鏈接”消息，該消息位於每個頁面的末尾。從屏幕閱讀的角度來看，這將非常煩人。想像一下，在每個頁面標題的末尾都重複聽到。該消息傳遞與包含包含該消息傳遞的工具提示的選拔標記一起顯示。但是，由於禁用CSS，沒有任何檢查標記，也沒有工具提示。結果，我所得到的只是一個長時間的標題。

通常以不同類型的結果（例如圖像）過濾的標籤顯示的導航欄似乎在這一點上無能為力，因為很難說它們是過濾器而無需樣式的過濾器。但是，如果我單擊映像過濾器，則圖像結果實際上將下部下方加載到頁面上，直接堆放在Web結果的頂部，因此頁面變長了。哦，您可能會認為，滾動一直返回（這是很長的路），然後單擊另一個過濾器，例如視頻，可以替換圖像，但這只是在下面插入視頻縮略圖圖像，這使已經成為超級巨型長頁的圖像成為超級巨型長頁。想像所有這些資產的頁面重量！

好吧，你不必。根據DevTools的說法，僅圖像佔831個請求，總重量為23.7 MB。 hefty！

最後幾個物品值得注意。單擊“發送反饋”鏈接顯然沒有任何作用。也許觸發了CSS的模態？而且，儘管“所有區域”鏈接不像一個鏈接，但我很容易忽略它，但我很好奇地單擊它，並被帶到了一個國家列表的錨點。最後兩個鏈接剛剛使其相應的內容出現在列表國家選項下。

這裡有很多事情發生，顯然有改進的機會。例如，有些呼叫作為正常文本顯示為鏈接或按鈕。另外，我們認為CSS禁用的網站的性能會變得更好，但是搜索結果中的所有加載資產都令人難以置信。也就是說，搜索體驗一點也不痛苦……也就是說，除非您在執行圖像或視頻中挖掘圖像或視頻。

？該網站做得很好	？網站可以改善什麼
搜索是一致的，並且在有或沒有CSS的情況下使用。	一個“跳過”鏈接將有助於瀏覽鍵盤。
內容層次結構使內容易於閱讀和搜索結果是乾淨的體驗。	“設置”菜單中的非鏈接項目應該是單獨的無序列表的標題，因此對於如何將選項分組有一個明確的層次結構。
在搜索結果頁面的頂部充分利用主頁鏈接。	某些內容要么重複或重複，因為該站點依賴於有條件地顯示和隱藏內容。
	確保所有採取行動渲染的呼叫都作為鏈接而不是純文本。
	使用後備解決方案過濾搜索結果的類型，以防止項目堆疊並幫助控制大量頁面重量。

網站3：Github

嘿，這是我們許多人非常熟悉的網站！好吧，我們許多人都習慣了一直登錄它，但是我將在登錄時衝浪。

已經有一個跳過鏈接（是的）。我希望還有一個移動導航圖標無能為力，並且在我嘗試時被證明是正確的。

在某些導航項目之間，存在不必要的巨大差距。如果單擊這些，它們仍然充當下拉菜單。它們是和

元素……但是在語義上有些錯誤。菜單項實際上是未排序的列表項目，並且本機瀏覽器功能仍然可以通過使用語義擴展內容來進行，這真是太好了。但是，那個SVG偶像使我感到困惑。

在將任何內容鍵入現場之前，我會看到三個“搜索所有github”和“跳到”鏈接的實例。我不知道要單擊哪個，但是如果我進行搜索，則關鍵字顯示在第三組中。

主頁上的其他所有內容似乎都很好，除了許多過大的圖像水平溢出窗口。

讓我們回到搜索欄，導航到我們可以找到的任何回購。就在搜索按鈕下，我們有兩個幾乎相同的輔助導航欄，它們返回存儲庫計數，代碼，提交和其他meta。沒有查看來源，我不知道擁有兩個目的是什麼。

存儲庫頁面仍然具有易於遵循的結構和邏輯層次結構。在登錄並在到達之前清除我的緩存時，“ JOIN GITHUB TODAY”塊的“解散”按鈕仍然可以按照我的期望。就像我們早些時候在亞馬遜上看到的一樣，標籤鏈接很難分開，因為它們是一行。

接下來的兩個按鈕 - “ JavaScript”和“ New Pull請求” - 當我單擊它們時，似乎沒有做任何事情。我想像拉動請求按鈕應在視為客人時被禁用，除非它打算讓用戶先登錄屏幕……但即使那感覺也不正確。事實證明，當CSS處於活動狀態時，該按鈕確實被禁用。然後，頁面的其餘部分非常容易理解。

如果您在這裡主要是為了管理，貢獻或檢查存儲庫，那麼由於層次結構表現良好，您將不會面臨很多摩擦。無論您是查看拉的請求，問題還是單個文件，您都會在其他地方體驗幾乎相同的情況。大多數障礙生活在網站上不太突出的頁面中。

？該網站做得很好	？網站可以改善什麼
許多頁面的層次結構和結構確實很容易遵循，並使邏輯意義化。	使用元素和SVG上的高度和寬度屬性來防止它們炸毀。
頁面上嵌入的大多數SVG圖標都是適當尺寸的。	注意空列表項目。
很好地利用了標題中的跳過鏈接。	確保按鈕標籤使用完整單詞。
	確保鏈接之間有空白或線路斷裂，以防止跑步。

網站4：十六進制

下一個網站是我經常使用的在線工具檢查顏色對比度以供訪問。對於一個顏色如此之大的網站，CSS可能會發生很多事情，因此它應該變得有趣。

在導航上方有大量空間，沒有跳過鏈接。用於測試的每種顏色旁邊的移動佈局和“ X”按鈕的漢堡包和關閉按鈕超大。

哦，然後查看“測試顏色”按鈕和下一部分內容之間的巨大差距。

該網站的許多不錯的功能之一是一個複選框，它使您只能看到通過測試的顏色，而不是查看所有經過測試的顏色。不幸的是，該按鈕對禁用CSS無能為力。但是，我仍然可以看到直接在結果表中的對比度，大文本和小文本的定義有效，並獲得定義。

隱藏和顯示術語可能是該按鈕對CSS所做的。令人沮喪的是，我不知道桌子標題後那些單個字母（例如S和R）的目的。看到表之後的所有失敗顏色的消息也是諷刺和令人困惑的，因為，此列表中有傳遞顏色。可以做的是默認將其隱藏，但是如果單個測試中的所有顏色失敗，則有條件地將其註入。

拔出DevTools，事實證明，頂部的一些空白是Hex Naw徽標作為SVG文件。與該頁面使用的其他SVG符號相關聯的空間。通過為徽標使用默認的黑色顏色，這將有助於減少一些空間。我對DevTools進行了快速的更改，這有很大的變化。

空間的第二個間隙是由SVG加載器引起的，該SVG裝載機在計算顏色對比度時出現。可以通過指定更小但比例的，寬度和高度與移動菜單和“ X”圖標的高度來幫助這一點。

在每個SVG中添加初始寬度和高度肯定會減少滾動的需求。這也是我們也可以採取的措施來解決Github導航中看到的空白。

最終，沒有CSS，HEX NAW仍然非常有用。我仍然可以測試顏色，通過和失敗的顏色結果，並在頁面周圍導航。太糟糕了，我無法使用實際的顏色，不得不圍繞那些超大的SVG圖標工作。

？該網站做得很好	？網站可以改善什麼
該站點在整個網站中保持良好的內容層次結構。	SVG應使用後備填充顏色並使用高度和寬度屬性。
所有元素都是用語義寫的。	可以動態添加和刪除所有失敗顏色的反饋，以防止尷尬的消息傳遞。
測試本身正常運行，除了能夠顯示或隱藏信息。	考慮一種顯示顏色的替代方法，例如所測試的值，例如具有背景顏色屬性的表單元格。

網站5：堆棧溢出

像GitHub一樣，Stack Overflow是我們許多人（如果不是大多數人）保留在我們的後袋中的資源之一，因為它有助於找到某人是否已經問了一個開發問題和對它們的答案。

在頁面上要提出問題，我在主元素上方看到了一堆空白子彈點。我不知道為什麼那些空列表項目在那裡。我也看不到任何格式的按鈕，但是在弄亂了一點之後，我發現它們恰好只是空白列表項目。也許每個項目的後備文字或SVG圖標都會有助於確定這些內容和做什麼。它們也應該變成真實的按鈕。

在將文本輸入標題字段時，仍然可以找到類似問題的列表。這裡的每件事都是預期的，這很好。雖然，奇怪的是，每個建議的問題的投票都算過兩次，一旦以鏈接而高於標題，並且在標題旁邊又不受鏈接。

降落在堆棧溢出問題頁面時，我們所有人都尋找的關鍵元素之一是，大綠色檢查標記，可以在所有提交的答案中指示正確的答案。但是，隨著CSS關閉，很難說出哪個答案被接受，因為列表中的每個答案都有一個黑色檢查標記。即使接受的答案始終處於頂部，仍然沒有其他選擇或後備指示，而無需與頁面互動。此外，沒有跡象表明您是否已經投票或投票給了問題或任何答案。

為了總結我在Stack Overflow上的經驗，我能夠完成我通常來到網站的內容：找到編程問題的答案。也就是說，確實有一些改進的機會，這個網站是設計通常依賴顏色來指示頁面上的層次結構或價值的一個典型例子，在本實驗的問題頁面上，這在頁面上非常缺少。

？該網站做得很好	？網站可以改善什麼
幾乎每個元素都是用語義編寫的。	在詢問或回答問題時使用明確的控件來識別編輯工具。
SVG圖標使用寬度和高度屬性。	考慮一個視覺圖標，以將所接受的答案與問題的其他答案區分開。
答案列表清晰易於掃描。	考慮一種不同的方法來表示投票或單獨顏色以外的投票。

網站6：維基百科

Wikipedia，網絡的主要參考點！這是一個在線主食，其吸引人的品質之一是缺乏設計。這應該可以進行有趣的測試。

一些鏈接向下，我們有一個用於實際導航和搜索的Skip Navigation選項。包含全球圖像的主頁標頭保持其兩個列佈局，您可能已經猜到了原因：這是表佈局。儘管這可能不是一個可用性問題，但我們知道依靠表創建佈局不是語義。當我們沒有浮子，彈性箱，網格或其他任何處理內容放置的方式時，那是過去的遺物。也就是說，頁面上沒有明顯的可用性問題或令人困惑的元素。

讓我們繼續了解我們許多人在Wikipedia中花費最多的時間：文章條目。這通常是Wikipedia的切入點，尤其是對於我們這些開始的人，從搜索引擎中鍵入某些內容，然後單擊Wikipedia搜索結果。

最重要的是，此頁面仍然非常有用，並且在禁用CSS的情況下是非常可用的。佈局歸結為單列，但是內容仍然以邏輯順序流動，甚至保持造型位，再次感謝對錶和內線表屬性的依賴。

我遇到的一個問題是導航。標題中有一個“跳到導航”鏈接，當我單擊它時，確實會使我轉到導航。如果您想知道，導航包含在頁腳中，這是需要跳到它的原因。

在幾個導航標題上方似乎有隨機的複選框（專門針對“變體”和“更多”），它們似乎沒有目的，儘管上面的複選框“更多”在啟用CSS時以某個視口寬度顯示。

導航中實際上有一件奇怪的事情，它是“在其他項目”和“語言”標題之間的無標籤按鈕。

單擊該按鈕，我仍然可以訪問語言設置，並且它大多是按預期工作的。例如，佈局維護一個超級功能的選項卡式佈局。

但是，在“顯示”選項卡中，“語言”和“字體”按鈕無能為力。它們可能也是標籤，但至少我可以看到他們提供的東西。除了這些按鈕是兩個空的選擇菜單，這些菜單絕對什麼都不做（第一個按鈕在選中復選框時確實填充了漫畫，OpenDyslexic和System Font選項）。查看“輸入”選項卡，寫作語言按鈕仍然恰好功能為選項卡。除了英語，西班牙語和中文之外，我仍然可以選擇其他選項。

沒有CSS，這些文章根本不難閱讀，這是因為幾乎每個元素在語義上都是正確的，並且遵循一致的文檔層次結構。我想知道的一件事是通常在目錄中通常在哪裡進行的“顯示/隱藏”按鈕。事實證明這是一個孤獨的複選框，標籤是假的 - 它使用CSS中的偽元素上的內容屬性顯示標籤。

文章中的另一個問題是，您必須在預覽圖像時花費時間來尋找圖像。通常，單擊文章側邊欄中的圖像將觸發包含圖像輪播的全屏模式。沒有CSS，旋轉木馬就消失了，取而代之的是上面有一排未標記按鈕的圖像。這是一個令人討厭的人，但是如果旋轉木馬並不完全在頁面上，與點擊圖像在頁面頂部的位置相反，沒有能力跳到它的地方，那將是完全可以的。

如果我沒有提到文章中找不到Wikipedia徽標，我會很粗心！它甚至不是白色的白色SVG。該鏈接實際上一無所有：

 <a href="%E2%80%9C/wiki/main_page%E2%80%9D" title="“訪問主頁”"> </a>

值得慶幸的是，“導航”下的“主頁”鏈接是回家的另一種方式，而無需按下瀏覽器後退按鈕。但是，當在主頁上做得如此出色時，在頁面上沒有品牌的品牌仍然很奇怪。

Wikipedia的HTML問題主要存在於我期望的頻率較少而不是文章的功能中。從長遠來看，他們從未阻礙我的閱讀經歷。

？該網站做得很好	？網站可以改善什麼
該站點保持乾淨的結構和層次結構。	沒有CSS背景圖像，可以將徽標位置移至頁面頂部。
跳過鏈接有效地用於搜索和導航。	按鈕應包括標籤。
文章內容是語義且易於閱讀的。	頁面上的圖像輪播可以在扳機發生的地方加載並使用適當的按鈕標籤進行控件。

使CSS不再獲得更好的體驗的方法

CSS是現代網絡的關鍵組成部分。正如我們所看到的那樣，沒有它，許多站點幾乎是無法使用的 - 我們正在計算該組合中一些最可識別的和使用的網站。我們看到的是，充其量仍然可以實現站點的主要目的，但是一路上有障礙。諸如：

• 缺失或語義上不正確的跳過鏈接
• 一起運行的鏈接
• 超大圖像需要額外的滾動
• 空元素，例如列表項目和按鈕標籤

讓我們看看是否可以將它們編譯為可能會禁用甚至不可用的情況的情況下考慮的最佳實踐列表。

在文檔頂部包括一個跳過導航鏈接

Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  溢出：隱藏；
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Leave whitespaces where they make sense

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

Use width and height attributes liberally

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghwm/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="那個時候我嘗試在沒有CSS的情況下瀏覽網絡" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Prepare SVGs for a white background

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Label those buttons!

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
</button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  顯示：塊;
  溢出：隱藏；
  height: 0;
}

If there are

elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.

Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using aria-labelledby and assigning the id to the title.

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
</button>

結論

It can be easy to either forget or be afraid to check how a site appears when CSS isn't available to make the UI look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.

And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it's not around to do its magic. We've seen the same be true of sites that lean too heavily on JavaScript. This isn't to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.

Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.

以上是那個時候我嘗試在沒有CSS的情況下瀏覽網絡的詳細內容。更多資訊請關注PHP中文網其他相關文章！